JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



styling internal links?


V

keyboard_arrow_up
0
keyboard_arrow_down


First Post Mark as Spam Veta
Posts: 4 - Registered: 2009-01-06 15:42:14

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:

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




R

keyboard_arrow_up
0
keyboard_arrow_down


Reply #1 Mark as Spam rajmv
Posts: 103 - Registered: 2011-07-14 02:22:09

You can, with some js and some css;

<!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.




R

keyboard_arrow_up
0
keyboard_arrow_down


Reply #2 Mark as Spam rajmv
Posts: 103 - Registered: 2011-07-14 02:22:09

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.




R

keyboard_arrow_up
0
keyboard_arrow_down


Reply #3 Mark as Spam rajmv
Posts: 103 - Registered: 2011-07-14 02:22:09

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

This has both color animations and the scrollTo plugin enabled;

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






JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising