CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Simon Hayter
Simon Hayter

Reputation: 3171

jQuery variable width to height adjustment with custom scrollbar

I've read several posts about using jQuery to change the height based on the resizing of the browser window which involves watching the window size then updating the 'inline' style to a new height formulated from the width size. However all discovered solutions do not work since I need something similar but not the same, basically I want a inside element that resizes, sadly the content isn't images as this would be easier and saved me writing this post.

So the HTML code as you would expect to see looks something like this:

<header> </header>
<div class="mainbox">
    <div class="custombar"> </div>
    <div class="contentContainer">
        <div class="contentOne"> </div>
        <div class="contentTwo"> </div>
        <div class="ContentThree"> </div>
    </div>
    <div class="contentFooter">
        <ul>
            <li><a href="#">Nav 1</a></li>
            <li><a href="#">Nav 2</a></li>
            <li><a href="#">Nav 3</a></li>
        </ul>
    </div>
</div>
<footer> </footer>

CSS looks something like:

.header{height:135px;width:100%;background:#000;}
.mainbox{width:100%;height:500px;background:#ccc;}
.footer{height:135px;width:100%;background:#000;}

Now I'm aware of solutions for a fixed header, fixed bottom without the use of the position fixed but before someone jumps the gun I'm looking for an extended version that will support a little more what I'll explain in a moment.

This is where it gets complicated or least for me

Basiclly I want a jQuery script that will update the height based on the size of the browser window so that only one content div is ever visible so think 3 colors and as you scroll down you get another but I want it in a way so only 1 is ever visible, this can be done with offsetting and using a names I know this much but this wouldn't resize the window so that only one element is ever visible.

I've compiled some images in the hope this might explain what I'm after a little more...

Slide Example 1

Taking into account the following from the above image and in text form

Another example of the slides

Slide Example 2

As you can see from the above image the content will slide but most importantly resize and only one ever slide will be present by using go to and 100% height.

Width and Height Changing

It's pretty easy to throw a solution in if your willing have the user scroll and have the content cropping but the content is light and will work nicely with only 1 slide ever visible.

Understanding

I know at some point the content in the middle will become so small that it won't render correctly, this is no problem and I'll turn of the feature when it gets to X width using media queries, I appreciate everyone that contributes to helping in any shape of form and sorry if its a little board on the jQuery front, its not my strong point, I'm hoping that someone can wiz together a jFiddle or similar or point me in the direction in something already made.

There might be an easier approach to this problem like using min-height, any working method is appreciated. PS for the mammoth of all posts, it wasn't my intention ;)

Upvotes: 1

Views: 1039

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

I think you want something like this

only the content should scroll

JS Fiddle

you can give min-height for the div on resize

$('.container').css("min-height", '250px');

Upvotes: 1

Related Questions