|
JavaScript - Css/javascript Navigation Page Identifier Script
I am trying to figure out how to code this type of horizontal navigation like this site. http://www.maxdesign.com.au/
When you click on, say, "News", the CSS button turns red and white. I am thinking that this is done with JavaScript and a basic CSS list menu. But I cannot seem to find an example of this the of menu anywhere. The Max Design site is based on WordPress and apparently this navigation uses an API built into the WP framework. I need this type of horizontal menu for a custom coded CSS and PHP site. Any and all help would be appreciated. Either code or point me to a tutorial. Thanks, WiLd Similar TutorialsHello, I'm working on a page navigation script and i'm stuck at a part. I have made a little picture gallery script and my team partners can fill in how many folders they want to show on a page. So example i have 5 folders and want to show 2 folders per page i tried to use code like this var totalFolderPages = 1; if ((parseInt(pageCounter) / parseInt(totalFoldersPerPage) % 1 == 0)) { totalFolderPages++; } I'm still a bit new in coding and don't know how i can create a working solution for my page navigation. Some help would be great Is there a way to use inline javascript that will prevent any javascript after it (in the same page) from executing? So, for instance I could have something like: -Content- -JS A- -Content- -JS B- -JS C- 'JS A' would execute, 'JS B' would be the code I'm asking about and it would cause 'JS C' to not do anything. Sorry if this is an off-the-wall question. I good with C/C++, VB, Ruby, Lua, HTML, etc, but I haven't gotten to Javascript (or Java) yet so I have no idea what the capabilities or environment setup are like. Thanks in advance for any advice. Hello guys, You were all very kind to help me a few months ago when I was trying to create the code which is posted below. it is a table of banner ads that will rotate on my website and the appropriate link follows the appropraite ad when they rotate. everything is working fine except that when you click on one of the ads ( which is a link), the link works but the page displays an error at the bottom as soon as any link is clicked. Since this type of hyperlink is associated with the javascript, im not sure how to correct the issue. maybe it is a simple thing. can anyone take a look at this and help me figure out the issue? thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.</title>
<script type="text/javascript">
var ImageArray = [ // add paths, if needed
['randoms/0.jpg','http://0.com'],
['randoms/1.jpg','http://1.com'],
['randoms/2.jpg','http://2.com'],
['randoms/3.jpg','http://3.com'],
['randoms/4.jpg','http://4.com'],
['randoms/5.jpg','http://5.com'],
['randoms/6.jpg','http://6.com'],
['randoms/7.jpg','http://7.com'],
['randoms/8.jpg','http://8.com'],
['randoms/9.jpg','http://9.com'],
['randoms/10.jpg','http://10.com'],
['randoms/11.jpg','http://11.com'],
['randoms/12.jpg','http://12.com'],
['randoms/13.jpg','http://13.com'],
['randoms/14.jpg','http://14.com'],
['randoms/15.jpg','http://15.com'] // No comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function ChangeImages() {
var ImgPtr = new Array();
for (var i=0; i<ImageArray.length; i++) { ImgPtr[i] = i; }
ImgPtr = ImgPtr.sort(randOrd);
var tmp = '';
for (var i=0; i<ImgPtr.length; i++) {
tmp = 'tImg'+i;
document.getElementById(tmp).src = ImageArray[ImgPtr[i]][0];
document.getElementById(tmp).alt = ImageArray[ImgPtr[i]][1];
tmp = 'lImg'+i;
document.getElementById(tmp).href = ImageArray[ImgPtr[i]][1];
}
}
var TimerAction = 0;
function startTimer() {
TimerAction = setInterval('ChangeImages()',3000);
}
function stopTimer() {
clearTimeout(TimerAction);
}
</script>
<style type="text/css">body { background-color: #000000; margin: 0;
}
</style></head>
<body onLoad="startTimer();ChangeImages()" >
<table width="250" border="0" cellpadding="0" id="ads">
<tr><td>
<a href="" id="lImg0" onclick="return gotoLink(this.id,0)"target="_blank">
<img id="tImg0" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg1" onclick="return gotoLink(this.id,1)"target="_blank">
<img id="tImg1" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg2" onclick="return gotoLink(this.id,2)"target="_blank">
<img id="tImg2" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg3" onclick="return gotoLink(this.id,3)"target="_blank">
<img id="tImg3" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg4" onclick="return gotoLink(this.id,4)"target="_blank">
<img id="tImg4" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg5" onclick="return gotoLink(this.id,5)"target="_blank">
<img id="tImg5" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg6" onclick="return gotoLink(this.id,6)"target="_blank">
<img id="tImg6" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg7" onclick="return gotoLink(this.id,7)"target="_blank">
<img id="tImg7" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg8" onclick="return gotoLink(this.id,8)"target="_blank">
<img id="tImg8" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg9" onclick="return gotoLink(this.id,9)"target="_blank">
<img id="tImg9" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg10" onclick="return gotoLink(this.id,10)"target="_blank">
<img id="tImg10" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg11" onclick="return gotoLink(this.id,11)"target="_blank">
<img id="tImg11" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg12" onclick="return gotoLink(this.id,12)"target="_blank">
<img id="tImg12" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg13" onclick="return gotoLink(this.id,13)"target="_blank">
<img id="tImg13" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg14" onclick="return gotoLink(this.id,14)"target="_blank">
<img id="tImg14" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg15" onclick="return gotoLink(this.id,15)"target="_blank">
<img id="tImg15" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
</table>
</body>
</html>
I just noticed that my pseudo-streaming movie code causes an error with IE7. I works fine with IE8, FireFox, Chrome... I have been looking on my own and found that it's likely a misplaced comma in my code, the other browser are debugging it, but IE7 will not. The error suggests it's where I have indicated below. I've tried removing the comma just after "about_us.jpg" and that causes the script to fail completely. Can anyone help me here, please? Code: <script type="text/javascript">
//<![CDATA[
flowplayer("player", {src: "http://www.mysite.org/flowplayer/flowplayer.commercial-3.2.5.swf", wmode: 'opaque'}, {
// product key from your account
key: '#$xxxxxxxxx',
// configure clip to use "lighthttpd" plugin for providing video data
playlist: [
{
url: 'http://www.mysite.org/media/video/about_us.jpg',
}, //<----error suggest here???
{
url: 'http://www.mysite.org/flowplayer/streamer.php?file=about_us.flv',
provider: 'lighttpd',
bufferLength: "2",
autoBuffering: false
}],
// streaming plugins are configured normally under the plugins node
plugins: {
lighttpd: {
url: 'http://www.mysite.org/flowplayer/flowplayer.pseudostreaming-3.2.5.swf',
// use ${start} as a placeholder for the target keyframe
queryString:escape('&start=${start}')
}
}
});
//]]>
</script>
Hey guys, I've been learning Javascript for a few days using code academy. I've come across this issue, and I'm not sure what exactly I'm doing wrong. Any help would be great. // Check if the user is ready to play! confirm("I am ready to play!"); var age = prompt("What's your age?"); if (age < 13) { console.log("I take no responsiblity, but you are allowed to play") } else { console.log("Have fun!") } console.log("You are at a Justin Bieber concert, and you hear this lyric 'Lace my shoes off, start racing.'") console.log("Suddenly, Bieber stops and says, 'Who wants to race me?'") var userAnswer = prompt("Do you want to race Bieber on stage?"); if userAnswer === "yes" { console.log("You and Bieber start racing. It's neck and neck! You win by a shoelace!"); } else { console.log("Oh no! Bieber shakes his head and sings 'I set a pace, so I can race without pacing.'"); } Hi.. I am facing identifier starts immediately after numeric literal error in firefox onclick="document.location.href='<%= themeDisplay.getPathMain() %>/portal/ext/asite/assignOrg'"/> can any 1 solve this?? I'm installing a Disqus commenting system on a news site. Javascript attaches a comment thread to the end of a story page, based on the story's url. Our issue is that many stories may have multiple urls, and we want a single comment thread on those stories. A single story may have a url like this: www.newspaper.com/ci_12345678 and this: www.newspaper.com/entertainment/ci_12345678 Disqus provides an alternative var disqus_identifier I'd like to define disqus_identifier to the final 8-digit story ID, read from the url. Here's the way the code looks: Code: <div id="disqus_thread"></div>
<script type="text/javascript">
/**
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
*/
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://newspaper.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
I'm not sure how to define var disqus_identifier. Can anyone help me out?
Hey there! I'm having a bit of a problem with this site I'm workin' on... I am trying to incorporate a website slider (http://tympanus.net/codrops/2010/06/...g-with-jquery/), so when you click the links in my naviagtion, it slides right (horizontally) to a new page, however, with the slider/scroller script in there, the navigation stops working! Here is the link to this page and my code: http://goatsy.me/motoring/ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>High Style Motoring - Scooters, Pit Bikes, Atv's, Mopeds, Parts and more!</title>
<link rel="stylesheet" href="example/css/website.css" type="text/css" media="screen"/>
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: "Trebuchet MS", sans-serif;
background:#fff url(images/bg_scoot1.png) no-repeat top left;
padding:20px;
}
.title{
width:548px;
height:169px;
position:absolute;
top:300px;
left:300px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="#"><img src="example/images/scoot_gray.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_red.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_green.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_atv.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_pit.png" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<div id="content">
<a class="back" href="#"></a>
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul class="nav">
<li><a href="#section1">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Bikes</h2>
<ul>
<li><a href="#scooter">Scooter</a></li>
<li><a href="#moped">Moped</a></li>
<li><a href="#atv">ATV / Pit</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="#">Catalog</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Order Now</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Photos</h2>
<ul>
<li><a href="#">Bikes</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Acc.</a></li>
</ul>
</div>
<div class="item fav">
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Extra</h2>
<ul>
<li><a href="#">Dream Bike</a></li>
<li><a href="#">FAQ / Info</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div class="section black" id="section1">
<h2>ABOUT US</h2>
<p>
HIGH STYLE MOTORING A constant commitment to quality, service, and customer satisfaction.
We are a family owned and operated dealership doing business at our present location since 1987. It is important to note that we are a fully licensed and bonded California new motorcycle dealership (Dealer # 11080) and operating a full service brick and mortar establishment dedicated to serving the needs of the most discriminating customer.
This is important as it sets us far apart from most of the "on-line" businesses that really don't have the proper knowledge or understanding of the products they sell. Here at HIGH STYLE MOTORING we are dedicated to not just the sale, but have a full service repair facility as well as one of the most extensive parts inventories available.
Over the last 23 years we have helped literally thousands of customers find the Scooter, Pit Bike, ATV or vehicle that best fit their style and budget. We will be more than happy to help you as well!
YIPPEE! Huge selection in stock and ready to take home. NATIONWIDE delivery is also available on each unit that we sell and you can rest assured knowing that your new vehicle will be delivered promptly right to your door ANYWHERE in the USA!
It's for these reasons that we sell absolutely more Scooters, Pit Bikes, ATV's and other vehicles than ANYONE in the entire area!
Check us out - we're here all day long saving you big $$$on the product that fits your style.
Retro's, Cruisers, Freeway Scoots, ATV's and the complete line-up of SSR Pit Bikes are all in stock and ready for delivery - RIGHT NOW!
We can also hand deliver your products anywhere in the Orange County or Los Angeles areas. Please give us a call at (562) 945-8361.
We also accept most major credit cards.
Stop by and say 'Hi' and let us help you to start saving money TODAY!
</p>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>
And whenever I take out this part of the code, the navigation starts working again, but the slider totally doesn't work... it turns into a simple/regular page anchor again! D: (The slider doesn't seem to be working either way): Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> So, any ideas or info would be suuuuper appreciated b/c I've been trying to figure this out and I reallllllly want it to work! I can't seem to figure out what the problem is hurr! :\ Hi guys, I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead. I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!! Working Website: http://17thstop.sg/demo CSS Files: http://17thstop.sg/demo/styles.css http://17thstop.sg/demo/css/default.advanced.css http://17thstop.sg/demo/css/default.css http://17thstop.sg/demo/css/dropdown.css Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- #BeginTemplate "index.dwt" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>
<script type="text/javascript" src="gallery/swfobject.js"></script>
<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- End of Menu and JS -->
</head>
<body>
<div id="content">
<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>
<!-- Start of Menu -->
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li class="dir">About Us
<ul>
<li><a href="about_us.htm">The Four Musketters</a></li>
<li class="dir">The Team
<ul>
<li><a href="darren.htm">Darren</a></li>
<li><a href="jon.htm">Jonathan</a></li>
<li><a href="hweek.htm">Hwee Key</a></li>
<li><a href="gavin.htm">Gavin</a></li>
</ul>
</li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir">Services
<ul>
<li><a href="cne.htm">Event & Commercial Photography</a></li>
<li><a href="portrait.htm">Portrait Photography</a></li>
<li><a href="wedding.htm">Wedding Photography</a></li>
<li><a href="studio.htm">Rental of Studio</a></li>
<li><a href="./">Training & Consulting</a></li>
</ul>
</li>
<li><a href="gallery3/gllery.htm">Gallery</a></li>
<li><a href="./">Events</a></li>
<li><a href="./">Careers</a></li>
<li><a href="./" class="dir">Contact Us</a>
<ul>
<li><a href="contact.htm">Enquiry Form</a></li>
<li><a href="locationc.htm">Contact Us & Location</a></li>
</ul>
</li>
</ul>
</div>
<!-- End of Menu -->
<div id="content1">
<!-- #BeginEditable "BodyContent" -->
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<!-- #EndEditable -->
<script type="text/javascript">
var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
fo.addVariable("xmlURL", "gallery/gallery.xml");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery/gallery.xml");
fo.write("flashcontent");
</script></div>
<div id="footer">
<p id="links">
Copyright © 2010 − Four Musketters Studio · Your Number 1 Choice.
</p>
<p>
<a href="#">Home</a>
<a href="#">Practice</a>
<a href="#">Attorneys</a>
<a href="#">Accidents</a>
<a href="#">News</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</p>
</div>
</body>
<!-- #EndTemplate -->
</html>
Hello I have a javascript navigation bar at the top of my page. I would like to split the navigation with 3 links on the left side of my logo and 3 links on the right side. Like this.... Home Designs Services (LOGO IMAGE) About FAQ's Contact Can someone help me figure out how to split a javascript navigation? I don't know if it should be separate navigation for the right and left or if it is just a CSS change? Below is my javascript and CSS. Code: <script type="text/javascript" src="tinydropdown.js"></script>
</script>
<div class="nav">
<ul id="menu" class="menu">
<li class="nodiv"><a href="#">Home</a></li>
<li><a href="#">Designs</a>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="submenu">
<a href="#">Three</a>
<ul>
<li class="noborder"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</li>
<li><span>Services</span>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li class="submenu">
<span>No Link</span><ul>
<li class="noborder"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</li>
<li class="nodiv"><a href="#">About</a></li>
<li><a href="#">FAQ's</a>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="submenu">
<a href="#">Three</a>
<ul>
<li class="noborder"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
<li class="nodiv"><a href="#">Contact</a></li></li>
</li>
</ul>
</div>
<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>
Code: .nav {
height:36px;
color:#fff;
text-shadow:1px 1px #888;
position:absolute;
z-index: 100;
width: 960px;
padding-top: 70px;
padding-left: 0px;
}
.menu a {
float:left;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px;
}
.menu span {
float:left;
color:#eee;
text-decoration:none;
width:120px; height:28px;
padding-top:8px;
}
.menu a:hover {
color:#fff;
}
.menu {
list-style:none;
font:16px Arial,Verdana;
text-align:center;
width:900px;
margin:0 auto;
}
.menu li {
position:relative;
float:left;
width:120px;
z-index:1000;
}
.menu ul {
display:none;
position:absolute;
font:normal 13px Arial,Verdana;
top:36px;
left:0;
background:#aaa;
display:none;
list-style:none;
}
.menu ul li {
float:none;
border-top:1px solid #ccc;
width:120px;
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px;
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999;
color:#fff;
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px;
}
.menu ul ul {
left:120px;
top:0;
}
.menu li.submenu {
font-weight:bold;
}
.menu li.noborder {
border-top:none;
}
li.menuhover a, li.menuhover li.menuhover a {
color:#fff;
background:#999;
}
li.menuhover span, li.menuhover li.menuhover span {
color:#fff;
background:#999;
}
THANKS! Hi forums, I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea. This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do. Any assistance is highly appreciated. 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;}
Hello, I need some help to insure that this: Code: <?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) {?>
<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<?php } ?></li>
<?php }?>
</ul>
<ul role="navigation">
<li><h2>Nyheder</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
</ul>
<ul><?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<li>
<ul><?php wp_meta(); ?></ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>
Only appear on this page: http://finmand.dk/almastofa/nyheder-2 And if possible, how I can clean it up a bit, since there is stuff in there I don't think I need. I would like it to only be "Nyheder", under this there shall be (as now) a list of post, shown by which month they where made. Any help or advice would be helpful. Thanks Hi guys! I'm having trouble deciphering the javascript on my webpage www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads. Here is the code: Code: jQuery.noConflict(); jQuery(document).ready(function(){
//VAR SETUP
var rightBg = jQuery('#rightBg'),
boxStuff = jQuery('.boxStuff'),
bgControls = jQuery("#bgControls"),
nextImg = jQuery('#nextImg'),
prevImg = jQuery('#prevImg'),
blogNav = jQuery('#blogNav'),
navBox = jQuery("#navBox"),
navBoxa = jQuery("#navBox a"),
navHeight = navBox.height(),
firstImg = jQuery('.wrapperli:first-child'),
lastImg = jQuery('.wrapperli:last-child'),
//iPad,iPhone,iPod...
deviceAgent = navigator.userAgent.toLowerCase(),
iPhone = deviceAgent.match(/(iphone|ipod)/);
//CLOSE FUNCTION
function closeSesame(){
jQuery('.activeBox').fadeOut(600,function(){
navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
jQuery(".activeNav").removeClass('activeNav');
rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
bgControls.fadeIn(600);
}).removeClass('activeBox');
}
//OPEN FUNCTION
function openSesame(){
navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
navBox.fadeIn(600);
});
bgControls.fadeOut(300);
}
//OPACITY STUFF
rightBg.css({opacity:".85"});
//REMOVE TITLE ATTRIBUTE
jQuery("#dropmenu a").removeAttr("title");
//MENU
jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').show();
},function(){
jQuery(this).find('ul:first').hide();
});
jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>›</span>");
//PRETTY PHOTO
jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'normal', // fast/slow/normal
opacity: 0.35, // Value betwee 0 and 1
show_title: false, // true/false
allow_resize: true, // true/false
overlay_gallery: false,
counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2
//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square
hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto
modal: false // If set to true, only the close button will close the window
});
//WINDOW LOAD
jQuery(window).load(function(){
//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
//LOAD MESH BG
jQuery('#mesh').fadeIn(600);
jQuery('#loading').fadeOut(600);
//IF GALLERY PAGE
if(jQuery('body').hasClass('page-template-page_gallery-php')){
navBox.fadeIn(600);
bgControls.fadeIn(600);
jQuery(".wrapperli:first-child a").click();
//IF NOT GALLERY PAGE
} else {
openSesame();
}
});
//FADE CRUMBS IN/OUT ON SCROLL
jQuery('#pageContent').scroll(function(){
if(jQuery('#pageContent').scrollTop()>150){
blogNav.fadeOut(300);
} else {
blogNav.fadeIn(300);
}
});
//NAV BOX STUFF
navBox.css({marginTop:"-"+navHeight/2+"px"});
boxStuff.css({marginTop:"-"+navHeight/2+"px"});
//NAV BUTTON CLICK
navBoxa.click(function(){
//VAR SETUP
var thisBox = jQuery(this).attr('href');
//IF ACTIVE LINK, CLOSE STUFF
if(jQuery(this).hasClass('activeNav')){
closeSesame();
return false;
//IF NOT ACTIVE LINK
}else{
//IF CONTENT OPEN
if(navBox.hasClass("openNav")){
navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
});
//IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
//CLICKING GALLERY IMG
jQuery(".wrapperli a").click(function(){
if(iPhone){
return false;
}else{
//GET HREF
var galleryHref = jQuery(this).attr('href'),
galleryTitle = jQuery(this).attr('title'),
imageInfo = jQuery('#imgInfo'),
itemNumber = jQuery(this).parent().index() + 1;
numberItems = jQuery('.wrapperli').length;
//CHANGE TITLE INFO
if(galleryTitle){
imageInfo.hide().html(galleryTitle + "  /  "+ itemNumber + " of " + numberItems).fadeIn(150);
} else {
imageInfo.hide();
}
//CHANGE CLASSES
jQuery(".wrapperli").not(this).removeClass('activeImg');
jQuery(this).parent().addClass('activeImg');
//IF MENU OPEN, CLOSE IT
if(navBox.hasClass("openNav")){ closeSesame(); }
//CHANGE BACKGROUND
jQuery.backstretch(galleryHref, {speed: 300});
return false;
}
});
//NEXT CONTROLS
nextImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.next().length > 0){
activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
firstImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
//PREV CONTROLS
prevImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.prev().length > 0){
activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
lastImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
// Keyboard shortcuts
jQuery(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode == 39) { nextImg.click();} // right arrow
else if (unicode == 37) {prevImg.click();} // left arrow
});
});
and I changed the open sesame to closed sesame here in the code Code: //IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated! Can someone explain to me as to why the "New Art" button in the navigation doesn't have the "on" function as the others where you hover over the button and the text turns orange? Keep in mind, I didn't design/develop this site...I'm merely just trying to insert a button in the nav for a friend of mine. Thanks for your help it is greatly appreciated! Here's the website: http://www.thejam2.com/two/ And the code: Code: }
menuImage = {};
function makeMenu(){
var imgs = ["thejam", "newart", "theartist","viewit","orderit","theCollage","theBorder","detailedImages","theMusicians"];
for(i in imgs){
menuImage[imgs[i]+"off"] = new Image();
menuImage[imgs[i]+"off"].src = "pics/menu_"+imgs[i]+".gif";
menuImage[imgs[i]+"on"] = new Image();
menuImage[imgs[i]+"on"].src = "pics/menu_"+imgs[i]+"_on.gif";
}
document.write('<div id="menu"><table width="'+((ns4) ? 794 : '100%')+'" cellpadding=0 cellspacing=0 border=0>');
if(ns4) document.write('<tr><td><img src="pics/spacer.gif" width="418" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td></tr>');
document.write('<tr><td width="100%"> </td>');
document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=about','thejam','jamMenu') + '<br></td>');
document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('newart.php','newart','newart') + '<br></td>');
document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=mike_keirstead','theartist') + '<br></td>');
document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('jam2.php','viewit','viewMenu') + '</td>');
document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('jam2.php?loc=order','orderit') + '</td></tr>');
document.write('<tr><td> </td><td>');
makeJamMenu();
document.write('</td><td colspan="4" align="center">');
makeViewMenu();
document.write('</td></tr></table></div>');
}
Hi I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question. The code is in Jquery and Javascript and i'm still learning. I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
if (flag==false)
{
try {
checkAnswer(document.getElementById('quizForm'))
flag=true;
return false;
}
catch(err)
{
if (err.number !=-2146823281)
{
alert(err.description);
}
}
}
next_page = (current_page + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
This is what the code looks like now without the changes.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
next_page = (parseInt (current_page) + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing. I put this bit together but it doesn't do anything.... Code: else{
if (document.getElementById('quizForm')){
if (document.quizForm.cc.disabled==true)
document.quizForm.cc.disabled=false
else
{return true;}
Any advise? Thanks. Hi Guys, I need to put previous/next navigation button images on a lot of slides and was wondering if javascript could do the following: Firstly say my slides increment as: slide1.html slide2.html slide3.html slide4.html If i am on slide 3 I'd like javascript to identify previous button as slide2.html and next button as slide4.html and so on Some loop/array code that does if filename = slide3.html then set button left(left.lpg)) url to slide2.html and button right(right.jpg) url to slide4.html array[0] = slide1.html array[1] = slide2.html ... opening as _self i.e no pop up. Thanks Hi, 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 Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! |
|||||||