I want to create random top , right for each div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.cube {
width:50px;
height:50px;
background-color:red;
border-radius:25px;
position:absolute;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
var Wh = window.innerHeight;
var number = 1 + Math.floor(Math.random() * Wh);
$('.cube').each(function() {
$(this).css({"right":number+"px","top":number+"px"});
});
});
</script>
</head>
<body>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</body>
</html>
i don't know why each function not working here !
i see only one div changed , how can i fix this ?
Close your <div>s and change ID to classes:
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
Now, I think you want to apply a different position to each cube, so alter your code like this:
$(function () {
var Wh = window.innerHeight;
$('.cube').each(function() {
var number = 1 + Math.floor(Math.random() * Wh);
$(this).css({"right":number+"px","top":number+"px"});
});
});
The $(this) part is important, as it applies the positioning to a single DOM element, and not all elements with a class of .cube.
UPDATE
Also move your random number generator into the each function, so that a new number will be generated each time.
Booo, you cant do this: <div id="cube"><div id="cube"><div id="cube">
Id must be unique at ALL times. You need to use class. Like so: <div class="cube">
In JavaScript reference it by $('.cube')
Also close those divs man.
Your JavaScript should look like:
<script>
$(function () {
var wh = window.innerHeight;
$('.cube').each(function() {
var number = 1 + Math.floor(Math.random() * wh);
//$(this) refers to the current object in the 'each' iteration
$(this).css({"right":number+"px","top":number+"px"});
});
});
</script>
Related
I am developing a jquery plugin and the problem I have is that when trying to pass settings, works with two of the three options I try to set. When I want to pass the "fadeIn" effect does not display me anything and stops working. This is my code:
// JavaScript Document
jQuery.fn.slider = function(opciones) {
var configuracion = {
efecto: "fadeIn",
velocidadEfecto: 1000,
tiempoPausa: 3000
}
jQuery.extend(configuracion, opciones);
this.each(function() {
elem = $(this);
elem.find('div:gt(0)').hide();
//$('#imagenes div:gt(0)').hide();
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);
});
return this;
};
#imagenes {
width: 200px;
height: 200px;
border: 1px solid grey;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin tÃtulo</title>
<script type="text/javascript">
$(document).ready(function() {
$("#imagenes").slider({
efecto: "slideUp",
velocidadEfecto: 2000,
tiempoPausa: 4000
})
});
</script>
</head>
<body>
<h2>Slider</h2>
<div id="imagenes">
<div>
<img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" id="foto1" />
</div>
<div>
<img src="http://davidnaylor.org/temp/firefox-logo-200x200.png" id="foto2" />
</div>
<div>
<img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" id="foto3" />
</div>
</div>
</body>
</html>
I don't understand why "slideUp" effect not working. Thank you!
Regards! :-)
You can reference methods and attributes via string names, like "fadeIn" in your example, but you have to use bracket [] notation, not dot .
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);
If you don't use brackets, Javascript is going to look for a configuracion property on the next('div') object, with an efecto method attached to it (which isn't the case). Using brackets works out to .next('div')['fadeIn'](configuracion.velocidadEfecto) because configuracion.efecto is evaluated to its string value.
Hope this helps.
I am trying to make a progress bar just for looks, but it doesn't work. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
#loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
#loadingdiv {position:relative;top:47%;left:43%;width:180px;height:55px;}
#loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;}
#loadingbarprogress {position:relative;top:0px;left:0px;height:100%;width:0%;background-color:#400040;}
#loadingtext {position:relative;top:13%;left:46%;}
</style>
<script>
var progress = document.getElementById('loadingbarprogress');
loadingbar(progress, 500);
function doMove() {
progress.style.width = parseInt(progress.style.width) + 1 +'%';
if (progress.style.width = '100%') {
progress = null;
}
setTimeout(doMove,20);
}
</script>
</head>
<body>
<div id="loader">
<h1 id="loadertitle">Site</h1>
<div id="loadingbar">
<div id="loadingbarprogress">
</div>
</div>
<p id="loadingtext">Loading...</p>
</div>
</body>
</html>
I have a div for the loader, a div for the progress, and some script containing a loop (that might not work), changing the width of the progress div.
Fixed code:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
#loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
#loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;border:none}
#loadingbar::-moz-progress-bar {background-color:#400040;}
#loadingtext {position:relative;top:13%;left:46%;}
</style>
<script>
var bar = document.getElementById('loadingbar');
for (int x = 0; x <= 100; x++) {
bar.value = x;
}
</script>
</head>
<body>
<div id="loader">
<h1 id="loadertitle">Site</h1>
<progress id="loadingbar" value="10" max="100"></progress>
<p id="loadingtext">Loading...</p>
</div>
</body>
</html>
Thanks, Cameron!
HTML5 now has a progress element.
You can get a lot of customisation in some browsers. See the link to css-tricks above, it goes into a fair amount of detail.
<progress max="100" value="80" id="progress_bar"></progress>
Then you can just update the value attribute using javascript, with whatever data source your progress comes from.
If you just want it to increase at a steady rate, use a simple setTimeout:
var progress_element = document.getElementById('progress_bar');
function stepProgress() {
progress_element.value += 1;
if(progress_element.value < 100) {
setTimeout(stepProgress, 100);
}
};
You may need to use parseInt on your progress_element.value, or just have a separate counter variable.
There is a problem in your code. So far I noticed this:
if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !
EDIT:
Try this then
if (progress.style.width == '100') {
I know this is a really simple question, but I need to replace this bit of text in a paragraph with a variable every time an even fires.
The markup looks like this
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {width:100%; text-align:center; }
#heading {width:100%; text-align:center; }
</style>
</head>
<div id="heading">
<h1>hello</h1>
</div>
<body>
<div id="container">
<textarea name="mytextarea" cols="60" rows="40"></textarea>
</div>
</body>
</html>
What I need is where it says "hello" in the tags, is for that to be a variable that van be replaced by a string that I will generate.
You could create a function that looks something like this.
function replaceTitle (replaceText) {
document.getElementById("heading").getElementsByTagName("h1")[0].innerHTML = replaceText;
}
If you are using jQuery it could look more like this.
function replaceTitle (replaceText) {
$("#heading h1").html(replaceText);
}
Then you call the function like this
replaceText(yourVariable);
It would probably be better to give your <h1> tag an id or a class so you can reference it directly, but I am going to assume that you have good reason for not doing so.
One example on how can be simple things made complicated :)
javascript:
// simple way:
function replace_text(text) {
var heading = document.getElementById('heading');
heading.innerHTML = '<h1>' + text + '</h1>';
}
// complicated way:
function replace_text2(text) {
var heading = document.getElementById('heading');
var node = heading.childNodes[0];
while ( node && node.nodeType!=1 && node.tagName!='H1' ){
//console.log(node.nodeType,node);
node = node.nextSibling;
}
if (node) {
node.replaceChild(document.createTextNode(text),node.childNodes[0]);
}
}
html:
<input type="button" onclick="replace_text('HELLO 1!');" value="Replace 1st text" />
<input type="button" onclick="replace_text2('HELLO 2!');" value="Replace 2nd text" />
The script is here.
I would like to create a "LiveChat Offering" pop-up that appears in the bottom of the screen after our visitors arrive at a specific page, and have been on that page for say 30 seconds or so. I would like to keep the code jQuery/CSS if at all possible.
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">Some jQuery that will change the 'display:hidden;' to 'display:block;' on the DIV after 30 seconds</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
Looks like you already got the position part, and you are asking about the delay part?
Something with setTimeout like this could work
$(document).ready(function() {
setTimeout(function() {
$('#live-chat').show();
}, [delay in ms]);
}
You probably also want to change the .show() to have some kind of effect to alert the user that it appeared.
Try this:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
Good luck!
Edit:
For sliding it in:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// Store our panel into a variable.
var $myPanel = $("#live-chat");
// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());
// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" });
// Set a timeout for the panel to slide and fade in.
setTimeout(function() {
$myPanel.animate({
// The CSS properties we want to animate (opacity and bottom position).
opacity: 1,
bottom: '0'
}, 2000, function() {
// Animation complete.
// You can put other code here to do something after it has slid-in.
});
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position: absolute; bottom: 0px; right:100px; z-index:5;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
The following is a starting point that has the functionality I asked for :) Thanks everyone! I used Michael's example...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 5000); // 30 seconds in MS
});
</script>
</head>
<body>
<div id="live-chat" style="width:250px; height:150px; position:absolute; bottom:0px; right:100px; z-index:5; display:none; border:#ccc 1px dashed;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
</body>
</html>
You can use the delay function of jQuery
$(document).ready(function() {
var miliseconds = 30000 //30 seconds
$("#live-chat").delay(miliseconds).hide();
}
here is a jsfiddle example for your code: jsfiddle
I am trying to rotate some images. Works great except I get a strange "flicker" on some of the transitions. Any suggestions what I am doing wrong? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#test img {position: absolute;right: 0;top: 0;}
#test img:last-child {display: none;}
</style>
<script>
function rotateImage()
{
var $images=$('#test img');
$images.eq(1).attr({src : files[index]});
$images.eq(0).fadeOut(1000);
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).attr('src', files[index]);
$images.eq(0).show();
$images.eq(1).hide();
if (index == files.length-1){index = 0;}else{index++;}
});
}
var index=1,files=['f1.jpg','f2.jpg','f3.jpg'];
setInterval(rotateImage, 2000);
</script>
</head>
<body>
<div id="test"><img src="f1.jpg" alt="" /><img src="f1.jpg" alt="f1.jpg" /></div>
</body>
</html>
Flickering is happening because of this
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).attr('src', files[index]);
$images.eq(0).show();
$images.eq(1).hide();
if (index == files.length-1){index = 0;}else{index++;}
}
);
After the fadeIn of image at index 1, source is set for image at index 0 and it is shown immediately. This results in flickering.
What you have to do is swap the images.
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).remove().appendTo('#test'); // swaps the image indices
if (index == files.length-1){index = 0;}else{index++;}
});
See demo here : http://jsfiddle.net/diode/SeL3M/4/
try using the jquery cycle plugin. in has a fade that works great
It works fine in Firefox when you add a small time delay between showing and hiding an element (I've done it by using fadeIn(100, function() in jsfiddle bellow).
http://jsfiddle.net/SeL3M/
You can read more about this behavior here:
unwanted "flickering" effect when using hide and show in jquery