The method you mentioned, is using jQuery. So you will have to reference a file to use it. In the comments you’ll find a pure javascript method.
You could use it with something like this: <http://heidecker.on-rev.com/testNav/Terms/test/> <html> <head> <script language="javascript" type="text/javascript"> function hiliteTab() { var nav = document.getElementById('nav'); var anchors = nav.getElementsByTagName('a'); var current = window.location.href.split('/'); for (var i = 0; i < anchors.length; i++) { var theLink = anchors[i].href.split('/'); var dirDepth = theLink.length; truncAnchor = theLink.slice(0,dirDepth-1).join('/'); truncPage = current.slice(0,dirDepth-1).join('/'); if(truncPage == truncAnchor) { anchors[i].parentNode.className = "currentTab"; } } } </script> <style type="text/css"> #nav a:link { display:block; width:200px; font:12px verdana,sans-serif; font-weight:bold; color:#FFFFFF; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } ul#nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } #nav li { float:left; background-color:#8EBA44; } #nav li:hover,active { background-color:#7A991A; } #nav li:first-child { border-top-left-radius: 4px 4px; border-bottom-left-radius: 4px 4px; } #nav li:last-child { border-top-right-radius: 4px 4px; border-bottom-right-radius: 4px 4px; } #nav li.currentTab { background-color:#7A991A; } </style> </head> <body onload="hiliteTab()"> <ul id="nav"><li><a href="../About/">About</a></li><li><a href="../Contact/">Contact</a></li><li><a href="../Terms/">Terms</a></li></ul> <ul> <li>the page can be in a nested directory</li> <li>within the link directory</li> </ul> </body> </html> Op 9 apr. 2014, om 00:29 heeft Nakia Brewer <nakia.bre...@westrac.com.au> het volgende geschreven: > Thanks for this. > > I will have an attempt at using this and see how I go. > > I eventually need to use this over around 20 pages so I was mainly looking > for a way to automatically hilite the current tab based upon the value of the > URL of the page > (Looking for tab name in URL) > > > > Nakia Brewer | Technology & Solutions Manager | Equipment Management Solutions > t: (02) 49645051 | m: 0458 713 547 | i: www.westrac.com.au > > > ACN 009 342 572 > > > -----Original Message----- > From: use-livecode [mailto:use-livecode-boun...@lists.runrev.com] On Behalf > Of chris heidecker > Sent: Tuesday, 8 April 2014 10:29 PM > To: How to use LiveCode > Subject: Re: HTML & CSS > > Hi, > > I'm not sure what you're goal is, so I'll provide 2 options for inspiration. > I didn't use the method you tried, moved the bg-color to the listitem and > used a first-child/last-child for the corners. > > The first one, shows or hides a <div> on the same page depending on the > currentTab The second one leaves out any javascript. If you've got just 3 > pages, you can hard-code the currentTab. > Not really tested or elelegant. > > regards, Chris > > ----- > -- show the the corresponding div of the selected tab > ----- > <html> > <head> > <script language="javascript" type="text/javascript"> function showHide(shID) > { > if (document.getElementById(shID)) { > document.getElementById('tab1-content').style.display = 'none'; > document.getElementById('tab2-content').style.display = 'none'; > document.getElementById('tab3-content').style.display = 'none'; > document.getElementById(shID + '-content').style.display = 'block'; > document.getElementById('tab1').className = ''; > document.getElementById('tab2').className = ''; > document.getElementById('tab3').className = ''; > document.getElementById(shID).className = 'currentTab' > } > } > </script> > <style type="text/css"> > #nav a:link > { > display:block; > width:200px; > font:12px verdana,sans-serif; > font-weight:bold; > color:#FFFFFF; > text-align:center; > padding:4px; > text-decoration:none; > text-transform:uppercase; > } > ul#nav > { > list-style-type:none; > margin:0; > padding:0; > overflow:hidden; > } > #nav li > { > float:left; > background-color:#8EBA44; > } > #nav li:hover > { > background-color:#7A991A; > } > #nav li:first-child > { > border-top-left-radius: 4px 4px; > border-bottom-left-radius: 4px 4px; > } > #nav li:last-child > { > border-top-right-radius: 4px 4px; > border-bottom-right-radius: 4px 4px; > } > #nav li.currentTab > { > background-color:#7A991A; > } > > </style> > </head> > <body onload="showHide('tab1')"> > <ul id="nav"> > <li id="tab1"><a href="#" onclick="showHide('tab1')">About</a></li> > <li id="tab2"><a href="#" onclick="showHide('tab2')">Contact</a></li> > <li id="tab3"><a href="#" onclick="showHide('tab3')">Terms</a></li> > </ul> > <ul> > <li>another list</li> > <li>without style</li> > </ul> > <div> > <div id="tab1-content" class="tab"><p>layer 1</p></div> <div > id="tab2-content" class="tab"><p>layer 2</p></div> <div id="tab3-content" > class="tab"><p>layer 3</p></div> </div> </body> </html> > > > ----- > -- add a class currentTab to the currently showing page > ----- > <html> > <head> > <style type= "text/css"> > -- the same styles as above > </style> > </head> > <body> > <ul id="nav"> > <li class="currentTab"><a href="#">About</a></li> <li><a > href="#">Contact</a></li> <li><a href="#">Terms</a></li> </ul> <ul> <li><a > href="#">test list</a></li> <li><a href="#">without style</a></li> </ul> > </body> </html> > > Op 5 apr. 2014, om 08:47 heeft Nakia Brewer <nakia.bre...@westrac.com.au> het > volgende geschreven: > >> I am trying to replicate the method here >> >> http://css-tricks.com/snippets/jquery/add-active-navigation-class-base >> d-on-url/ >> >> >> >> Nakia Brewer | Technology & Solutions Manager | Equipment Management >> Solutions >> t: (02) 49645051 | m: 0458 713 547 | i: www.westrac.com.au >> >> >> ACN 009 342 572 >> >> >> -----Original Message----- >> From: use-livecode [mailto:use-livecode-boun...@lists.runrev.com] On >> Behalf Of Nakia Brewer >> Sent: Saturday, 5 April 2014 5:33 PM >> To: How to use LiveCode >> Subject: RE: HTML & CSS >> >> So here is what I am trying to do.. >> Notes : I know next to nothing about HTML and CSS >> The form service where I am trying to embed this HTML code only allows >> me to embed the content as HTML. I cant reference files etc. >> >> So here is where I am up to. >> I have been able to create the Navbar in HTML and CSS and it works. I am now >> trying to add the ability for it to be able to detect if the current URL >> contains The content of one of its link and if so set an active class on >> that link so I can apply the hilite styling.. >> >> Man, I hope that makes sense.. >> >> Here is my attempt.. >> >> <head> >> <script> >> $(function() { >> $('nav a[href^="\' + location.pathname.split("\")[1] + >> '"]').addId('active'); }); </script> <style> ul { >> list-style-type:none; margin:0; padding:0; overflow:hidden; } li { >> float:left; } a:link,a:visited { display:block; width:200px; font:12px >> verdana,sans-serif; font-weight:bold; color:#FFFFFF; >> background-color:#8EBA44; text-align:center; padding:4px; >> text-decoration:none; text-transform:uppercase; } a:hover,a:active { >> background-color:#7A991A; } #firstTab { >> border-top-left-radius: 4px 4px; >> border-bottom-left-radius: 4px 4px; >> --background-color:#7A991A; >> } >> #lastTab >> { >> border-top-right-radius: 4px 4px; >> border-bottom-right-radius: 4px 4px; >> --background-color:#7A991A; >> } >> .active >> { >> background-color:#7A991A; >> } >> </style> >> </head> >> <body> >> <nav> >> <ul> >> <li><a id="firstTab" href="\About\">About</a></li> <li><a >> href="\Contact\">Contact</a></li> <li><a id="lastTab" >> href="\Terms\">Terms</a></li> </ul> </nav> </body> </html> >> >> Nakia Brewer | Technology & Solutions Manager | Equipment Management >> Solutions >> t: (02) 49645051 | m: 0458 713 547 | i: www.westrac.com.au >> >> >> ACN 009 342 572 >> >> -----Original Message----- >> From: use-livecode [mailto:use-livecode-boun...@lists.runrev.com] On >> Behalf Of Nakia Brewer >> Sent: Saturday, 5 April 2014 5:10 PM >> To: How to use LiveCode >> Cc: How to use LiveCode >> Subject: Re: HTML & CSS >> >> Of only it was a website I was working on... >> >> It's actually for an online form service. They allow me to do customer page >> content in HTML which is where I am building the Nav bar.. >> >> Should make sense when I send it through.. >> >> Sent from my iPhone >> >>> On 5 Apr 2014, at 2:39 pm, "stephen barncard" >>> <stephenrevoluti...@barncard.com> wrote: >>> >>> On Fri, Apr 4, 2014 at 6:57 PM, Nakia Brewer >>> <nakia.bre...@westrac.com.au>wrote: >>> >>>> Just wondering if there are any HTML /CSS oracle's among us? >>> you don't need one. >>> >>> read this recent blog post. Bootstrap may be your answer. >>> >>> http://livecode.com/blog/2014/03/19/better-faster-stronger/ >>> >>> *--* >>> *Stephen Barncard - San Francisco Ca. USA - Deeds Not Words* >>> _______________________________________________ >>> use-livecode mailing list >>> use-livecode@lists.runrev.com >>> Please visit this url to subscribe, unsubscribe and manage your >>> subscription preferences: >>> http://lists.runrev.com/mailman/listinfo/use-livecode >>> >> >> COPYRIGHT / DISCLAIMER: This message and/or including attached files may >> contain confidential proprietary or privileged information. If you are not >> the intended recipient, you are strictly prohibited from using, reproducing, >> disclosing or distributing the information contained in this email without >> authorisation from WesTrac. If you have received this message in error >> please contact WesTrac on +61 8 9377 9444. We do not accept liability in >> connection with computer virus, data corruption, delay, interruption, >> unauthorised access or unauthorised amendment. We reserve the right to >> monitor all e-mail communications. >> >> >> >> _______________________________________________ >> use-livecode mailing list >> use-livecode@lists.runrev.com >> Please visit this url to subscribe, unsubscribe and manage your subscription >> preferences: >> http://lists.runrev.com/mailman/listinfo/use-livecode >> >> >> COPYRIGHT / DISCLAIMER: This message and/or including attached files may >> contain confidential proprietary or privileged information. If you are not >> the intended recipient, you are strictly prohibited from using, reproducing, >> disclosing or distributing the information contained in this email without >> authorisation from WesTrac. If you have received this message in error >> please contact WesTrac on +61 8 9377 9444. We do not accept liability in >> connection with computer virus, data corruption, delay, interruption, >> unauthorised access or unauthorised amendment. We reserve the right to >> monitor all e-mail communications. >> >> >> >> _______________________________________________ >> use-livecode mailing list >> use-livecode@lists.runrev.com >> Please visit this url to subscribe, unsubscribe and manage your subscription >> preferences: >> http://lists.runrev.com/mailman/listinfo/use-livecode >> >> >> COPYRIGHT / DISCLAIMER: This message and/or including attached files may >> contain confidential proprietary or privileged information. If you are not >> the intended recipient, you are strictly prohibited from using, reproducing, >> disclosing or distributing the information contained in this email without >> authorisation from WesTrac. If you have received this message in error >> please contact WesTrac on +61 8 9377 9444. We do not accept liability in >> connection with computer virus, data corruption, delay, interruption, >> unauthorised access or unauthorised amendment. We reserve the right to >> monitor all e-mail communications. >> >> >> >> _______________________________________________ >> use-livecode mailing list >> use-livecode@lists.runrev.com >> Please visit this url to subscribe, unsubscribe and manage your subscription >> preferences: >> http://lists.runrev.com/mailman/listinfo/use-livecode > > > _______________________________________________ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode > > > COPYRIGHT / DISCLAIMER: This message and/or including attached files may > contain confidential proprietary or privileged information. If you are not > the intended recipient, you are strictly prohibited from using, reproducing, > disclosing or distributing the information contained in this email without > authorisation from WesTrac. If you have received this message in error please > contact WesTrac on +61 8 9377 9444. We do not accept liability in connection > with computer virus, data corruption, delay, interruption, unauthorised > access or unauthorised amendment. We reserve the right to monitor all e-mail > communications. > > > > _______________________________________________ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode _______________________________________________ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
