Develop Reference

How to smoothly transition the visible content of a web page with javascript or jquery?

I have a web page with different sections and I would like to change the visible section when you click on a section link.
<div id="sections" class="col-md-8">
<section id="pathogens" >
<p>aaaaa</p>
</section>
<section id="population" >
<p>bbbbb</p>
</section>
</div>
Unexperimented as I am, I have achieved this with this little code.
function activateSection(section){
$('#sections').children().hide();
$('#'+section).show();
$('#menu li').removeClass('active');
$('#menu li a.'+section+'').parent().addClass('active');
}
but that is not really smooth, the page is flickering that's not eye-pleasing.
I searched for recommended ways to do this but I didn't find anything specific to my problem.
Do you recommend using a plugin like smoothState.js?
Thank you!
IMPORTANT EDIT:
I noticed the flickering is mostly due to the length of the content which is making the scrollbar appearing and disappearing quickly and thus changes the width of the page.

function activateSection(section){
$('#sections').children().hide(); // or fadeOut() or sideUp()
$('#'+section).fadeIn(2000); //or slideDown()
$('#menu li').removeClass('active');
$('#menu li a.'+section+'').parent().addClass('active');
}
activateSection('pathogens') // or 'population'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sections" class="col-md-8">
<section id="pathogens" >
<p>aaaaa</p>
</section>
<section id="population" >
<p>bbbbb</p>
</section>
</div>

I honestly think what you are looking for is even easier than you think. Instead of using the show() function, why don't you instead call fadeIn('slow')?
Dependent on the actual look of the content, slideDown() and slideUp() functions could be called too.

Only have one visible section at a time and track which section is visible with a variable outside of the scope of the function. See the code below:
var currentActiveSection = "pathogens";
function activateSection(section) {
$('#' + currentActiveSection).hide("slow");
$('#' + section).show("slow");
currentActiveSection = section;
// only updated the relevant code above, also make any changes required to the code below
$('#menu li').removeClass('active');
$('#menu li a.' + section + '').parent().addClass('active');
}
Please note that you can play around with the .show and .hide parameters "slow", "fast" etc to get the desired effect. Alternatively use another jquery function like .fadeIn/.fadeOut to get a different effect.
If older browser support is not an issue for you, I suggest changing your setup completely and going with css3 transitions instead:
http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#portfolio
Hope that helps!

Bootstrap 3 has a nice transition feature : http://getbootstrap.com/javascript/#tabs
the problem is that it deactivates the url hashtags

How do I prevent a hash tag link from scrolling the page?

This is driving me absolutely insane. I am building a very customized slider jQuery plugin for a project. One of my requirements is that users must be able to deep link into a specific slide. So naturally all of my slides have hash tags and the navigation links have corresponding hashtags. My problem is that the default functionality of the hash tag links are firing on top of my sliding animation triggered by javascript. That is, instead of sliding to slide 4 it jumps immediately to slide 4 and then animates to slide 8. This is despite using every trick I can think of to prevent the default functionality. Here is the snippet of code in question.
$(slider.nav).bind( 'click', function(event) {
event.preventDefault();
if( !$(this).hasClass('active') ) {
var target = slider.nav.index( $(this) );
slider.animate( target );
}
});
As you can see here I have used event.preventDefault(). I have also tried returning false. No luck whatsoever. Any ideas?

It's hard to say without seeing the HTML. But if it's the way I imagine it, you don't need to keep href="#" in a link if it's not going anywhere. You can use jQuery to just get the next slide, or get slide number 7 without relying on href="#" links.
Instead, you can do something like:
<ul id="slideshow">
<li id="slide_1">Slide 1</li>
<li id="slide_2">Slide 2</li>
<li id="slide_3">Slide 3</li>
</ul>
<a class="slide_nav" data-index="1">1</a>
<a class="slide_nav" data-index="2">2</a>
<a class="slide_nav" data-index="3">3</a>
<a class="slide_nav" data-index="4">4</a>
And in the JS, do something like:
$('.slide_nav').click(function() {
var slides = $('#slideshow li'); // get all slides
var target_id = $(this).data('id') - 1; // Get the current ID and then subtract 1 (index starts at 0)
slider.animate(slides[target_id]);
});
Anyway, that's more like a pseudo-example than anything else, and I'm not sure that would work as-is, but the code should hopefully point you in a direction that would avoid using href="#" and thus avoid the problem you're having now.
Good luck.

Oh jeeze. I'm really sorry. I've wasted everyone's time.
Apparently another developer who was working on the site had added some javascript elsewhere roughly to the effect of
if( window.location.hash ) {
window.location = window.location.hash;
}
No idea why they would add such a thing. Sorry!

navigation with javascript

so i am a begginer and i really need help
so i wrote this function down here;
the objective was to take as parameters an element name , a div tag selector and a php file address,
function navigation($nav,$container,$link)
{
$($nav).click(function(){
$($container).slideUp(500,function(e){
$(this).append("<span>");
$(this).load($link);
});
});
{
$($container).ajaxComplete(function(){
$(this).slideDown(500);
});
}
{
$($container).slideUp(500);
}
}
the usage is simple
navigation("#home",".content","home.php");
navigation("#about",".content","about.php");
navigation("#store",".content","right.php");
the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;
now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active
and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do
any one of pro's have any idea ???

