I have a div where certain controls which are added dynamically after getting data from database.
Its kinda news details that are going to get added. I just wanted that news to scroll automatically which I have achieved through javascript.
Now if I want to stop the animation on mouseover and continue on mouseout how can I modify the javascipt.
This is my html page:
<section id="secbody" runat="server" style="position:absolute; background-color:dimgray; max-height:183px; min-height:183%;margin-top:14px;margin-left:545px;width:535px;">
<div id="galheader" style="width:535px;" runat="server">
<label id="Label1" style="color:White; position:absolute; font-size:20px; left:20px; height: 26px; width: 100%;" runat="server"> Upcoming Programs</label>
</div>
<section id="secdetails" runat="server" style="font-family:'Palatino Linotype';color:white; min-width:500px;overflow-wrap:break-word;background-attachment:fixed;position:absolute;margin-top:25px;"></section>
</section>
and this is my javascript
<script type="text/javascript">
$(document).ready(function(){
function marqueePlay(){
$("#secdetails").animate(
{
top: $("#secbody").height() - $("#secdetails").height(),
opacity: 1
}, 4000, function(){
$("#secdetails").css("top", 1);
$("#secdetails").css("opacity", 1);
marqueePlay();
}
);
}
marqueePlay();
});
</script>
I know we need to use .stop functionality but do not know the proper way to use it.
You can use .hover() function to accomplish your task
Try,
$("#secdetails").hover(function(){
$(this).stop(); //Stop the animation when mouse in
},
function(){
marqueePlay(); //Start the animation when mouse out
});
How about this?
function stopAnimation(){
$("#secdetails").stop();
}
<div id="secdetails" onmouseout="marqueePlay()" onmouseover="stopAnimation()"></div>
Related
I am trying to move around the image all over the screen but it only move from top to bottom and left to right and then it stops.
here is my javascript Code.
$(function(){
$("#btn1").click(function(){
$("#p2").animate({width:300 })
$("#p2").animate({left:'600px'})
$("#p2").animate({top:'400px'})
$("#p2").animate({right:'100px'})
$("#p2").animate({bottom:'400px'})
});
});
here is my html
<img src="myimage.png" id="p2" />
<button id="btn1">click</button>
<style>
#p2{
position:absolute;
}
</style>
if anyone have idea that how i can animate a image all around the screen then please help me out to solve my assign .thanks for your time .
<script>
$(document).ready(function(){
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({top: "+=300"}, 1000);
$("#b").animate({left: "-=500"}, 1000);
$("#b").animate({top: "-=300"}, 1000);
});
</script>
<div id="b" style="position:absolute; top:50px">
<img src="img/codelab-1.jpg" width="200px"/></div>
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
I want to make a couple things happen here:
Start button starts the animation and then turns into Stop button.
Stop button then stops animation where it is and turns back into Start button and enables me to resume from where it stopped.
Instead the animation just disappears once i press start or stop again.
I am a newbie when it comes to this kind of stuff, if I am not clear in my intent please tell me so, and I will try to clear it up as best as I can.
<html>
<head>
<meta charset="UTF-8">
<style>
div {left: 0px;
bottom: 100px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
move();
Stop();
});
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
function Stop(){
$("input[value='Stop']").click(function(){
$( ":animated" ).stop(true, true, false);
$(this).val('Start');
move();
});
}
</script>
</head>
<body>
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton'>
<div style="height:100px;width:100px;position:absolute;">
<img id='myRobot' src='myRobot.jpg' width="250px" height="200px"/>
</div>
</body>
</html>
Your JavaScript code is a little bit messy. First of all your move function:
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
Your Stop function (not the one set as callback function of the animate function) will be called while the div is animated. You don't want this.
What you might wants is essentially three different functions:
move
pause
reset
Your move function will essentially start to move your object, the pause will obviously pause it, while the reset will put your object in the initial position, if you wanto so.
Let say your HTML file is structured like this:
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton' />
<div id="object">
<img id='myRobot' alt='test' src='http://www.clker.com/cliparts/7/b/d/b/1237099752389782475nicubunu_Soccer_ball.svg.thumb.png'/>
</div>
Your CSS:
#object {
position: absolute;
left: 0px;
bottom: 100px;
width: 100px;
height: 100px;
}
And finally the JS:
var animating = false;
$("#oneButton").on("click", function() {
if (!animating) {
$(this).val("pause");
move();
} else {
$(this).val("start");
pause();
}
});
function move() {
animating = true;
$("#object").animate({left:'100%'},1000, reset);
}
function pause() {
$("#object").stop();
animating = false;
}
function reset() {
animating = false;
$("#object").css({left: '0%'});
}
Here is a FIDDLE where you can seet in "action".
I'm trying to make my link toggle from left to right. I'm using the code below;
HTML:
$forum_threads = '
<div id="latest_threads_link">
<img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section.">
<table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
'.$forum_threads_bit.'
</table>
</div>
';
jQuery:
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').addClass('latest_threads_link_active');
});
});
CSS:
#latest_threads_link{
left:0;
position:fixed;
bottom:150px;
}
.latest_threads_link_active{
left:200px;
position:fixed;
bottom:150px;
}
I want to make it so when #latest_threads_link is clicked then #latest_threads_show toggleout from left to right and on second click on #latest_threads_link then the table #latest_threads_show hides.
It actually does with my code but the issue is the #latest_threads_link remains on 200px away from left even on second click. I want #latest_threads_link to go left: 0 on second click.
Please help!!
Your problem is that you're adding the class on each click. Instead, change this line:
$('#latest_threads_click').addClass('latest_threads_link_active');
to this:
$('#latest_threads_click').toggleClass('latest_threads_link_active');
use toggleClass :
Demo : http://jsfiddle.net/5Y9mG/6/
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').toggleClass('latest_threads_link_active');
});
});
Replace
$('#latest_threads_show').slideToggle();
with
$('#latest_threads_show').slideToggle(400, function()
{
if($(this).is(":hidden"))
{
$(this).css({'left':'0px;'});
}else
{
$(this).css({'left':'200px;'});
}
});
It changes the left from 0px to 200px and repeat, etc (toggling).
Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.
Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>