Hello everyone
My CSS experience is
very limited. Please could you help with my Navbar, which looks like this:
<!-- begin navbar -->
<div id="navbar">
<ul id="nav">
<li><a href="{$mybb->settings['bburl']}/index.php" class="current">Forum Home</a></li>
<li><a href="{$mybb->settings['bburl']}/games.php">Arcade</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php">Search</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">Member List</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php">Calendar</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
<li><a href="{$mybb->settings['contactlink']}">Contact Us</a></li>
</ul>
</div>
<!-- end navbar -->
When I click through the navbar the "Forum Home" tab stays selected. How do I fix this?
Any help would be much appreciated!
remove this code :
class="current"
from home link. This will fix it
(2012-12-06, 04:37 AM)envira Wrote: [ -> ]remove this code :
class="current"
from home link. This will fix it
I tried that, but then nothing's selected?
I want the "current" to switch between the tabs I select...
Thank you though!
Set individual classes (eg. firstitem, seconditem etc) to every nav items and add jQ click function to set the classes at runtime.
Example:
jQuery('.firstitem').click(function () {
jQuery('.firstitem').addClass('current');
jQuery('.seconditem').removeClass('current');
jQuery('.thirditem').removeClass('current');
//and so on for all items ...
});
Note: it is just an example to give you idea, you can enhance the code to smart and short.
(2012-12-06, 10:31 AM)effone Wrote: [ -> ]Set individual classes (eg. firstitem, seconditem etc) to every nav items and add jQ click function to set the classes at runtime.
Example:
jQuery('.firstitem').click(function () {
jQuery('.firstitem').addClass('current');
jQuery('.seconditem').removeClass('current');
jQuery('.thirditem').removeClass('current');
//and so on for all items ...
});
Note: it is just an example to give you idea, you can enhance the code to smart and short.
Thanks for the help.
I at least know where to look now.
Looking for examples on Google as I don't know if that's meant to replace my Navbar code? Or do I add before or after?
Also, how do I link '.firstitem' to a page?
Thank you so much, I really appreciate it!
Here is a compact idea with RegExp:
the HTML:
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/portal.php">Portal</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php">Index</a></li>
<li><a href="{$mybb->settings['bburl']}/usercp.php">UCP</a></li>
</ul>
</div>
The jQ:
jQuery.noConflict();
jQuery(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
jQuery('.menu a').each(function(){
if(urlRegExp.test(this.href)){
jQuery(this).addClass('current');
}
});
});
and style your current class in css.
I've also made a fiddle for you:
http://jsfiddle.net/effone/taD82/
(2012-12-06, 04:20 PM)effone Wrote: [ -> ]Here is a compact idea with RegExp:
the HTML:
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/portal.php">Portal</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php">Index</a></li>
<li><a href="{$mybb->settings['bburl']}/usercp.php">UCP</a></li>
</ul>
</div>
The jQ:
jQuery.noConflict();
jQuery(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
jQuery('.menu a').each(function(){
if(urlRegExp.test(this.href)){
jQuery(this).addClass('current');
}
});
});
and style your current class in css.
I've also made a fiddle for you:
http://jsfiddle.net/effone/taD82/
Do you mind explaining how to load the jscript?
Do I save this as a jscript and then upload to /public_html/jscripts
Or do I edit a script that's already in there?
I also read I'm supposed to put the jQuery in the headinclude template. Is that correct?
Add at the end of your headerinclude:
<script type="text/javascript">
jQuery.noConflict();
jQuery(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
jQuery('.menu a').each(function(){
if(urlRegExp.test(this.href)){
jQuery(this).addClass('current');
}
});
});
</script>
(2012-12-06, 08:45 PM)effone Wrote: [ -> ]Add at the end of your headerinclude:
<script type="text/javascript">
jQuery.noConflict();
jQuery(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
jQuery('.menu a').each(function(){
if(urlRegExp.test(this.href)){
jQuery(this).addClass('current');
}
});
});
</script>
Couldn't get it to work
I have styled the CSS.
Sorry my coding knowledge is very limited. Any idea what I'm doing wrong?
do you have JQuery loading?