This is hard to explain but if you go here: https://developers.facebook.com/docs/reference/api/
You will see that BOTH the sidebar and header are fixed but because the height of the sidebar may be larger than the viewport it scrolls slightly until the user has been able to view all of it and then becomes fixed again.
My question is how could I do something like this with jQuery? I have built similar things using just CSS but would like to overcome the problem with the sidebar.
Thanks
Can't log into facebook but I think you mean something like this?
http://jsfiddle.net/b43hj/24/
If so, that's quick and dirty but should get you started. My have a few kinks to work out.
Related
I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top
Hey I want to make text scroll from right to left in a div i have. I want this to happen automatically and at a constant flow.
Now when i first started with HTML the tag was used to do this, I've looked around a few websites and it seems that this tag still seems to be going. My question is really if this is the best way of achieving this affect or is there a better way of doing it? for example, javascript,Jquery and/or css Maybe even something in HTML5?
This shows what i am looking - http://www.gftuk.com/
Notice the scrolling stops when the user hovers over the text.
Thanks for the time.
<marquee>hello world</marquee>
Personally, I think the best way to achieve this would be to use jquery. There are a few plugins out there which do the job nicely.
If you want to automatic with "scroll" text ( structure of DOM is not complex) .
<marquee>This text will scroll from right to left</marquee>
But you will see with "marquee" the scroll is not smooth.
So you can use simplyScroll plugin
http://logicbox.net/jquery/simplyscroll/
( I see it in this code of your link : http://www.gftuk.com/. in next time, please open dev tools or firebugs and see source code of any pages when you want to have the same effects )
Hope it helps you
McMaster-Carr, a few years back, completely redesigned their website and they now have these very cool 'scrolling box' sections for each product. I've been trying to duplicate that same effect only using css and html, but have had no luck so far.
Some key things I cannot accomplish using only html + css:
hidden scrollbars with the ability to still scroll
section headers that stop when scrolled to the top of a containing div
I've tried looking through their source code but I really want to start from scratch and recreate the effect, hopefully finding a much simpler way to recreate it.
If anyone has seen anything like this before or knows how to go about creating this type of layout, please help.
Here's a link to a page on the McMaster-Carr website that demonstrates that scrolling box layout:
http://www.mcmaster.com/#nylon-gears/=g1p46z
The technique j08691 linked to is the common way to do it - you'll have to use a bit of JS to find out where how much the site is scrolled. If you look at the source of the persistent header example, there is a line like
scrollTop = $(window).scrollTop()
simply replace this by the top position of your parent div (assuming it is, like in McMaster, fixed on the site)
scrollTop = $("div.MyParentDiv").position().top
I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/
Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.