JavaScript - Bait And Switch Javascript

Hi,

I'm doing some experimenting. So this may look bad to javascript experts here. But I'm trying to learn.

I have a header div that will show a larger image when the user mouses over each thumbnail image. I used jQuery to create this effect. The header div contains a button. Once the button is clicked, an alert will pop up to tell the user the artist's name of image. The button is wired to an ID of a paragraph. Problem is, my code is not working. I don't want to use "onclick" inline javascript (which is what I am using to call the showArtistname() function). I want unobtrusive javascript like jQuery is. I'm not sure how to do this. I don't know if I should use an array or if I'm even approaching this correctly. Well, it's not correct, because it's not working...

Here is my jQuery code:

Code:

$(function(){
$("a:has(img.small)").mouseover(function(){
var bigImage= $(this).attr("href");
$("#heading").attr({src: bigImage});
return false;
});

});

here is my javascript code:

Code:

function showArtistname(){ 

var a = document.getElementById("bluesails", "purplemountains", "bigsky", "nightlights", "fireysunset", "brilliantsunrise").innerHTML;


switch(a) {
	case "bluesails":
		alert("Arthur MacKenzie")
		break
	case "purplemountains":
		alert("Maggie Laing")
		break
		
	case "bigsky":
		alert("Arthur MacKenzie")
		break
		
	case "nightlights":
		alert("Aria Soriano")
		break
		
	case "fireysunset":
		alert("Felix Buckley")
		break
		
	case "brilliantsunrise":
		alert("Felix Buckley")
			
}
}

Here is the HTML:


Code:

<div class="container_12" id="_container">

  	<div class="grid_12" id="12_header" > 
    	
        <div class="hc_left_pic"> <images/01_md.jpg" id="heading" alt="Big Image." />
    <div id="showImage" onclick="showArtistname()"></div>
  </a></div> 
 	</div>


       
  	<div class="clear"></div> 
    
    
    
  	
  <div class="grid_4" id="artist_container1">
    <a href="images/01_md.jpg"><img src="images/01_sm.jpg" width="100" height="100" class="small" alt="Small image Blue Sails" /></a>    
  		<p class="text" id="bluesails">Blue Sails</p>
  </div>
  
  
  <div class="grid_4" id="artist_container2">
  <a href="images/02_md.jpg"><img src="images/02_sm.jpg" width="100" height="100" class="small" alt="Small Image Purple Mountains"/></a>
    	<p class="text" id="purplemountains">Purple Mountains</p>
  </div>
  
  
  <div class="grid_4" id="artist_container3">
  <a href="images/03_md.jpg"><img src="images/03_sm.jpg" width="100" height="100" class="small" alt="Small Image Big Sky"/></a>
    	<p class="text" id="bigsky">Big Sky</p>
  </div>
  
  
  <div class="clear"></div>
  
  
  <div class="grid_4" id="artist_container4">
  <a href="images/04_md.jpg"><img src="images/04_sm.jpg" width="100" height="100" class="small" alt="Small Image Night Lights" /></a>
    	<p class="text" id="nightlights">Night Lights</p>
  </div>
    
    
  <div class="grid_4" id="artist_container5">
  <a href="images/05_md.jpg"><img src="images/05_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Firey Sunset"/></a>
    	<p class="text" id="fireysunset">Firey Sunset</p>
  </div>
  	
    
  <div class="grid_4" id="artist_container6">
  <a href="images/06_md.jpg"><img src="images/06_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Brilliant Sunrise"/></a>
    	<p class="text" id="brilliantsunrise">Brilliant Sunrise</p>
</div>

Here's the CSS:


Code:

.container_12 .grid_4 {
  width: 274px;
  height: 370px;
  background-color:#ccc;
  border: 3px solid #999;
  padding-left:10px;
  padding-right:10px;:confused:
  padding-bottom:10px;
}


#showImage{
margin: -170px 20px 80px 700px;
width: 176px;
height: 48px;  
background:url(../images/showimage.jpg);
position:relative;
z-index:100;
}

.grid_4 img {
position:relative;
left:100px;
top:20px;
padding:0 0 60px 0;
border:none;

}
.grid_4 p {
position:relative;
text-align:center;
}

p.text {
font-family:Arial, Helvetica, sans-serif;
font-size:.75em;
color:#000;
line-height:1.25em;
font-weight:bold;
}


#12_header {
display: inline;
background-color:#e5e5e5;
border: 3px solid #bfbfbf;
height:225px;
font-family:Arial, Helvetica, sans-serif;
font-size:;
color:#000;
font-weight:bold;
line-height:1.2em;

}


.hc_left_pic {
float:left; 
margin-top:15px;
background-color:#e5e5e5;
border: 3px solid #bfbfbf; 
width:935px;
height:250px;

}

Writing Table Cells and Switch Statements

I am to create a function and purpose is to write blank tables cells to make up horizontal bar. function will have 2 parameters=(partyType and percent

partyType parameter stores variables of D,R,I,G or L

percent parameter store percentage rounded to nearest integer

so I am to make a switch and break statements /commands

then have to create a For Loop in counter variable goes up from 1 through value of parmeter increments of 1

heres the code I created for this one
Code:

     function createBar(partyType,percent){ // script element to create blank cells
switch(partyType) {
case "D": document.write("<td class='dem'></td>");
break;
case "E": document.write("<td class='rep'></td>");
break;
case "I": document.write("<td class='ind'></td>");
break;
case "G": document.write("<td class='green'></td>");
break;
case "L": document.write("<td class='lib'></td>");
break;
}
var barText = partyType

for (i=0; i < percent; i++)
{
document.write(barText);

So what improvements should I make?
should my loop be before everything?
Thanks

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.

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.

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?

how to make a switch that goes on a button(sorry that i cant describe it better)

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

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?

Hi guys.

I was wondering if its possible to switch a form action using javascript.
Because im trying to have a search field on my main site for my forum and website.
By having two boxes underneath my search field so people can select if the want to search my phpbb forum ore my site.

Well anyway, mabey switching the form action is not the right approach.
Any tips are welcome thanks.

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

"
<body>

<a href="biography.html" id="biography">BIO</a>

<script type="text/javascript">
window.onload = initRedirect;

function initRedirect() {
switch(getElementById.onclick) {
case "getElementById"biography".onclick":
alert("Four score and seven years ago...");
return false;
default:
}
}
</script>
</body>
"

I don't quite understand the getElementById property. Is there a way I can get it so that I click on the biography link and an alert displays?

Hello,
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 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>