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>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</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...
Taking into account the following from the above image and in text form
Header always visible
Inner content will resize with browser
Nav links will always be visible even when scrolling
Footer always visible
Another example of the slides
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 ;)
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');
Related
So I'm designing a portfolio page which will contain mostly header text with a few paragraphs and images thrown in for good measure!
My headings and one lined text will expand to fill the entire width of it's container which will be the wrapper.
<div id="wrapper">
<h1>I'm a heading</h1>
<p>I aim to fill just one line regardless of letter count</p>
</div>
Now, I have been searching the net for a solution which will allow me to achieve the above. I have found both bigText.js which doesn't work no matter what I do and fitText.js which doesn't automatically size text to it's parent container without editing the .js to find a font size that suits - even then it's not pixel perfect.
My question therefore is, With a wrapper that I wish to keep just 35% of the screen (centred), am I best to keep as a percentage (fluid) or use a fixed width? and with either option, what's the correct way to adjust the font-size to fill the wrapper width correctly?
Thanks in advance,
Simon
Use percentages and a 'margin:auto' if you want it centered.
Read up on other frameworks how they work around this problem:
Twitter Bootstrap works well for my work.
I not very familiar with html, css and javascript
I am using twitter bootstrap, I'd like to have a section indicator in a long page that shows the relative position of the current view relative to the entire ver long scrollable page.
The sample of what I want to achieve is in:
http://global.tommy.com/int/en/Collections/start
I managed to do that with <ul> <li>, however, I'd also like to animate the arrow movement from one <li> to the next <li> as the user scroll up and down within the page. I managed to scope out the code for the <ul> <li> but have no idea how to animate the movement... could anyone help me point to the specific animation part or recommend some javascript or css library for that? Probably I missed twitter-bootstrap elements too, however I did not find any so far... Thanks!
EDIT:
My code in jsfiddler, however, it doesn't seem to work in jsfiddler:
The ul li code
What I wanted to achieve is exactly like the animation on the left side of Tommy Hilfiger's page when you scroll up and down, the arrow will keep track of which section you are in by adjusting the arrow's position pointing to the specific section on the li
Without more detail I can't really go into specifics, but I can at least suggest jQuery's animate function. It makes animating css properties very easy.
To animate the scrolling of the page, take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
you can use the same js to animate the movement of the arrow as well
So I'm currently working with some dynamic navigation. Just the basic HTML markup of a <ul><li> composition. My problem occurs when the user added too many items into this navigation and there isn't enough room for them within its container (imagine this is a simple <div>).
So, I need a solution. I was wondering if there would be a way to determine when the width of the <ul> is larger than or equal to the containing <div>'s width, then it would inject the remaining <li> elements into a new <li> which would basically be a dropdown for them all. Would this be possible and if so how?
I know the basics of jQuery but I'm afraid I'm not too sure on this. Oh and, it will need to work responsively so it would need to work with percentages too.
Let me know if this is feasible or if you have a better way around this, thanks.
UPDATE:
I have updated the github repo with the plan I outlined.
--
I would use jQuery for this. The idea I'm having is as follows.
You would get the <div>'s width, then add up all the widths of the <li>'s and see if they are bigger.
Then take off as many as needed so the <li>'s fit into the <div>.
Then add all the ones you took off into a new <li> with another <ul> for a dropdown.
I'm happy to write something for this, but wont be till later when I finish work.
I have a responsive nav on my github, its doesn't to exactly what your after, but this sounds like a really good update, so once i've written something i'll add it to my github version.
https://github.com/MartinBlackburn/responsive-nav
Did you notice the scrolling trend bar on twitter home page.
What is the right way to do it with jquery? I hear jquery is better than javascript.
If you take a look at the source code, you can see the basic structure:
<div>
<div>
<ul>
<li>Year Without Rain</li>
<li>Gameday</li>
<li>etc...</li>
</ul>
</div>
<span class="fade fade-left"> </span>
<span class="fade fade-right"> </span>
</div>
The ul element is the list container containing the topics. The position of this element is animated to scroll it. When the scrolling list is about to come to the end, the contents of the list are appended to the end of the list (to simulate the list coming around and scrolling continuously). If this wasn't done, Twitter would probably have chosen to reverse the direction of the scroll. But how they did it is much nicer.
To get the fading effect, the .fade-left and .fade-right elements are used. They are aligned to the left and right, respectably. They are set to be transparent and the image itself is a transparent gradient: http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png. Using z-index, it is positioned over the scrolling list, thus giving a transparent effect on both sides.
Twitter does indeed use jQuery (but just so you know, jQuery is JavaScript, just a JavaScript framework) and I haven't taken the time to analyze the code, but it should be pretty straight forward to implement.
many options:
What's a good bit of JS or JQuery for horizontally scrolling news ticker
I recreated the twitter marquee check it out :Twitter marquee
I used raw javascript and automated it so that if you ad more links
it will calculate the width and know when to slice it and go back to zero
Here's an example: http://la.truxmap.com/marker?id=thesweetstruck&t=1267058348000
The widget on the right usually overflows unless i set the height of the container to some fixed size like 1800px. What I want to do is have the div with the white background (container) always span AT LEAST until the bottom of the widget. I don't want to use overflow because I dont want anything hidden and i certainly dont want scroll bars.
Is there a css solution to this? I feel like ive tried most everything except writing a javascript solution, which i would like to avoid because im still very much an amateur with javascript. Thanks so much!
Edit:
I don't have any requirements as to how this can be done, id just like a solution. ive been trying to figure out this problem for over a week and its now driving me crazy.
Looks like you just need to clear your floats. After this div
<div id="truckLogo">...bunch of stuff...</div>
Add
<div style="clear:both;"></div>