dropdown change content..

@designmxApr 09.2004

~~[url]~~http://javascriptkit.com/script/cut174.shtml[/url]
this script is the basic idea of what i’m looking for..
however I can’t get the links to open into new windows.

can someone help me out with a variation to this script?
also.. is it possible to have more than one item change in this manor … ie: an image changes as well as a seperate image’s link?

say there are 3 items, a drop down menu to select an item, once selected the image changes to display it, and the button “add to cart” now links to that specific item..

anyone?
thanks in advance
Jordan

to post a comment

JavaScript

17 Comments(s) _↴

@Mr_JApr 09.2004 — #Change

window.location=mylinks[which]

To

window.open(mylinks[which],'','width=200,height=200,left=150,top=150')

Note:

This forum is not rendering correctly the above should be all one line

@steelersfan88Apr 09.2004 — #also note that left and top are IE-only, as other sources have quoted. Naming the window, and using .moveTo will work in all browsers, as long as the new window is o nthe same domain. Also, it is recommended to naming your window with _blank, if you are not going to name it ? just a few pointers

@Mr_JApr 09.2004 — #also note that left and top are IE-only[/QUOTE]

What should it be for Mozilla because my example works in both IE and Mozilla?

@steelersfan88Apr 09.2004 — #maybe it has changed, but I read a small article about this which stated that dependent is Netscape only, and top-left, and some others are IE-only: [URL=http://www.georgehernandez.com/xWebs/DOM/Objects/Window.htm#Methods]Source[/URL]. It states:[b]screenX=intPixels. Standard: Netscape. left=n. Standard: Internet Explorer.

screenY=intPixels. Standard: Netscape. top=n. Standard: Internet Explorer.[/b][/quote] among other things, in the open method. It might be usable in Mozilla, don't bet that this is current ?

Normally, the windowName.moveTo(top,left) will work, as long as the window is on the same domain as the opener ?

@designmxauthorApr 10.2004 — #is there away to get a browser window that is scrollable?

@Mr_JApr 10.2004 — #window. open("divtest.htm",'','width=200,height=200,left=150,top=150,[B]scrollbars=yes,resizable=yes[/B]')

@designmxauthorApr 10.2004 — #Thank you works great,

one more question

Is it possible to have this script working multiple times on the same page?

@steelersfan88Apr 10.2004 — #Mr J isn't online and I notice you are, so to be convenient, I will step up. Whatever you want to run more than once, place into a function:

function openWin() {
 // open window
 }

Each time you want this, you'll have to call the function, using: [FONT=times new roman]openWin()[/FONT].

@designmxauthorApr 10.2004 — #sorry, i'm referring to the entire script.. I can't seem to find everything to rename to have it running on the same page

I have this is the head section

