All Questions
Tagged with layout javascript
16 questions
4
votes
1
answer
5k
views
Randomly place Divs on webpage and make sure they don't overlap
Currently I am working on a project for which I want to have the different links (div elements) placed randomly on my webpage. To accomplish this, I first generate a set of coordinates and later check ...
- 91
4
votes
1
answer
635
views
Grid layout component for VueJS
I'm working on a vue.js / nuxt.js project, applying the Atomic Design methodology, I need to do one to set the grid layout and using CSS Grid Layout.
I already did the component, but I think I did ...
- 41
4
votes
1
answer
7k
views
window.innerWidth - workaround for when it returns the wrong value
Some JavaScript libraries relies on window innerWidth and innerHeight to do their calculations
...
- 141
1
vote
2
answers
126
views
Code to make elements fit within their container while keeping their aspect ratio
This function receives the id of an element (frame) and calculates the correct height and width so it fits inside its parent element, while keeping its aspect ratio. Before I had a way to calculate ...
- 141
4
votes
3
answers
126
views
Breaking group of items into rows then ensure consistent height of each row element
I'm working on a product category page where the product images have inconsistent heights so I've been asked to improve the page appearance without changing the images.
The page contains x number of ...
- 158
3
votes
2
answers
107
views
Making the font as big as possible without overflowing each div
I made a function that makes font sizes in <div>s as big as possible without overflowing. It takes a long time to run. How do I optimize this?
...
- 184
0
votes
2
answers
688
views
onResize and onLoad handlers to toggle mobile layout
I'm currently using onResize and onLoad in javascript code. Both events are coded identically so I was wondering if there is a way I could combine both into just one.
...
- 141
3
votes
0
answers
46
views
Responsive layout for showing/hiding 4 panels
I have 4 panels that will contains tables for data. There will be instances where a panel will contain no data, so I have combated wasted space with the code below. I'm relatively new to both jquery ...
- 141
1
vote
1
answer
7k
views
Login page without header/footer bars
I'm creating an app where the login page doesn't have the header/footer bars that the pages, after being logged in, would have. I've created an example that works, but I'm unsure if I am using the ...
- 11
4
votes
1
answer
58
views
Everything you might want to know about an element
I am working with a lot of DOM manipulation and need to know several values of an element to determine its position within the DOM and I have written the following to help scrape several of the bits ...
- 123
3
votes
1
answer
65
views
OOP and non-OOP versions of layout and page animation code
I am trying to learn how to write more object oriented javascript code, but I am having a hard time understanding the correct way to do it, and how it is useful for front end development. As you can ...
1
vote
1
answer
108
views
Adjusting the height of a div to match that of another column
This code checks whether an image whose parent is .papers.left has completely loaded into DOM and if yes then the background of ...
- 113
4
votes
1
answer
407
views
Optimizing pagination of HTML tables
I'd like to share my implementation to you to confirm if it's a correct way to solve my problem. I have a list of products which have an attributes table and a description table (both in html_encoded ...
- 141
7
votes
1
answer
389
views
Incrementing letter-spacing of one line of text
I was asked to create a script which will increment the letter-spacing of one line of text, until its width matches that of the first line; for use in headline/subheadline text to maintain a block ...
- 185
0
votes
1
answer
2k
views
Resizing table widths and making input fields
I am trying to simplify my code, which will do several things:
Give the same width to every columns no matter how many columns the table has.
Add input field if there is no text inside a ...
- 121