Change element size jQuery - javascript

I want to change element size by animate function. But when I do this, all my page elements are slide down. Is there any existing way to avoid sliding down elements of page?
My code:
$(".animated_blue_1").delay(800).animate({
"height":230,
"width":230
},500, function () {
$(".animated_blue_1").animate({
"height":200,
"width":200
},500);
});

If you have elements arranged like this:
+---+
| A |
+---+
+---+
| B |
+---+
...and you make A taller, what do you expect to happen to B? It needs to move down to make room, barring you telling it to do something else.
You could tell it to stay put by using absolute positioning:
var b = $("B"); // Obviously make the selector something real
var pos = b.position();
b.css({
position: "absolute",
left: pos.left,
top: pos.top
});
...but then of course A and B would overlap.
Option A: They move down:
var run = true;
$("input[type=button]").click(function() {
run = false;
});
go();
function go() {
$(".foo").animate({
width: 130,
height: 130
}, 500).promise().then(function() {
$(".foo").animate({
width: 100,
height: 100
}, 500).promise().then(function() {
if (run) {
setTimeout(go, 200);
}
});
});
}
.foo {
width: 100px;
height: 100px;
border: 1px solid black;
}
#a {
background-color: #ee0;
}
<input type="button" value="Stop">
<div id="a" class="foo">A</div>
<div id="b" class="foo">B</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Option B: They overlap:
var run = true;
$("input[type=button]").click(function() {
run = false;
});
var b = $("#b");
var pos = b.position();
b.css({
position: "absolute",
left: pos.left,
top: pos.top
});
go();
function go() {
$(".foo").animate({
width: 130,
height: 130
}, 500).promise().then(function() {
$(".foo").animate({
width: 100,
height: 100
}, 500).promise().then(function() {
if (run) {
setTimeout(go, 200);
}
});
});
}
.foo {
width: 100px;
height: 100px;
border: 1px solid black;
}
#a {
background-color: #ee0;
}
<input type="button" value="Stop">
<div id="a" class="foo">A</div>
<div id="b" class="foo">B</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

It means your selector is not specific to select that particular element. Check out which other elements have this animated_blue_1 class. Try to provide an ID to the element so that you can use ID instead of Class to be more specific.
If that is not the case you have to absolutely position your element, see TJ's answer.

Related

Toggle method without show/hide option

How to use .toggle() method but not for show and hide purposes?
For example, when I click on a certain div I would like to animate it's position
$(div).animate({"left":"+=50px"}); and then on the second click to return the div on the same position $(div).animate({"left":"-=50px"}).
I know there is other solution but I would like to achieve this with .toggle() without hiding an showing the div. Any ideas?
$("#myDiv").toggle(function() {
$(this).stop().animate({
left:"+=50"
}, 500);
}, function() {
$(this).stop().animate({
left:"-=50"
}, 500);
});
#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="myDiv"></div>
hope this answer your question. However, jQuery 1.9 and newer do not allow this feature.
there is no toggle function using click since 1.9 . But you can still doing this using two ways:
for more explaination
$(function(){
//basic method
var clicked = false;
$('#mydiv1').click(function(){
if(clicked){
clicked = false;
$(this).animate({"left":"+=50px"});
}else{
clicked=true;
$(this).animate({"left":"-=50px"});
}
});
//create new function like old built-in function
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
$('#mydiv2').clickToggle(function(){
$(this).animate({"left":"+=50px"});
}, function(){
$(this).animate({"left":"-=50px"});
});
});
#mydiv1{
background-color: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 100px;
}
#mydiv2{
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="mydiv1"></div>
<div id="mydiv2"></div>
</div>

why I can't set the same height and width by using jQuery?

