I have a fixed navigation at the top of the page that has links that smoothly scroll you around to different sections (IDs) of the page via jQuery.
Would there be any possible way to have a css class (e.g. .current) appended to the navigation links depending on what section of the page you're at?
For example, when I click "About", it'll scroll down to the About section and also make the navigation text orange as long as you stay in that section?
I've seen this done somewhere a while ago but I don't remember the website or even how to describe this behavior to search for it.
EDIT: Here's a link to something siliar to what I'm looking for:
http://www.fat-man-collective.com/hello.php
The icons change depending on your position on the page.
Script:
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
</script>
HTML:
About
[...]
<div id="about">
[...]
</div>
Any help is greatly appreciated.
This would be possible by examing the offset()* function of the desired element and then coding to respond accordingly. You can track the offset of an element, and depending on the resulting offset, you would apply or remove the appropriate classes accordingly.
*See the documentation for offset()
When you click on a section in the navigation, just modify the class so that the style is what you want it to be.
Secondly, you'll need to add an event handler on the scroll event that similar modifies the nav's class.
Try this:
function goToByScroll(id){
$('ul#nav li a').removeClass('active'); // elements in menu
$(this).addClass('active');
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
Four years later...for those that have the same question since hopefully the OP has solved his problem by now.
Check out Bootstrap's ScrollSpy plugin, which "is for automatically updating nav targets based on scroll position." For an example of using the ScrollSpy plugin see this detailed tutorial on how to make a floating, updating navbar (like the Bootstrap site uses).
Related
I am using fullpage.js
https://github.com/alvarotrigo/fullPage.js/
on a frontpage of a website and it´s working fine so far.
I have 4 Sections.
The first section has more content than the height of the browser window, so there is the need to scroll inside that section.
I have added the scrollbar and it works with the scrollbar and by using the mousewheel.
Now my problem.
I have a sticky header which I want to reduce in height as soon as there is any scrolling down inside this section (and increase in height as soon as I scroll back up to the top).
So I would like to add the css class "sticky" to the "header" when using the scrollbar of the fullpage.js or the mousewheel so that I can format the header with the class "sticky" differently with css.
Unfortunately the "scroll-Events" doesn´t work here, as already mentioned here:
FullPage.JS Scrolling
I tried the following
$(function(){
window.addEventListener("wheel", function() {
$(document).ready(function(){
var scrollclass = $('.slimScrollBar').position();
if(scrollclass.top > 0){
$('header').addClass('sticky');
}
else{
$('header').removeClass('sticky');
}
});
});})
This kind of works, however the sticky class is not added by the first use of the mousewheel (it´s added by the "second turn of the mousewheel") and is not beeing removed when scrolling back to the top, I need to turn the wheel an additional time after scrolling back to the top to have the sticky class removed again.
If I change the if-statement to >= 0 it works on the first turn of the mousewheel but then I don´t get the class removed when scrolling back to the top.
The second issue is, that this only works by using the mousewheel of course, and not by dragging the scrollbar created by fullpage.js
Any ideas or hints how to solve this?
Thanks
John
you could use the "afterLoad" method, as noted in fullPage.JS's documentation:
https://github.com/alvarotrigo/fullPage.js#afterload-anchorlink-index
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
I'm quite new to this all so sorry for my lack of terminology.
I was looking at this site and I was wondering how I do the content/page change without reloading the page.
Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...
That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin
Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:
Jquery
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
HTML
<div id="slider" >
<ul>
<li><div> .... </div></li>
<li>Lorem ipsum text + image</li>
<li>List, maps, ...</li>
</ul>
</div>
It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.
It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):
Set overflow-x: hidden to a container div
Add a slider div inside the container, and slide elements within the slider
Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)
Here's a really basic example.
I could say that it's possible to use all of the mentioned options :)
Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.
I have done the following code in JavaScript to put focus on the particular element (branch1 is a element),
document.location.href="#branch1";
But as I am also using jQuery in my web app, so I want to do the above code in jQuery. I have tried but don't know why its not working,
$("#branch1").focus();
The above jquery (focus()) code is not working for div, whereas If i am trying the same code with textbox, then its working,
Please tell me, how can I put focus on a div elemnt using jQuery?
Thanks!
For my problem this code worked, I had to navigate to an anchor tag on page load :
$(window).scrollTop($('a#captchaAnchor').position().top);
For that matter you can use this on any element, not just an anchor tag.
Like #user293153 I only just discovered this question and it didn't seem to be answered correctly.
His answer was best. But you can also animate to the element as well.
$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
You can extend jQuery functionalities like this:
jQuery.fn.extend({
scrollToMe: function () {
var x = jQuery(this).offset().top - 100;
jQuery('html,body').animate({scrollTop: x}, 500);
}});
and then:
$('...').scrollToMe();
easy ;-)
Check jQuery.ScrollTo, I think that's the behavior that you want, check the demo.
Check out jquery-scrollintoview.
ScrollTo is fine, but oftentimes you just want to make sure a UI element is visible, not necessarily at the top. ScrollTo doesn't help you with this. From scrollintoview's README:
How does this plugin solve the user experience issue
This plugin scrolls a particular element into view similar to browser
built-in functionality (DOM's scrollIntoView() function), but works
differently (and arguably more user friendly):
it only scrolls to element when element is actually out of view; if element is in view (anywhere in visible document area), no scrolling
will be performed;
it scrolls using animation effects; when scrolling is performed users know exactly they're not redirected anywhere, but actually see
that they're simply moved somewhere else within the same page (as well
as in which direction they moved);
there's always the smallest amount of scrolling being applied; when element is above the visible document area it will be scrolled to the
top of visible area; when element is below the visible are it will be
scrolled to the bottom of visible area; this is the most consistent
way of scrolling - when scrolling would always be to top it sometimes
couldn't scroll an element to top when it was close to the bottom of
scrollable container (thus scrolling would be unpredictable);
when element's size exceeds the size of visible document area its top-left corner is the one that will be scrolled to;
Use
$(window).scrollTop()
It'll scroll the window to the item.
var scrollPos = $("#branch1").offset().top;
$(window).scrollTop(scrollPos);
If you're simply trying to scroll to the specified element, you can use the scrollIntoView method of the Element.
Here's an example :
$target.get(0).scrollIntoView();
I think you might be looking for an "anchor" given the example you have.
This link will jump to the anchor named jump
<a name="jump">This is where the link will jump to</a>
The focus jQuery method does something different from what you're trying to achieve.
For the focus() function to work on the element the div needs to have a tabindex attribute. This is probably not done by default on this type of element as it is not an input field. You can add a tabindex for example at -1 to prevent users who use tab to focus on it. If you use a positive tabindex users will be able to use tab to focus on the div element.
Here an example: http://jsfiddle.net/klodder/gFPQL/
However tabindex is not supported in Safari.
maybe you want to try this simple one
$(document).ready(function() {
$(".to-branch1").click(function() {
$('html, body').animate({
scrollTop: $("#branch1").offset().top
}, 1500);
});
});