|
JavaScript - Javascript Promp Box Won't Show Up, Any Ideas?
Hi. I'm new to javascripting and i'm trying to familiarise myself with it for my uni course. The code i'm trying to run is below, but for some reason it doesn't work. It is supposed to bring up a prompt box asking for the date of birth, but it doesn't. Can anyone figure out why? Any help would be much appreciated.
Code: <html>
<head>
<title>Numerological Reading</title>
<script type="text/javascript">
// Numerological Horoscope
var golden = 0;
var birthdate = null;
var planet = null;
// prompt for input and check to see that the input is 8-digit number
while (birthdate.length != 8 || isNaN(parseInt(birthdate)))
{
birthdate = prompt("Please enter your date of birth as an 8-digit number DDMMYYYY","");
}
// calculate the golden number in range 1..9
golden = eval(birthdate) % 9;
if (golden==0) golden=9;
// now work out ruling planet
switch (golden)
{
case 1 : planet = "The Sun"; break;
case 2 : planet = "The Moon"; break;
case 3 : planet = "Jupiter"; break;
case 4 : planet = "Sun/Uranus"; break;
case 5 : planet = "Mercury"; break;
case 6 : planet = "Venus!; break;
case 7 : planet = "Moon/Neptune"; break;
case 8 : planet = "Saturn"; break;
case 9 : planet = "Mars"; break;
// TO BE DONE: put in the other cases...
default: planet = "Unknown"; break;
}
// finally, write the page
document.write("Your golden number is ");
document.write(golden);
document.write("<br>Your ruling planet is "+planet);
</script>
</head>
<body>
</body>
</html>
Samii x Similar TutorialsDoes any one have any ideas for javascript homepage apps
Hello javascript experts... I am following this blog on calling web service in javascript. I am getting syntax error, in my javascript... Code: <action trigger="onLoad">
<!--
mainWindow.visible = true;
<script
type="text/javascript"
src="prototype.js"></script>
<script
type="text/javascript"
src="ws.js"></script>
<script type="text/javascript">
function getSalesXml(name, container) {
var call = new WS.Call('<url to the wsdl>');
var nsuri = 'http://example';
var qn_op = new WS.QName('<functionName>',nsuri);
var qn_op_resp = new WS.QName('sayHelloResponse',nsuri);
call.invoke_rpc(
qn_op,
new Array(
{name:'userId',value:<user>}
{name:'pwd',value:<password>}
),null,
function(call,envelope) {
var ret =
envelope.get_body().get_all_children()[0].
get_all_children()[0].get_value();
container.innerHTML = ret;
$('soap').innerHTML = arguments[2].escapeHTML();
}
);
}
</script>
-->
</action>
at line: Code: src="ws.js"></script> Can anybody correct this error..., Hi all I'm having trouble with my XML news feed being displayed in IE. The JS calls the XML, and displays the relevent data on the homepage. This works beautifully in firefox, but fails completely in IE, what am I doing wrong? The Code for the script follows, and is contained within the <head> of the the HTML; Code:
<script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
document.getElementById("picture2").innerHTML="<img src=" + pic + " />";
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
In FF, the XML is read, and the corresponding data is entered automatically into the HTML document. Everything works perfectly. In IE, nothing seems to happen, no text is displayed and the image is just the broken link icon. I assume I need to modify my ELSE statement somehow, but have no idea what to do! Unfortunately I cannot provide a link to the webpage, it has not been uploaded as it doesn't work yet. Would really appreciate being told where I've gone wrong so I can correct the code myself. Thanks, Dan 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! 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 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 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!! 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! 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. 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 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 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! Hi, I have three tables and I want show one table at one time. At the bottom of one table I need to have "next" and "previous" links to go other two tables.Can you please help me. Thank You. I set up my javascript so that it shows a hidden div box from an array when i click on a link. To show only one hidden box, the code is <a href="javascript:showOnlyThis('divIDgoeshere')"> how do i show multiple hidden div boxes with one link? Thanks! Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code:
HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Any ideas, as to why it's not working? http://www.suttonsilver.co.uk/client...on-calculator/ Please visit the above website, Click on a Injury Type (try Minor Head Injury) on the right hand side (the human figure) Then click on the Calculate button and you will see a "calculated" figure appear, if you then click on another injury type then calculate it again, another Div will show. If two "You could be entitled up..." DIVs pop up, the previous, initially calculated 'result' should be removed and replaced by the new 'result'. Can anyone help me do this? Also.. as a side note, does anyone have a solution for when clicking calculate, two divs show up... (i.e. a 'result' and a 'contact us form'). Cheers Chris SS 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?
Hello, I am pretty unfamiliar with javascript and jquery but have thus far been able to scrape by. I am currently trying to set up an image toggle using show/hide inside of an overlay window that pops up when a button inside the site is clicked. The trouble I am having is that when the overly initially opens up, neither image that I am trying to toggle will show up, but once the thumbnails that I am using to control them are clicked, the image toggle works perfectly. I am using the #rImg1 and #lImg1 id's as the toggle buttons between showing the #rightFacingImg1 and the #leftFacingImg1 id's. My goal is to pull up the overlay window with the #rightFacingImg1 as the default image, so that the main image area is never left blank. Here is the code that I am using: Java for overlay: Code: $(document).ready(function() {
$("img[rel]").overlay();
});
Java for show/hide: Code: $(document).ready(function() {
$.fx.off = !$.fx.off;
$('#rightFacingImg1').click(function() {
$('.hideme').css({'display':'none'});
$('#rImg1').show('slow');
});
$('#leftFacingImg1').click(function() {
$('.hideme').css({'display': 'none'});
$('#lImg1').toggle('slow');
});
});
html that calls the overlay box: Code: <div class="img">
<img src="images/Rifles/browningm53r.jpg" alt="" width= "225" rel="#lightboxrifle1"/>
<div class="desc"><p><b>Browning M53</b> <br/>Price: $600.00</p></div>
</div>
html inside overlay: Code: <div class="lightboxriflegen" id="lightboxrifle1">
<img src="images/x.jpg" alt="" id="rifleclose" class="close"/>
<div class="bigpic">
<img id="rImg1" class="hideme" src="images/Rifles/browningm53r.jpg"alt="" width="720px" />
<img id="lImg1" class="hideme" src="images/Rifles/browningm53l.jpg"alt="" width="720px" />
</div>
<div class="geninfo">
<b>Browning M53</b><br/>
32-20 Calibur<br/>
Lever Action.<br/>
Condition: New
</div>
<div class="genprice">
<b>Price: $600.00</b>
</div>
<div class="littler">
<img id="rightFacingImg1" src="images/Rifles/browningm53r.jpg" alt="" width="150px" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
</div>
<div class="littlel">
<img id="leftFacingImg1" src="images/Rifles/browningm53l.jpg" alt="" width="150px" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
</div>
<div class="addtocart">
Add to cart.
</div>
</div>
Any help would be greatly appreciated. Nicole Hi, I have been developing a show/hide feature on my companies web site for some time. I have so much code as to where I am confused when I need to add another slide function. I have provided the URL below to the page where the code exists. http://www.pjm.com/markets-and-opera...assistant.aspx This is where I get lost with the huge amount of code that I have. If you take a look under the second slider named "Electricity Markets" there is another slider underneath named "Energy Market". I need to add three more sliders right underneath in the same format under "Energy Market" If anyone can assists with this that would be great. I should have organized the code a lot better, so now I get lost within the code now. BTW, the show/hide feature really does not display well in Firefox, please try in IE. Thanks! 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! |
|||||||