|
JavaScript - Vertical Image Menu To 100% Heigh
If you look at this test page, you see a vertical image menu. This menu is originally from http://www.byscripts.info/scripts/ja...accordion-menu (example 3)
But... how can you get it to 100% heigh? Please, look at the source code Thanks Similar TutorialsHello, I am currently working on a menu and have a few questions and have one issue. First: How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now: Quote: $(document).ready(function () { $('img.menu_class').click(function () { $('ul.the_menu').slideToggle('medium'); }); }); Second Question: For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is: http://gem-tech.com.mytempweb.com/store/pc/home.asp Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row. How can I fix this? Thank you very much Hi, I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? http://www.javascriptkit.com/script/...icalmenu.shtml Thanks! Rob Hi I need to make a vertical menu bar where the sub menu that flies out on the right always starts at the top rather than next to its parent. I used this script http://www.javascriptkit.com/script/...icalmenu.shtml at the moment lists look like this (bold is selected option) 1 2 1 3 2 4 3 1 what i want is this to happen 1 1 1 2 2 3 3 4 Alternatively, does anyone know how to get the vertical spry menubar from DW to work in Safari? To get an idea of what I want, see this working version (not working in Safari though) in Firefox http://www.photoshopcourselondon.com...0open%202.html thanks mikael Hi All, My apologies if this is answered in a previous post but my searches didn't turn up a solution. I need an expanding, vertical menu, virtually identical to: http://www.dynamicdrive.com/dynamici...enu-glossy.htm but with one change. The menu subheaders, ie, "CSS Examples, CSS Drives" are currently just text and their background is defined in the CSS. I need to make these menu subheaders rollover graphics instead of text. It is easy to replace the submenu items themselves with rollover graphics instead of text, but the menu subheaders have defeated me. Is there a cunning solution to this? Regards Gary I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates. The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps. Here is the entire Javascript code that goes into the head tag: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118
var pace=14
var step
var direction
var pause=25
var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1
var menuismoving="no"
function gotourl(thisurl) {
alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}
function inite() {
if (document.layers) {
document.About.left=menuleft
document.News.left=menuleft
document.Profiles.left=menuleft
document.Issues.left=menuleft
document.Extras.left=menuleft
document.Links.left=menuleft
document.Forum.left=menuleft
document.About.top=Abouttop
document.News.top=Newstop
document.Profiles.top=Profilestop
document.Issues.top=Issuestop
document.Extras.top=Extrastop
document.Links.top=Linkstop
document.Forum.top=Forumtop
}
if (document.all) {
document.all.About.style.posLeft=menuleft
document.all.News.style.posLeft=menuleft
document.all.Profiles.style.posLeft=menuleft
document.all.Issues.style.posLeft=menuleft
document.all.Extras.style.posLeft=menuleft
document.all.Links.style.posLeft=menuleft
document.all.Forum.style.posLeft=menuleft
document.all.About.style.posTop=Abouttop
document.all.News.style.posTop=Newstop
document.all.Profiles.style.posTop=Profilestop
document.all.Issues.style.posTop=Issuestop
document.all.Extras.style.posTop=Extrastop
document.all.Links.style.posTop=Linkstop
document.all.Forum.style.posTop=Forumtop
}
}
function getmenuname(clickedmenu) {
if (menuismoving=="no") {
if (document.layers) {
thismenu=eval("document."+clickedmenu)
}
if (document.all) {
thismenu=eval("document.all."+clickedmenu+".style")
}
step=pace
checkdirection()
movemenu()
}
}
function checkdirection() {
if (document.layers) {
if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}
}
if (document.all) {
if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}
}
menuismoving="yes"
}
function movemenu() {
if (document.layers) {
if (step>=0) {
thismenu.left+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (document.all) {
if (step>=0) {
thismenu.posLeft+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
}
// - End of JavaScript - -->
</SCRIPT>
Code: This is the CSS code that also goes into the head tag:
<style type="text/css">
#About {position:absolute;left:-1000px;}
#News {position:absolute;left:-1000px;}
#Profiles {position:absolute;left:-1000px;}
#Issues {position:absolute;left:-1000px;}
#Extras {position:absolute;left:-1000px;}
#Links {position:absolute;left:-1000px;}
#Forum {position:absolute;left:-1000px;}
.baseline {
position:absolute;
left:250px;
top:100px;
font-family:Arial;
font-size:9pt;
color:000000;
}
</STYLE>
And I'm not sure if this is needed or not, but just in case, here is everything between the body tags Code: <body onLoad="inite()" topmargin="0" leftmargin="0">
<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>
<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>
<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>
<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>
<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>
<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>
<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg">
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>
And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol. http://www.newwarriors.net I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much! Hi... I did the Cut & Paste CSS Vertical List Menu, but I have an issue with submenus... Appear behind other divs. I attach a print screen. I include inside a div. Any idea? Code: <div id="sidebar1">
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
<li><a href="#" >Helpful Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul>
</div>
I need the image to move horizontal instead of vertical. Here is the code. Code: //##########################################################################//
// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
// Original Source code: http://youlove.us/
// Modified and extended by Kudos Web Solutions
// copyright 2009 kudoswebsolutions.com
//##########################################################################//
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container3').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
function scrollbackground2() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container2').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground2();
}, 100
);
}
// Initiate the scroll
scrollbackground();
scrollbackground2();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset2 + "px");
$('#overlay2').css("background-position", "50% " + offset2 + "px");
});
I'm searching for a (customizable) script which allows me to make a simple drop-down menu. It might not look like a whole lot, but there's more to it than it seems. With any menu builder one can make such a menu BUT since I am restricted to a non html regular font I have to use (small) images with white on black text in that specific font, in order to show always this font to a visitor. Since the page background will also be black, the menu just looks like simple text. any help, advice or directions are highly appreciated. I'm a complete newbie so please excuse me if this is obvious. I'd like to have a drop down menu that pops up a small new window with an image. So for, every attempt results in the image appearing in a new tab instead of a small, pop up style window. Here's my form <select name="parms"> <option value="AirTemp.jpg">AirTemp</option> <option value="Humidity.jpg">Humidity</option> <option value="Windspeed.jpg">Wind Speed</option> </select> Many thanks. I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it? Hello All, I am trying to find a solution for this ..... kindly help incase you know.... I need a drop down menu to appear when I left-click an image.... have tried a lot but failed... Please help me out on this Thanks in advance,,, Regards Hello, I am working on my site http://www.alvadesign.com and trying to incorporate an image menu like the one at http://www.phatfusion.net/imagemenu/index.htm. I am new to javascripting and just begining to learn. I have the menu showing up now but not functioning upon rollover. This is all being done in a wordpress theme. This uses mootools.js and truthfully anything I did could be wrong at this point. Im not sure what im doing wrong and any help is greatly appreciated. Thank you, Alva www.alvadesign.com Hi, I was wondering why in mozilla firefox the same image menu has different way of transition on different sites. If you use firefox and go to this link and then hover over different pictures you will get to know how it moves http://www.alohatechsupport.net/exam...ge-menu-2.html after doing that go to this link http://bloghutsbeta.blogspot.com/201...ting-main.html and hover over images and see how it moves. In both cases the transition effect is same but in one it is slow (hanging) while in other it is smooth. I didn't presented the Markup as the both are identical but still if you feel like let me know in comments I will edit it to provide you with as much relevant data as possible and required. I have added "Swap Image" into a page which already has a Drop Down Menu. However the Drop Down Menu stopped working. I know I have to remove the last line from the Drop Down Script ...window.onload=startList;... and integrate it into the <body tag> but I can't seem to figure it out. Someone please help... Below is the script for the drop down menu. // JavaScript Document startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; Here is the page I'm trying to work with. http://sigautoparts.com/home-test.htm I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down? Kathy Good Morning Everyone, My first post here so hope i get the format right The problem I have a menu on a new website im developing. The menu is going to be within a PHP include file. I need a way of (using JS) the current page having its menu item with a different image to the others e.g. a "selected" image. The code im experimenting with, and which may shed a bit more light on what im trying to achieve is as follows: Code: var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if (filename = 'about.php')
{
$('#about').attr('src', 'images/Nav/about_selected.png')
}
else
{
$('#about').attr('src', 'images/Nav/about_over.png')
}
I am using jQuery for this project thus the jQuery code being thrown in there. The logic of the code iv made is, IF the page is 'About' then the 'About' menu button should display 'about_selected.png'. I hope this makes sense and a solution would be much appreciated. Thanks! Hi there I've created a nav bar for this site - http://web11.3essentials.com/~cp27358/ - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image: menu1buttonup = new Image(); menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ; menu1buttondown = new Image() ; menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ; followed by.... function buttondown( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "down.src" ); } } function buttonup ( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "up.src" ); } } and this is what my list items look like: <a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')" onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a> thank you I am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads webpages inside the main index one, I would like to use the code on one of those pages but something is not working. I am not able to use the specified DOCTYPE but find that it works all the same with my current one, however if I use the given one in addition to the one I have now (and need) then my site does not work properly, further if I replace it I get the same results. My existing doctype: Code: <DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> What the code uses: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> I'm not sure what the differences are but I've been advised that I need to run the code in "standards mode" before I try to fix it. As I see it the code works, just not where I need it to, nothing unusual on my site and nothing unusual that I may be wrong. On my site you can see at the bottom right a blue text link called "aaaa" this is the code that works, however (clicking the dome to the left of that to scroll the page down and selecting the "met.a has guts" menu option diagram) you'll see the "aaaa" link again at the bottom left of that page and that is where I need it to work from. I even tried using the exact code from the example in that linked .htm page but it doesn't make a difference, it probably even hinders the code as it looks at the main html page. But if loading the page on its own the code will work, so its related to the menu and the way that works. If anybody can help that would be brilliant, I'm sure its something simple. Thanks! I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me: http://bedrockstoneanddesign.com/ It only happens in FireFox..... any help is appreciated. thanks I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me? Thanks in advance for any help given! Code: function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}
Code: <label> <select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()"> <option value="/images/thumbnails/image1.jpg">White</option> <option value="/images/thumbnails/image2.jpg">Blue</option> <option value="/images/thumbnails/image3.jpg">Green</option> </select> </label> Code: <div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" /> |
|||||||