[CODE]
 <script language="javascript">
 
 function linkrotate1(which){
 var mylinks1=new Array()
 //add in more links if you want (ie:mylinks[3]=...)
 mylinks1[0]="http://www.abcnews.com"
 mylinks1[1]="http://www.cnn.com"
 mylinks1[2]="http://www.geocities.com"
 
 window. open(mylinks1[which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes') 
 }
 
 
 function showimage1()
 {
 if (!document.images1)
 return
 document.images1.pictures1.src=
 document.mygallery1.picture1.options[document.mygallery1.picture1.selectedIndex].value
 }
 //-->
 </script>
 [/CODE]

and this in the body:

[CODE]
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="100%"><form name="mygallery1"><p><select name="picture1" size="1" onChange="showimage1()">
 <option selected value="images/green.jpg">Green</option>
 <option value="images/red.jpg">Red</option>
 <option value="images/blue.jpg">Blue</option>
 </select></p>
 </form>
 </td>
 </tr>
 <tr>
 <td width="100%"><p align="center"><a href="javascript:linkrotate1(document.mygallery1.picture1.selectedIndex)" onMouseover="window.status='';return true"><img src="images/green.jpg" name="pictures1" width="150" height="150" border=0></a></td>
 </tr>
 </table>
 [/CODE]

any ideas as to what i've missed?

right now the combo box will change the link and the window opens up fine. The issue is that the images do not change when an item is selected in the combo box

@Mr_JApr 10.2004 — #Change

onChange="showimage1()"

To

onChange="showimage1(this.form.picture1.selectedIndex)

@designmxauthorApr 11.2004 — #okay I seem to be missing something

I'm running the same script twice on the same html page

this is what I have so far... still the same error..

the image will not change on the second script

:::::::::::::::::::::::::::::::

[B]First script

head code:[/B]

[CODE]
 <script language="javascript">
 
 function linkrotate(which){
 var mylinks=new Array()
 //add in more links if you want (ie:mylinks[3]=...)
 mylinks[0]="http://www.paypal.com"
 mylinks[1]="http://www.paypal.com"
 mylinks[2]="http://www.paypal.com"
 
 window. open(mylinks[which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes') 
 
 }
 
 
 function showimage()
 {
 if (!document.images)
 return
 document.images.pictures.src=
 document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
 }
 //-->
 </script>
 [/CODE]

[B]body code:[/B]

[CODE]
 <form name="mygallery"><select name="picture" size="1" onChange="showimage(this.form.picture.selectedIndex)">
 <option selected value="images/green.jpg">Green / Orange</option>
 <option value="images/red.jpg">Red / Black</option>
 <option value="images/blue.jpg">Light Blue / Purple</option>
 </select></p>
 </form>
 <a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="images/green.jpg" name="pictures" width="150" height="150" border="1" bordercolor="#000000"></a>
 [/CODE]

[B]Second Script:

head code:[/B]

[CODE]
 <script language="javascript">
 
 function linkrotate1(which){
 var mylinks1=new Array()
 //add in more links if you want (ie:mylinks[3]=...)
 mylinks1[0]="http://www.abcnews.com"
 mylinks1[1]="http://www.cnn.com"
 mylinks1[2]="http://www.geocities.com"
 
 window. open(mylinks1[which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes') 
 }
 
 
 function showimage1()
 {
 if (!document.images1)
 return
 document.images1.pictures1.src=
 document.mygallery1.picture1.options[document.mygallery1.picture1.selectedIndex].value
 }
 //-->
 </script>
 [/CODE]

[B]body code:[/B]

[CODE]
 <form name="mygallery1"><p><select name="picture1" size="1" onChange="showimage1(this.form.picture1.selectedIndex)">
 <option selected value="images/green.jpg">Green</option>
 <option value="images/red.jpg">Red</option>
 <option value="images/blue.jpg">Blue</option>
 </select></p>
 </form>
 <a href="javascript:linkrotate1(document.mygallery1.picture1.selectedIndex)" onMouseover="window.status='';return true"><img src="images/green.jpg" name="pictures1" width="150" height="150" border=0></a></td>
 
 [/CODE]

@Mr_JApr 11.2004 — #Here's one way

[SIZE=1]<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<script language="javascript">

var mylinks1=new Array()

mylinks1[0]="http://www.abcnews.com"

mylinks1[1]="http://www.cnn.com"

mylinks1[2]="http://www.geocities.com"

var mylinks2=new Array()

mylinks2[0]="http://www.paypal.com"

mylinks2[1]="http://www.paypal.com"

mylinks2[2]="http://www.paypal.com"

function linkrotate(arr,which){

if(arr==1){

window.open(mylinks1[which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes')

}

else{

window.open(mylinks2[which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes')

}

}

function showimage(w,n){

if (!document.images)

return

if(w==1){

document.holder1.src=document.mygallery.picture1.options[n].value

}

else{

document.holder2.src=document.mygallery.picture2.options[n].value

}

}

//-->

</script>

</HEAD>

<BODY>

<form name="mygallery">

<a href="#null" onclick="linkrotate(1,document.mygallery.picture1.selectedIndex)" onMouseover="window.status='';return true">

<img src="images/green.jpg" name="holder1" width="150" height="150" border="1" bordercolor="#000000"></a>

<P><select name="picture1" size="1" onChange="showimage(1,this.form.picture1.selectedIndex)">

<option selected value="pic01.jpg">Green / Orange</option>

<option value="pic02.jpg">Red / Black</option>

<option value="pic03.jpg">Light Blue / Purple</option>

</select>

<P><a href="#null" onclick="linkrotate(2,document.mygallery.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/green.jpg" name="holder2" width="150" height="150" border=0></a></td>

<P>

<select name="picture2" size="1" onChange="showimage(2,this.form.picture2.selectedIndex)">

<option selected value="pic04.jpg">Green</option>

<option value="pic05.jpg">Red</option>

<option value="pic06.jpg">Blue</option>

</select></p>

</form>

</BODY>

</HTML>[/SIZE]

@steelersfan88Apr 11.2004 — #You could use eval to shorten the code to:

[code=php]<HTML> 
 <HEAD> 
 <TITLE>Document Title</TITLE> 
 <script type="text/javascript"> 
 
 var mylinks1=new Array() 
 mylinks1[0]="http://www.abcnews.com" 
 mylinks1[1]="http://www.cnn.com" 
 mylinks1[2]="http://www.geocities.com" 
 
 var mylinks2=new Array() 
 mylinks2[0]="http://www.paypal.com" 
 mylinks2[1]="http://www.paypal.com" 
 mylinks2[2]="http://www.paypal.com" 
 
 function linkrotate(arr,which) { 
 eval("window.open(mylinks"+ arr +"[which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes')")
 } 
 
 function showimage(w,n) { 
 if (!document.images) {
 return 
 }
 eval("document.holder"+ w +".src=document.mygallery.picture"+ w +".options[n].value")
 } 
 
 </script> 
 
 </HEAD> 
 <BODY> 
 <form name="mygallery"> 
 <a href="#null" onclick="linkrotate(1,document.mygallery.picture1.selectedIndex)" onMouseover="window.status='';return true"> 
 <img src="images/green.jpg" name="holder1" width="150" height="150" border="1" bordercolor="#000000"></a> 
 
 <P>
 <select name="picture1" size="1" onChange="showimage(1,this.form.picture1.selectedIndex)"> 
 <option selected value="pic01.jpg">Green / Orange</option> 
 <option value="pic02.jpg">Red / Black</option> 
 <option value="pic03.jpg">Light Blue / Purple</option> 
 </select> 
 </P>
 
 <P>
 <a href="#null" onclick="linkrotate(2,document.mygallery.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/green.jpg" name="holder2" width="150" height="150" border=0></a>
 </P> 
 
 <P> 
 <select name="picture2" size="1" onChange="showimage(2,this.form.picture2.selectedIndex)"> 
 <option selected value="pic04.jpg">Green</option> 
 <option value="pic05.jpg">Red</option> 
 <option value="pic06.jpg">Blue</option> 
 </select>
 </p> 
 </form> 
 
 </BODY> 
 </HTML>[/code]

Note that the lines should not be wrapped ?

@Mr_JApr 11.2004 — #Not too keen on using the eval method but now my brains not swimming in ale I suppose should have gone

[SIZE=1]

window.open(window["mylinks"+arr][which],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes')

[/SIZE]

@steelersfan88Apr 11.2004 — #that would work just as well, although you could not use it in the showImage function

@Mr_JApr 11.2004 — #Hmm.... forgot about that one

How about

[SIZE=1]

function linkrotate(arr,which){

window.open(window["mylinks"+arr][which][1],'','width=700,height=500,left=150,top=150,scrollbars=yes,resizable=yes')

}

function showimage(arr,which){

document.getElementById("holder"+arr).src=window["mylinks"+arr][which][0]

}

[/SIZE]

A slight amendment to the arrays needed but it works

@steelersfan88Apr 11.2004 — #and you'd also have togive the images an id tag, but i guess you could do it that way ?

Also in #JavaScript _↴

How add/change code in a script object obtained from getElementsByTagName( 'script')?Tabs in Javascript Click to view email

Success!

Help @designmx spread the word by sharing this article on Twitter...

Tweet This

dropdown change content..

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

dropdown change content..

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