I can help but it's going to be quite a rewrite.
Firstly, give all your navigation items a class. Inside the nav items (I don't know if they're div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:
<ul id="navigation">
<li class="nav">
<a src="home.php">HOME</a>
</li>
<li class="nav">
<a src="about.php">ABOUT</a>
</li>
<li class="nav">
<a src="right.php">RIGHT</a>
</li>
</ul>
Then use jQuery's onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.
$(function()
{
$('.nav').click(function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
$('.content').slideUp(500).load($(this).children('a').attr('src'),
null,
function(){$(this).slideDown(500);}
);
return false;
});
});
Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).

There's several approaches to making a link unclickable. One would be to let the click-event unbind itself:
$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});
Another would be to manipulate its CSS to hide the element (set display to none).
As for the second part of your question, i don't really get what you want to do. If you want to have a popout under the link, that activates on hover, you can see here how that could be achieved by using an <ul> and its :hover event
http://jsfiddle.net/D3AP2/

javascript onclick fade div in (short code)

i'm been lookin all over the place and cannot find exactly what im after anywhere.
the html structure is basically.
<ul>
<li>link</li>
<div id="us">hidden info</div>
</ul>
the css structure is.
#us {display:none}
I'd like it so when "link" is clicked the div "us" is changed from dipslay:none; to display:block, in a graceful fade in as little lines of code as possible, and then again when the link is clicked its toggled back to display:hidden.
I'm aware that there are lots of things that can do this, but im really lookin for that simplicity in code.
thanks for your time x

You can just use .toggle() with a duration (works in all jQuery versions), like this:
$("ul li a").click(function() { $("#us").toggle("fast"); });
Or, if you're on jQuery 1.4.4+, use .fadeToggle() like this:
$("ul li a").click(function() { $("#us").fadeToggle(); });
Note though, a <div> isn't a valid child of <ul>, so it may render unexpectedly in several browsers...it'd be better to use proper markup.

Something like this:
$("#idfortheanchor").bind("click", function() {
if ($("#us").is(":visible")) {
$("#us").hide();
} else {
$("#us").show();
}
});

As there is no fade-toggle in the jQuery core, I'd use:
$('a').toggle(
function() { $('#us').fadeIn(); },
function() { $('#us').fadeOut(); }
);

If jQuery UI is an option for you, I can only recommend it.
jQuery UI extends jQuery with many nice effects:
show( effect, [options], [speed], [callback] )
But check out the website itself: http://jqueryui.com/demos/show/

thank you everybody for your input! You've been very helpful! The final snippet I've used which i deemed most appropriate was from Nick.
$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });
so thanks again everybody! and hope someone else can find this useful! x

jQuery slide/fade functions

I'm trying to modify this snippet:
$(document).ready(function(){
$('.showscript').show();
$("div.content:not(.about)").hide();
$(".subnav a, .mainnav a").click(function(){
//remove possible hilights
$(".subnav a, .mainnav a").removeClass("active");
var href = $(this).attr("href");
//hilight the clicked link
$('a[href="'+href+'"]').addClass("active");
//hide possible shown content
$(".content").hide();
//show my content
$("div.content:has(a[name='" + href.replace("#","") + "'])").show();
});
});
So that when a link in the .subnav or .mainnav is clicked it animates the swap it's doing. I'd like to use jQuery's fadeIn/Out, but I'm not really sure how I could apply it to this? The script is very specific to allow the content to show from either the mainnav and subnav and change active class on both when either is clicked.
You can see what I mean here:
http://banderdash.net/design
But it feels much to choppy.
In addition to quickly fading out the content and quickly fading in the new content, I would like the window to slide down to the content space. I'm just using anchors like this:
<a name="work">
and then calling like this:
<a href="#work">
Which jumps the window down as far as it can, but because the content in the black isn't always enough to make a Y plane that would allow the white space on the top to be moved out of the viewable rang. So I think a slide would work much better. How can I tell it to slide down the value of the href on click?

first of all i wouldnt used named anchors. I could make those ids on divs that are children of content. That way you dont have to do any real selction on complex expresstions just a search on id for the div within content. Secondly this allows you to animate each div indivdually. ehich i think is goign to give you the most control. Lastly you need to return false, from your click handler otherwise its goign to do the normal "jump to" type functionality. My script might look something like this:
Content:
<div class="content">
<div id="about"> ... </div>
<div id="work"> ... </div>
<div id="education"> ... </div>
</div>
Relevant part of your onready:
$(document).ready(function(){
$(.subnav a, .mainnav a).click(function(){
$(".subnav a, .mainnav a").removeClass("active");
var selector = $(this).attr('href');
$('a[href="'+selector+'"]').addClass("active");
if($(selector, '.content').length > 0){
$('> :visible', '.content').slideUp('fast', function(){
$(this).fadeOut('fast', function(){
$(selector, '.content').fadeIn('fast', function(){
$(this).slideDown('fast');
});
});
});
}
return false;
});
});
Note that is only pseudo code so a simpel c&p may or may not work. but it should give you an idea.