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-based-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
