JavaScript - Drop Down Menu With Image Popups

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!


Thank you for any help and/or advice in advance,
Best Regards,
Tim

? how would i make it for a menu so you could press it and it would go down to click on a link.

I have 3 pop-ups on a particular page, but when I click any of the 3, they all show up as the same one (the 'form' one, whereas they should be 3 different ones). What do I need to change?

Here is the 1st one (triggered by clicking 'Pre-purchase pest inspections'):

<SCRIPT language="JavaScript">
function topWindow(){
popup = window.open("timberpest.html","timberpest","width=800,height=850,left=0,top=0,toolbar=no,location=no ,directories=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no,resizable=no");
}
</SCRIPT>
<li><a onmouseover="window.status='Pre-Purchase Timber Pest Inspections >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()">Pre-purchase pest inspections</a></li>

Here is the 2nd one (triggered by clicking the image 'img7.jpg'):

<SCRIPT language="JavaScript">
function topWindow(){
popup = window.open("form/form.html","form","width=700,height=1400,left=0,top=0,toolbar=no,location=no,directories=no,status=y es,menubar=no,scrollbars=yes,copyhistory=no,resizable=no");
}
</SCRIPT>
<td class="bg10"><div align="center"><a onmouseover="window.status='Request Form >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()"><img src="images/img7.jpg" alt="" width="177" height="345" border="0" /></a></div>

And here is the 3rd one (triggered by clicking 'Read more...'):

<SCRIPT language="JavaScript">
function topWindow(){
popup = window.open("About.html","about","width=778,height=650,left=0,top=0,toolbar=no,location=no,directori es=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no,resizable=no");
}
</SCRIPT>
<a onmouseover="window.status='About Us >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()">Read more...</a>

Hey guys I'll try to do my best to explain what I want.

Im using a self hosted wordpress and I want to add and image link in one of my sidebars.

Code:

Code:

<a href="http://www.espn.com" target="_blank"> <img src="ahman.gif"> </a>

So When someone click on the image I want a box to appear in same window
with all the buttons above(facebook,twitter,Gplus,Digg,StumbleUpon ....(the script for the button is down there ))

like that(I want A shadow also)
http://oi42.tinypic.com/j0vi1i.jpg

After that I want all the bookmarks to be done in this box and not in different window.

After the bookmark is done I want to show a thank you message in this box

Hope you guys Understood.

I dont think is complicated but for me it is
The bookmarking script is Here
http://newsand-reviews.com/javascript.txt

Thank million times for help.
If you can help me even with half of this I'll be pretty happy

Hello.

Im trying to put in a Popup printer-friendly page on my site.

the Popup works great in Chrome and FireFox. It even works in IE - except im getting a black bg instead of the white i get in the other browsers.

Also the print command is not working in Firefox or IE.

Im running FireFox 8 and IE 9.

heres the code for the Popup:

Code:

<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
	newwindow=window.open(url,'name','height=200,width=150');
	if (window.focus) {newwindow.focus()}
	return false;
}

// -->
</script>
</head>
<div>
<img src="IMAGES/BidsCouponSmall-text.png" />
<br />
<br />
<a href="printcoupon.htm" target="coupon"
onclick="window.open('printcoupon.htm','coupon','height=500,
 width=400,toolbar=no,directories=no,status=no,
 menubar=no,scrollbars=no,resizable=no'); return false;"
>Click HERE To Print</a>
	<br />
</div>

To avoid cluttering of this post, the page im having printing problems with can be found he
http://bidsservice.net/printcoupon.htm

its all html, css, and JS. no server-side code.

I have a tracking ad at the bottom of my site. (no iframes). how do I know and/or prevent that tracking ad from popping up a popup?

They are not suppose to, but I suspect they do. Is there a way to track this, or perhaps prevent them from popping the popup from within my page?

I have access to various libraries, prototype/jquery etc.. so if there is a func/method in those, I could use too.

I found this script while browsing a site:
Code:

<script language="JavaScript">
<!--
 if(popUpsBlocked)
  alert('Our site uses Pop-Ups.\nPlease enable Pop-Ups for this website.');
}
//-->
</script>

But when I added it to my site, it wont work.

Discuss and find a soulution.......

