It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index ‹ Programming ‹ CSS Forum

styling internal links?

Post a reply

styling internal links?

Postby Veta on Wed Dec 29, 2010 6:01 pm

I'd like to apply a specific style to internal links for when they're being actively used. Is this possible?

By "actively used" I do not mean a:active (or a:visited, or a:hover, for that matter).

What I mean is when the viewer has clicked on the link and been brought to the anchor spot, and the web address is appended with a # and the anchor id. For example, let's say my page, website.com/page.html, looks like this:

Code: Select all
<a href="#one">First topic</a>
<a href="#two">Second topic</a>
<p id="one">First Heading</p>
<p id="two">Second Heading</p>


When someone clicks on "First topic," the browser moves down to "First Heading" and the web address reads website.com/page.html#one. Can I apply a unique style to this situation?

I can't link to my page, it's not online.
Veta
 
Posts: 4
Joined: Tue Jan 06, 2009 9:42 pm
Top

Re: styling internal links?

Postby rajmv on Wed Jul 27, 2011 5:27 pm

You can, with some js and some css;

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <style>
      .content {
         height : 500px;
         border : 1px solid black;
         margin : 5px;
      }
      
      
      
      body.one {
        background : white;
        color : black;
      }


      
      body.two {
        background : yellow;
        color : black;
      }


      
      body.three {
        background : blue;
        color : lime;
      }
   
      body.three #one {
         background : green;
         color : black;
      }
   </style>
   
   <script type="text/javascript"><!--
      function go (selectedDiv) {
         document.getElementsByTagName('body')[0].className = selectedDiv;
      }
   --></script>
</head>

<body onload="">
   <div id="menu" class="menu">
      <a href="#one" onclick="go('one')">one</a><br/>
      <a href="#two" onclick="go('two')">two</a><br/>
      <a href="#three" onclick="go('three')">three</a><br/>
   </div>

   <div id="one" class="content">
   1 : Lorem Ipsum!
   </div>

   <div id="two" class="content">
   2 : Lorem Ipsumia
   </div>
   
   <div id="three" class="content">
   3 : Lorem Ipsumio
   </div>

   <div id="four" class="content">
   4 : Lorem Ipsumius
   </div>
</body>
</html>


link "one" is plain white and black as usual, links "two" and "three" have seperate styling applied to the entire body. link "three" also has an override of colors on the content of div #one, as an example of how to style different elements differently per link.
rajmv
100+ Club
 
Posts: 103
Joined: Thu Jul 14, 2011 7:22 am
Top

Re: styling internal links?

Postby rajmv on Wed Jul 27, 2011 5:37 pm

oh and btw, you might want to look into jQuery and jQuery.scrollTo plugin..
It'll allow you to have smooth scrolling to your content, both X and Y directions.
I think it'll look much better for your users.

Now, doing color animations between "links" (as per this thread) is going to be a bit harder :) Then i'd recommend putting style information in JSON, using the "jQuery color animations plugin"(google), and having the go() function set both the <body> class _and_ do the animations with jQuery and the JSON definitions.
Last edited by rajmv on Wed Jul 27, 2011 6:32 pm, edited 1 time in total.
rajmv
100+ Club
 
Posts: 103
Joined: Thu Jul 14, 2011 7:22 am
Top

Re: styling internal links?

Postby rajmv on Wed Jul 27, 2011 6:28 pm

I finished the animations code for you, it was fun to do..

