I am trying to figure out how to change a link color to act like it’s been visited without leaving the current page - I want it to blend into the background after it’s clicked (opening a popup) but I don’t want it to revert back to the old color - I want it to stay the new color until the page is left…and I need to do this without using the class attribute.
any thoughts?
<a href="#" onclick="this.style.color='red'; openpopup();">My blue link</a>
Link goes red when you click on it. A nicer way to do this is like this:
<a href="#">My blue link</a>
window.onload = function() {
document.getElementById('mylink').onclick = function() {
this.style.color = 'red';
window.open(...);
}
}
If the link doesn’t have an id or you don’t want to give it one, you can access it using getElementsByTagName and then checking for the right one.
Raffles,
I’ve tried that, but it still doesn’t work.
The link structure is like this:
<a href="link.php" class="lbOn" title="link title">link anchor</a>
the class “lbOn” is used by javascript in the GetElementByClassName function because I am using lightbox javascript from here:
so, when someone clicks on a link and opens the lightbox, I want the link they clicked to look visited.
basically, what i’d like is for the link color to change to the background color of the page dynamically.
still looking for this! 
Try use title
<script type="text/javascript">
<!--//--><![CDATA[//><!--
function active(){
for(i=0;i<document.links.length;i++){
document.links[i].onclick=function(){
if(this.title=='Afected title'){
this.style.color='#fff';
//here window.open...
return false;
}
}
}
}
if(document.childNodes){window.onload=active}
//--><!]]>
</script>
<a href="#">normal link</a>
<a href="#" title='Afected title'>test link</a>
no, that didn’t work.
This script, which I gave you before, works:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
this.style.color = 'green';
}
}
<a href="#" id="mylink" style="color:blue;">My blue link</a>
I forgot to include the link’s ID there, which should have been pretty obvious. If you click on the link, it turns green (set this colour to whatever your background is, then).
Now, do you want the colour to return to its original state once the lightbox has closed? That’ll require some more script. Also, when you say “it doesn’t work”, be a bit more specific.
My too.
I did what you said and it just does as it would if the code wasn’t there (performs just as the external css should).
now, if i take out the class=“lbOn” and use onclick=“this.style.color=‘blue’;” it works. so, it definitely has something to do with the class.
in the javascript for the lightbox (lightbox.js), here is where the class=“lbOn” is used:
// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
[B]lbox = document.getElementsByClassName('lbOn');[/B]
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
The whole lighbox.js is below:
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
function getBrowserInfo() {
if (checkIt('konqueror')) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible')) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if (!OS) {
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
}
function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
/*-----------------------------------------------------------------------------------------------*/
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},
// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
// In IE, select elements hover on top of the lightbox
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},
setScroll: function(x, y){
window.scrollTo(x, y);
},
displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},
// Begin Ajax request based off of the href of the clicked linked
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Display Ajax response
processInfo: function(response){
info = "<div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
},
// Example of creating your own functionality once lightbox is initiated
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));
var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Example of creating your own functionality once lightbox is initiated
deactivate: function(){
Element.remove($('lbContent'));
if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}
this.displayLightbox("none");
}
}
/*-----------------------------------------------------------------------------------------------*/
// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div');
lb.id = 'lightbox';
lb.ClassName = 'loading';
lb.innerHTML = '<div id="lbLoadMessage">' +
'<p>Loading</p>' +
'</div>';
bod.appendChild(overlay);
bod.appendChild(lb);
}
would it work if I could use an id= in the link instead of the class= ? if so, how would I do that?
sorry, don’t know any javascript.
So try Raffles script
function RafflesScript() {
document.getElementById('mylink').onclick = function() {
this.style.color = 'green';
}
}
Or my script
function active(){
for(i=0;i<document.links.length;i++){
document.links[i].onclick=function(){
if(this.title=='Afected title'){
this.style.color='#fff';
//here window.open...
return false;
}
}
}
}
And be sure you are call them correct, probably in your light box you can add id here
function initialize(){
addLightboxMarkup();
active();//or RafflesScript()
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
It doesn’t have anything to do with the class. Using the inline javascript method (onclick=“this.style.color = ‘blue’;”) is pretty bullet-proof but also ugly and bad practice.
I’m pretty sure the script I gave you isn’t working because the onload event handler is being overriden elsewhere and I bet it’s because you’ve got this in your html:
<body onload="startLightbox();">
Or whatever it is lightbox JS makes you put there. So, you need to remove the onload attribute from the body tag and instead do this:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
this.style.color = 'green';
}
startLightbox();
}
And why are you adding those lightbox elements with JS yourself? I thought lightbox JS did that without you having to tamper with it.