I have developed one to one chat in asp.net. Now I wanted a gmail chat like feature in it. In left side of page, a list of online users should be available. When I click on a user, a new div should popup on right bottom corner with close and minimise buttons.
When I click on another user , a second div should popup on right bottom corner of page but left to the first popup div.
I want popping up of divs dynamically. The no of clicked users should decide the no of popped up divs. Also, for each division there should be a separate division ( inside the popped division ) whose innerhtml value is my chat text.
And if three divs are popped up and if I close the second one, the third should get attach to first popup.

Hope, you'll understand my requirements, and will provide a suitable code in javascript.

I'm trying to do what they are saying at this link:
http://blogs.sitepoint.com/perfect-pop-up/

First, they tell me to do what is listed under the "Scripting Disabled" section:
<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" rel="nofollow" target="newWin">

Then, down in the page in the "The Perfect Pop-Up Script" section it has a large script for me to use. I'm wanting to use it at my page
http://www.best-stock-trading-system...ng-system.html
I want to make each of my images pop up windows like at this site:
http://www.polyvore.com/cgi/shop?query=shoes

So, are they telling me to use the html in both sections?
Where would I put the html in the top section vs. the script in the lower section?
Do I have to make another webpage and just paste the script in there and then call it, like they say below:
"To call the function you would use the following code:"

<a href="my-pop-up-window.htm" <br>
onclick="popUp(this.href,'console',400,200);return false;" <br>
rel="nofollow" target="_blank">This is my link</a>

I'm a bit confused where I am supposed to inserting the page name for the popup that I want to pop up vs inserting the pagename for the script page that I guess I have to make.

So what are the steps that I would take to do all of this?!
Thank you for your help!

I have some Javascript code for a drop-down menu. The code works fine (will show below) but I was wondering how to turn off one of them? I have a total of 8 icons that have drop-down menus, but I only need 6 of them to do so. If I make any sort of change to the code, it makes all the icons change color when the mouse is hovered over, instead of drop-downs. It seems to be an "all or nothing" situation. Can someone show me how to "turn off" just one of the icons (say the "news" one), so a drop-down doesn't appear? Thank you very much.

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="javascript">
function init() {
	if (TransMenu.isSupported()) {
		TransMenu.initialize();		
		menu1.onactivate = function() { document.getElementById("news").className = "hover"; };
		menu1.ondeactivate = function() { document.getElementById("news").className = ""; };	
		menu2.onactivate = function() { document.getElementById("raceresults").className = "hover"; };
		menu2.ondeactivate = function() { document.getElementById("raceresults").className = ""; };
    }
}
</script>

<tr><td>
<a href="http://www.littlevalleyspeedway.com/test/news.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.littlevalleyspeedway.com/test/layout/nav_news_on.jpg',1)" id="news"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_news_off.jpg" border="0" name="news" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
<a href="http://www.littlevalleyspeedway.com/test/race_results.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navraceresults','','http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_on.jpg',1)" id="raceresults"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_off.jpg" border="0" name="navraceresults" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
</td></tr>

<script language="javascript">
if (TransMenu.isSupported()) {
	var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
	var menu1 = ms.addMenu(document.getElementById("news"));
	menu1.addItem();
	var menu2 = ms.addMenu(document.getElementById("raceresults"));
	menu2.addItem();
	TransMenu.renderAll();
}
</script>

Any help would be much appreciated!!

Here is the JS I used for a drop down nav bar from DW8. I need the cursor to become a hand when you scroll over one of the menu items. Can someone tell me what and where to change this. File attached...

Can anyone tell me how or point me to a tutorial which shows how to go about coding a drop down menu "without a button", where i can store all my links.
Thanks

Hi,

Please look at the following drop-down menu:
http://www.w3schools.com/JS/tryit.as...yjs_selectmenu

1. How can I set it so the pages open in the parent frame (instead of the same frame)?
2. How can I set it so the pages open in a new window?


Regards
Rain Lover

Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this:

HTML and Javascript included below.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

<link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="nav">

<li><a href="/home/">Home </a></li>
<li><a href="/products/">Products </a>

<ul>

<li><a href="/products/silverback/">Silverback </a></li>
<li><a href="/products/fontdeck/">Font Deck </a></li>

</ul>

</li>

<li><a href="/services/">Services </a>

<ul>

<li><a href="/services/design/">Design </a></li>
<li><a href="/services/development/">Development </a></li>
<li><a href="/services/ consultancy/">Consultancy </a></li>
</ul>

</li>

<li><a href="/contact/">Contact Us </a></li>

</ul>



</body>
</html>