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');
});
}
});
});
Related
in my website I'd like that a certain div will appear only when that portion of page is displayed and will fadeIn and fadeOut when I scroll.
My code is the following:
bio.html
<div ng-controller="bioCtrl" id="bio">
<h1 style="color:white">Here goes my biography</h1>
<div id="bioContainer" style="display: none">
<h3>My Name</h3>
<p>Hi my name is Pluto and here I write some stuff about my bio.</p>
</div>
</div>
and the javascript is the following
bio.js
angular.module('allApps').controller('bioCtrl', function($scope, $location, $window) {
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 520) {
$("#bioContainer").fadeIn();
} else {
$("#bioContainer").stop().fadeOut();
}
});
});
this works fine, actually but, as you may see, I said the fadeIn must start when I scroll over 520px.
Now, 520px is fine for my computer's window but if I had a smaller or bigger monitor, it will have a different value so what I want is that the fadeIn starts when I am into the "#bio" section.
Get the top position of #bio using .offset().top and then just adjust you if statement to check if $(this).scrollTop() is greater than that.
$(window).bind("scroll", function() {
var fadeHere = $("#bio").offset().top
if ($(this).scrollTop() > fadeHere) {
$("#bioContainer").fadeIn();
}
// . . .
This will cause fadeIn when #bio gets to top of the window. If you want fadeIn when #bio first appears in bottom of window, use
var fadeHere = $("#bio").offset().top - $(window).height()
Here's a working fiddle: https://jsfiddle.net/zqwhnkns/
I have an element (#cols) that's 3x wider than the <body>. It has 3 columns, each of which is exactly as wide as <body>. Clicking a button slides the #cols element over by the width of one column and simultaneously focuses the <input> in the column that's sliding into view:
http://jsbin.com/puhurakewa/1/edit?html,css,js,output
The problem, as you can see from the demo, is that focusing the input causes weird behavior. I believe the browser says,
"Crap, the user focused an input that's off-screen. I need to show it!"
and then magically scrolls the input into view. This breaks the transition.
Is there a way to disable this behavior? It's extremely undesirable. I've noticed it in Chrome, Safari, and Firefox on my Mac.
EDIT: Thank you for the answers so far. I should have been more specific with my question. I'm aware that I can "work around" this issue by waiting for the animation to end, but what I'm curious about is how to work through this issue and focus the input immediately. It's a better experience, because users can begin typing before the transition is over.
Add the focus event after transition ends
$('#cols').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
$input.focus();
});
JSbin Demo
Since you already using Jquery might as well leverage the animate method, then on the complete function you focus the input, for more info check out the docs
Heres the JS (this works perfectly, but spend some time neatening it up/refactoring if you wish):
$(document).ready(function () {
$('button').on('click', function () {
var colId = $('.showing').attr('id');
if(colId == "col-1"){
$('#cols').animate({
right: '200px'
}, 1000, "swing", function(){
$("#col-2").find('input').focus();
$('#col-1').removeClass('showing');
$('#col-2').addClass('showing');
});
}
else if(colId == "col-2"){
$('#cols').animate({
right: '400px'
}, 1000, "swing", function(){
$("#col-3").find('input').focus();
$('#col-2').removeClass('showing');
$('#col-3').addClass('showing');
});
}
else if(colId == "col-3"){
$('#cols').animate({
right: '0px'
}, 1000, "swing", function(){
$("#col-1").find('input').focus();
$('#col-3').removeClass('showing');
$('#col-1').addClass('showing');
});
}
});
});
Then change your CSS to position relative like so:
#cols {
height: 100%;
transition: transform 400ms;
white-space: nowrap;
width: 600px;
position:relative;
}
HTML (just add 'showing' class to first col):
<body>
<button>Shift Cols & Focus Input</button>
<div id="cols" col-to-show="1" >
<div class="col showing" id="col-1">
<input type="text" value="1" />
</div>
<div class="col" id="col-2">
<input type="text" value="2" />
</div>
<div class="col" id="col-3">
<input type="text" value="3" />
</div>
</div>
</body>
Here's a fiddle
magically scrolls the input into view
This is the key. Just change scrollLeft of the container to 0 after focusing. I had to put a wrapper around it though.
http://jsbin.com/danarucama/1/edit?html,css,js,output
So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?
slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.
As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you
$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".
Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle
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!
My website is: http://www.grozav.com
I need help in repairing the code at the thumbnail slider part (Portfolio). If someone clicks the arrow twice, really fast, it gets off track, and the coding stops working.
HTML Markup:
<div id="portfolio">
<div id="up-arrow">UP</div>
<div id="thumbnails">
<div id="slider">
thumbnails go here
</div>
</div>
<div id="down-arrow">DOWN</div>
</div>
Jquery:
$('#up-arrow a').stop().click(function(){
if($('#slider').css("margin-top")!='0px' ){
$('#slider').stop().animate({'margin-top':'+=360px'})
$('#down-arrow').css({'background-position':'0 0px'})
$('#down-arrow a').css({'cursor':'pointer'})
//CHANGE <='PX' VALUE FOR NEXT SLIDE
if($('#slider').css("margin-top")<='-360px'){
$('#up-arrow').css({'background-position':'0 -28px'})
$('#up-arrow a').css({'cursor':'help'}) }
$('#down-arrow').css({'background-position':'0 0px'})
}
else if ($('#slider').css("margin-top")>'0px') {
$('#slider').css({'margin-top':'0px'});
}
});
$('#down-arrow a').stop().click(function(){
if($('#slider').css("margin-top")!='-720px' || $('#slider').css("margin-top")<'-720px'){
$('#slider').stop().animate({'margin-top':'-=360px'})
$('#up-arrow').css({'background-position':'0 0px'})
$('#up-arrow a').css({'cursor':'pointer'})
//CHANGE <='PX' VALUE FOR NEXT SLIDE
if($('#slider').css("margin-top")<='-360px'){
$('#down-arrow').css({'background-position':'0 -27px'})
$('#down-arrow a').css({'cursor':'help'}) }
$('#up-arrow').css({'background-position':'0 0px'})
}
else if ($('#slider').css("margin-top")<'-720px') {
$('#slider').css({'margin-top':'-360px'});
}
});
It changes the button aspect when it's at the beginning and at the end of the slides. I coded it this way due to lack of knowledge in the sliders domain.
How can I fix it, or at least prevent it from clicking twice?
Why not wrap your function in an if condition that checks to see if the slider is being animated? Then they'll only work when the animation is not occurring.
Something like if( !$('#slider').is(':animated') ){ ... your code ... }