Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member Drod's Avatar
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26100
    Hey everybody. I have two problems that involve the same thing that have been bugging me for a long, long time..

    My website uses rollovers for two main features; the navigation bar, and a tabbed widget on my sidebar. I would like for when you click on the link on the nav bar, the rollover stays in the hover state when you are on the page it takes you to.

    And for the tabbed widget, I would like it so that when you are on the tab, the corresponding rollover is in the hover state.

    Unfortunately, I am a new member, so I can't really put my website address, but let's see if this works:

    *with no spaces
    fresh street mag dot com

    Ok, here is the code for my navigation bar:
    Code:
    <div id="nav">
    		<a href="/" style="display: inline; margin-left: 8px;" id="navbar"
    		  onmouseover="buttondown('home')"
    		  onmouseout="buttonup('home')">
    		<img src="<?php bloginfo('template_url'); ?>/images/home_1.jpg" name="home" border="0" />
    		</a>
    		<a href="/features/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('features')"
    		  onmouseout="buttonup('features')">
    		<img src="<?php bloginfo('template_url'); ?>/images/features_1.jpg" name="features" border="0" />
    		</a>
    		<a href="/fashion/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('fashion')"
    		  onmouseout="buttonup('fashion')">
    		<img src="<?php bloginfo('template_url'); ?>/images/fashion_1.jpg" name="fashion" border="0" />
    		</a>
    		<a href="/art-design/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('artdesign')"
    		  onmouseout="buttonup('artdesign')">
    		<img src="<?php bloginfo('template_url'); ?>/images/art-design_1.jpg" name="artdesign" border="0" />
    		</a>
    		<a href="/music/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('music')"
    		  onmouseout="buttonup('music')">
    		<img src="<?php bloginfo('template_url'); ?>/images/music_1.jpg" name="music" border="0" />
    		</a>
    		<a href="/entertainment/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('entertainment')"
    		  onmouseout="buttonup('entertainment')">
    		<img src="<?php bloginfo('template_url'); ?>/images/entertainment_1.jpg" name="entertainment" border="0" />
    		</a>
    		<a href="/electronics/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('electronics')"
    		  onmouseout="buttonup('electronics')">
    		<img src="<?php bloginfo('template_url'); ?>/images/electronics_1.jpg" name="electronics" border="0" />
    		</a>
    		<a href="/lifestyle/" style="display: inline; margin-left: 4px;"
    		  onmouseover="buttondown('lifestyle')"
    		  onmouseout="buttonup('lifestyle')">
    		<img src="<?php bloginfo('template_url'); ?>/images/lifestyle_1.jpg" name="lifestyle" border="0" />
    		</a>
    		<a href="feed://freshstreetmag.com/feed/" style="display: inline; margin-right: 8px; float: right;"
    		  onmouseover="buttondown('rssbutton')"
    		  onmouseout="buttonup('rssbutton')">
    		<img src="<?php bloginfo('template_url'); ?>/images/rss_1.jpg" name="rssbutton" border="0" />
    		</a>
    	</div><!-- #nav -->
    Here is the script for ALL of the rollovers:
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.images) {
        homeup       = new Image();
        homeup.src   = "<?php bloginfo('template_url'); ?>/images/home_1.jpg" ;
        homedown     = new Image() ;
        homedown.src = "<?php bloginfo('template_url'); ?>/images/home_2.jpg" ;
    
        featuresup       = new Image();
        featuresup.src   = "<?php bloginfo('template_url'); ?>/images/features_1.jpg" ;
        featuresdown     = new Image() ;
        featuresdown.src = "<?php bloginfo('template_url'); ?>/images/features_2.jpg" ;
        
        fashionup       = new Image();
        fashionup.src   = "<?php bloginfo('template_url'); ?>/images/fashion_1.jpg" ;
        fashiondown     = new Image() ;
        fashiondown.src = "<?php bloginfo('template_url'); ?>/images/fashion_2.jpg" ;
    
        artdesignup       = new Image();
        artdesignup.src   = "<?php bloginfo('template_url'); ?>/images/art-design_1.jpg" ;
        artdesigndown     = new Image() ;
        artdesigndown.src = "<?php bloginfo('template_url'); ?>/images/art-design_2.jpg" ;
        
        musicup       = new Image();
        musicup.src   = "<?php bloginfo('template_url'); ?>/images/music_1.jpg" ;
        musicdown     = new Image() ;
        musicdown.src = "<?php bloginfo('template_url'); ?>/images/music_2.jpg" ;
        
        entertainmentup       = new Image();
        entertainmentup.src   = "<?php bloginfo('template_url'); ?>/images/entertainment_1.jpg" ;
        entertainmentdown     = new Image() ;
        entertainmentdown.src = "<?php bloginfo('template_url'); ?>/images/entertainment_2.jpg" ;
        
        electronicsup       = new Image();
        electronicsup.src   = "<?php bloginfo('template_url'); ?>/images/electronics_1.jpg" ;
        electronicsdown     = new Image() ;
        electronicsdown.src = "<?php bloginfo('template_url'); ?>/images/electronics_2.jpg" ;
        
        lifestyleup       = new Image();
        lifestyleup.src   = "<?php bloginfo('template_url'); ?>/images/lifestyle_1.jpg" ;
        lifestyledown     = new Image() ;
        lifestyledown.src = "<?php bloginfo('template_url'); ?>/images/lifestyle_2.jpg" ;
        
        rssbuttonup       = new Image();
        rssbuttonup.src   = "<?php bloginfo('template_url'); ?>/images/rss_1.jpg" ;
        rssbuttondown     = new Image() ;
        rssbuttondown.src = "<?php bloginfo('template_url'); ?>/images/rss_2.jpg" ;
        
        facebookup       = new Image();
        facebookup.src   = "<?php bloginfo('template_url'); ?>/images/facebook_1.jpg" ;
        facebookdown     = new Image() ;
        facebookdown.src = "<?php bloginfo('template_url'); ?>/images/facebook_2.jpg" ;
        
        twitterup       = new Image();
        twitterup.src   = "<?php bloginfo('template_url'); ?>/images/twitter_1.jpg" ;
        twitterdown     = new Image() ;
        twitterdown.src = "<?php bloginfo('template_url'); ?>/images/twitter_2.jpg" ;
    
        postsup       = new Image();
        postsup.src   = "<?php bloginfo('template_url'); ?>/images/posts_1.jpg" ;
        postsdown     = new Image() ;
        postsdown.src = "<?php bloginfo('template_url'); ?>/images/posts_2.jpg" ;
        
        tagsup       = new Image();
        tagsup.src   = "<?php bloginfo('template_url'); ?>/images/tags_1.jpg" ;
        tagsdown     = new Image() ;
        tagsdown.src = "<?php bloginfo('template_url'); ?>/images/tags_2.jpg" ;
        
        mostpopularup       = new Image();
        mostpopularup.src   = "<?php bloginfo('template_url'); ?>/images/mostpopular_1.jpg" ;
        mostpopulardown     = new Image() ;
        mostpopulardown.src = "<?php bloginfo('template_url'); ?>/images/mostpopular_2.jpg" ;
    
    }
    function buttondown( buttonname )
    {
        if (document.images) {
          document[ buttonname ].src = eval( buttonname + "down.src" );
        }
    }
    function buttonup ( buttonname )
    {
        if (document.images) {
          document[ buttonname ].src = eval( buttonname + "up.src" );
        }
    }
    // -->
    </script>
    Here is the code for the tabbed widget:
    Code:
    <div class="widget">
    			<div id="tabbed_box_1" class="tabbed_box">
    			    <div class="tabbed_area">
    			        
    					<div class="tabs">
    							<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active"
    							onmouseover="buttondown('posts')"
    			 				onmouseout="buttonup('posts')">
    			 				<img src="<?php bloginfo('template_url'); ?>/images/posts_1.jpg" name="posts" border="0" /></a>
    							<a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2"
    							onmouseover="buttondown('tags')"
    			 				onmouseout="buttonup('tags')">
    			 				<img src="<?php bloginfo('template_url'); ?>/images/tags_1.jpg" name="tags" border="0" style="margin-left: 10px;" /></a>
    							<a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3"
    							onmouseover="buttondown('mostpopular')"
    			 				onmouseout="buttonup('mostpopular')">
    			 				<img src="<?php bloginfo('template_url'); ?>/images/mostpopular_1.jpg" name="mostpopular" border="0" style="margin-left: 10px;" /></a>
    					</div>
    
    			        <div id="content_1" class="widget-content">
    			        	<ul>
    			       		<?php query_posts( 'showposts=10' );?>
    						<?php while( have_posts() ) : the_post(); ?>
    						<li><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'shape'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></li>
    						<?php endwhile;?>
    						<?php wp_reset_query();?>
    						</ul>
    			        </div>
    			        <div id="content_2" class="widget-content">
    			        	<?php wp_tag_cloud('smallest=8&largest=22&number=30'); ?>
    			        </div>
    			        <div id="content_3" class="widget-content">
    			        	Content coming soon. Website still under construction. Chill.
    			        </div>
    			
    			    </div>
    			</div>
    			</div>
    Here is the script for the tabbed widget:
    Code:
    function tabSwitch(new_tab, new_content) {
    
    	document.getElementById('content_1').style.display = 'none';
    	document.getElementById('content_2').style.display = 'none';
    	document.getElementById('content_3').style.display = 'none';
    	document.getElementById(new_content).style.display = 'block';	
    
    	document.getElementById('tab_1').className = '';
    	document.getElementById('tab_2').className = '';
    	document.getElementById('tab_3').className = '';
    	document.getElementById(new_tab).className = 'active';		
    
    }

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    OK - first of all, I really suggest you put your CSS in an external stylesheet - that way you can change a style once and it will apply to all your pages, instead of having to change it on each page separately.

    Then, in your CSS, you can specify the active page tab to be in whatever state you like.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member Drod's Avatar
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26100
    This doesn't really help, since it's a script creating the rollover.

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Well, what I mean is you could then get rid of the script and use psuedo classes (hover, active) in your CSS to create the same effect.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member Drod's Avatar
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26100
    ya but the active doesn't hold on the current page, only in the split second after it's clicked.

    I think I am looking for something where the body tag changes per page, and then when the body tag matches the link class, it's current. I've done this before, a long time ago, but I totally forgot how.

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Then in your CSS you give another class "current" and give it the same attributes as "active" - use this class for whatever is the active page -that should do it -
    HTML example:
    Code:
    <ul id="nav">                 
        <li><a href="index_en.php" class="current">Home</a></li>  
        <li><a href="portfolio.php">Portfolio</a></li>            
        <li><a href="about.php">About</a></li>                 
        <li><a href="web-design-faq.php">F.A.Q.</a></li>
        <li><a href="http://www.webdesignforums.net/blog/">Blog</a></li>                 
        <li><a href="contact.php">Contact</a></li>             
    </ul> 
    CSS Example:
    Code:
    #nav .current { color: #336699; }
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I just looked at your source - you didn't say this was a Wordpress site. That changes everything - all your headers etc will be PHP includes so you'll be needing page id's to specify the current page
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  9. #8
    Junior Member Drod's Avatar
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26100
    Ohh I see. I forgot to mention something. I am using wordpress, and I use template files to create my website theme. So that wouldn't work out. I would need to somehow dynamically include it.

    Not sure if dynamic is the right word, but do you bet what I mean? If I change one, it is changed on every page of my website. I can't just change the home one on the home page, an so one.

  10. #9
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Yes, I do absolutely get it - I have done this myself - you need to specify the page id for the class - it makes it longer but is not hard to do.
    I can't write it off the top of my head but I'm going to go look through some of my sites to see if I can find a code example for you.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  11. #10
    Junior Member Drod's Avatar
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26100
    Ohh, I thought you were telling me about the manual way to do it. That was the only solution I have found on the internet. THANK YOU for helping me. This has been troubling me for some time now. I can't handle it anymore.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:57 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com