Animate function calls multiple times - javascript

i have created a simple JavaScript file in which i have 2 images.
here person can either swipe left or right & accordingly images swipes
here is my code,
$('#landscapeimage1').swiperight(function (event) { //here lanscapeimage1 is canvas on which i have drawn an image.
var width = window.innerWidth;
var slide = "+=" + width + "px";
$('#landscapeimage').animate({'left': -width}, 1, function () {
$('#landscapeimage1').animate({"left": slide}, "fast", function () {});
$('#landscapeimage').animate({"left": slide}, "fast", function () {
currentImage = getPreviousImage();
currentCanvas = "landscapeimage";
drawImage();
$(this).unbind(event);
return false;
});
return false;
});
return false;
});
initially when i swipe it works properly but if i visit same image then it calls same function again & again until unvisited images does not comes & if i have visited all images then it goes to infinite loop.
i don't understand why this happens.
i have tried to stop animate & unbind swipe function but it also not working.
<div data-role="page" id="imagepage">
<div class="whiteBackground" id="landscapeimage" style="position: relative;">
<canvas id="image" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
</canvas>
</div>
<div class="whiteBackground" id="landscapeimage1" style="position: relative;">
<canvas id="image1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
</canvas>
</div>
</div>
After debugging i have found that animate function calling multiple times not swipe function but i can't figure out why? please help me out.
does any body know why this happens?

Related

Each not encapsulating blocks

I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>
Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.

How to use ontouch event in canvas HTML5?

I am new to this site and this is first question I am asking here..if its simple pls forgive me..
I have drawn one background image, on this I am drawing 5 small small images by using drawImage() method. Once I touch the small images then they should disappear or should pop up one alert box but ontouch event is not occurring so far I have searched for ontouch event but no use. I dont want to draw images through img tag in HTML.
Here is my code segment
var car = new Image();
car.src = "img/car.jpg";
car.onload = function() {
imgLoaded = true;
}
if (imgLoaded = true) {
drawBackgroundImg();
drawCarImg();
}
function drawCarImg() {
if (i == 0) {
x1 = Math.floor((Math.random() * 501));
y1 = Math.floor((Math.random() * 301));
cxt.save();
cxt.drawImage(car, x1, y1, car.width, car.height);
cxt.restore();
}
}
car.on('touchstart', function() {
alert("T");
});
Here is my HTML code
<!DOCTYPE html>
<body>
<div id="container" onclick="void(0)">
<canvas id="can"> </canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
</body>
</html>
Could anybody help me to get the solution.
FYI: I am running this code in Phonegap NOT in browser.
$( '#id' ).on( 'touchstart',function(){
//your code
});
here id is id of your html element on which you want to listen touch event.
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
I have found the answer, I made div with invisible and placed the images with position absolute and use the id's of images and trigger the touchstart event.
above said example here
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});

Add one or two pictures to the jQuery Slider

I need to add a jQuery slider to my website and I found this one met my requirement. But the slider just show 3 pictures, how to add one or two other pictures to the slider?
Demo: http://d.lanrentuku.com/down/js/jiaodiantu-883/
The html code
<div id="preview-slider">
<div id="preview-slide-1" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/01.jpg"></a></div>
<div class="preview-hide" id="preview-slide-2" style="display: block;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/02.jpg"></a></div>
<div class="preview-hide" id="preview-slide-3" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/03.jpg"></a></div>
<div id="preview-slider-line">
<ul id="preview-slider-holder">
<li class="preview-first">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im1" alt="" src="images/01.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 1</a></span></li>
<li class="preview-second">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im2" alt="" src="images/02.png" style="top: -15px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 2</a></span></li>
<li class="preview-third">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im3" alt="" src="images/03.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 3</a></span></li>
</ul>
</div>
</div>
The javascript code
(function($){
$(document).ready(function() {
var ready = true, position = 1, timer = null, domer = $('ul#preview-slider-holder > li');
var anima = function () {
if (!ready) {
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").each(function(){
if($(this).is(':animated')){
$(this).stop(true, true);
}
});
}
ready = false;
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").hide();
$('img', this).animate({"top": "-15px"}, 200);
$('#preview-slide-' + (position + 1)).fadeIn(600, function(){
ready = true;
});
$('img[id^="preview-thumbnail-im"]:not([id="preview-thumbnail-im' + (position+1) + '"])').stop(true, false).animate({'top': '0px'}, 200);
position = ++ position % 3;
};
timer = setInterval(function(){anima.apply(domer)}, 2000); // interval time
domer.mouseover(function () {
timer == null || clearInterval(timer);
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
anima.apply(this);
});
domer.mouseout(function () {
timer = setInterval(function(){anima.apply(domer)}, 2000);
});
});
})(jQuery);
I tried to add a li element , but it didn't work. I think I need to modify the javascript code. But I am not good at the programming, will someone tell how to do?
While I agree with DevlshOne, that many other quality sliders are out there. To answer the OP's question, you have to fix the code to not have hard-coded positions. Instead, I chose to use the index method present with jQuery.
Here is the jsFiddle that shows 4 images working (though I used the original code, so no actual images are displayed).
http://jsfiddle.net/a5yqx/
The key changes to the code are from:
position = ++ position % 3;
...
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
To:
position = ++position % domer.length;
...
position = $(this).index();
Since I don't have the CSS to accompany it, I'm not sure what else you'll need to keep your style up, but good luck.
Last note, I changed the image size from your default to 10x10 in order to see it on my screen in the fiddle.

Pause and resume jquery animation?

Here's a fiddle:
http://jsfiddle.net/vBt5E/
I want to pause and unpause an endlessly scrolling jquery animation on hover, without any weird jumps.
html like this:
<div id="vertical-carousel">
<div class="imagecolumn">
<img src="http://placekitten.com/200/120" width="200" height="120">
<img src="http://placekitten.com/200/100" width="200" height="100">
<img src="http://placekitten.com/200/80" width="200" height="90">
</div>
</div>
​
javascript like so:
var imageColumn = $('.imagecolumn');
origColumnHeight = imageColumn.height();
$(document).ready(function() {
var columnDupe = imageColumn.contents()
.clone()
.addClass('dupe')
.appendTo(imageColumn);
function scrollColumn() {
imageColumn.css({'top': '0'})
.animate({top: -origColumnHeight},15000, 'linear', scrollColumn);
}
scrollColumn();
});
I know this has been asked in different form before but the various answers aren't working for me. I looked at Tobia Conferto's "Pause" plugin and just couldn't get it to work. Ditto this one, which is supposedly even buggier.
Please post a working fiddle if you can, it really helps. Thanks!
Using the "Pause" plugin, you can get it working by doing the following:
$(".imagecolumn").hover(function() {
$(this).pause();
}, function() {
$(this).resume();
});
Example: http://jsfiddle.net/charlescarver/vBt5E/1/
Make sure you include the plugin on your page! https://raw.github.com/tobia/Pause/master/jquery.pause.min.js
P.S. I prefer PlaceDog.

How to zoom in a group of element using jqzoom

I'm using Jqzoom to provide zoom for a given image. These images are placed side by side and each one have the same size. I want to find a way to make the same zoom happen on all images in the same time.
Code # jsfiddle: http://jsfiddle.net/Fam43/23/
Sample IMG:
Sample HTML code:
<div>
<!-- Omitted stuff here -->
<a href="img1_big.png" class="zoom">
<img src="img1.png" width="100%" />
</a>
</div>
<div>
<!-- Omitted stuff here -->
<a href="img2_big.png" class="zoom">
<img src="img2.png" width="100%" />
</a>
</div>
<div>
<!-- Omitted stuff here -->
<a href="img3_big.png" class="zoom">
<img src="img3.png" width="100%" />
</a>
</div>
JQZoom function:
$('.zoom').jqzoom({
zoomType: 'innerzoom'
});
After having a think about the situation i came up with the folowing:
in jqZoom 2.3 in the first section there is an $.extend(obj. { and one of the members is init: in that function replace the section setting the mouse events with:
At the end of the mouseenter mouseover event:
$(".zoomPad", el).bind('mouseenter mouseover', function(event) {
// *snip
if (settings.linked && event.srcElement === this) {
$(settings.linked).not(el).find(".zoomPad").trigger('mouseover');
}
});
Change mouseleave function like so:
$(".zoomPad", el).bind('mouseleave', function(event, notSource) {
obj.deactivate();
if (settings.linked && !notSource) {
$(settings.linked).not(el).find(".zoomPad").trigger('mouseleave', [true]);
}
});
the mouse move function needs to have the parameters changed and the code at the beginning and end of the function added:
$(".zoomPad", el).bind('mousemove', function(e, thisx, thisy) {
if (thisx && thisy) {
e = $.extend(e, {
pageX: (thisx + this.offsetLeft),
pageY: (thisy + this.offsetTop)
});
}
// *snip*
if (settings.linked && !(thisx && thisy)) {
$(settings.linked).not(el).find(".zoomPad").trigger('mousemove', [e.pageX - this.offsetLeft, e.pageY - this.offsetTop]);
}
});
my example:
http://jsfiddle.net/7FQHt/
Integrated OP's example:
http://jsfiddle.net/Fam43/24/
You can even limit the linking to just one item: http://jsfiddle.net/Fam43/25/ OR http://jsfiddle.net/Fam43/26/
This might not make 100% sense to you and that is ok, just ask me a question. Some things make sense in my head and not yours.

Categories

Resources