I'm currently try to write a toggle menu script.
Most of the futures are fine, but...
Here's my bin:
https://jsbin.com/rabiporoji/edit?html,css,js,console,output
I use media query to make a different layout,
the idea is... I tried to make the menu extend under 500px screen width,
and not to change anything when the screen size is wider than 500px.
But while the screen size stretched from small to wider than 500px,
the toggle menu will still extended if i click th button.
ps(in this case the height is fixed, but in the project i'm workin on they are pics with only width fixed in percentage)
So, I'm wondering if there's any way to retrieve the elements height dynamically, every time I change the window size.
I know there might be some js libraries and solve this problem in ease.
But I really wanna know some js basis before I start using those.
TY for your time!
window.addEventListener('resize', function(event){
let height = document.getElementById('thing').offsetHeight;
console.log('offsetHeight',offsetHeight)
});
Related
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
An example of the page in question: https://rhstrategic.staging.wpengine.com/team/brandon-blackwell/
I have kind of a specific situation here in which I have a block div that is staying aligned left and using only a 50% width when the screen is sized below 960px (The name block in the red banner part at the top). I tried altering the CSS to make the width 100% but the problem is that the height seems to be being generated dynamically with with width (If I increase the div width to 100% the height doubles as well).
I can't figure out how to separate the height and width and I don't know where or what file these CSS changes are being dynamically generated from. It looks kind of like an HTML5 data object but I'm a bit new to these types of things so I'm not sure how to change it. When it gets down to 650px it seems to behave as I want it to. But between 650-960px it is left aligned.
All I need it to do is when the page goes down to 960px or below, I need that part that is left aligned currently to be full-width across the page and centered. Any ideas?
Just a warning: I'm not 100% sure that this answer will work correctly... My idea is to put this style in the div:
div{
width:100%;
height:50%;
}
Couple of things I would like to suggest:
If you are new to front-end designing, I would recommend you to understand the grid system of a HTML page. Learning Bootstrap will be a perfect start for you.
Now you want to make your website fluid, so take a look at CSS media query. This will help you to achieve responsiveness.
Happy Coding..
I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.
http://jsfiddle.net/efyJF/.
If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.
I feel like this is not the way the normal web pages work. How can i fix this.
Thanks
You can define your css value using percentage like width: 20% instead using fixed value. Or try to use css framework like Blueprint or 960 Grid System.
If I understand right, you are looking for something like this
The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.
The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won't look the same.
What is the best way to position multiple divs with differing sizes on the screen while taking advantage of as much space as possible. It will have to get the width and height of each div and decide the most optimal arrangement like a puzzle.
If you're willing to use a plug-in, take a look at jQuery Masonry. If you want to try to code this yourself, the Masonry source code may give you some ideas.
Set up an array with the sizes of the divs (getAttribute(); 'width' and 'height',
get the size of the browser window,
iterate through the div array, take the divs of the same height and add widths up,
if you get to the width of the browser window, add them, else take the closest number and add them.
At the point you run out of divs of the same height, find same width divs and add them vertically instead if you can fit it in the remainder of the window. (Don't forget to shrink the browser window variable)
This will fill the window from the top left and work towards the bottom right.
Finally when you're left with only 'odd' divs, simply add the biggest in width and height, and work your way down.
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});