Here is the fiddle: http://jsfiddle.net/fz5Yk/5/
All I want to achieve is to highlight (e.g adding a background color) the heading (in <strong> </strong> tag) of the section-3 when I scroll to section-3.
I'd like to know if there's a way for me to trigger certain events when I'm at a certain section. There must be a thing for this because when you scroll the page manually, you'll notice that, in the navigation menu, link to the section gets selected automatically, as if it was clicked.
Anything helpful will be much appreciated as I've been working on this since yesterday and hav yet to solve it.
There isn't any way to achieve this using CSS, so I edited the jquery.nav.min.js. (added only 4 lines) It works great now. http://jsfiddle.net/fz5Yk/10/
adjustNav=function(a,b,d){
var sec = a.find("."+d+">a").attr("href");
$(sec+">strong").css('background','none'); //Find and remove previous highlight of strong
a.find("."+d).removeClass(d);b.addClass(d); //ORIGINAL
sec = b.find("a").attr("href");
$(sec+">strong").css('background','aqua'); //Find and highlight the strong
};
EDIT: Animation added by request:
http://jsfiddle.net/fz5Yk/11/
add animateSomething function on top:
function animateSomething(sec) {
if(sec == "#section-2")
$("#testBlock").animate({
width:"50%",
opacity:0.5
}, 1500);
}
add animateSomething(sec); at the end of adjustNav function.
Voila!
EDIT FINAL: Animate AFTER scroll ends http://jsfiddle.net/fz5Yk/12/
In your click action have something like this:
$("#container .section strong").css('background-color', 'transparent');
$("#container .section strong:contains('" + $(this).text() + "')").css('background-color', 'yellow');
Not sure if that's what you want exactly, but you could use this to add a class to the every strong which is currently in view:
$(document).scroll(function(){
var t = $(this).scrollTop();
var b = t + $(this).height();
$('.section>strong').removeClass('highlight').filter(function(){
var ot = $(this).position().top;
return ot > t && ot < b;
}).addClass('highlight');
});
http://jsfiddle.net/fz5Yk/7/
But it is a bit pointless in my opinion because when it's not in view why do you want to remove the highlight? It won't be visible anyway!?
If you really only want the functionality for section 3 you could change $('.section>strong') to $('#section-3>strong')
Related
I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?
This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here
you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle
I'm trying to make a simple scrollspy with jQuery Scroll event but it fails. Here is my JavaScript part:
<script>
$(document).ready(function(){
$("#credit_card").scroll(function(){
console.log('OK');
});
});
</script>
And HTML part:
<section class="method first-of-group" id="credit_card">
...
</section>
As you might have guessed, console.log is just for testing. This section is under a div and this div has "content" id. If I change my JavaScript code for "content" id, it is working. It's really weird.
If you want to see it live, please visit here.
Thanks in advance.
After reading the comments and actually understanding what you mean, this is the solution you are looking for.
$(document).ready(function(){
$("#content").scroll(function(){
// when the user scrolls, we want to detect at what section they currently are.
// This can be calculated, by comparing the current window scrolltop to the position and height of the section elements.
var currentTopOffset = $(document).scrollTop();
$('section').each(function(){
var min = $(this).offset().top;
var max = $(this).offset().top + $(this).height();
if(currentTopOffset > min && currentTopOffset < max){
// current section
// do something here, like getting a value from an input type hidden with the section name
}
});
});
});
I hope this is what you are looking for, or atleast something to get you started with.
I have the following problem and I dont know how to solve it...
I have divs on a page, which are all of a class "dailyComments".
Underneath each of these divs I have two images with arrows - up and down (classes scrollDown and scrollUp). My goal is for the user to be able to click one of these arrows and the above div would scroll down/up.
I tried the prev() function, but for some reason it does not work. So for example, for the scroll down I have:
$('.scrollDown').click(function() {
$(this).prev(".dailyComments").scrollTop($(this).scrollTop() + 25);
});
I also tried for example this:
$(this).prev(".dailyComments").hide()
and it did work, it hide the preceding dailyComments div. But with the scroll it does not work. Any ideas?
try this-
var dcom = $(this).prev(".dailyComments");
dcom.scrollTop(dcom.offset().top + 25);
The method you are looking for is
$("div").scroll(function(){
$("span").text(x += 1);
});
OK I solved it by giving each DIV a unique ID
I'm already busy with a one page navigation. Below you will find more information about the problem and my wish.
How should it work?
Once a navigation item is clicked, scroll to its particular section and update the active class of the menu. And if the page is scrolled to its particular section, it should update the active state too - so change the class to its particular anchor.
Fixed header
For the website I also used a fixed header, so this should NOT be overlay the particular section. So the menu should stop scrolling when the bottom of the header is reaching the top of the section.
Variable sections
All sections on the one page design has a different height.
Problem
I have already tried a lot of code, to get it work. Most of the code is working, but this isn’t in all browsers the same. Also I have some trouble with updating the active state of the particular section - that match to the active anchor.
Code
I used jQuery to create a smooth scroll to anchor. You can see my working code at JSfiddle.
Here are all resources:
JS
Here I controle the click function of the navigation.
So when the user click a list item of #primary-navwrapper, then change the active state class and scroll to the particular section, that match with the clicked anchor.
$('#primary-navwrapper li').find('a[href^="#"]').click(function(event) {
// Prevent from default action to intitiate
event.preventDefault();
$('#primary-navwrapper li a').removeClass("current");
$(this).addClass("current");
// The id of the section we want to go to.
var anchorId = $(this).attr("href");
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(anchorId).offset().top - offset;
//console.log(target);
$('html, body').animate({ scrollTop: target }, 500, function () {
//window.location.hash = '!' + id;
window.location.hash = anchorId;
});
});
Beside the click function, I also want that when the user scrolls around the one page, it will automatically update the active statement.
function setActiveListElements(event){
// Get the offset of the window from the top of page
var windowPos = $(window).scrollTop();
$('#primary-navwrapper li a[href^="#"]').each(function() {
var anchorId = $(this);
var target = $(anchorId.attr("href"));
if (target.length > 0) {
if (target.position().top <= windowPos && target.position().top + target.height() > windowPos) {
$('#primary-navwrapper li a').removeClass("current");
anchorId.addClass("current");
}
}
});
}
$(window).scroll(function() {
setActiveListElements();
});
In above code, I think that the line of if (target.position().top <= windowPos && target.position().top + target.height() > windowPos) isn’t correct and maybe to long..
If there are any questions or something, I like to hear from you.
Casper
Looking at your code, I've updated the line you said for the below one:
if (target.position().top - $('#header').outerHeight() <= windowPos) {
$('#primary-navwrapper li a').removeClass("current");
anchorId.addClass("current");
}
In this way, it'll get the target's difference to the top minus the header's height (as it will be always visible) and then check with the window's position. If it's inferior, the user has passed this anchor, so the correspondent link in the menu gets highlighted.
And your first link doesn't have its anchor in the fiddle, so:
<li>Home</li>
After these changes, everything seems to work fine.
JSFiddle: http://jsfiddle.net/8n06pvy9/17/
EDIT:
To update the hash, I've tried to use a simple window.location.hash = anchorId;, but it results in some weird scroll issues in FF and IE. I've spent some time on it, but I wasn't able to figure out what happens.
So, I suggest a trick that I've already used, using #! in the hash. In this way, your code would be like that:
window.location.hash = '#!' + anchorId.replace('#', '');
And in the scroll function, like that:
window.location.hash = '#!' + anchorId.attr('href').replace('#', '');
JSFiddle: http://jsfiddle.net/8n06pvy9/18/
And, if you want, you can check for the hash in pageload, remove the exclamation point and scroll the page to the desired anchor. Or, if you want to avoid all of that, you can always use some history plugins, like this one. In your case, I personally wouldn't use a plugin for that, but it's your call if it worth it or not.
Hope it helps!
I am trying to finish up my navigation for my site. I'm attaching the jsfiddle code to show you what code I have now. My problem is my child links become gray when they are suppose to but, I want to make the top level link when I click on that gray as well. The way I have my pages labeled is like this
Page1
Page1a
Page1b
Page2
Page2
.
.
.
ETC.
I need Page1 and Page2 to turn gray like the sublevels do. If anyone can help me with this I would really appreciate it. Thank you for your time.
http://jsfiddle.net/gUmYP/
<script type="text/javascript">
$('#body').ready(function(){
var URL = location.pathname.split("/");
URL = URL[URL.length-1];
//<![CDATA[
for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
$('#nav ul:visible').slideUp('normal');
$('#i'+i).slideDown(0);
$('#i'+i)
.find('li')
.each( function() {
var current = $(this).find('a')[0];
if (current.href == window.location.href)
current.style.backgroundColor = "#ccc";
current.style.color = "#006";
});
}
}
});
</script>
Previous question was here, but was never answered fully:
Highlight Links on Navigation
Unfortunately none of the answers below have solved my issue, some have made it so the parent link now highlights, but it makes the other features not work correctly. I need the menu to still highlight in yellow when I hover over everything, I need the submenus to still be the light blue when not active, and I need all active links(parent or child) to show the gray highlight that they are the active link. Does anyone know the solution to fix all those issues?
Look at this JSFiddle.
$('#nav li a').click(
(...)
// Here I removed the "active" class from all siblings "li"
$(this).parent().siblings().removeClass("active");
(...)
// Here I add the "active" class to this "li"
$(this).parent().addClass("active");
(...)
)
Note 1: The new JSFiddle