|
JavaScript - Rollover Image Menu With Current Page Active
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 Similar TutorialsHi, I created a simple menu: Code: <html>
<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>
<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>
<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>
<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>
<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>
</tr>
</tbody>
</table>
</body>
</html>
Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on. Regards Rain Lover I would like top use this excellent script on my website, but I am not sure how to enhance the function of it. I mean I would like to use it for more than just one navigation menu. The script assigns the "current" id for the active link on the page through the "nav" menu. What needs to be added to, or modify if I would like to use it also for "nav2" on the same page? Thank you, Peter window.onload=function() { setPage(); } function extractPageName(hrefString) { var arr = hrefString.split('/'); return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase(); } function setActiveMenu(arr, crtPage) { for (var i=0; i < arr.length; i++) { if(extractPageName(arr[i].href) == crtPage) { if (arr[i].parentNode.tagName != "DIV") { arr[i].className = "current"; arr[i].parentNode.className = "current"; } } } } function setPage() { hrefString = document.location.href ? document.location.href : document.location; if (document.getElementById("nav") !=null ) setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString)); } Hi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! I'm trying to get this to work... I have a menu which has a submenu which is activated on mouse over with javascript and that part works just fine, but... I want to be able to have the submenu showned if the mainmenu is clicked... So if, as in example below, the page home is selected, the submenu is activated untill trhe mouse is hoovering over the "Cars" link, and when the mouse goes off the Cars link again the home submenu is activated... Hope this makes sense... Example below: Code: <script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul class="navbar">
<li><a href="index.php?page=home">Home</a>
<ul class="sub">
<li><a href="index.php?page=account">Account</a></li>
<li><a href="index.php?page=profile">Profile</a></li>
</ul>
</li>
<li><a href="index.php?page=cars">Cars</a>
<ul class="sub">
<li><a href="index.php?page=smallcars">Small Cars</a></li>
<li><a href="index.php?page=bigcars">Big Cars</a></li>
</ul>
</li>
</ul>
Hope this makes sense... Any help is appreciated... Hi everyone! I'm making a tab menu with HTML, CSS and JavaScript. I have this HTML: <ul class="tabmenu"> <li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Información</a></li> <li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Mapas</a></li> <li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Fotos</a></li> <li><a href="javascript:void(0)" onclick="tabs('4');changeActiveStates(this)" id="link4">Cómo llegar</a></li> </ul> Then I added some CSS to it (if you need to see it please tell). And the JavaScript: <script type="text/javascript"> function tbs(id){ return document.getElementById(id); } function tabsen(){ tbs("1").style.display = "none"; tbs("2").style.display = ""; tbs("3").style.display = ""; tbs("4").style.display = ""; } function tabs(id) { tabsen(); var e = tbs(id); e.style.display = ( e.style.display == '' ) ? 'block' : '' ; } function byId(id) { return document.getElementById ? document.getElementById(id) : document.all[id]; } var prevLink = ""; function changeActiveStates(ele) { if (prevLink) byId(prevLink).className = ""; ele.className = 'active'; prevLink = ele.id; } </script> The problem is: I don't know how to set active the first tab. I've tried with class='active', but when I use that atribute and click on another tab, the first one doesn't deactivate... Can anybody help me? I'm new to javascript. Can someone help me with this menu? Here is my html code: <head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Alaska Fur Gallery</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="JavaScript" src="js.js"></script> <link rel="stylesheet" type="text/css" href="activemenu.css" /> <script src="jquery-activemenu.js" type="text/javascript"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a#fancybox").fancybox({ 'titleShow' : false, type:'image' }); //show the footer $("#footer").css("visibility","visible"); //initialize activeMenu initMenu(); }); </script> </head> <body> <div id="container"> <div id="header"> <a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a> <div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div> <div id="underlinemenu" class="ulmhead"> <ul> <li><a href="index.html" style="border:0;">Home</a></li> <li><a href="content2e96.html?id=431503">About</a></li> <li><a href="content9bf1.html?id=431504">Services</a></li> <li><a href="find_location.html">Locations</a></li> <li><a href="ct.html">Contact Us</a></li> </ul> </div> <div class="clear"></div> <div id="topmenu"> <ul id="activeMenu"> <li style="top: 0; left:0px"><a href="shopa146.html?action=cat&catID=20529" id="furs">Furs</a></li> <li style="top: 0; left:66px"><a href="shop52df.html?action=cat&catID=20541" id="leather">Leather & Fur</a></li> <li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&catID=20575" id="cashmere">Cashmere & Fur</a></li> <li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&catID=21239" id="outerwear">Outerwear</a></li> <li style="top: 0; left:493px"><a href="shop0376.html?action=cat&catID=20544" id="plus">Plus Sizes</a></li> <li style="top: 0; left:604px"><a href="shop2060.html?action=cat&catID=20580" id="accessories">Accessories</a></li> </ul> </div><!-- topmenu --> </div><!-- header --> <!--submenu divs--> <div id="furs_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;"> <span>Women's Furs</span> <li><a href="shopde5e.html?action=cat&catID=20572">Mink</a></li> <li><a href="shop2705.html?action=cat&catID=20574">Sable</a></li> <li><a href="shop5c0d.html?action=cat&catID=20570">Chinchilla</a></li> <li><a href="shopdfa7.html?action=cat&catID=20568">Beaver</a></li> <li><a href="shop04fa.html?action=cat&catID=20571">Lynx</a></li> <li><a href="shop65dc.html?action=cat&catID=20569">Bobcat</a></li> <li><a href="shopc9fc.html?action=cat&catID=20622">Coyote</a></li> <li><a href="shop65f8.html?action=cat&catID=20539">Fox</a></li> <li><a href="shop3276.html?action=cat&catID=20573">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop2ef6.html?action=cat&catID=20531">Mink</a></li> <li><a href="errorfe10.html?action=cat&catID=20532">Sable</a></li> <li><a href="errorfe10.html?action=cat&catID=20533">Chinchilla</a></li> <li><a href="errorfe10.html?action=cat&catID=20534">Beaver</a></li> <li><a href="errorfe10.html?action=cat&catID=20535">Lynx</a></li> <li><a href="errorfe10.html?action=cat&catID=20536">Bobcat</a></li> <li><a href="shopfc5b.html?action=cat&catID=20618">Coyote</a></li> <li><a href="shop88e4.html?action=cat&catID=20537">Fox</a></li> <li><a href="errorfe10.html?action=cat&catID=20540">Rabbit</a></li> </ul> </div> <div id="leather_submenu"> <ul class="dropdown"> <li><a href="shop973d.html?action=cat&catID=20542">Women's Leather & Fur</a></li> <li><a href="shop4cc6.html?action=cat&catID=20543" style="border:0;">Men's Leather & Fur</a></li> </ul> </div> <div id="cashmere_submenu"> <ul class="dropdown"> <li><a href="shop3f01.html?action=cat&catID=20576">Coats</a></li> <li><a href="shopd4d8.html?action=cat&catID=20577">Strollers</a></li> <li><a href="shop7899.html?action=cat&catID=20578">Jackets</a></li> <li><a href="shopcba4.html?action=cat&catID=20579" style="border:0;">Capes</a></li> </ul> </div> <div id="plus_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;"> <span>Women's Furs</span> <li><a href="shop2530.html?action=cat&catID=20564">Mink</a></li> <li><a href="shop807e.html?action=cat&catID=20566">Sable</a></li> <li><a href="shopbc8f.html?action=cat&catID=20557">Chinchilla</a></li> <li><a href="shopcb16.html?action=cat&catID=20553">Beaver</a></li> <li><a href="shop3cb8.html?action=cat&catID=20561">Lynx</a></li> <li><a href="shopb6e3.html?action=cat&catID=20555">Bobcat</a></li> <li><a href="shop1e6c.html?action=cat&catID=20621">Coyote</a></li> <li><a href="shopc08b.html?action=cat&catID=20559">Fox</a></li> <li><a href="shop0495.html?action=cat&catID=20562">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop9b23.html?action=cat&catID=20565">Mink</a></li> <li><a href="shop10dc.html?action=cat&catID=20567">Sable</a></li> <li><a href="shop8154.html?action=cat&catID=20556">Chinchilla</a></li> <li><a href="shop0b63.html?action=cat&catID=20551">Beaver</a></li> <li><a href="shopa40f.html?action=cat&catID=20560">Lynx</a></li> <li><a href="shopd843.html?action=cat&catID=20554">Bobcat</a></li> <li><a href="shopa2c0.html?action=cat&catID=20620">Coyote</a></li> <li><a href="shopb0b2.html?action=cat&catID=20558">Fox</a></li> <li><a href="shopd3b0.html?action=cat&catID=20563">Rabbit</a></li> </ul> <div class="clear"></div> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;"> <span>Leather & Fur</span> <li><a href="shop91d6.html?action=cat&catID=20549">Women's Leather & Fur</a></li> <li><a href="shop8605.html?action=cat&catID=20548">Men's Leather & Fur</a></li> </ul> <ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;"> <li><a href="shope478.html?action=cat&catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li> </ul> </div> <div id="accessories_submenu"> <ul class="dropdown"> <li><a href="shop2f26.html?action=cat&catID=20581">Fur Hats</a></li> <li><a href="shop9989.html?action=cat&catID=20582">Fur Headbands</a></li> <li><a href="shop935f.html?action=cat&catID=20583">Fur Earmuffs</a></li> <li><a href="shopd2bf.html?action=cat&catID=20584">Gloves with Fur</a></li> <li><a href="shop2c08.html?action=cat&catID=20585">Fur Boot Toppers</a></li> <li><a href="shop9f4f.html?action=cat&catID=20586">Fur Scarves & Flings</a></li> <li><a href="shop3d06.html?action=cat&catID=20587">Fur Blankets</a></li> <li><a href="shop4bf4.html?action=cat&catID=20588">Fur Handbags</a></li> <li><a href="shop611a.html?action=cat&catID=20589" style="border:0;">Mink Teddy Bears</a></li> </ul> </div> Here is the javascript: /* jQuery ActiveMenu v1.0 Author: Miguel Sanchez 12/2009 */ var timeouts = []; //for hiding the menu purposes function initMenu(){ var offclass; var menuAnchor; $("#activeMenu").find("li").each(function() { //get a reference to the anchor inside the li menuAnchor = $(this).children(":first"); //get the name of the offclass offclass = $(menuAnchor).attr("id")+"_off"; //assign off class to item $(menuAnchor).addClass(offclass); //assign hover event handler to main menu $(menuAnchor).hover( function (event) { submenu_show(event.target); }, function (event) { submenu_hide(event.target); } }); //assign hover events to submenu $("div [id$=_submenu]").hover( function (event) { submenu_over(event.target); }, function (event) { submenu_out(event.target); } } function submenu_show(caller){ //hide all the submenus $("div [id$=_submenu]").hide(); //get the id of the main menu item var mainMenuItemId = $(caller).attr("id") //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove off class to item $(caller).removeClass(offclass); //assign on class to item $(caller).addClass(onclass); // get the id of the submenu var targetSubMenuId = mainMenuItemId+"_submenu"; //show the submenu $("#"+targetSubMenuId).slideDown("fast"); } function submenu_hide(caller){ //get the id of the main menu item var mainMenuItemId = $(caller).attr("id"); //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove on class to item $(caller).removeClass(onclass); //assign off class to item $(caller).addClass(offclass); timeouts[mainMenuItemId] = setTimeout(function() { $("#"+mainMenuItemId+"_submenu").slideUp("fast"); }, 200); } function submenu_over(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); //show the div $(subMenuDiv).show(); //get the id of the main menu var mainMenuItemId = $(subMenuDiv).attr("id"); mainMenuItemId = mainMenuItemId.replace("_submenu",""); clearTimeout(timeouts[mainMenuItemId]); //remove the "off" class $("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off"); //add the "on" class $("#"+mainMenuItemId).addClass(mainMenuItemId+"_on"); } function submenu_out(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); $(subMenuDiv).hide(); //get the id of the main menu var menuAnchorId = $(subMenuDiv).attr("id"); menuAnchorId = menuAnchorId.replace("_submenu",""); //remove the "on" class $("#"+menuAnchorId).removeClass(menuAnchorId+"_on"); //add the "off class $("#"+menuAnchorId).addClass(menuAnchorId+"_off"); } Here is the CSS styling: /* graphical menu codes */ #topmenu ul { list-style: none; width: 738px; height:52px; padding:0; margin: 0px; position: absolute; top:94px; right:0; overflow: hidden; } #topmenu li { display: inline; position: absolute; } #topmenu li a{ float: left; font-size:11px; line-height: 14px; white-space: nowrap; text-transform: uppercase; text-align:center; padding: 0 0 0 0; text-indent:777px; overflow:hidden; height:52px; } #topmenu li a:hover { color: #bceffa; } a.on { color: #bceffa; } #topmenu a { color: #ffffff; text-decoration: none; } #topmenu a:hover { color: #bceffa; text-decoration: none; } .furs_off { background: url("graphics/topmenu2.gif") 0 0 no-repeat; width:66px; } .furs_on { background: url("graphics/topmenu2.gif") 0 -52px no-repeat; } .leather_off { background: url("graphics/topmenu2.gif") -66px 0 no-repeat; width:144px; } .leather_on{ background: url("graphics/topmenu2.gif") -66px -52px no-repeat; } .cashmere_off { background: url("graphics/topmenu2.gif") -210px 0 no-repeat; width:165px; } .cashmere_on{ background: url("graphics/topmenu2.gif") -210px -52px no-repeat; } .outerwear_off { background: url("graphics/topmenu2.gif") -374px 0 no-repeat; width:119px; } .outerwear_on{ background: url("graphics/topmenu2.gif") -374px -52px no-repeat; } .plus_off { background: url("graphics/topmenu2.gif") -493px 0 no-repeat; width:111px; } .plus_on{ background: url("graphics/topmenu2.gif") -493px -52px no-repeat; } .accessories_off { background: url("graphics/topmenu2.gif") -604px 0 no-repeat; width:133px; } .accessories_on{ background: url("graphics/topmenu2.gif") -604px -52px no-repeat; } ul.dropdown { list-style: none; margin: 0; padding: 0; border: none; z-index:10000; position:relative; } ul.dropdown li span { display: block; _display:inline-block; text-decoration: none; } ul.dropdown li a { display: block; position: relative; _display:inline-block; /* so IE doesn't add space between elements */ _width: 83%; /* makes block fill width in IE */ padding: 6px 10px 6px 10px; font-size: 13px; color: #ffffff; text-decoration: none; border-bottom:1px solid #b78833; } ul.dropdown li a:hover{ color: #ffffff; background: #e3a73a; text-decoration: none; } .dropdown span{ font-weight:bold; color:#64450f; margin:0 0 0 10px; } #furs_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 260px; display: none; z-index:1000; } #leather_submenu { width:166px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 325px; display: none; z-index:1000; } #cashmere_submenu { width:192px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 470px; display: none; z-index:1000; } #plus_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 698px; display: none; z-index:1000; } #accessories_submenu { width:158px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 840px; display: none; z-index:1000; } I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu. Now the active page is hightlighted, but the parent isn't (if the active page is a submenu). So what I want is that when a subitem is active, also it's parent should be active, for example: main_item_1 main_item_2 --sub_item_1 --sub_item_2 In this case when sub_item_2 is active, also main_item_2 should be. I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it. So here is the code I use: Code: $('#topnav ul li ul.submenu li a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = decodeURIComponent(document.location.href);
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('#topnav > ul > li > a').each(function(){
var currURL = decodeURIComponent(document.location.href);
var myHref= $(this).attr('href');
if (currURL.match(myHref)) {
$(this).addClass('active');
//$('a', $('.active').parents("li:last")).addClass('active');
$(this).parent().find("ul.submenu").css('display', 'block');
}
});
The middle group code is for the subitem, so the code to make the parent also active should be there I think. When I add the following line to the middle group (after the $(this).parents part): Code: $(this).parents("#topnav ul li").addClass('parent');
I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent. Please help. 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! need help adding a one second delay to a drop down menu. don't want people triggering it by accident: http://www.corneliodesign.com/menu/ i used hoverIntent to delay it: http://cherne.net/brian/resources/jq...verIntent.html i got the script in the http://www.corneliodesign.com/menu/s...hoverIntent.js but it's not actually working for me. please see if could look at code, tell what's wrong or gimme another options, would be extremely appreciative, thanks, julio Hi guys, Im not sure my subject decsription gives an exact description of what i am after but i will try and explain my requirements a bit better. I have an header menu there are items in this menu but there are a lot of them and if you try view on a normal 1024 x 760 you have to horizontal scroll to view all the items, but on my monitor 1920 x 1080 it is fine. I don't want to do it this way since I hate having to scoll both horizontal and vertical. I would like to be able to change the items on this header to become a rollover dropdown menu when they would normally be hidden becuase of the screen width. I have seen this done before I am just unsure about how to implement this. can anyone point me in the direction of some good resources for this? Thanks EDIT---------------------------------------------------------------------------------------------- I am using jQuery if that make it easier to fine a script that would do this Hi all, I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS. Can someone point me in the right direction as far as documentation? Thanks a bunch! Hi there, I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs? Any help is greatly appreciated!! http://www.codingforums.com/archive/...p/t-95847.html Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php I would like to display the current page the user is on somewhere on the page. Example: You are currently viewing index.php How would I be able to accomplish this? So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction. I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons. I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value. Code: <script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];
var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the first seventh of text.",
];
var currentMain = 0;
var currentMainT = 0;
function Prev()
{
return ShowMain(currentMain-1);
return ShowMainT(currentMainT-1);
}
function Next()
{
return ShowMain(currentMain+1);
return ShowMainT(currentMainT+1);
}
function ShowMain(which)
{
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
document.getElementById("mainText").style.display = 'inline'
document.getElementById("gallery").style.color="#ff0000";
return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="../Assets/Images/pt_entry+hall2.jpg"
images[1]="../Assets/Images/pt_stair+hall.jpg"
images[2]="../Assets/Images_Revised/40_kitchen.jpg"
images[3]="../Assets/Images_Revised/40_stair.jpg"
images[4]="../Assets/Images_Revised/C_front2.jpg"
images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
images[7]="../Assets/Images_Revised/C_side.jpg"
images[8]="../Assets/Images_Revised/Y_combo.jpg"
images[9]="../Assets/Images_Revised/Y_window.jpg"
images[10]="../Assets/Images_Revised/V_stair.jpgg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
Code: <div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
</td>
<td id="cell5 images"> </td>
</tr>
<tr>
<td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a></div>
Hi all I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111 Kind regards Anne This is my js: Code: $(".nav").click(function(){
$(".nav.a").toggle("fast");
$(this).toggleClass("active");
});
This is my css; Code: .nav {
text-align: center;
overflow: hidden;
margin: .3em ;
width: 500px;
position: fixed;
padding: 0px 0px 0 830px;
}
.nav a {
position: relative;
float: left;
padding: 2.2em 0 3.1em;
width: 20%;
text-decoration: none;
color: #484848;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: 120%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 66.3%; }
.nav a:nth-child(2):hover ~ .effect {
left: 73.8%; }
.nav a:nth-child(3):hover ~ .effect {
left: 81.2%; }
.nav a:nth-child(4):hover ~ .effect {
left: 89%; }
.nav a:nth-child(5):hover ~ .effect {
left: 96.4%; }
/* ----- dot effect -----*/
.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #484848;
bottom: 40px;
}
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
bottom: 38px;
left: 50%;
margin-left: 0px;
background: #484848;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #fff;
border-radius: 100%;
z-index:999;}
Hey Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others Hi Guys, I want to output my pagetitle in javascript. An idea of syntax? <title> products</title> eg My page title is javascript code outputs... My page title is products no joy with Code: <body> <script TYPE="text/javascript"> document.write(document.title); </script> </body> Thanks I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please.... (roll over image) In the <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif"; staticImage1 = new Image(); staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif"; ........................................................... (button) <a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a> ........................................................... (two frames at once text) In the <head> <script language="javascript"> function loadTwo(iframe1URL, iframe2URL) { parent.frame1.location.href=iframe1URL parent.frame2.location.href=iframe2URL } </script> ........................................................... (button) <a href="javascript:loadTwo('info.html','home.html')">info</a> Thanks! |
|||||||