Ah okay, Being very new to HTML and CSS I didn't see this fact.
Guess I will just have to hard code the hilited tab for each page I drop it into..... 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:[email protected]] On Behalf Of chris heidecker Sent: Thursday, 10 April 2014 2:43 AM To: How to use LiveCode Subject: Re: HTML & CSS 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 <[email protected]> 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:[email protected]] 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 <[email protected]> het > volgende geschreven: > >> I am trying to replicate the method here >> >> http://css-tricks.com/snippets/jquery/add-active-navigation-class-bas >> e >> 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:[email protected]] 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:[email protected]] 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" >>> <[email protected]> wrote: >>> >>> On Fri, Apr 4, 2014 at 6:57 PM, Nakia Brewer >>> <[email protected]>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 >>> [email protected] >>> 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 >> [email protected] >> 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 >> [email protected] >> 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 >> [email protected] >> Please visit this url to subscribe, unsubscribe and manage your subscription >> preferences: >> http://lists.runrev.com/mailman/listinfo/use-livecode > > > _______________________________________________ > use-livecode mailing list > [email protected] > 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 > [email protected] > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode _______________________________________________ use-livecode mailing list [email protected] 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 [email protected] Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
