I've been looking around and I think I'm fairly close to getting this but when I move my slider to alter the speed of the animation, nothing seems to happen. I'm assuming this has something to do with the animation already in progress? Here's the code I have thus far:
<html>
<head>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
function pageScroll(speed)
{
$("html, body").animate({ scrollTop: $(document).height() }, speed);
}
</script>
</head>
<body>
<body onLoad="pageScroll(100000);">
<input onChange="pageScroll(this.value);" type="range" value="100000" name="slider" min="0" max="200000" style="position:fixed; left:0;top:0">
<center><img src="page-0.jpg" width="800">
<img src="page-1.jpg" width="800">
<img src="page-2.jpg" width="800">
<img src="page-3.jpg" width="800"></center>
</body>
</html>
Please delete these Part of your code <body onLoad="pageScroll(100000);">
And you have 2 body tags in your code... It's not good...
If you want to do something, when your page is loaded, then do it in JS with helps of jQuery ->
$(function() {
/* things to do, after the page is loaded */
pageScroll(100000);
});
To change the animation, use .stop(). It breaks all animations in queues. For more information, read API docs
function pageScroll(speed) {
$("html,body").stop().animate({ scrollTop: 119}, 500 );
}
And i'm not sure, but i think i had some Problem with this selector... if it doesn't work, try this selector:
$("html:not(:animated),body:not(:animated)")
You could do something like this:
http://jsfiddle.net/ASMITH/AECva/
<input id="slider" type="range" value="10000" name="slider" min="100" max="20000" style="position:fixed; left:0;top:0"></input>
$(document).ready(function () {
var vHeight = $('body').height();
$('#slider').change(function () {
var speed = $('#slider').val();
$('body').stop().animate({
scrollTop: vHeight
}, +speed);
});
});
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 am making a chat app like google hangout or snapchat with html, css and javascript. When I want to append a chat, I use
$(id_name).after(message)
I can append the message but what I want to know is that the message did not show on the screen without scrolling manually. How can I show the message that I append automatically? Please help me.
Following is the my code.
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"></div>
</div>
I append the message into the "talk_chat_detail".
Change your $target.animate to $target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);})
here is the working fiddle :
https://jsfiddle.net/Le1by7z0/
You can just use append and animate in jquery. Here is the sample code ..
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#test {
width: 200px;
height: 400px;
overflow: scroll;
}
#test div {
width: 200px;
}
</style>
</head>
<body>
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"></div>
</div>
<input type="text" id="message" placeholder="write message" />
<input type="button" id="sendMessage" value="Send" />
<script>
$(document).ready(function() {
$("#sendMessage").on('click', function() {
var mes = $("#message").val();
$("#talk_chat_detail").append(mes + "<br/>")
$("#talk_chat_detail").animate({
scrollTop: $target.prop("scrollHeight")
}, 30);
});
});
</script>
</body>
</html>
$(document).ready(function() {
$('#send').click(function() {
var message = $("#message").val();//Here comes dynamic data binding
var appendMessage = '#messageArea';//Message to append in div section
$(appendMessage).append('<div style=height:10px;background:white;float:right>' + message + '</div> <br><hr>'); //user message dynamic div
var $target = $(appendMessage); // user dynamic div appended
$target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);
})
});
#messageArea {
width:320px;
height:400px;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="text" id="message" placeholder="User Message" />
<button type="button" id="send">append text message</button>
<div id="messageArea">
<div style="height:1000px;background-color:wheat"></div>
</div>
</body>
Hope this helps
Use scrollTop to scroll to the bottom of the page after you append the message
var $target = $('#talk_chat_detail');
$target.animate({scrollTop: $target.prop("scrollHeight") }, 300);
You can use scrollTop, you just need to add following code right after the append call of your message and it will automatically scroll to the message,
$('html, body').animate({
scrollTop: $("div").offset().top
}, time);
div => Dom Element where you want to move scroll.
time => milliseconds, define the speed of the scroll.
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#slider").slider({
slide: function(event, ui) {
if (ui.value < 33) {
$("#1").fadeIn("slow");
$("#2").fadeOut("slow");
$("#3").fadeOut("slow");
}
else if (ui.value < 66) {
$("#1").fadeOut("slow");
$("#2").fadeIn("slow");
$("#3").fadeOut("slow");
}
else {
$("#1").fadeOut("slow");
$("#2").fadeOut("slow");
$("#3").fadeIn("slow");
}
}
});
});
</script>
<div id="slider"></div>
<div id="content" >
<div id="1" style="position:absolute;z-index:0;">A</div>
<div id="2" style="position:absolute;z-index:1;display:none;">B</div>
<div id="3" style="position:absolute;z-index:2;display:none;">C</div>
</div>
The code above uses jQuery UI to create a slider. The slider fades between content in 3 different div's. The code is great on a computer, but the slider it creates does not slide on a mobile phone. What DOES work fine on mobile is as follows:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function changecontent()
{
if (document.getElementById("slider").value<33){
$("#1").fadeIn("slow");
$("#2").fadeOut("slow");
$("#3").fadeOut("slow");
} else if (document.getElementById("slider").value<66){
$("#1").fadeOut("slow");
$("#2").fadeIn("slow");
$("#3").fadeOut("slow");
} else if (document.getElementById("slider").value>66){
$("#1").fadeOut("slow");
$("#2").fadeOut("slow");
$("#3").fadeIn("slow");
}
};
</script>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/>
<div id="content">
<div id="1" class="show" style="position:absolute;z-index:0;">A</div>
<div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
<div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>
The code above 'works' on all browsers (mobile or not), but allows for no styling options and looks different on each browser. I'm fine with how it shows on mobile, but hate how it looks on IE and hate how it functions on Firefox.
Any JS/jQuery masters skillful enough to combine these so that the website will do one or the other based on screen resolution / device it's viewed on? I'm open to other options too. But I can't use jQuery Mobile due to JS conflict with the template I'm using. jQuery UI works fine.
Including http://touchpunch.furf.com/ after jqueryui should fix your issue. It modifies jqueryui to support touch events. By default, jqueryui only supports mouse events.
Here's a little tweak that might work for you:
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
If a certain CSS property of #slider changes, because the user views it on a mobile device, you can catch that and apply a different JavaScript section to your slider.
It seems to be more secure than catching the window / device with via JS.
I'm pretty new to jQuery and I am practicing a fade in that starts with one image and then continues to the next image and so on. I have written a piece of code (below) but was wondering if there was an easier or more elegant way to write it? I tried the each() function but didn't seem to work:
<script type="text/javascript" src="jquery/jquery-1.8.2 .min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert($("div img").length);
$("div img").css("display","none");
var delayAmt=0;
for(var x=0;x<$("div img").length;x++){
$("div img:eq("+x+")").delay(delayAmt).fadeIn(1000);
delayAmt+=250;
}
});
</script>
</head>
<body>
<h1>Ripple fade in.</h1>
<div>
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
HTML:
<body>
<h1>Ripple fade in.</h1>
<div id="images">
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
jQuery:
$(document).ready(function(){
var delay=0;
$('#images').children('img').each(function () {
$(this).css("display","none");
$(this).delay(delay).fadeIn(1800);
delay += 1000;
});
});
jsFiddle link here: http://jsfiddle.net/salih0vicX/6GZt6/