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
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 play a video in IE9 and earlier versions. For that I used activeX plugin to load VLC Media Player (that is my basic requirement).
When I tried to execute my code I got an error thrown:
Unable to get value of the property 'playlist': object is null or undefined
My code as follows:
<!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>VLC API</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function(){
play();
displayPlugins();
$(function(){
$("#vlc").css({ "width": "400px", "height": "300px" });
});
});
function play()
{
var vlc=document.getElementById("vlc");
alert("play video");
var url="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov";
var options=new Array(":aspect-ratio=4:3","-rtsp-tcp");
var id= vlc.playlist.add(url,"",options);
vlc.playlist.playItem(id);
}
function displayPlugins()
{
alert("plugins");
var player="<object type='application/x-vlc-plugin' id='vlc' width='300' height='225' classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase='http://activex.microsoft.com/controls/vb5/comdlg32.cab'></object>";
$("#video_holder").html(player);
}
</script>
</head>
<body>
<div id="video_holder" style="border:1px solid #00FF33; height:350px;"></div>
</body>
Can anybody help me where I'm getting wrong?
You are doing:
var vlc=document.getElementById("vlc");
But on HTML, you have
<div id="video_holder" style="border:1px solid #00FF33; height:350px;"></div>
So in theory you want:
var vlc=document.getElementById("video_holder");
You might have more problems after that, but start here.
I want to detect mouse speed, for example the event will be fired only if the detected number is greater than 5
I found one example which I think is something similar: http://www.loganfranken.com/blog/49/capturing-cursor-speed/
but i am not able to make it see the number which is inside div and fire the event based on the resulting number, this is my attempt:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cursometer.1.0.0.min.js"></script>
<script>
$(function() {
var $speedometer = $('#speedometer');
$('#test-area').cursometer({
onUpdateSpeed: function(speed) {
$speedometer.text(speed);
},
updateSpeedRate: 20
});
$("#test-area").mouseover(function(){
if(this.value > 5) {
console.log("asdasd");
}
else {
console.log("bbb");
}
})
});
</script>
<style>
#test-area
{
background-color: #CCC;
height: 300px;
}
</style>
</head>
<body>
<div id="test-area"></div>
<div id="speedometer"></div>
</body>
</html>
(I'm the author of the plug-in that's causing the trouble here)
The example isn't working because this.value isn't referring to the speed (it's undefined). Here's an updated version of your example:
http://jsfiddle.net/eY6Z9/
It would probably be more efficient to store the speed value in a variable rather than within the text value of an HTML element. Here’s an updated version with that enhancement:
http://jsfiddle.net/eY6Z9/2/
Hope that helps!
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 want to expand hidden text on a webpage and after some (re)search on google i came across the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function Expand(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
function Collapse(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
function Toggle(node)
{
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none')
{
Expand(node);
}
// Collapse the branch if it IS visible
else
{
Collapse(node);
}
node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none')? 'More...' : 'Less...';
}
</script>
</head>
<body>
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Now the script displays a .gif image of a plus sign(expand) with 'More...' beside it and when the .gif file or the 'More...' is clicked the hidden text appears and the plus.gif is replaced with a minus.gif and 'More...' changes to 'Less...'
but i want to implement it in another way, i want that once the expand (plus.gif) is clicked, no other .gif should appear again, i dont know how to modify the code to do it, so friends please help me out
i am a newbie in javascript so such a dumb doubt had to come
Thanx :)
Just change your code to this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function ExpandDelete(node)
{
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display = '';
node.parentNode.removeChild(node);
}
}
</script>
</head>
<body>
<a onclick="ExpandDelete(this);" style="cursor:pointer;"><img src="plus.gif" alt="Expand" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>