This has both color animations and the scrollTo plugin enabled;

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <style>
      .content {
         height : 500px;
         border : 1px solid black;
         vertical-align:middle;
         text-align:center;
         width : 80%;
         margin : 15px auto 15px auto;
      }
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
   <script src="/code/libraries/jquery.scrollTo-1.4.2.js" type="text/javascript"></script><!-- download via http://flesler.blogspot.com/2007/10/jqueryscrollto.html -->
   <script src="/code/libraries/jquery.color.js" type="text/javascript"></script><!-- download via http://plugins.jquery.com/files/jquery.color.js.txt -->   
   <script type="text/javascript"><!--
   
      var fadeResetTime = 200; //milliseconds to take to reset the styles, just before changing to the next link anchor's styles.
      var fadeOverTime = 1000; //milliseconds for transitions to animate from one style to another.
      var scrollToTime = 800; //milliseconds to animate toward the next link anchor
   
      var styles = {
      
         // this lists per anchor (or "state") the various elements, and their properties to animate.
         // "reset" is a special state.
         // for the rest, the state name for the link to #one is just "one". #two for two, etc.
      
         reset : { // reset must list *all* the elements (body, "div#one", "div#two", etc) that are animated, and then for each of them their properties that are animated between anchors (in this case just backgroundColor and color).
            body : {
               backgroundColor : 'white',
               color : 'black'
            },
            "div#one" : {
               backgroundColor : 'white',
               color : 'black'
            },
            "div#two" : {
               backgroundColor : 'white',
               color : 'black'
            },
            "div#three" : {
               backgroundColor : 'white',
               color : 'black'
            },
            "div#four" : {
               backgroundColor : 'white',
               color : 'black'
            }
         },            
         
         one : { // "one" is the name of your anchor #one.
            body : {
            // then you want to animate the <body> tag to these 2 settings;
               backgroundColor : 'white',
               color : 'black'
            },
            'div#one' : {
            // and specify a special color for the highlighted sections (seemed to make sense).
               backgroundColor : 'blue',
               color : 'yellow'
            },
            'div#one a:hover, div#one a:visited, div#one a' : { //make the links in the content area for #one all white all the time because the default colors wont be clear enough
               color : 'white'
            }
         },
         
         two : { // this is for #two
            body : {
               backgroundColor : 'yellow',
               color : 'black'
            },
            'div#two' : {
               backgroundColor : 'purple',
               color : 'white'
            }
         },
         
         three : { // and this is for #three
            body : {
               backgroundColor : 'blue',
               color : 'lime'
            },
            "div#three" : {
               backgroundColor : 'green',
               color : 'white'
            }
         },
         
         four : { // for #four, and no special highlighting of #four's content;
            body : {
               backgroundColor : 'red',
               color : 'yellow'
            }
         }
      };
   
   
      function go (selectedDiv) {
         document.getElementsByTagName('body')[0].className = selectedDiv;
         $('body').scrollTo ('#'+selectedDiv, scrollToTime);
         
         for (var identifier in styles.reset) {
            var settings = styles.reset[identifier];
            $(identifier).animate (settings, fadeResetTime);
         }
         
         for (var identifier in styles[selectedDiv]) {
            var settings = styles[selectedDiv][identifier];
            $(identifier).animate ( settings, fadeOverTime);
         }
      }
      
      function startApp() {
         for (var identifier in styles.reset) {
            var settings = styles.reset[identifier];
            $(identifier).css (settings);
         }
         
         var selectedDiv = (document.location.href.replace (/.*#/,''));
         if (selectedDiv!='') {
            for (var identifier in styles[selectedDiv]) {
               var settings = styles[selectedDiv][identifier];
               $(identifier).animate ( settings, fadeOverTime);
            }
         }
      }
   --></script>
</head>

<body onload="startApp()">
   <div id="one" class="content" style="height:500px;">
      <div class="menu">
         <a href="#one" onclick="go('one')">one</a>
         <a href="#two" onclick="go('two')">two</a>
         <a href="#three" onclick="go('three')">three</a>
         <a href="#four" onclick="go('four')">four</a>
      </div>
      1 : Lorem Ipsum!
   </div>

   <div id="two" class="content" style="height:500px;">
      <div class="menu">
         <a href="#one" onclick="go('one')">one</a>
         <a href="#two" onclick="go('two')">two</a>
         <a href="#three" onclick="go('three')">three</a>
         <a href="#four" onclick="go('four')">four</a>
      </div>
      2 : Lorem Ipsumia
   </div>
   
   <div id="three" class="content" style="height:500px;">
      <div class="menu">
         <a href="#one" onclick="go('one')">one</a>
         <a href="#two" onclick="go('two')">two</a>
         <a href="#three" onclick="go('three')">three</a>
         <a href="#four" onclick="go('four')">four</a>
      </div>
      3 : Lorem Ipsumio
   </div>

   <div id="four" class="content" style="height:500px;">
      <div class="menu">
         <a href="#one" onclick="go('one')">one</a>
         <a href="#two" onclick="go('two')">two</a>
         <a href="#three" onclick="go('three')">three</a>
         <a href="#four" onclick="go('four')">four</a>
      </div>
      4 : Lorem Ipsumius
   </div>
</body>
</html>
rajmv
100+ Club
 
Posts: 103
Joined: Thu Jul 14, 2011 7:22 am
Top
Post a reply

Who is online

Users browsing this forum: No registered users and 1 guest