Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Add Link to DIV via external .js

    Hello guys and thank you for your help with this. I'm pretty new @ Javascript so please have patience. I'm Pretty Sure this must be very easy to do but I have no idea how to begin.

    I am currently using this method for making a DIV into a link

    Code:
    <div id="header" onclick="location.href='index.php';"  style="cursor:pointer;"><a href="#"></a></div>
    Works Fine but having to change 10+ pages everytime I change a banner it's not working for me anymore. So I'm thinking there must be a way of adding the
    Code:
    <a href="">
    with javascript through an external .js file on load.

    Something like:

    Code:
    function load()
    {
    
    var bannerLink = document.createElement('a');
    link.setAttribute('href', '/ontour.aspx');
    document.getElementById("r-prom").appendChild(bannerLink); 
    }
    and maybe use this css technique to make the whole div into a link.

    I really Appreciate any help I can get on this.


  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Why don't you style your link to be like a div?

    Set the display to be block.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like I said This is all new to me, so how would I approach doing this?

    Edited to Add:

    Thanks A1ien51. for your help. This might be super easy for you guys but for a complete newb like me it was a great deal hehe.

    I'm attaching the code so newbs like me who are looking for a way of doing this might find it.

    The External Javascript

    Code:
    function link() {
    
    
    var theLink = document.createElement('a');
    theLink.setAttribute('href', 'http://www.apple.com');
    document.getElementById("yourDiv").appendChild(theLink);
    
    
    
    }
    
    window.onload=link;
    The CSS

    Code:
    #yourDiv				
    {
    width: 290px; height: 240px; 
    background: black url() top center no-repeat; 	
    margin: 0 0 10px 0; float: left;
    }
    #yourDiv a		
    {
    display: block; 
    width: 100%; 
    height: 100%;
    }
    #yourDiv a:hover		
    {
    cursor: pointer;
    }
    The HTML

    Code:
    <html>
    	<head>
    		<title></title>
    	</head>
    	<body>
                    <div id="yourDiv"></div>
    	</body>
    </html>
    thanks
    Last edited by mrblu; 02-13-2009 at 12:40 AM.

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    GOLD! Thanks a lot for posting the end result code; very clear to see this simple example.


  •  

    Posting Permissions

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