I am trying create bubbles, after few repetitions my browser getting stuck. here is my code. someone please help.... How do I get it done with out making many requests .
It looks like my post is mostly code , but I added enough details for this Stackoverflow :)
Thanks!
Jquery:
$(document).ready(function() {
function bubbles()
{
var i = 0;
$(".circle").remove();
for(i = 0; i < 3; i ++ )
{
var CreateDiv = document.createElement('div');
var AppendElem = document.body.appendChild(CreateDiv);
AppendElem.setAttribute('class','circle');
CreateDiv.style.position = "absolute";
var randomPosTop = Math.floor((Math.random() * 800) + 1);
CreateDiv.style.top = randomPosTop +"px";
var randomPosLeft = Math.floor((Math.random() * 1200) + 1);
CreateDiv.style.left = randomPosLeft +"px";
}
$( ".circle" ).animate({ opacity :0.0,height:100, width:100 }, 5000,bubbles);
}
bubbles();
});
CSS
.circle{ width: 20px;
height: 20px;
background-color: #000;
border-radius: 100px; position:absolute;}
jsfiddle
https://jsfiddle.net/krishnakamal549/u4krxq8o/
The issue is that the callback in the animation gets called for each element it finds. So.. the first time it gets called 3 times, the second time 9, the third time 18, it gets tripled each time, eventually you're running hundreds of instances of "bubbles".
You want to use a promise to do the callback like so.
$(".circle").animate({
opacity: 0.0,
height: 100,
width: 100
}, 5000).promise().done(bubbles);
This way, the callback only fires once for the entire animation, not per element.
FIDDLE
$(".circle").animate({
opacity: 0.0,
height: 100,
width: 100
}, 5000);
$("body").animate({ opacity: 1 }, 5000, bubbles);
Try this, this also works. But i suggest to use approach specified by Smeegs.
This method adds an extra process to the body for an animation while approach by Smeegs directly deals where the animation is applied and no need for an extra animation process on body
Related
So I got an element with the following CSS:
top: 0;
left: 0;
width: 100%;
height: 300px;
border-radius: 0;
box-shadow: none;
transition: all .3s ease-in-out;
On click I am trying to add/subtract 100% from the left property depending on which button is clicked:
$('.next, .prev').click(function() {
if ($(this).hasClass("next")) {
$(".element").animate({
left: '-=100%'
}, 500);
}
else if ($(this).hasClass("prev")) {
$(".element").animate({
left: '+=100%'
}, 500);
}
});
When I click one of the buttons, it works fine, but on the 2nd press, it jumps to a percentage, which doesn't makes sense to me, i.e. 1002.22%, -802.222, ...
You got a full example here after clicking an element to open the content.
Does anyone know why it's not acting the way I want to?
There is no way to retrieve an elements css value as percentage, so when you try to add or subtract further it is doing this to the pixel value. I found this out when trying to do the subtraction outside of the animate call.
$('.portfolio-next, .portfolio-prev').click(function() {
var leftVal = parseFloat($(".duplicated .dupAnim").css('left'));
if ($(this).hasClass("portfolio-next")) {
leftVal = (leftVal - 100) + '%';
}
else if ($(this).hasClass("portfolio-prev")) {
leftVal = (leftVal + 100) + '%';
}
$(".duplicated .dupAnim").animate({
left: leftVal
}, 500);
});
The above code does not work, but illustrates a similar issue where the returned value is not a percentage.
In order to solve this you will probably need to keep a count (in a separate attribute or variable) of the number of times it has been added or subtracted. This is a hack and is probably not how I would choose to do it.
Alternatively there is an answer here about calculating the percentage from the pixel value that css() returns.
I need to disable background in order to show a small popup window with a video once a user clicks on an image.
I could do it with JQuery but can't seem to understand it in Javascript.
Here what I've done in JQuery:
style snippet:
.overlay {
z-index: 4;
position:absolute;
display:none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Jquery snippet:
$(".overlay").fadeToggle();
Html snippet:
<div id="bck" class="overlay"></div>
In javascript I have tried many things, like:
var el = document.getElementById("bck");
function fadeIn(el) {
el.style.opacity = 0;
var tick = function() {
el.style.opacity = +el.style.opacity + 0.01;
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
fadeIn(el);
but it's not working
help, please!
You should use the Jquery plugin overlay.js. It will make your life much easier.
http://jquerytools.github.io/documentation/overlay/
However, if that is not the route you want to go, I did notice a little problem in your code. You have the timeout set to 16 ms. That is too quick to get a proper fade in. Adjusting it to at least 100 ms would have the fade-in take place in one second.
Say my image (panoramic) is 10,000 pixels long, but I want to be able to view only 1000 pixels wide at a time, and in order to view more of it, I can just hover my mouse either left or right, and then the image will move accordingly please? If possible, a simple script on HTML? (I'm not sure how to use Javascript or CSS, but if it needs to come down to that, do guide me step by step?
Thank you.
Here is a simple JQuery which you can use to scroll the whole page when hovering over either the left or right;
Example - https://jsfiddle.net/38da9pca/
Need any help implementing it just leave a comment and I will try and help you.
$(function() {
$('#right').on('mouseenter', rscroll);
$('#left').on('mouseenter', lscroll);
$('#right, #left').on('mouseleave', function() {
$('body').stop();
});
function rscroll() {
$('body').animate({
scrollLeft: '+=25'
}, 10, rscroll);
}
function lscroll() {
$('body').animate({
scrollLeft: '-=25'
}, 10, lscroll);
}
});
Edit (Scroll Image Only)
Example - https://jsfiddle.net/38da9pca/1/
I have change it so the lscroll and the rscroll will effect the id of image instead of the body and change it from scrollLeft to left, and that way it will move the images scroll. Dont forgot to change the $('body').stop(); to $('#bg').stop(); or it will never stop scrolling
$(function() {
$('#right').on('mouseenter', rscroll);
$('#left').on('mouseenter', lscroll);
$('#right, #left').on('mouseleave', function() {
$('#bg').stop();
});
function rscroll() {
$('#bg').animate({
left: '-=25'
}, 10, rscroll);
}
function lscroll() {
$('#bg').animate({
left: '+=25'
}, 10, lscroll);
}
});
Here's one. It's using jquery (javascript library). You would have to add it in order to make it work.
Example:
http://www.gayadesign.com/scripts/jqueryphotonav/
Tutorial:
https://blog.gaya.ninja/articles/jquery-convertion-panoramic-photoviewer-in-javascript/
Something like this?
var imgView = document.querySelectorAll('.img-view')[0];
var img = imgView.querySelectorAll('img')[0];
imgView.onmousemove = function(e) {
var x = e.clientX;
var px = ((x / this.offsetWidth) * 100);
var ix = ((px / 100) * img.offsetWidth);
img.style.left = '-' + (ix - this.offsetWidth) + 'px';
}
.img-view {
width: 256px;
height: 160px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
}
.img-view img {
height: 100%;
position: relative;
top: 0;
left: 0;
}
<div class="img-view">
<img src="http://panoramalove.com/wp-content/uploads/2013/01/nighttime-panoramic-view-of-hong-kong-island-from-the-avenue-of-stars-in-tsim-sha-tsui.jpg">
</div>
I have this semi-slider-style UI where new terms are added in from the left: http://jsfiddle.net/v4v5cvkz/. I'm using the jQuery prependTo function to do this. My issue is that I want the terms that are already displayed to perform an animated slide to the right when a new term gets added, rather than suddenly "appear" in the correct position. I did try adding a "displayed" class to terms that had successfully shown up, and tried adding a slide-to-right animation after that, but that didn't quite achieve the effect I was going for (the "displayed" objects were moved much further to the right than I expected).
Here is the problematic code (you'll probably want to view the fiddle to see it in context though):
function addToStream(term, delay) {
setTimeout(function(){
$("<div />")
.addClass("stream_term")
.html(term)
.css({
opacity: 0
})
.prependTo("#stream_terms")
.animate({opacity:1},
{ duration: 1000,
complete: function() {
$(this).addClass("displayed");
}
});
}, delay);
}
Any help here would be greatly appreciated. Thank-you!
*Note: I have access to jQuery UI in my code, though it isn't linked in the fiddle. Also, if anyone knows of a plugin that can do this sort of thing better than I can, please let me know. The closest one I was able to find was Fraction Slider, but I didn't find it obvious how to create a similar UI with it (it might also be overkill for my purposes).
Here's a way to do it:
function addToStream(term, delay) {
setTimeout(function(){
var newDiv = $("<div />");
newDiv.addClass("stream_term")
.html(term)
.css({
opacity: 0,
display: 'none'
}).prependTo("#stream_terms");
var width = newDiv.width();
var height = newDiv.height();
newDiv.css({
width: 0,
height: height,
display: 'inline-block'
})
.animate({
width: width,
margin: '0 10px',
padding: '5px 10px'
}, 1000)
.animate({opacity: 1}, 1000, function(){
$(this).addClass("displayed");
});
}, delay);
}
It also needs the following CSS changes:
.stream_term {
padding: 0;
margin: 0;
overflow: hidden;
}
DEMO: http://jsfiddle.net/StathisG/hqg29p6r/1/
I am trying to change the margin of each element, using setAttribute.
How can I able to use my variable dist "distance" to decrease value until 10, every after delay "interval"?
var dist=200; var speed = 2000;
function slideLeft(x){
dist--;
slideSet[x].setAttribute("style","margin-right:"+dist+"px;");
setTimeout(slideLeft(x), delay);
}
Take these style and elements for example...
.widiv { margin-right:200px; }
<div>
<div class="widiv" ></div>
<div class="widiv" ></div>
</div>
Thanks a lot.
Here's your code with some changes: See fiddle http://jsfiddle.net/chrismoutray/4p3xX/
var dist = 200, delay = 500,
slideSet = document.getElementsByTagName('div');
function slideLeft(x) {
dist--;
if (dist < 0) return;
slideSet[x].setAttribute("style", "margin-right:" + dist + "px;");
setTimeout(function() {
slideLeft(x);
}, delay);
}
slideLeft(1);
With a few additions to the styling:
.widiv {
margin-right:200px;
float:left;
width: 100px;
border: 1px solid black;
height: 100px; }
The main differences are that when calling setTimeout I'm using a function delegate (function() { <your code here> }) to call the slideLeft method so that x variable is used correctly - I don't think you can pass a statement into setTimeout without doing it this way.
Also in styling the divs I made sure to include a float left other wise the change to margin right doesn't make sense - should this be margin left instead?