|
JavaScript - Show Custom Javascript Tooltip
I'm using custom javascript tooltips to show information about designs in a t-shirt shop, such as design name and artist. I downloaded the code and CSS for the tooltips and am attempting to assign the tooltip to each design using a javascript array and a for-in loop. Only problem is that the tooltips aren't showing at all, no matter what I do. I think the problem is related to the onmouseover event that I'm using, but the only thing that seems to work even partway is changing the visibility to "show" in the CSS. From that I can see that the text is being assigned to the tooltips properly and that they are being positioned within the window, but the onmouseover event is having no effect either way when I revert the visibility back to "hidden." Help!
Here is the code for the "toolTip.js" file: Code:
// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd
// permission is granted to use this javascript provided that the below code is not altered
function pw()
{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth};
function mouseX(evt)
{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;}
function mouseY(evt)
{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY}
function popUp(evt,oi)
{if (document.getElementById)
{var wp = pw();
dm = document.getElementById(oi);
ds = dm.style;
st = ds.visibility;
if (dm.offsetWidth)
ew = dm.offsetWidth;
else if (dm.clip.width)
ew = dm.clip.width;
if (st == "visible" || st == "show")
{ ds.visibility = "hidden"; }
else {
tv = mouseY(evt) + 20;
lv = mouseX(evt) - (ew/4);
if (lv < 2)
lv = 2;
else if (lv + ew > wp)
lv -= ew/2; lv += 'px';tv += 'px';
ds.left = lv;
ds.top = tv;
ds.visibility = "visible";
}
}
}
Here is the relevant code where I attempt to assign the event to the tooltip visibility change. Note the syntax in SetLinks() function, where the onclick behavior is set. This syntax is working perfectly here. I modelled the 'controlPopUp() syntax similarly, but no go. Code:
window.onload = function()
{
creationCompleteHandler();
}
function creationCompleteHandler()
{
calcNumDesigns();
setLinks();
controlToolTip();
}
function calcNumDesigns()
{
var numDesignBoxes = designImages.length;
var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
{
var newGalleryBox = document.createElement('div');
var newGalleryBoxID = ("galleryRow" + n);
newGalleryBox.setAttribute('id',newGalleryBoxID);
newGalleryBox.setAttribute('class',"galleryBox");
document.getElementById('content').appendChild(newGalleryBox);
squareOff(newGalleryBox);
var rowBoxes;
if ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
else rowBoxes = 2;
for ( m = 0 ; m <= rowBoxes ; m++ )
{
var boxNum = ( n * 3 ) + m;
var newDesignBox = document.createElement('div');
var newDesignBoxID = "design" + boxNum;
newGalleryBox.appendChild(newDesignBox);
newDesignBox.setAttribute('id',newDesignBoxID);
newDesignBox.setAttribute('class',"designBox");
var newDesignImg = document.createElement('img');
var newDesignImgID = "designImg" + boxNum;
newDesignImg.setAttribute('id',newDesignImgID);
newDesignImg.setAttribute('class',"designImage");
newDesignImg.src = designImages[boxNum][0];
newDesignBox.appendChild(newDesignImg);
var newDesignTip = document.createElement('div');
var newDesignTipID = "tt-design" + boxNum;
newDesignTip.setAttribute('class',"tip");
newDesignTip.textContent = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
newDesignTip.innerText = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
newDesignBox.appendChild(newDesignTip);
}
}
}
function squareOff(frame)
{
document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
}
function setLinks()
{
for (var x in designImages)
{
document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
}
}
function sendToURL(x)
{
var url = designImages[x][1]
MM_goToURL('self',url);
return document.MM_returnValue;
}
function MM_goToURL()
{ //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function controlToolTip()
{
for (var x in designImages)
{
var currTip = "tt-design" + x;
document.getElementById( "design" + x ).onmouseover = "controlPopUp( event , " + x + ")";
}
}
function controlPopUp( evt , x )
{
var e = evt;
var currTip = "tt-design" + x;
popUp( e , currTip );
}
Here is the CSS: Code:
.tip {
font:10px/12px Arial,Helvetica,sans-serif;
border:solid 1px #666666;
width:270px;
padding:1px;
position:absolute;
z-index:100;
visibility:hidden;
color:#333333;
top:20px;
left:90px;
background-color:#ffffcc;
layer-background-color:#ffffcc;
}
Thanks in advance for your help! Similar TutorialsHi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.). Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead. Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also. The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above. Thank you Hello! I come to you guys with a javascript problem. I'm using the javascript mouseover called wz_tooltip.js located here. Inside of it, I'm using many variables which have worked perfectly fine. If any variable has a value that conflicts with javascript, I simply do a php str_replace. This has worked perfectly for all but one issue. When one of the $string has a breaking line in it <br />, it breaks the javascript mouseover entirely. I can't figure this out for the life of me. The mouseover code itself is bolded: Code: $placeholders = array("'", "<br />");
$fixup = array("\'", "TEST");
$saPreview2 = str_replace($placeholders, $fixup, $lastxdevel2['pagetext']);
$lastxdevelt2.="<div class='smallfont'><font size='2'><a onmouseover=\"Tip('<b>Title:</b> $saTitle2<br/><b>User:</b> $lastxdevel2[lastposter]<br /><b>Last Post:</b>$agdate2<br/><b>Preview: </b>$saPreview2')\" onmouseout=\"UnTip()\" href='showthread.php?t=$lastxdevel2[threadid]'>$lastxdevel2[title]</a></font></div>";
I tested with other values to make sure that the strings were properly being replaced, and indeed they were. I have the mouseover tooltip set to a specific width. So multiple lines work fine (one line running into another), but if there is a <br /> inside or any form of a formal line break, it literally causes the javascript mouseover script to cease to function. This is impossible to avoid because $string's value is text from a forum post. I'll reiterate that the str replace is working. When I view source, there are no <br/> tags. There are still line breaks though. Why would line breaks in $string cause a javascript mouseover to cease functioning? I have a feeling it must be how the tooltip handles line breaks? Thank you in advance. i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){
$("#d_clip_container").hover(
function () {
$(this).append($('<span class="tip">click to copy</span>'));
},
function () {
$(this).find("span:last").remove();
});
})
i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. Hi all, The question is hopefully relatively simple. if I have an object say Code: [
var SampleObject = function(id){
SampleObject.id = id;
SampleObject.age= 22;
}
Is there a way to create an event that triggers every time the age member value changes? Thanks Ollie. I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax? Also, if you see any ways to make this code better, please post your fixes in this post Code: /*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".
For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>
Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.
If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.
Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/
//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
var c;
for(c in array) {
document.getElementById(array[c]).style.display = "none";
}
click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
click.style.display = "inline";
}}
Hi, I want to build a custom calendar using javascript. On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month. There are 3 button below the calendar as prev mnth,create schedule,next mnth. when prev is clicked it should works same as on load for previous month, similarly for next mnth. Pls help its urgent. Thanks Hi All, Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this: When I use the input type = button or submit, then the calculator works fine BUT I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads I have made the button line in bold. All help appreciated!! Many thanks Here is my code: <html> <head> <script language="JavaScript"> function Framesize(BikeSizer) { var a = parseFloat(BikeSizer.Insleg.value); b = (a * 0.572); c = Math.round(b); BikeSizer.FramesizeCM.value = c; d = (a * 0.226); e = Math.round(d); BikeSizer.FramesizeInch.value = e; } </script> </head> <body> <Form name="BikeSizer"> <!--The visuals for the graphic--> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td> </tr> </table> <table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;"> <tr> <td colspan="2" valign="middle" align="left"> <div style="padding:2px 5px 5px 12px;"> <font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenhöhe</font> <br /><a href="#" style="font-size:10px">Wie messe ich die Schrittlänge richtig?</a></div> </td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td> <td><select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select></td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritthöe:</div></td> <td><input name="Insleg"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td> </td> <td><div style="padding:6px 0 8px 0;"> <input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)> </div></td> </tr> <tr> <td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenhöe:</strong></div></td> <td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> <strong>CM</strong> <br /><br /><input name = "FramesizeInch"> <strong>Zoll</strong> </td> </tr> </table> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td> </tr> </table> </FORM> I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below. http://cetus.ucsd.edu/voicesinthesea.../humpback.html I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom. Thank you! Help. How do I show the below JavaScript code to each unique visitor only once per day or any amount of days I want to set? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <!-- this goes anywhere in the root of the --> <div id="slideIn" style="position:absolute; width: 720px; height: 320px; left: 0; top: -600px; z-index: 100; border: 1px solid gray; padding: 20px; font-family: 14px Verdana, sans-serif, Tahoma, Arial; font-color: black;" <div style="text-align:right"><input type="button" value="CLOSE" onclick="f_slideOut()" style="background: black; color: white; border: 2px solid #dcdcdc;"></div> This is where the content goes blah blah Blah Blah Blah Blah Please help :( </div> <div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div> <script> var s_userAgent = navigator.userAgent.toLowerCase(), s_location = String(window.location).toLowerCase(); // copyright protection var b_mac = s_userAgent.indexOf('mac') != -1, b_ie5 = s_userAgent.indexOf('msie 5') != -1, b_ie6 = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1, b_ieMac = b_mac && b_ie5, b_safari = b_mac && s_userAgent.indexOf('safari') != -1, b_opera6 = s_userAgent.indexOf('opera 6') != -1; var e_slideIn = document.getElementById('slideIn'); var e_slideInShade = document.getElementById('slideInShade'); function f_slideIn() { if (!window.e_slideIn) return; var n_width = e_slideIn.offsetWidth; var n_height = e_slideIn.offsetHeight; var n_left = (f_clientWidth() - n_width) / 2; var n_top = parseInt(e_slideIn.style.top); var n_moveTo = (f_clientHeight() - n_height) / 2; e_slideIn.style.left = n_left + 'px'; e_slideIn.style.visibility = 'visible'; f_customShade(n_width, n_height, n_left, n_top); e_slideInShade.style.visibility = 'visible'; n_slideMove (n_top, n_moveTo); } function n_slideMove (n_top, n_moveTo) { n_inc = Math.round((n_moveTo - n_top) / 20); if (!n_inc) return; n_top += n_inc; f_customShade(null, null, null, n_top); e_slideIn.style.top = n_top + 'px'; setTimeout('n_slideMove(' + n_top + ',' + n_moveTo + ')', 10); } function f_slideOut() { if (!window.e_slideIn) return; e_slideIn.style.visibility = 'hidden'; e_slideInShade.style.visibility = 'hidden'; } function f_clientWidth() { if (typeof(window.innerWidth) == 'number') return window.innerWidth; if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; if (document.body && document.body.clientWidth) return document.body.clientWidth; return null; } function f_clientHeight() { if (typeof(window.innerHeight) == 'number') return window.innerHeight; if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight; if (document.body && document.body.clientHeight) return document.body.clientHeight; return null; } function f_customShade (n_width, n_height, n_left, n_top) { if (!e_slideInShade) return; if (n_width != null) e_slideInShade.style.width = (n_width + 8) + 'px'; if (n_left != null) e_slideInShade.style.left = (n_left - 1) + 'px'; e_slideInShade.style.top = (n_top - 1) + 'px'; if (!e_slideInShade.innerHTML) { if (b_ie5 || b_ie6) e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" colspan="2" width="6"><img src="images/pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_tr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_mr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bl.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_br.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr></table>'; else e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" width="6"><img src="images/pixel.gif"></td><td rowspan="2"><img src="images/pixel.gif"></td><td width="7" height="7"><img src="images/shade_tr.png"></td></tr><tr><td background="images/shade_mr.png" height="' + (n_height - 7) + '"><img src="images/pixel.gif"></td></tr><tr><td><img src="images/shade_bl.png"></td><td background="images/shade_bm.png" height="7" align="left"><img src="images/pixel.gif"></td><td><img src="images/shade_br.png"></td></tr></table>'; } } f_slideIn(); </script> </body> </html> Hey guys, I already saw this post but I wasn't sure if it took care of the question I'm asking. I have the following javascript ad code right before the </body> tag: Code: <script type="text/javascript" src="http://ads.affbuzzads.com/smart_ad/display?ad_unit=18&ref=xxxxx"></script> This is a slider ad that shows every time the person comes to the page I have it on. I'd like to show this ad only once per 24 hours per visitor. Can someone please help me out with code to do this? I'm kinda newbish at this. Thanks so much! I've just finished coding a navigation bar on my website in CSS so the Parent links reveal drop down child links below. It works fine on all pages except for my home where I have an issue with my featured box. I'm using SmoothGallery 2.0 but my menu options don't show over it when I'm the home page, they get cut off and the last few options end up underneath. Is this an issue with trying to use CSS over Javascript? Is it possible to have my menu items show over my javascript? Shall I use a different menu method? or is it an issue with the javascript itself? -Thanks hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
window.onload = function() { document.getElementById('first_div').style.display = 'none';}
function toggle(link, div1id, div2id)
{
var div1 = document.getElementById(div1id);
var div2 = document.getElementById(div2id);
if (div1.style.display == 'none')
{
$('#third_div').hide();
div1.style.display = 'block';
div2.style.display = 'none';
link.innerHTML = 'Login';
} else {
$('#third_div').hide();
div1.style.display = 'none';
div2.style.display = 'block';
link.innerHTML = 'signin';
}
}
function toggleImg(divId)
{
$('#first_div').hide();
$('#second_div').hide();
$('#third_div').show();
}
</script>
</head>
<body>
<div id="first_div" class="container">
<label for="username">
<span>Username:*</span>
<input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" class="text" id="pass" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label>
<input type="checkbox" name="remember" id="remember" class="checkbox" value="1" tabindex="3" /> Remember Me?
</label>
<label>
<input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" />
</label>
</div>
<div id="second_div" class="container1">
<label for="username">
<span>
Username:*</span>
<input type="text" id="username" class="text" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" id="password" class="text" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="repass">
<span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="email_id">
<span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label><input type="submit" name="submit" class="button1" value="Submit" /></label>
</div>
<div id="third_div" class="image">
<img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" />
</div>
<div class="header">
<button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button>
<button class="button_sign" id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button>
</div>
</body>
</html>
I wanted it according to this website https://www.tumblr.com hy guys I have this Ad Script script: <HEAD> section Code: <style type="text/css">
<!--
#sponsorAdDiv {position:absolute; height:1; width:1px; top:0; left:0;}
-->
</style>
<script type="text/javascript">
adTime=10; // seconds ad reminder is shown
chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime)
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
var calunit=ns? "" : "px"
adCount=0;
function initAd(){
if(!ns && !ie && !w3) return;
if(ie) adDiv=eval('document.all.sponsorAdDiv.style');
else if(ns) adDiv=eval('document.layers["sponsorAdDiv"]');
else if(w3) adDiv=eval('document.getElementById("sponsorAdDiv").style');
randAd=Math.ceil(Math.random()*chanceAd);
if (ie||w3)
adDiv.visibility="visible";
else
adDiv.visibility ="show";
if(randAd==1) showAd();
}
function showAd(){
if(adCount<adTime*10){adCount+=1;
if (ie){documentWidth =truebody().offsetWidth/2+truebody().scrollLeft-20;
documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
adDiv.left=documentWidth-200+calunit;adDiv.top =documentHeight-200+calunit;
setTimeout("showAd()",100);}else closeAd();
}
function closeAd(){
if (ie||w3)
adDiv.display="none";
else
adDiv.visibility ="hide";
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
onload=initAd;
//End-->
</script>
right above the </BODY> Code: <div id="sponsorAdDiv" style="visibility:hidden"> <table width="450px" height="350px" bgcolor="#008000"><tr><td> <table width="445px" height="345px" bgcolor="#F0FFF0"><tr><td align="center" valign="middle"> <!--*****EDIT THIS MESSAGE*****--> <!--*****EDIT THE ABOVE MESSAGE*****--> </td></tr></table></td></tr></table> </div> And i trying to find a way to show a div with text and images just once per day using cookies....i like something like this http://javascript.internet.com/cooki...opup-once.html but not with popup. Hy every one, i need help .I have a program made in visual c++ witch detect motion and makes a file.jpg every time when detects something. I would like to make a web pages witch makes the autorefresh with the last image generated by this program. How do i do that with javascript? I think i must declare a golbal variable witch kepps the path to the most younger file, or to make a list witch keeps all the images and sort it ascended but i don't know how to make this in java script. Can enyone help me ?Thanks in advance Hey, I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is: I'm working on a web form. The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues. But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well. BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear... Do you understand what I mean? How do I do this? Thanks in advance! I have a list with two items: Code: <select name="gateway" id="gateway"> <option value="2">PayPal</option> <option value="1">Credit/Debit Card</option> </select> When the second list item is selected, a div with several input fields needs to appear: Code: <div id="hidden_field"> Input fields are placed here. </div> Likewise, if someone selects the first list item, the div should not appear. Does anyone know how to do this with javascript? I am very new to javascript, so your help is greatly appreciated! I used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this? thanks!! Hello everyone. I am building a subscription directory website and I need help developing a code that will perform this function: I want to be able to hide certain spans when another span appears on the page. In other words, the page will normally display <span id="spanA"> and <span id="spanB">. However, when <span id="spanC"> appears on a page, I want to set display:none for spanA and spanB. I know how to toggle between display:none and display:block using a call to a javascript function like a link with an "onClick" Perhaps there a way I could code a span in CSS to toggle this javascript function when it appears on the page? Thank you for any help! I create a webpage where i use pagination where it is predefined that i want to show 10 item per page.But i want to do that when a user logged in he have a option that how many items he wants to show per page?javascriptkit.com site use this type?please any one help me how can i do this?
|
|||||||