|
JavaScript - Switch Id On Link Not Working?!
hi,
I have a few links on my website as follows: Code: <a href="javascript:switchid('a6');">Link 6</a>
but when I view source it comes out like this: Code: <a href='javascript:switchid('>Link 6</a>
Can someone please help? Similar TutorialsHello, I'm new to this forum and well... I'm pretty new to JavaScript as well. Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great. Thanks for taking a look! Code: <head>
<script>
function switch1(div) {
if (document.getElementById('blue')) {
var option=['blue','green','purple'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switchImg(i){
document.images["blue"].src = i;
}
</script>
<style>
#image-switch ul {
margin:0 0 0 20px;
color:red;
list-style-type:none;
}
#image-switch li {
padding:10px;
}
#image-switch #green, #image-switch #purple {
display:none;
}
#radiobs {
width:150px;
position:relative;
margin:0;
}
#radiobs input {
margin:0;
padding:0;
position:absolute;
margin-left:6em;
width:15px;
}
</style>
</head>
<div><img src="blue.jpg" id="blue" /></div>
<ul id="radiobs">
<li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
</ul>
</div>
<div class="clear"></div>
Hi, Please help code not working.i want the alert message to pop up when a cmbprop is selected. <script type="text/javascript"> function PropertyOwn(property) { prop=document.frmone.cmbprop.value switch(property) { case"0": // no error occured break case"1": alert("I am a rich men") break case"2": alert("i am a poor men") break case"3": alert("Thank God for this opportunity") break default: alert("Just try again") } } </script> <form name="frmone"> <select name="cmbprop" onchange="propertyOwn(this.value)"> <option value=0>--choose from one--</option> <option value=1>I have BMW</option> <option value=2>I rent a sigle room</option> <option value=3>Seing possibilities</option> </select> </form> Thanks. Clement Osei Since the upgrade from chrome 9 to chrome 10 my script is showing an error in my variables when i use boolean expressions. they changed to version V8, Chrome's JavaScript engine. Here is the function function get_form_value(n){ e=document.getElementById(n); if ((e.value)&&(e.value != "")&&(!e.options)) return e.value; if ((e.selectedIndex)&&(e.selectedIndex>0) &&(e.options[e.selectedIndex].value !="")) return e.options[e.selectedIndex].value; // select if ((e.text)&&(e.text.value !="")) continue; if ((e.selectedIndex)&&(e.selectedIndex>0) &&(e.options[e.selectedIndex].text !="")) return e.options[e.selectedIndex].text; // select if ((e.checkbox)&&(e.checkbox.checked)) return true; return false; } When i run it it shows a syntax error: Can someone please help me fix this? Hey guys, I have this JS. Code: function funcBut(){
document.getElementById('ref_button').innerHTML = 'pressed';
}
Now, this button activates the function with no problem: Code: <input type='button' onclick='funcBut();' value='Change Text'/><br /> But this link won't work and I don't understand why Code: <a href="#" onclick="funcBut(); return false;">test</a><br /> Can anyone help? Hi there, I recently used a random link generator found at http://javascriptkit.com in my webpage: http://random-casino.com The code works in both Firefox and Google Chrome, but not in IE. Any ideas? Hey guys, On my personal website, I just created a rollover image gallery using Javascript. Each time you roll over a thumbnail, the image above changes to the corresponding thumbnail image. http://www.thelittlelizzard.com/Bahamas.html After spending hours getting that to work properly, my footer is now showing as one huge blue link. I believe I'm forgetting to close a tag somewhere? Being new to Javascript, I don't have a clue what I am forgetting to close to cause my footer to become a huge blue link like that. Does anyone have any ideas? Here is a copy of the code of my body section where I believe the problem may be... Code: <p>Where we stayed: <a href="http://www.starwoodhotels.com/sheraton/property/overview/index.html?propertyID=3067" onclick="window.open(this.href);return false;">Radisson Cable Beach Resort</a> (Now called Sheraton Nassau Cable Beach): </p>
<p>Dates we travelled: March 2004, 2005 and 2006</p>
<p>Flight Time from New York: 2.5 hours</p>
<br /><br />
<div id="divcenter">
<p><img align="center" border="0" src="Bahamas/bahamas.jpg" style="border-right: 1 solid #006666" name="altimg" width="548" height="316" /> </p>
<p>
<a onmouseover="on('image1');" onmouseout="off('image1')">
<img src="Bahamas/bahamas.jpg" width="45" height="45"></a>
<a onmouseover="on('image2');" onmouseout="off('image2')">
<img src="Bahamas/bahamas-1.jpg" width="45" height="45"></a>
<a onmouseover="on('image3');" onmouseout="off('image3')">
<img src="Bahamas/bahamas-2.jpg" width="45" height="45"></a>
<a onmouseover="on('image4');" onmouseout="off('image4')">
<img src="Bahamas/bahamas-3.jpg" width="45" height="45"></a>
<a onmouseover="on('image5');" onmouseout="off('image5')">
<img src="Bahamas/bahamas-4.jpg" width="45" height="45"></a>
<a onmouseover="on('image6');" onmouseout="off('image6')">
<img src="Bahamas/bahamas-5.jpg" width="45" height="45"></a>
<a onmouseover="on('image7');" onmouseout="off('image7')">
<img src="Bahamas/bahamas-6.jpg" width="45" height="45"></a>
<a onmouseover="on('image8');" onmouseout="off('image8')">
<img src="Bahamas/bahamas-7.jpg" width="45" height="45"></a>
<a onmouseover="on('image9');" onmouseout="off('image9')">
<img src="Bahamas/bahamas-8.jpg" width="45" height="45"></a>
<a onmouseover="on('image10');" onmouseout="off('image10')">
<img src="Bahamas/bahamas-9.jpg" width="45" height="45"></a>
<a onmouseover="on('image11');" onmouseout="off('image11')">
<img src="Bahamas/bahamas-10.jpg" width="45" height="45"></a>
<a onmouseover="on('image12');" onmouseout="off('image12')">
<img src="Bahamas/bahamas-11.jpg" width="45" height="45"></a>
<a onmouseover="on('image13');" onmouseout="off('image13')">
<img src="Bahamas/bahamas-12.jpg" width="45" height="45"></a> <a onmouseover="on('image14');" onmouseout="off('image14')">
<img src="Bahamas/bahamas-13.jpg" width="45" height="45"></a> <a onmouseover="on('image15');" onmouseout="off('image15')">
<img src="Bahamas/bahamas-14.jpg" width="45" height="45"></a> <a onmouseover="on('image16');" onmouseout="off('image16')">
<img src="Bahamas/bahamas-15.jpg" width="45" height="45"></a> <a onmouseover="on('image17');" onmouseout="off('image17')">
<img src="Bahamas/bahamas-16.jpg" width="45" height="45"></a> <a onmouseover="on('image18');" onmouseout="off('image18')">
<img src="Bahamas/bahamas-17.jpg" width="45" height="45"></a> <a onmouseover="on('image19');" onmouseout="off('image19')">
<img src="Bahamas/bahamas-18.jpg" width="45" height="45"></a> <a onmouseover="on('image20');" onmouseout="off('image20')">
<img src="Bahamas/bahamas-19.jpg" width="45" height="45"></a> <a onmouseover="on('image21');" onmouseout="off('image21')">
</div>
</div>
<div id="footer">
<p>© 2009 TheLittleLizzard.com<br>
All images and content on this website are owned by The Little Lizzard.</br>
</p>
<p>All rights reserved. </p>
<p><a href="http://www.TheLittleLizzard.com">Home</a> <a href="http://www.ScreamingLizzardProductions.com" onclick="window.open(this.href);return false;">Site Design</a></p>
</div>
</div>
</body>
Thanks again for any help. This is one of the only places I get real answers that solve my problems! Hello Again, After much help and support i have decided that the best way to do what i want (if i can get it working is like the below). The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own. here is the test page http://www.bushcottages.co.uk/loaddata.htm the main page i would like it to work on as its not working correctly is http://www.bushcottages.co.uk/new.htm test code is Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click This Link To Load My Favor</title>
<script type="text/javascript" src="java/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loadData").click(function()
{
$(this).text("...One Moment Please...");
$("#container").append('<div id="favoriteMovies"></div>')
.children("#favoriteMovies").hide()
.load("theOtherPage.htm ul#favoriteMovies", function()
{
$("#loadData").remove();
$("#favoriteMovies").slideDown("slow");
});
return false;
});
});
</script>
<style type="text/css">
#container
{
width: 300px;
height: 200px;
font-family: georgia;
font-weight: bold;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
</style>
</head>
<body>
<div id="container">
<li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li>
</div>
</body>
</html>
code for main page is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
<meta name="author" content="Peter Devlin">
<script type="text/javascript" src="java/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
if (document.getElementById('news')) {
var options = {
newsList: "#news",
tickerRate: 20,
loopDelay: 6000,
startDelay: 10,
placeHolder1: "_"
}
$().newsTicker(options);
}
});
-->
</script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<script type="text/javascript">
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
if (window.focus) {newwindow.focus()}
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#number").click(function()
{
$(this).text("...One Moment Please...");
$("#container").append('<div id="Algebra"></div>')
.children("#Algebra").hide()
.load("Algebra.htm ul#algebra", function()
{
$("#number").remove();
$("#Algebra").slideDown("slow");
});
return false;
});
});
</script>
<style type="text/css">
*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}
#banner
{
width: 900px;
height: 70px;
background-image: url('banner.png');
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}
#horizontalmenu
{
width: 900px;
height: 25px;
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}
#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}
#horizontalmenu ul li
{
float: left;
display: block;
text-align: center;
width: 300px;
}
#horizontalmenu ul li a
{
text-decoration: none;
font-family: georgia;
font-size: 1em;
color: #fafafa;
}
#horizontalmenu ul li a:hover
{
font-family: georgia;
font-size: 1em;
padding: 5px 40px 5px;
color: #000000;
background-color: #ffffff;
}
#mainpage
{
width: 900px;
margin: auto;
}
#one
{
float: left;
width: 150px;
margin-right: 5px;
}
#two
{
float: left;
width: 590px;
margin-right: 5px;
}
#three
{
float: left;
width: 150px
}
#verticalmenu
{
float: left;
width: 150px;
}
#verticaltopmenu
{
float: left;
width: 150px;
height: 23px;
background-color: #000066;
}
#verticalmainmenu
{
float: left;
width: 146px;
height: 372px;
text-decoration: none;
border-style: solid;
border-width: 2px;
border-color: #000066;
padding-top: 2px;
padding-bottom: 2px;
}
#verticalmainmenu ul
{
text-decoration: none;
list-style: none;
padding: 0px;
margin: 0px;
color: black;
}
#verticalmainmenu ul li
{
list-style: none;
text-decoration: none;
display: block;
padding: 0px;
text-align: left;
font-family: georgia;
font-size: .8em;
color: black;
}
#verticalmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#verticalmainmenu a:hover
{
background-color: white;
color: #000066;
}
#tickercontainer
{
float: left;
width: 586px;
height: 21px;
margin-bottom: 5px;
border-color: #000066;
border-style: solid;
border-width: 2px;
}
#tickersidetitle
{
float: left;
width: 125px;
height: 21px;
background-color: #000066;
}
#tickercontent
{
float: left;
width: 461px;
height: 21px;
padding: 0px;
}
ul#news
{
margin: 0px;
height: 21px;
padding: 0px 0px 0px 0px;
}
ul#news li
{
list-style: none;
font-family: georgia;
font-size: 14px;
font-weight: bold;
color: #004400;
margin: 0px;
padding: 0px 0px 0px 10px;
}
ul#news li a:link, ul#news li a:hover
{
color: #004400;
text-decoration: none;
}
#contentwindow
{
float: left;
width: 590px;
}
ul.tabs
{
width: 590px; /*--Set width of container--*/
height: 23px; /*--Set height of tabs--*/
margin: 0px;
padding: 0px;
float: left;
list-style: none;
border-bottom: 2px solid #000066; /*--Set line at bottom of ul--*/
}
ul.tabs li
{
float: left;
margin-right: 1px; /*adjusts gap between tabs*/
height: 23px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 23px; /*--Vertically aligns the text within the tab--*/
margin-bottom: -2px;
background: #000066;
border-color: #000066;
border-style: solid;
border: 2px;
}
ul.tabs li a
{
text-decoration: none;
color: #FFFFFF;
font-family: georgia;
font-size: 14px;
display: block;
padding: 0 20px;
}
ul.tabs li.active a
{
color:#000000;
border-color: #000066;
border-style: solid;
border: 2px;
}
ul.tabs li a:hover
{
background-color: #330099;
border: 0px;
}
ul.tabs li.active, ul.tabs li.active a:hover /*--Makes sure that the active tab does not listen to the hover properties--*/
{
color: #000000;
background: #FFFFFF;
border-color: #000066;
border-style: solid;
border: 2px 2px 2px 0px;
border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 2px solid #000066;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 586px;
height: 346px;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
#testsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#teststopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#testsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#testsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#testsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('test.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#testsmainmenu ul li a
{
padding: 0px;
text-decoration: none;
text-align: left;
color: black;
}
#testsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#downloadstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#downloadsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#downloadsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#downloadsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('download.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#downloadsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#downloadsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#worksheetstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#worksheetsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#worksheetsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#worksheetsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('worksheet.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#worksheetsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#worksheetsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#weblinksmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#weblinkstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#weblinksmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#weblinksmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#weblinksmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('links.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#weblinksmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#weblinksmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
p
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 2px;
}
p.a
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 0px;
}
p.b
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #000000;
padding-top: 0px;
}
p.c
{
text-align: center;
font-family: georgia;
font-size: 8px;
color: #000000;
padding-top: 0px;
}
</style>
</head>
<body>
<div id="topmargin"></div>
<div id="banner"></div>
<div id="horizontalmenu">
<ul>
<li> <a href="#" id="number">Number and Algebra</a></li>
<li><a href="url">Geometry and Measures</a></li>
<li><a href="url">Statistics - Data Handling</a></li>
</ul>
</div>
<div id="mainpage">
<div id="one">
<div id="verticalmenu">
<div id="verticaltopmenu"><p>Main Menu</p></div>
<div id="verticalmainmenu">
<ul>
<li><a href="url">Angles</a></li>
<li><a href="url">Properties of Shapes</a></li>
<li><a href="url">Circle Theorems</a></li>
<li><a href="url">Geometry of Cuboids</a></li>
<li><a href="url">2d and 3d Shapes</a></li>
<li><a href="url">Area</a></li>
<li><a href="url">Perimeter</a></li>
<li><a href="url">Prisms</a></li>
<li><a href="url">Surface Area</a></li>
<li><a href="url">Using Pi</a></li>
<li><a href="url">Volumes</a></li>
<li><a href="url">Transformations</a></li>
<li><a href="url">Scale</a></li>
<li><a href="url">Coordinates</a></li>
<li><a href="url">Vectors</a></li>
<li><a href="url">Bearings</a></li>
</ul>
</div>
</div>
</div>
<div id="two">
<div id="tickercontainer">
<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
<div id="tickercontent">
<ul id="news">
<li>How many Degrees in a Triangle?</li>
<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
</ul>
</div>
</div>
<div id="contentwindow">
<ul class="tabs">
<li><a href="#tab1">Acute</a></li>
<li><a href="#tab2">Obtuse</a></li>
<li><a href="#tab1">Reflex</a></li>
<li><a href="#tab2">Vertex</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p class="b">hello</p>
<p class="c">Page Created by P.Devlin</p>
</div>
<div id="tab2" class="tab_content">
<p class="b">well done</p>
<p class="c">Page Created by P.Devlin</p>
</div>
</div></div>
</div>
<div id="three">
<div id="testsmenu">
<div id="teststopmenu"><p>Online Tests</p></div>
<div id="testsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Averages</a></li>
<li><a href="url">Algebra</a></li>
</ul>
</div>
</div>
<div id="downloadsmenu">
<div id="downloadstopmenu"><p>Downloads</p></div>
<div id="downloadsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
<div id="worksheetsmenu">
<div id="worksheetstopmenu"><p>Worksheets</p></div>
<div id="worksheetsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
<div id="weblinksmenu">
<div id="weblinkstopmenu"><p>Web Links</p></div>
<div id="weblinksmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Many thank to you all for your help so far. Peter I am using JavaScript for popups in my OpenLayers map. All the html tags like <br> work in the popup window except for the link href tag. Everytime I put in a link in my popup window it doesnt work: Code: var mystring = "here is link:<br> <a href=\"www.sun.com\">link</a>";
popup = New OpenLayers.Popup.FramedCloud("chck", feature.coord, null, mystring, null, true, onPopupClose);
Also tried link without quotes and with ticks and nothing seems to work with the link not taking me anywhere. Please advise. I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked. I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight... The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway. I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below. Thanks. Code:
/* designImages[x][0] = the image source on the page;
* designImages[x][1] = the destination url on clicking the image;
*/
var designImages = new Array();
designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );
designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );
designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );
designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );
designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );
designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );
designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
window.onload = function()
{
creationCompleteHandler();
}
function creationCompleteHandler()
{
calcNumDesigns();
setLinks();
}
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);
}
}
}
function squareOff(frame)
{
document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
}
function setLinks()
{
for (x in designImages)
{ document.getElementById("design"+x).onclick = 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]+"'");
}
Hello all I have a video playlist useing iframe http://alohainvesting.com/html5/Html5player.html Is there a way to get same results without iframes? i just want to switch items on nav to the wrapper window. can this be done? Thanks just a general question really... now that I've finally started using switches, it seems to me that they're just a big if /else if statement, with an else thrown in at the end for the default. but that can't be right. I know that in javascript there are a million ways to achieve the same result, but why would they (whoever they are) go to the trouble of making two basic operations that do exactly the same thing? to me it seems that switches are better for lots of conditions and if else is a quick way to work with two or three, but apart from readability, are there any inherent advantages in choosing one approach over the other? all opinions appreciated, and I hope I don't start another argument. how to make a switch that goes on a button(sorry that i cant describe it better)
I have a function I call like this: var theBase = getBase(percent); then, the function: function getBase(percent) { var base=''; switch (percent) { case percent.indexOf("this") == 4: base = "that" break; case percent.indexOf("thisOther") == 9: base = "thatOther" break; } return base; } However, even if percent.indexOf("this")==4 (or if any other case matches perfectly), it never enters that case and assigns a value to 'base'. What am I doing wrong? Give me an example for switch statements. I had to create one that tests value of parameter using a text string, I came up with this value Code: function createBar(partyType,percent){
switch(partyType) {
case D: <td class='dem'></td>
break;
Should I use " or ' between the dem? I am using break statements. do all breaks should end with string or do i need the bracket? I hope this does not seem like i getting people to do homework for me again,, just want to verify if i did this area correctly? I want to make a function that will also play a sound byte when you click on the large image. i need the sound byte to change with the images. Here is the code that i am using. Code: intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "images/picture1-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 2;
return(false);
case 2:
IMG1.src = "images/picture2-lg-over.png"
IMG2.src = "images/picture1-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 3;
return(false);
case 3:
IMG1.src = "images/picture3-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture1-sm-btm.png"
intImage = 1;
return(false);
}
}
i have tried many things that involved each case to contain a different IMG1.onClick=""; value but it doesnt seem to change when the case changes. I have also tried making another switch/case that would change the value of the onClick event.. nothing. any sugestions? Here is the code, in full: <htmll"> <head><title></title> <script type="text/javascript"> <!-- HIDE FROM INCOMPATIBLE BROWSERS function checkGrade(grade, value) { switch (grade) { case "A": if(grade == '90') window.alert("Your grade is excellent."); break; case "B": window.alert("Your grade is good."); break; case "C": window.alert("Your grade is fair."); break; case "D": window.alert("You are barely passing."); break; case "F": window.alert("You failed."); break; } } // STOP HIDING FROM INCOMPATIBLE BROWSERS --> </script> </head> <body> <form name="gradeForm"action="Your Grades"> <input type="text" name="grade" /> <input type="button" value="Check Grade" onclick="checkGrade(document.gradeForm.grade.value);" /> </form> </body> </html> What's throwing me off is the "A" in the case. As well, "(document.gradeForm.grade.value)" I need to make it a IF statement, but not sure how to call that function. Hi There, I need your help, I can't seem to get this work, which it theorecticly should work any ideas? <script> var x = 3 switch(x){ case x > 0: alert("overdue") break case x = 0: alert("due today") break case x < 0: alert("will be due") break } </script> Much thanks for everyones help. Cheers, Jay Hi all, so "click" I have got my head around oop. And can see the huge advantages of using it - encapsulation, interfaces, reusability of code and the ultimate creation of my own library (after I have read my new christmas book "Apress Pro JavaScript Design Patterns") I am moving my brain over to writing work in oop and am going to write a little portfolio with an attachment of the starts of a personal unobtrusive JavaScript library. My question/advice needed is - is there a situation where it is better to use procedural programming in Javascript for say a "simple" site, does oop work slow the script down? (think this maybe a silly question - and I can check in firebug) Or does it really not matter? What for you guys/gals are the advantages of oop in JavaScript? Thanks in advance for any insights into this -- I have posted a similar question for Php-- Hi everyone, I'm a beginner who has now come across the switch statement and has been trying to understand it with this simple coding i came up with. I think I have the syntex of the switch command correct but I'm trying to get it to work along with a HTML form and a function. I've been trying to figure out what i am do wrng but can not seem to see the solution. can someone guide me to the solution? thanks John Code: <html>
<head>
<title>Using the switch statement.</title>
<script type="text/javascript">
function basegraincheck(){
var basegrain = document.basegrainform.basegrain1.value
return basegrain
}
switch (basegrain) {
case 1 :
displaygrain = "US Pale ale malt"
break
case 2 :
displaygrain = "Maris Otter Malt"
break
case 3 :
displaygrain = "Crystal Malt"
break
default: displaygrain = "somethings wrong with the switch statement"
}
document.write(displaygrain);
</script>
</head>
<body>
<form name="basegrainform" action="" method="get" onsubmit="basegraincheck()">
<h2>Select a grain</h2>
<br>
<p>Pale ale Malt</p>
<input type="radio" name="basegrain1" value="1">
<br>
<p>Maris Otter Malt</p>
<input type="radio" name="basegrain1" value="2">
<br>
<p>Crystal Malt</p>
<input type="radio" name="basegrain1" value="3">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I am using a script I found and trying to make some changes. It is a avatar creating script that will put a face together. The tabs are different parts of the face. The problem is I don't want all the different hair colors and styles to show and in the color tab when you click a color it will bring up the hair styles in that color only in the next tab. I have tried if(isset($_GET['color'])) { but this is only showing the first color style cant it to work. So then tried to use switch like this PHP Code: <p> <span name="color"> <img src="herotmb/color0.png" alt="" /><input name="avatar[color]" type="radio" value="black" id="black" onclick="swapImage(this);" /> <img src="herotmb/color1.png" alt="" /><input name="avatar[color]" type="radio" value="brown" id="brown" onclick="swapImage(this);" /> <img src="herotmb/color2.png" alt="" /><input name="avatar[color]" type="radio" value="darkbrown" id="darkbrown" onclick="swapImage(this);" /> <img src="herotmb/color3.png" alt="" /><input name="avatar[color]" type="radio" value="yellow" id="red" onclick="swapImage(this);" /> <img src="herotmb/color4.png" alt="" /><input name="avatar[color]" type="radio" value="red" id="yellow" onclick="swapImage(this);" /> </span> </p> <?php switch(id){ case 'BLACK': echo ' <p> <img src="heroimg/hair0-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-black" /> <img src="herotmb/hair1-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-black" /> <img src="herotmb/hair2-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-black" /> <img src="herotmb/hair3-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-black" /> <img src="herotmb/hair4-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-black" /> <img src="herotmb/hairNone-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'BROWN': echo ' <p> <img src="herotmb/hair0-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-brown" /> <img src="herotmb/hair1-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-brown" /> <img src="herotmb/hair2-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-brown" /> <img src="herotmb/hair3-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-brown" /> <img src="herotmb/hair4-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-brown" /> <img src="herotmb/hairNone-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'DARKBROWN': echo ' <p> <img src="herotmb/hair0-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-darkbrown" /> <img src="herotmb/hair1-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-darkbrown" /> <img src="herotmb/hair2-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-darkbrown" /> <img src="herotmb/hair3-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-darkbrown" /> <img src="herotmb/hair4-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-darkbrown" /> <img src="herotmb/hairNone-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'RED': echo ' <p> <img src="herotmb/hair0-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-red" /> <img src="herotmb/hair1-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-red" /> <img src="herotmb/hair2-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-red" /> <img src="herotmb/hair3-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-red" /> <img src="herotmb/hair4-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-red" /> <img src="herotmb/hairNone-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'YELLOW': echo ' <p> <img src="herotmb/hair0-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-yellow" /> <img src="herotmb/hair1-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-yellow" /> <img src="herotmb/hair2-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-yellow" /> <img src="herotmb/hair3-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-yellow" /> <img src="herotmb/hair4-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-yellow" /> <img src="herotmb/hairNone-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; } ?> nothing shows up. I have searched and found this and tried it but get more errors because I'm not just using images Code: http://www.codingforums.com/showthread.php?t=205694 How can I get this to work ? |
|||||||