Develop Reference

jQuery Hide/Show DIV on change of anchor text

I have one page website which changes URL #id or anchor text on scrolling and on navigation click. I have an image positioned fixed at the center of the site. The site is divided in different sections and the image shows in all the sections. I do not want to show the image on the first section as it is unrelated to the content of the 1st section but will be showed in all next sections. How can I make it work?
What I have tried till now but not working:
$(document).ready(function(){
$(".phone").hide();
var idSample = window.location.href.split("#");
var id = "#"+idSample[1];
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Rest in Fiddle: https://jsfiddle.net/shubhamjha1000/vh7bu32q/
I don't want that phone to be seen on 1st section but on rest of the sections. Please help me guys!

You can use the answer written in this question to listen to changes in the window see what url you are on and show or hide the phone accordingly....
Example:
$(function(){
// Bind the event.
$(window).hashchange(hashchanged);
// Trigger the event (useful on page load).
hashchanged();
});
function hashchanged(){
var hash = location.hash.replace( /^#/, '' );
//your code
if(hash == "#first") {
// Hide element
} else {
// Show element
}
}
But still even though what you are planning to do will work with that solution I think it would still look bad on the app it self and instead of a hovering phone maybe you can create the phone as an img inside the relevant containers and hide and show with id...

You can simply use a substring on your location.hash for get your hash tag
$(document).ready(function(){
$(".phone").hide();
var id = window.location.hash.substr(1);
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});

Trouble with an one page navigation - updating/highlighting active state and scroll to anchor

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!

How to make the page load scrolled down to <div> when loaded?

I need to make sure that a specific line is visible when the user loads the page, even if that line appears many lines later in the page. In other words, when the page loads, it instantly jumps to that marked line. The line simply needs to be somewhere within the visible screen of the browser window. It is marked like this:
<div class="scrollhere">This line should always be visible when the page loads.</div>
Only one of these appears on the whole page.
I cannot edit the HTML marking the text, but can edit the CSS and JavaScript at the beginning of the document.
I do not mean for just that specific line to be moved, i.e. with position:absolute, but that the page loads to that line.
How can I make the page load mid-way down the page, wherever a specific <div class="scrollhere"> is found?

So if you can't edit the HTML at all, then you'll need to use JavaScript or jQuery. This is a function that I've used to scroll to an element.
Javascript
This will query the DOM for all elements that have your class scrollhere. And we'll select just the first item in the array (to go to the first element). Then we'll use the scrollIntoView().
document.getElementsByClassName('scrollhere')[0].scrollIntoView()
jQuery
/*
* A scrollTo function that gets passed a selector (ID, class, element) & an optional offset
*
* #param {string} location ('#resultsTop')
* #param {integer} offset (-100)
*/
function scrollTo(location, offset) {
$("html, body").animate({scrollTop: ($(location).offset().top + (offset || 0) )}, "slow");
return false;
};
In your case, you'd call this function as follows:
scrollTo('.scrollhere');
You could also optionally pass in an offset. So maybe you don't want to scroll to the top of that element. But would rather scroll to 100 pixels above it.
scrollTo('.scrollhere',-100);
And being that you can't edit the HTML, then you'll definitely want to use a listener.
$(document).ready(function(){
scrollTo('.scrollhere',-100);
});

This is a pure JavaScript example. No jQuery required.
Here is a simple example of this answer in JSFiddle.
window.onload = function() {
var divs = document.getElementsByTagName("div");
for (var i in divs) {
if (divs[i].className.indexOf("class2") > -1) {
//Finds top of of the element
var top = 0;
var obj = divs[i];
if (obj.offsetParent) {
do {
top += obj.offsetTop;
} while (obj = obj.offsetParent);
}
//Scroll to location
window.scroll(0, top);
break;
}
}
};

This snippet may help you
$('html, body').animate({
scrollTop: ($('.class').first().offset().top)
},500);

JS: Applying focus effect on an element when scrolled to

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')

loading bar on loading new content

I have a div which contains a series of design projects. When the user scrolls to the bottom of the page, the javascript detects this and loads new page content into that div.
You can see the website at
http://www.jb-design.me/marchupdate/
The problem I have is that the new content just pauses then loads below. With no feedback for the user that new content is being loaded etc.
What I would like is a div to appear between the current content and the new content (Where the 'spacer' div normally is on my website. And display a loading gif/png. Which would fade out once the new content has loaded. The new content would then appear below fading in...?
Is this possible at all?
I have tried to implement a 'var pageLoadisloaded' but to no use.
I am literally a newbie and have been trailing the web for a solution for the past couple of days and now I thought I would just ask for help!
Thank you in advance
Javascript code below...
alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});

After you set the alreadyloading variable to true, append a bit of html to the end of the div#newcontent which contains an image that indicates that new content is being loading. Use $(window).ScrollTop() to scroll further down to ensure that this is visible. When the content arrives via Ajax, you can remove the little piece of code you added, and append the new stuff.
Alternatively, use 3 div tags as follows:
1) The already loaded content is kept in the first division.
2) When the scroll-bar reaches the bottom, your function is triggered, which calls a jQuery FadeIn effect for the second division which contains the loading image. Scroll down a bit using the aforementioned function to ensure that it is visible.
3) When the content arrives, put it in the third div and then call a simultaneous FadeIn effect for that, and FadeOut effect for the second division.
4) Once the effect is complete, append the contents of the third division to the first one, and reset the third one.

What if you were to have a fixed div to the bottom of the page, and when you were in the conditional to load a new page - you fade it in, and when the new content has been loaded in - you fade it out?
Additional assistance
You could try something like this to check if more pages are available - set this up to run after the first ajax - perhaps in the success part of the function:
var url = "page"+nextpage+".html";
$.ajax({
url: url,
type:'HEAD',
error:
function(){
// No more pages exist - remove loading
$('#loading').remove();
},
success:
function(){
// Good to load another page
}
});
Where I found this:
http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06