I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>
Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>
The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!
Related
I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>
Please try adding inline style attribute. See example below:
<div style="display:none;"></div>
I submitted my code on a code review site and it highlighted that have duplicate functions within my script which can be seen below.
$(document).ready(function () {
$('#search-btn').click(function () {
$('.search-bar-wrap').toggleClass('searchActive');
$('.more-menu').removeClass('moreMenuActive');
$('account-menu').removeClass('acMenuActive');
});
$('.more-btn').click(function () {
$('.more-menu').toggleClass('moreMenuActive');
$('.account-menu').removeClass('acMenuActive');
$('.nav-bar-wrap').removeClass('searchActive');
});
$('.ac-btn').click(function () {
$('.account-menu').toggleClass('acMenuActive');
$('.nav-bar-wrap').removeClass('searchActive');
$('.more-menu').removeClass('moreMenuActive');
});
// MOBILE
$('#mobile-menu').click(function () {
$('.mobile-menu').toggleClass('mobileMenuActive');
$('.m-accord-dwn').removeClass('accordionActive');
});
$('.active-mobile-menu').click(function () {
$('.mobile-menu').toggleClass('mobileMenuActive');
$('.m-accord-dwn').removeClass('accordionActive');
});
$('.mobile-accordion').click(function () {
$('.m-accord-dwn').toggleClass('accordionActive');
});
});
The click functions demonstrated above are adding and removing classes to show can hidden element on the web page and to also give the click but an active state etc. I am trying to follow best practices for me code. Based on my code above is there a way create a global active function? Jsfiddle
The way to eliminate redundant code is to use classes and structure in your markup. By structuring the markup, the same class should be able to be applied to multiple elements, not just one element like you currently have.
You only need one style in your CSS:
.inactive {
visibility: hidden;
}
Then change your markup so each element to be hidden/shown has a "container" element around it and its button. The buttons that toggle the visibility should all have the "toggle-btn" class. And the elements to be hidden/shown all have the "pane" and "inactive" classes.
<header ...>
<div class="container">
<a class="toggle-btn ...">more</a>
<div class="pane inactive ...">
...
</div>
</div>
<div class="container">
<a class="toggle-btn ...">account</a>
<div class="pane inactive ...">
...
</div>
</div>
<div class="container">
<a class="toggle-btn ...">search</a>
<article class="pane inactive ...">
...
</article>
</div>
</header>
Now your JavaScript can be:
$(document).ready(function() {
$('.toggle-btn').click(function() {
var $pane = $(this).closest('.container').find('.pane');
if ($pane.hasClass('inactive')) {
$('.container .pane').addClass('inactive');
$pane.removeClass('inactive');
} else {
$pane.addClass('inactive');
}
});
});
Notice how you only need one event handler registered. Inside the event handler this references the button that was clicked. The "pane" element is found by first using .closest() to get the container element and then .find().
jsfiddle
I am still learning JavaScript/jQuery and I'm trying to open and close divs with the least amount of verbiage, I'm trying to break free of the habit of repeating myself because its easier to code.
$(document).ready(function() {
$(function () {
$('#section-two, #section-three').css('display', 'none');
$('.section-opener').function (e) {
e.preventDefault();
var target = $(this).data("target");
var $target = $(target);
$('.section').not($target).stop(true, true).css('display', 'none');
$target.stop(true, true).css('display', 'block');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Section One</h4>
<div class="section" id="section-one">
<p>I am inside section one</p>
</div>
<h4>Section Two</h4>
<div class="section" id="section-two">
<p>I am inside section two</p>
</div>
<h4>Section Three</h4>
<div class="section" id="section-three">
<p>I am inside section three</p>
</div>
I'm not having any luck as currently none of it is working.
Your code is very confusing and it looks incorrect as well.
When you mention closing and opening it seems like you mean show and hide instead of what is normally considered "closing", i.e. </div>
Also, it appears you are using JavaScript to set the initial display where you should be using CSS:
<style>
#section-two, #section-three{
display: none;
}
</style>
Your .stop() and .function() and target, $target all serve to make your code very difficult to understand. I suggest reading some tutorials to understand the basics, because it appears you do not understand the code you're writing.
Also, perhaps you are looking for $().show() and $().hide() functions? Those perform the display:block and display:none shortcuts.
I created a jsfiddle which does what I think you wanted:
http://jsfiddle.net/48xuvL6y/1/
JS:
$(document).ready(function () {
$('.section-opener').on('click', function (e) {
e.preventDefault();
var target = $(this).data("target");
$('.section').hide();
$(target).show();
});
});
CSS:
.section {
display: none;
}
I am trying to get some text to fade in after some images move once you reach a certain point on the page. It works fine if I am already down the page and I refresh, but when I scroll from the top to the area it does the correct animation but then the text starts to flash over and over again. Is there any way to stop this?
Here is the javascript
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({bottom: '0px'},900);
$('#managecontent2').animate({bottom: '0px'},900,function(){
$('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow');
});
}
});
});
and here is the HTML
<div id="twocolumntextcontainer">
<div id="twocolumntextleft">
<p>C.M.S. <span>Wordpress</span></p>
</div>
<div id="twocolumntextright">
<p>F.T.P. <span>FileZilla</span></p>
</div>
</div>
<div class="twocolumnlayout">
<div id="managecontent1">
<img src="img/wordpresslogo_203x203.png" />
</div>
<div id="managecontent2">
<img src="img/filezillaicon_210x208.png" />
</div>
</div>
You have set conditions that will cause this.
If you take a look, you are triggering the animation every time the window scrolls and the scrollTop value is greater than 1350px. If you continue to scroll at all beyond this point, the animation will continually trigger.
You will likely want to unbind the eventListener as soon as your condition is met (assuming you don't want the animation to happen again until the page is refreshed).
Add this within your if statement:
$(this).unbind('scroll');
That will unbind the scroll listener entirely from the window once your condition is met once.
Can you try following
$(document).ready(function () {
$(window).scroll(function () {
$('#twocolumntextcontainer').fadeOut("slow");
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({ bottom: '0px' }, 900);
$('#managecontent2').animate({ bottom: '0px' }, 900, function () {
$('#twocolumntextcontainer').fadeIn('slow');
});
}
});
});
I have a list of <p class="results"> that jQuery is set to display a hidden <div> at the .hover() event:
<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
<script>
$(".results").hover(function() {
$('#hidden').html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").hide();
})
</script>
The problem is that (I assume) since I have a 200ms fade in if the user hovers from item to item quickly then leaves the <p> altogether, the second function to hide the <div> does not fire. I am pretty sure I need to add some code with the .stop() method somewhere in there, but not sure how to implement it. Any ideas?
You almost had it:
<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
$(".results").hover(function() {
$('#hidden').html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").stop().hide(); // <- important bit here
}
try:
<script>
$(".results").hover(function() {
$('#hidden').stop().html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").stop().hide();
}
</script>
What about mouseenter, mouseleave?
http://jsfiddle.net/Yxv25/
$(".results").on('mouseenter',function() {
$('#hidden').fadeIn(200);
}).on('mouseout', function() {
$("#hidden").hide();
})
EDIT:
Or setting a timer, http://jsfiddle.net/Yxv25/1/
I was not quite sure which one you needed.