I wish to build a sketchpad by using jQuery to dynamically set width and height for each div grid.
However the result shows a different size of height and width. From the JQuery code, I understand that I have successfully created 16*16 div blocks. I then assign it with height and width by using selector.css(width:function(){}).
As a result, I am expecting to see a 16 * 16 grid of blocks with the same size. However, it displays different sizes of blocks. I have no clue why this happens, can anyone enlighten me?
var input = 16;
$(document).ready(function(){
for(var i = 0; i<input*input;i++){
$('.wrapper').append("<div></div>");
}
$('.wrapper').find('div').css({
width: function(input) {
return 200/input;
},
height: function(input) {
return 200/input;
}
});
$('.wrapper').find('div').addClass('grid');
$('.wrapper').find('div').on('mouseenter',function(){
$(this).addClass('highlight');
});
});
.wrapper{
width: 900px;
height: 900px;
margin: 0 auto;
}
.grid{
border: 1px solid black;
display: inline-block;
margin: 2px 2px;
}
.highlight{
background-color: blue;
}
#button{
width: 900px;
margin: 0 auto;
}
button{
display: block;
margin: auto;
}
body{
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src = "sketchpad.js"></script>
<div class="wrapper"></div>
$('.wrapper').find('div').width(200/input);
$('.wrapper').find('div').height(200/input);
/*$('.wrapper').find('div').css({
width: function(input) {
return 200/input;
},
height: function(input) {
return 200/input;
}
});*/
reomve commented code section and add above code section.
$('.wrapper').find('div').css({
width: function(input) {
return 200/input;
},
height: function(input) {
return 200/input;
}
});
I think you just forgot to put width and height unit.
$('.wrapper').find('div').css({
width: function(input) {
return 200/input + 'px';
},
height: function(input) {
return 200/input + 'px';
}
});
Should work
The problem is with the width function you specified:
width: function(input) { return 200/input; },
According to the documentation this function:
Receives the index position of the element in the set and the old
width as arguments.
Thus the parameter input contains the index position of div, e.g. 0, 1, 2, etc. That is why you see blocks which are invisible (position 0), have a height/width of 200 (position 1), etc.
The solution is to use a variable instead of a function to set the width:
var block_width = 200 / input;
$('.wrapper').find('div').css({
width: block_width,
height: block_width
});

appendTo is not working with each in jquery

I have to apply animation on each "div". But it is applying just in first one not in all.
According to me "$("#viewport").each(appendTo(c));" this line is not working in javascript code.
HTML code:
<div id="viewport"></div>
<div id="viewport"></div>
<div id="viewport"></div>
Javascript code:
$(window).load(function(){
$(function () {
var a = 0;
for (; a < 15; a += 1) {
setTimeout(function b() {
var a = Math.random() * 1e3 + 5e3,
c = $("<div />", {
"class": "smoke",
css: {
opacity: 0,
left: Math.random() * 200 + 80
}
});
**$("#viewport").each(appendTo(c));**
$.when($(c).animate({
opacity: 1
}, {
duration: a / 4,
easing: "linear",
queue: false,
complete: function () {
$(c).animate({
opacity: 0
}, {
duration: a / 3,
easing: "linear",
queue: false
})
}
}), $(c).animate({
bottom: $("#viewport").height()
}, {
duration: a,
easing: "linear",
queue: false
})).then(function () {
$(c).remove();
b()
});
}, Math.random() * 3e3)
}
}());
});
Use more than one element with the same id is absolutely bad practice! Put "vieport" as class and use
$( ".viewport" )
The .each() function take a function as first argument and in that function context, the "this" variable will contain the element
$( ".viewport" ).each( function() {
$( this ).appendTo( c );
});
If I am not wrong. You want something like this:
HTML:
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
JS:
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns)
});
}());
CSS:
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
Please see demo here: http://jsfiddle.net/1rf31eyL/
You may check another example demo here: http://gettycreations.com/
first of all
add function in $.each
like
"$("#viewport").each(
function(){
$(this).appendTo(c);
}
);
and then try this,
$("[id=viewport]")
When you use
$("#viewport")
it selects only the first element with the given ID.
However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:
$("[id=viewport]")

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

jQuery: Div elements are not showing up

I am adapting the Coverflow technique to work with a div. Following is the html:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
div.magnifyme {
height: 80px;
padding: 80px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 0px;
height: 470px;
/*border: 2px solid #999;*/
overflow: hidden;
padding-left: 40px;
right: 1px;
width: 824px;
position: relative;
}
div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
div.magnifyme div {
position: absolute;
width: 300px;
height: 280px;
float: left;
margin: 5px;
position: relative;
border: 2px solid #999;
background: #500;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.coverflow.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript">
$(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="magnifyme">
<div id="div0">This is div 0</div>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
<div id="div3">This is div 3</div>
<div id="div4">This is div 4</div>
</div>
</div>
<div class="nav">
<button type="button" id="add">Add to Deck</button>
</div>
</div>
</body>
</html>
The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. The modified coverflow function is given here:
;(function($){
$.widget("ui.coverflow", {
init: function() {
var self = this;
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
//$("div.slider").slider("moveTo", self.current, null, true);
});
this.itemWidth = this.items.outerWidth(true);
this.current = 0; //Start item
this.refresh(1, 0, this.current);
this.element.css("left",
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
);
},
moveTo: function(item) {
this.previous = this.current;
this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
if(this.previous == this.current) return false; //Don't animate when clicking on the same item
var self = this, to = Math.abs(self.previous-self.current) <=1 ? self.previous : self.current+(self.previous < self.current ? -1 : 1);
$.fx.step.coverflow = function(fx) {
self.refresh(fx.now, to, self.current);
};
this.element.stop().animate({
coverflow: 1,
left: (
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
)
}, {
duration: 1000,
easing: "easeOutQuint"
});
/*current = this.current;
$("[id^=div]").each(function() {
if(this.id != "div"+current) {
console.info(this.id + " Current: " + current);
$(this).fadeTo( 'slow', 0.1);
}
});*/
},
refresh: function(state,from,to) {
var self = this, offset = null;
this.items.each(function(i) {
var side = (i == to && from-to < 0 ) || i-to > 0 ? "left" : "right";
var mod = i == to ? (1-state) : ( i == from ? state : 1 );
var before = (i > from && i != to);
$(this).css({
webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
left: (
(-i * (self.itemWidth/2))
+ (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
),
zIndex: self.items.length + (side == "left" ? to-i : i-to)
});
if(!$.browser.msie)
$(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
});
}
});
$.extend($.ui.coverflow, {
defaults: {
items: "> *"
}
});
})(jQuery);
One thing I did notice is that after clicking the button for about 5-10 times, the elements show up but not along with the already present divs but rather below them. I am guessing that this has something to do with the CSS of the magnifyme class (2000px), but I am not sure what it is. Is there any way I can make this work?
You need to write an additional function for the coverflow widget:
add: function(el) {
var self = this;
this.element.append(el)
this.options.items = $('> *', this.element);
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
});
this.itemWidth = this.items.outerWidth(true);
this.moveTo(this.items.length-1);
},
and then call it like so:
$("#add").click(function() {
$("div.magnifyme").coverflow('add', "<div></div>");
});
First, you need to add a references to the jQuery UI core, and it also appears that it requires the jQuery slider plugin.
Second, in your click event you're doing a location.reload, which is refreshing the page from the server, resetting any changes you had made to the page. (if you make the DIVs much smaller you can see one flash in before the page is reloaded).
You are getting a js error on the page -- "$.widget is not a function" because you didn't include the jqueryUI library. http://jqueryui.com/
Also if you remove the location.reload line, your code will work, however, I would rewrite that script block like this, so that everything clearly runs when the document is ready:
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>

Categories