I write these code and make it work in IE&chrome&firefox,It works well in chrome and firefox but wrong in IE. somebody tells me why,thanks!
these codes makes a animation when I push start button, I hope it stop when I push stop button,but when I push stop, the alert shows so much times.
ok,this is my code. becareful about your browser, maybe it will crash when the animation is playing.
forgive me about my poor english
<html style = "overflow:hidden">
<script src="jquery-1.7.2.js"></script>
<script>
var DIV ;
var CONTENT ;
var move = false;
$(function(){
DIV = $('<img src="7.png"></img>');
CONTENT = $('#content');
});
function startAnimation(){
$('#content').empty();
var div = $('<img src="7.png"></img>');
div.appendTo('#content');
var w_w=$(document).width();
var d_w=div.width();
var l=w_w/2 - d_w/2;
div.css("position","absolute");
div.css("top",$(document).height()+div.height());
div.css("left",l);
if(!move){
div.animate({top:-div.height(),left:l},1000,function(){
alert('ok');
return;
});
}else{
div.animate({top:-div.height(),left:l},1000,function(){
//setTimeout(function(){
startAnimation.call(window);
return;
});
}
}
function start(){
if(!move){
move = true;
startAnimation();
}
}
function stop(){
move = false;
}
</script>
<body style = "overflow:hidden">
<button onclick="start();">start</button>
<button onclick="stop();">stop</button>
<div id='content' sytle="width:1000px;height:700px;overflow:hidden">
</div>
</body>
</html>
Some Internet Explorer versions does ignore css values; without px at the end of it.
top:200 returns error but top:200px works fine on ie.
Try this:
if(!move){
div.animate({'top':-div.height()+'px','left':l + 'px'},1000,function(){//here
alert('ok');
return;
});
}else{
div.animate({'top':-div.height()+'px','left':l + 'px'},1000,function(){//+'px'
startAnimation.call(window);
return;
});
}
Related
Hi this is my hmtl and JS so far what i would like is for it to detect mousemove, scroll and arrows in the iframe windows as well, as most of the website is in iframe i have looked else where and all seems overly complicated to detect movement.
Any help will be appreciated
thank you
<script type="text/javascript">
// Set timeout variables.
var timoutWarning = 1000; // Display warning in 1Mins.
var timoutNow = 2000; // Timeout in 2 mins.
var warningTimer;
var timeoutTimer;
// Start timers.
function StartTimers() {
warningTimer = setTimeout("IdleWarning()", timoutWarning);
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
}
// Reset timers.
function ResetTimers() {
clearTimeout(warningTimer);
clearTimeout(timeoutTimer);
StartTimers();
$("#timeout").dialog('close');
}
// Show idle timeout warning dialog.
function IdleWarning() {
var answer = confirm("Session About To Timeout\n\n You will be automatically logged out.\n Confirm to remain logged in.")
if (answer){
ResetTimers();
}
else{
IdleTimeout();
}
}
// Logout the user and auto reload or use this window.open('http://www.YourPageAdress.com', '_self'); to auto load a page.
function IdleTimeout() {
window.open(self.location,'_top');
}
</script>
<body onload="StartTimers();" onmousemove="ResetTimers();" onKeyPress="ResetTimers();"
some thing like *
$(".in").on("mouseover",function(){
$(this).css("background","blue");
});
$(".in").on("mouseout",function(){
$(this).css("background","green");
});
.in{width:50px;height:50px;background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="in"></div>
and use multiple like this $("selector").on("mouseover mouseout mousemove",function(){
call back
});
I have following script in the <body>:
<script>
(function($) {
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 iframe'));
vPlayer.on('timeupdate', function(time) {
if ((time.seconds >=580) && (!buttonShowed) ) {
buttonShowed = true;
$('#delayed-button') .css('visibility','visible');
}
});
})(jQuery);
</script>
In the <head>:
<script src="https://player.vimeo.com/api/player.js"></script>
The Vimeo Video got the ID video0 and the button got the ID delayed-button.
On my phone the button shows on 580 seconds but with different browsers (Chrome, Opera, Safari) on my PC the button does not show up.
I really don't why, can you help me?
Try using a div element instead of an iframe and it should work. It seems that timeupdate is not working with iframe.
I've made you a working fiddle here. The full code:
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 #player'));
vPlayer.on('timeupdate', function(time) {
console.log(time.seconds);
if ((time.seconds >= 570) && (!buttonShowed)) {
buttonShowed = true;
$('#delayed-button').css('visibility', 'visible');
}
});
#delayed-button{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://player.vimeo.com/api/player.js'></script>
<div id='video0'>
<div data-vimeo-id="76979871" data-vimeo-autoplay="true" id="player"></div>
</div>
<div id='delayed-button'>
button
</div>
I've spent the last few hours trying to find the answer to this, but nothing seems to work...
I need to execute a piece of code when a div (or anything inside of it; including iframe content) is clicked. The following code should do it (when added into the div tag), but it doesn't seem to work.
onclick="if(typeof(_vis_opt_top_initialize) =='function'){ _vis_opt_goal_conversion(200); _vis_opt_pause(500);}"
The purpose is to execute a custom conversion goal:
<script type="text/javascript">
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
</script>
Any help will be greatly appreciated :)
I hate using inline js... hate it...
If you need to account for IE (<8), then you can't use addEventListener, so you can do something like this:
function bindListener(el,eventName,eventHandler) {
if (el.addEventListener) { // Anything but IE <8
el.addEventListener(eventName,eventHandler,false);
} else if (el.attachEvent) { // For IE <8
el.attachEvent('on'+eventName,eventHandler);
}
}
Then you can call it using something like this:
var ele = document.getElementById('idOfElement');
bindListener(ele, 'click', functionToCall);
Try using addEventListener. Link here. The Example on that page is exactly what you are asking for.
First give your div a unique ID
<div id="yourDivID"></div>
then set the onclick function in window.onload
var yourDiv = document.getElementById("yourDivID");
yourDiv.onclick = function() {
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
}
}
I write simple example for you:(j Query answer)
Html Code
<div class="test">Click</div>
JavaScript Code
$('div.test').click(function(){
alert("some");
});
Demo
Edited
JavaScript example
<html >
<script type="text/javascript">
function AttachAllDivEvents()
{
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++)
{
AttachDivClickEvent(divCollection[i]);
}
}
function AttachDivClickEvent(divObj)
{
divObj.onclick = function()
{
document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
};
}
window.onload = AttachAllDivEvents;
</script>
<body>
<div>click</div>
<p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
</body>
</html>
I recently fixed a prob I had with the sliding field thanks to you so I wanted to ask this problem too.
On the site: http://www.trulyscience.com/test/index.html I have a little box with questions. It slides open when you press it and slides shut when your press again.
Now my problem is that this does not work in IE.
Here is the code:
function loadQuestion(){
var lol;
lol = 1;
jQuery('#question').click(function(){
if (lol==0){
jQuery('#question').animate({height:'300'});
lol = 1;
}else{
jQuery('#question').animate({height:'30'});
lol = 0;
}
});
jQuery('#question').trigger('click'); // Simulating click
}
jQuery(document).ready(function(){
loadQuestion();
});
I think you have a problem with calling loadQuestion() before the question div is available to jQuery, so the click event is never added.
I added a breakpoint and a watch in the ready function which seemed to indicate this at least.
jQuery(document).ready(function(){
// does this print 0 in IE?
console.log(jQuery('#question').length);
loadQuestion();
});
Just to verify you could move the script to the bottom of the page and see if that solves the problem. If it does, I would still investigate why the question div is not available when document ready triggers in IE.
function loadQuestion(){
var lol;
lol = 1;
var invalidElems = {
INPUT : true,
TEXTAREA : true
};
jQuery('#question').click(function(e){
if(e.target.tagName in invalidElems === false){
if (lol==0){
jQuery('#question').animate({height:'300'});
lol = 1;
}else{
jQuery('#question').animate({height:'30'});
lol = 0;
}
}
});
jQuery('#question').trigger('click'); // Simulating click
}
jQuery(document).ready(function(){
loadQuestion();
});
Demo
I am working on a project that requires a sound to play when a link is clicked. Everything works fine, I used the Javascript below. The problem is that it takes about 30 seconds (depending on internet speed) before you actually hear the file because the browser has to download it. Is there a way to adapt the code below to display an indicator that the file is loading?
<bgsound id="sound">
<script>
function PlaySound(url) {
document.all.sound.src = url;
}
</script>
and this on as the link:
Play
A forewarning that "bgsound" is proprietary to Internet Explorer, as far as I know. Having said that, you can subscribe to its "readystatechage" event to find out when it's done loading.... (untested! as I don't have IE)
<div id="soundLoading" style="display: none;"><img src="someani.gif" /></div>
<bgsound id="sound">
<script>
function PlaySound(url) {
// Setup some loading animation here......
document.all.soundLoading.style.display = "inline";
// Add event listener and set the sound source
sound.onreadystatechange = CheckSoundLoaded;
document.all.sound.src = url;
}
function CheckSoundLoaded() {
if(document.all.sound.readyState == 4) {
// sound is loaded, remove loading animation
document.all.soundLoading.style.display = "none";
}
}
</script>
http://www.highdots.com/forums/javascript/finding-when-bgsound-downloads-47830.html
Simple
The simplest method is to replace the 'Play' text for the link with 'Loading...':
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = 'Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is a demo JS Fiddle.
More Advanced
Another option is to replace the anchor's text with an animated gif:
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = '<img src="http://www.fordesigner.com/pic/zip/200916124527437778027.gif"/> Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is an example JS Fiddle.