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.
Related
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
I have a page which users get to by clicking through an ebook. When they click a link it takes them to a product on the page depending on the link so it looks like
example.com/#product1
example.com/#product6
example.com/#product15,
etc...
The page already scrolls to that part of the page using this code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
I have another div within the #product1 div called #amazonbutton with a style of display:none.
<div id="product1" class="product">
<a href="link">
<div id="amazonbutton"><img src="amazonbuttonz" />
</div>
</a>
</div>
This is because it's a "go to amazon" button hidden for all items except the currently selected div. So basically, the button should display for the :active div while staying in its original state (hidden) for all inactive divs.
How can I change this with jquery?
I have this bit of code which is incomplete and I'm stuck:
jQuery(function() {
jQuery('amazonbutton').each(function() {
if (jQuery(this).attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
Thank you in advance!
There is a cool thing called document.activeElement . It is a read only property that tracks the current active element.
$('.yourdivclass').hide();
$(document.activeElement).show();
You can activate a element by .focus() .activate()
Firstly, you looped the amazonbutton, in your code i saw that it wasn't a link. So you can't check the attr href. I guess that you want to check the href of amazonbutton's parent. Secondly, amazonbutton in your loop is a class or id? You must add . or # to it. The code could be:
jQuery(function() {
jQuery('#amazonbutton').each(function() {
if (jQuery(this).parent().attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
Current Implementation:
two divs at same place, div1 display:block, div2 display:none
on tab click, Jquery hides one in 2000ms and shows other div.
Problem:
I dont want user to feel like 2nd div loaded after tab clicked.
I want user to feel that second div was there when first div disapeared.
Current Code:
div1.hide('fade', 2000, function() {
div2.show();
});
I need something like:
div2.show(); //behind div1
div1.hide('fade', 2000);
but this shows both divs on screen for 2 seconds which I dont want to.
Please help.
You need to code something like this
$(document).ready(function(e) {
$(".tab2").on("click",function(){
$(".div2").stop(true,true).slideUp(function(){
$(".div1").stop(true,true).slideDown();
});
})
$(".tab1").on("click",function(){
$(".div1").stop(true,true).slideUp(function(){
$(".div2").stop(true,true).slideDown();
});
})
});
Put your class or id name on which you want to click instead of .tab
Here is demo of full tab pane: fiddle
You can use stop() to block the queueing of animations, like so:
$('#click').click(function() {
$("#div1").stop().fadeTo(2000, 0);
$("#div2").stop().fadeTo(2000, 1);
});
Here's a jsFiddle
What you are looking for sounds like 2 div's behind each other, using z-index. You just put them in the same place, give the one in the back a lower z-index and then fadeOut the top one. This way the second one will actually be there already and you don't need the show() or fadeIn(). Example here
Here's a little bit sexier way than loading the second div later. stack the divs, then fade out the top one and hide it with the animation callback when it's done. (or, use fadeOut as BenMann suggests for the same result.)
Example fiddle
<div id='container'>
<div id='divFront'>some content on top, click for other content</div>
<div id='divBack'><br />some other content underneath</div>
</div>
$('#divFront').click(function(){
$('#divFront').animate({"opacity":"0"}, 2000, "swing", function(){
$('#divFront').hide();
});
});
thank you for your support sir, I have aceived it by using the comments of everyone. Have a look bro http://jsfiddle.net/bhailogee/CA7Bu/3 thanks
$(document).ready(function(e) {
$(".tab1").on("click",function(){
prepare($(".div2"),$(".div1"));
$(".div1").hide('slide', 2000,function(){
clean($(".div2"),$(".div1"));
$(".div2").show();
});
})
$(".tab2").on("click",function(){
prepare($(".div1"),$(".div2"));
$(".div2").hide('slide', 2000,function(){
clean($(".div1"),$(".div2"));
$(".div1").show();
});
})
function prepare(showdiv,hidediv){
showdiv.css('position','absolute');
hidediv.css('position','absolute');
showdiv.css('z-index','1');
hidediv.css('z-index','2');
showdiv.css('display','block');
hidediv.css('display','block');
}
function clean(showdiv,hidediv){
showdiv.css('z-index', '');
hidediv.css('z-index', '');
}
});
I'm making a site and i haven't been able to figure out how to highlight a certain div without everything blowing out of proportion. I want the top nav where it says home, sitemap, and contact to highlight a div in the footer. When you click contact i want it have you dragged down to the bottom where it is but i want it to highlight the contact div just to get your attention real quick so its easier to find. i tried some plugins but they didnt work to well.
Site
<div id="navContainer">
<div id="nav">
<ul>
<li>Home</li>
<li>Site Map</li>
<li>Contact</li>
</ul>
</div>
Using jQuery, add an id to the contact button like contact and one to the ul like contactUL then this works. Here is a jsFiddle
$("#contacter").click(function() {
$(window).scrollTop($(document).height());
$("#contact").css("background-color", "yellow");
});
Something like this perhaps:
http://jsfiddle.net/E6h5u/1
// on click of a nav element with class scroll
$('nav .scroll').click(function () {
// select the corresponding footer element
// (you may want to work with a class or data attribute, in stead of basing on the content)
var $footer = $('footer a:contains(' + $(this).text() + ')');
// scroll to it
$("body").animate({
scrollTop: $footer.offset().top
}, "slow", function () {
// when the scroll is ready, add a highlight class
$footer.addClass('highlight');
// wait some, and remove the class again
setTimeout(function() { $footer.removeClass('highlight'); }, 1000);
});
});
I put the explanation in the code comments, but feel free to ask.
Note that I used a class with a css transition for the highlighting, but you could also use some jQuery animation if you prefer (for legacy browser compatibility with the css transition perhaps...)
Gotta use javascript (and preferably JQuery, as the previous poster said). Here is a working Fiddle showing how you could could go about this.
http://jsfiddle.net/HerrLoop/eBxyM/1/
$('#nav ul li:nth-child(3) a').click(function(){
$('#footer .contact').addClass('highlight');
});
The homepage of our website (legendboats.com) is 4 small cells, that if you click on, the large image changes. Pretty standard stuff, but there is a problem.
When you click on one of them the first time, the large area collapses before the new image reappears. This doesn't happen again, you can continue to click on different images, and they will fade in and out properly. Here is the code I'm using:
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
$('#home_box ' + new_slide).fadeIn().addClass('active');
}).removeClass('active');
});
Any ideas on what I'm doing wrong, or any improvements?
It collapses because you're removing the class="active".
The reason it doesn't collapse after the first time is because jQuery is adding an inline style "display:block" which overrides the missing class="active".
Initially:
<div id="standard_equipment" class="active">
Subsequently:
<div id="more_power" style="display: block;" class="active">
Well I don't know why it happens, but I can see the symptoms. For some reason on first click the content collapses. This causes the odd flashing. If you set a min-height on home_box it sorts it out.
#home_box { min-height: 482px; }
Try doing this way
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
var parent = this;
$('#home_box ' + new_slide).fadeIn(function(){
//You can shuffle following two lines and try
$(parent).removeClass('active');
$(this).addClass('active');
});
});
});
Hope this works you.