Hi I am doing a project in computing for school. I need to get my drag able jQuery box to interact with my traffic lights( my traffic lights are on a cycle) when the box touches i need to traffic light cycle to start, is this possible? any help would be much appreciated,
Here is my code so far;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightscentre = 0
var timer
function ChangeImage() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function LightCycle() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function stopCycle() {
clearTimeout(timer)
}
</script>
</head>
<body>
<img src="red.png" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="ChangeImage()">
<input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
You can use drag event:
function init() {
var $light = $('img');
var $draggable = $('#makeMeDraggable').draggable({
drag: function( event, ui ) {
var light_offset = $light.offset();
if (ui.offset.left < light_offset.left+$light.width() &&
ui.offset.left + $draggable.width() > light_offset.left &&
ui.offset.top + $draggable.height() > light_offset.top &&
ui.offset.top < light_offset.top+$light.height()) {
if (!timer) {
LightCycle();
}
} else {
clearTimeout(timer);
timer = null;
}
}
});
}
JSFIDDLE
Either you could do the function in Jquery, for the animation(?) or what you were planning. Else, you can convert Jquery variables in JS to use them in your functions. The best way would be to take any GET/POST and do those in Jquery and do everything else in JS, or the data fetching part.
Also, good luck with your project. Feel free to hit me up at #ev1stensberg ( twitter) and chat.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightsCentre = 0;
var timer = setInterval(function {
window.location.reload()
}, 3000);
var turnOnTheLights = function(e) {
e.preventDefaults();
switch(lights) {
case (document.getElementbyId('redLights').onClick == true) :
return lights[0]
setTimeout(function() {
console.log("hello"),
}, 3000);
case(document.getElementbyId('redLights').onClick == true &&
return lights[0] == true) :
return lights[1].
setTimeout(function() {
console.log("I'm a terrible programmer");
}, 3000)
case(document.getElementbyId('redLights').onClick == true &&
return lights[1] == true) :
return clearInterval(timer)
break;
default: window.location.reload();
}
return lights;
}
var turnOffTheLights = function(e) {
e.preventDefaults();
return window.setTimeout(function() {
console.log("Heyho"), 3000
});
}
</script>
</head>
<body>
<img src="red.png" id ="redLights" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="turnOnTheLights()">
<input type="button" value="Stop" name="Stop" onclick="turnOffTheLights()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<title>stoplight</title>
<link rel="stylesheet" type="text/css" href="stoplight.css">
</head>
<body>
<div id="controls">
<button id="stop">Stop</button>
<button id="slow">Slow</button>
<button id="go">Go</button>
<button id="caution">Caution</button>
</div>
<div id="mainContainer">
<div id="top" class="off">
</div>
<div id="middle" class="off">
</div>
<div id="bottom" class="off">
</div>
</div>
<script type="text/javascript" src="stoplight.js"></script>
</body>
</html>
Basically, I'm just trying to select each div of the stoplight and change the background color. First, I thought I could just reset each div to its original color. I'm trying to do the same with the setInterval function that starts a flashing yellow light, but it doesn't seem to stop it and breaks the rest of the functions.
document.getElementById('stop').onclick = goRed;
document.getElementById('go').onclick = goGreen;
document.getElementById('slow').onclick = goYellow;
document.getElementById('caution').addEventListener('click', () => {
blink();
});
let middle = document.getElementById('middle');
let blinking;
function goRed() {
reset();
document.getElementById('top').style.backgroundColor = '#FF0000';
};
function goYellow() {
reset();
middle.style.backgroundColor = '#FFFF00';
};
function goGreen() {
reset();
document.getElementById('bottom').style.backgroundColor = '#7FFF00';
};
function blink(){
reset();
blinking = setInterval(() => {
middle.classList.toggle('onYellow');
}, 1000);
};
function reset() {
document.getElementById('top').style.backgroundColor = '#A0522D';
document.getElementById('middle').style.backgroundColor = '#A0522D';
document.getElementById("bottom").style.backgroundColor = '#A0522D';
clearInterval(blinking);
};
You are mixing in-style coloring, with class based coloring, and in some cases, the browser will decide which gets a priority. Unless you add !important in the class background to enforce the attribute.
I suggest removing all in-style coloring and sticking only to classes so that you will not have to use !important.
This way, it is easier to work with blinking and setInterval.
See my code snippet below.
document.getElementById('stop').onclick = goRed;
document.getElementById('go').onclick = goGreen;
document.getElementById('slow').onclick = goYellow;
document.getElementById('caution').addEventListener('click', () => {
blink();
});
let middle = document.getElementById('middle');
let blinking;
function goRed() {
reset();
document.getElementById('top').className = "onRed";
};
function goYellow() {
reset();
middle.className = "onYellow";
};
function goGreen() {
reset();
document.getElementById('bottom').className = "onGreen";
};
function blink() {
reset();
blinking = setInterval(() => {
middle.classList.toggle('onYellow');
middle.classList.toggle('onOff');
}, 1000);
};
function reset() {
document.getElementById('top').className = "onOff";
document.getElementById('middle').className = "onOff";
document.getElementById("bottom").className = "onOff";
clearInterval(blinking);
};
#mainContainer div {
border: 1px solid grey;
width: 40px;
height: 40px;
border-radius: 40px;
}
.onYellow {
background-color: #ffff00;
}
.onOff {
background-color: #A0522D;
}
.onGreen {
background-color: #7FFF00;
}
.onRed {
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<title>stoplight</title>
<link rel="stylesheet" type="text/css" href="stoplight.css">
</head>
<body>
<div id="controls">
<button id="stop">Stop</button>
<button id="slow">Slow</button>
<button id="go">Go</button>
<button id="caution">Caution</button>
</div>
<div id="mainContainer">
<div id="top" class="off">
</div>
<div id="middle" class="off">
</div>
<div id="bottom" class="off">
</div>
</div>
<script type="text/javascript" src="stoplight.js"></script>
</body>
</html>
i have this file in which i want to find height of DIV with id "cpDocument" with the help of jquery. This DIV can be seen inside documen.body.innerHTML in line number 46.
index_scorm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title></title>
<script src="../../jquery.min.js"></script>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>
<script>
var deviceReady = false;
var initCalled = false ;
var initialized = false;
function onBodyLoad()
{
if(typeof window.device === 'undefined')
{
document.addEventListener("deviceready", onDeviceReady, false);
}
else
{
onDeviceReady();
}
}
function onDeviceReady()
{
deviceReady = true ;
if(initCalled === true)
initializeCP();
}
function initializeCP()
{
if(initialized)
return;
initCalled = true ;
if(cp.pg && deviceReady === false)
return;
function cpInit()
{
document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' > <div id='main_container' style='top:0px;position:absolute;width:100%;height:100%;'> <div id='projectBorder' style='top:0px;left:0px;width:100%;height:100%;position:absolute;display:block'></div> <div class='shadow' id='project_container' style='left: 0px; top:0px;width:100%;height:100%;position:absolute;overflow:hidden;' > <div id='project' class='cp-movie' style='width:100% ;height:100%;overflow:hidden;'> <div id='project_main' class='cp-timeline cp-main'> <div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:100% ;height:100% ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div> <canvas id='slide_transition_canvas'></canvas> </div> <div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'> <img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/> <div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div> </div> </div> <div id='toc' style='left:0px;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'> </div> <div id='playbar' style='bottom:0px; position:fixed'> </div> <div id='cc' style='left:0px; position:fixed;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'> <div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'> <p style='margin-left:8px;margin-right:8px;margin-top:2px;'> </p> </div> <div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:10px; position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'> </div> </div> <div id='gestureIcon' class='gestureIcon'> </div> <div id='gestureHint' class='gestureHintDiv'> <div id='gImage' class='gesturesHint'></div> </div> <div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> <div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> </div> </div></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'> <table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'> <tr style='width:100%;height:100%;text-align:center;vertical-align:middle'> <td style='width:100%;height:100%;text-align:center;vertical-align:middle'> <image id='preloaderImage'></image> <div id='loadingString' class='loadingString'>Loading...</div> </td> </tr> </table></div> <div id='initialLoading'></div>";
cp.DoCPInit();
var lCpExit = window["DoCPExit"];
window["DoCPExit"] = function()
{
if(cp.UnloadActivties)
cp.UnloadActivties();
lCpExit();
};
}
cpInit();
initialized = true;
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='initialLoading'></div>
<script>
(function()
{
if(document.documentMode < 9)
{
document.body.innerHTML = "";
document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.<br>To change the Document Mode, press F12, click Document Mode: <current mode>, and then select Internet Explorer 9 Standards.");
return;
}
window.addEventListener("load",function()
{
setTimeout(function()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'assets/js/CPXHRLoader.js';
script.defer = 'defer';
script.onload = function()
{
var lCSSLoaded = false;
var lJSLoaded = false;
function constructDIVs()
{
if(lCSSLoaded && lJSLoaded)
{
initializeCP();
}
}
cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {
lCSSLoaded = true;
constructDIVs();
});
var lJSFiles = [ 'assets/js/jquery-1.6.1.min.js','scormdriver.js','assets/js/CPM.js' ];
cpXHRJSLoader.js(lJSFiles,function()
{
//console.log("js loaded");
lJSLoaded = true;
constructDIVs();
});
}
document.getElementsByTagName('head')[0].appendChild(script);
},1);
},false);
})();
</script>
<noscript style="text-align:center;font-size:24px;">Enable Javascript support in the browser.</noscript>
</body>
</html>
Iam trying to do something like this with no luck:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("body").on('load', function() {
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);
});
});
</script>
The script for finding the height of the element can be the last list of initializeCP() function eg.
cpInit();
initialized = true;
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);
I have an HTML5 (jsp) page with a link (here) to another page which has a link on it (Home) that, when clicked, pops up a message. However, the message pops up when the page is loaded, which is undesirable. Would someone please look at the below code and give me a solution/suggestion as to how to prevent this behavior? Thank you.
HTML link on first page:
<td class="align-left">Click here</td>
JavaScript:
<script>
function fnCallActionOnSelf(actionName)
{
if(actionName == "newpage.htm"){
nullPageValues(); //here link does not like special characters like apostrophes being sent over by the GET
}
document.forms[0].method = "GET";
document.forms[0].target = '';
document.forms[0].action = actionName;
document.forms[0].submit();
}
function nullPageValues() {
//This is for the here link because it does not like special characters like apostrophes being sent over by the GET
document.getElementById('textField1').value="";
document.getElementById('password').value="";
document.getElementById('Name').value="";
document.getElementById('Address').value="";
document.getElementById('City').value="";
document.getElementById('PhoneNumber').value="";
}
</script>
Jsp page that here link points to:
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta content="IE=9; IE=8; IE=7; IE=EDGE; chrome=1" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="Pragma">
<meta content="0" http-equiv="Expires">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">
</head>
<body>
<div id="container">
<center>
<div style="width: 960px;">
<div>
<div id="Help"
style="vertical-align: middle; display: table-cell;">
<jsp:include page="Help.jsp">
<jsp:param name="isHome" value="no" />
</jsp:include>
</div>
</div>
</div>
</center>
</div>
<div style="clear: both"></div>
<form:form method="post" name="newform"
id="newform" commandName="newformModel" data-parsley-validate="true">
</form:form>
<!-- Lots of stuff here -->
<script src="/project/js/prototype.js" type="text/javascript"></script>
<script src="/project/js/scripts.js" type="JavaScript"></script>
<script src="/project/js/global.js" type="text/javascript"></script>
<script src="/project/js/civem.js" type="text/javascript"></script>
<script src="/project/js/jquery-1.10.2.min.js"></script>
<script src="/project/js/jquery.validate.min.js"></script>
<script src="/project/js/jquery-ui.js"></script>
<script src="/project/js/plugin.js"></script>
<script src="/spiaprojectweb/js/validation.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</body>
</html>
Home link jsp page:
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
$( "#dialog" ).dialog();
});
});
function fnCallActionOnSelf(actionName) {
document.forms[0].target = '';
document.forms[0].method = "POST";
document.forms[0].action = actionName; <script>
document.forms[0].submit();
}
function openWindow(anchor)
{
window.open(anchor,'NewWindow','status=0,toolbar=0,resizable=yes,scrollbars=1,width=800,height=600');
}
function findPosition( oElement )
{
oElement=document.getElementById(oElement);
if( typeof( oElement.offsetParent ) != 'undefined' )
{
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return posX;
}
else
{
return posX;
}
}
var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
var salesAidesPos=findPosition('salesLiId');
salesAidesPos-=20;
ddmenuitem.style.left=salesAidesPos+'px';
ddmenuitem.style.visibility = 'visible';
}
function mopenHelp(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
var salesAidesPos=findPosition('helpId');
salesAidesPos-=40;
ddmenuitem.style.left=salesAidesPos+'px';
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem)
{
ddmenuitem.style.left='0px';
ddmenuitem.style.visibility = 'hidden';
}
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<div id="navcontainer" class="header">
<span class="headtitle"></span> <span class="utility">
<ul class="dropdown">
<span id="helpId">
<li class=""><a name='lnkViews' href="javascript:void(0);" onmouseout="mclosetime()"
onmouseover="javascript: mopenHelp('helpDiv');">Help</a></li>
</span>
</ul>
</span>
</div>
<div id="dialog" title="Help" style="display:none;">
<p><b>Help Message</b></p>
</div>
<div id="spacer">
<img src="/project/img/spacer.gif" />
</div>
<script type="text/javascript">
function setUpdateMessagePosition(oElement) {
oElement = document.getElementById(oElement);
if (typeof (oElement.offsetParent) != 'undefined') {
for ( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
if (document.getElementById("updateMsg") != null) {
posX = posX + 8;
posY = posY + 3;
document.getElementById("updateMsg").style.left = posX + "px";
document.getElementById("updateMsg").style.top = posY + "px";
}
}
}
I don't know what much of the above means, or whether it is necessary, but it seems to me that all the action (the code of interest) is in the below snippets from the above jsp file:
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
$( "#dialog" ).dialog();
});
});
</script>
<li class=""><a name='lnkViews' href="javascript:void(0);" onmouseout="mclosetime()"
onmouseover="javascript: mopenHelp('helpDiv');">Help</a></li>
<div id="dialog" title="Help" style="display:none;">
<p><b>Help Message</b></p>
</div>
This is a good time for using sessionStorage! You can do it like this. Change this part of your code:
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
$( "#dialog" ).dialog();
});
});
</script>
to this:
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
if (sessionStorage.visitedalready) {
sessionStorage.visitedalready= 1;
}
else{
$( "#dialog" ).dialog();
}});});
</script>
That session storage variable will be automatically removed once your session was ended.
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
if (sessionStorage.visitedalready) {
sessionStorage.visitedalready= 1;
}
else{
$( "#dialog" ).dialog();
}});});
</script>
I'm not sure how this worked, but I changed the name of my div to an id and renamed the id to helpDialog and changed to use that in the $(document).on function. Then I got rid of the 'e' in the function parameter list for the function in the $(document).on parameter list. That fixed the problem. I'm not sure which of these did the trick.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Hello Flot</title>
<link class="include" rel="stylesheet" type="text/css" href="/static/jqplot/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/static/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.selection.js"></script>
<script type="text/javascript" src="/static/jqplot/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/jqplot/jquery.jqplot.js"></script>
<body>
<div id="output_plot_container" style="float:left; width: 800px; height: 600px"></div>
<button onclick="updateChart()">Try it</button>
<script >
var plot1 = $.jqplot ('output_plot_container', [[1,2,3,4]], {
title : 'Demodulated signal',
cursor:{zoom:true}
});
var url = "/sensor/demodulated_debug_data";
var updateChart = function() {
$.getJSON(url, function(newdata) {
console.log(newdata);
for (var f_id in newdata)
if (newdata.hasOwnProperty(f_id)) {
if (f_id == 'demodulated') {
plot1.series[0].data = newdata[f_id];
plot1.replot({ resetAxes: true } );
}
}
})
};
timer = setInterval(function(){updateChart()}, 1000);
console.log('still running');
</script>
</body>
</html>
I'm reading documentation and I just can't figure out why it doesn't show the cursor to me.
Try this, it works for me
$(document).ready(function () {
$('#output_plot_container').on('jqplotDataHighlight', function () {
$('.jqplot-event-canvas').css('cursor', 'pointer');
});
$('#output_plot_container').on('jqplotDataUnhighlight', function () {
$('.jqplot-event-canvas').css('cursor', 'auto');
});
});
or
.pointerlink
{
cursor: pointer;
}
<div id="output_plot_container" class="pointerLink" ...>
Turned out that I should include jqplot before the cursor in this html.
I can make the button appear after 5 seconds. I'd like to be able to click the button and go to a different site (like google.com, for example). Help please?
<style type="text/css">
#buy_button_image { display: none; }
</style>
<script type="text/javascript">
window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
img.style.display = "block";
};
window.setTimeout(_t, 5000);
window.clearTimeout(_t);
};
</script>
</head>
<body>
<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
</body>
</html>
Change this:
<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
To:
<div id="buy_button_image"><img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png"></div>
Use an a tag:
Note that your clearTimeout does nothing. Take a look at the setTimeout() and clearTimeout() references.
<html>
<head>
<style type="text/css">
#buy_button_image { display: none; }
</style>
<script type="text/javascript">
window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
img.style.display = "block";
};
window.setTimeout(_t, 5000);
};
</script>
</head>
<body>
<a href="http://www.pumaskills.com" id="buy_button_image">
<img style="border: medium none ;" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
</a>
</body>
</html>
Try it out with this jsFiddle
Anchor tag?
<style type="text/css">
#buy_button_image { display: none; }
</style>
<script type="text/javascript">
window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
img.style.display = "block";
};
window.setTimeout(_t, 5000);
window.clearTimeout(_t);
};
</script>
</head>
<body>
<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
</body>
</html>