SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question change link color onClick and keep it

    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?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <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:

    HTML Code:
    <a href="#">My blue link</a>
    Code:
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Raffles,

    I've tried that, but it still doesn't work.

    The link structure is like this:
    Code:
    <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:
    http://particletree.com/features/lightbox-gone-wild/

    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!

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try use title

    Code:
    <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>

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mirek Komárek View Post
    Try use title

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

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This script, which I gave you before, works:
    Code:
    window.onload = function() {
      document.getElementById('mylink').onclick = function() {
        this.style.color = 'green';
      }
    }
    HTML Code:
    <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.

  7. #7
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My too.

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Raffles View Post
    This script, which I gave you before, works:
    Code:
    window.onload = function() {
      document.getElementById('mylink').onclick = function() {
        this.style.color = 'green';
      }
    }
    
    // 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);
    }
    HTML Code:
    <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.
    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:
    Code:
    // 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]);
    	}
    }

    The whole lighbox.js is below:
    Code:
    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&#37;', '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.

  9. #9
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jnm View Post
    sorry, don't know any javascript.
    - You should think about it, before you say that something not work. At first learn how to combine onload event.

    So try Raffles script

    Code:
    function RafflesScript() {
      document.getElementById('mylink').onclick = function() {
        this.style.color = 'green';
      }
    }
    Or my script
    Code:
    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
    Code:
    function initialize(){
    	addLightboxMarkup();
            active();//or RafflesScript()
    	lbox = document.getElementsByClassName('lbOn');
    	for(i = 0; i < lbox.length; i++) {
    		valid = new lightbox(lbox[i]);
    	}
    }

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <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:
    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •