www.webdeveloper.com
Results 1 to 7 of 7

Thread: Opening a link by clicking on a div

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    1

    Opening a link by clicking on a div

    Hello all!
    I have no experience with js or any programming language, and I need help applying one simple function to my web page.
    I have an extremely basic <div> element with a background color, and I want to make it so when it gets clicked, another page is opened, replacing the current one. So I basically want it to work like a link, but it is a div. I'm assuming the easiest way to do this is in js. If someone could please share a solution, I'd really appreciate it!

  2. #2
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    64
    <a href="newurl.com" target="_self"><div></div></a> should work.
    Last edited by winthropite; 02-13-2014 at 10:02 PM.

  3. #3
    Join Date
    Feb 2014
    Location
    Viet Nam
    Posts
    32

  4. #4
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    Really aubenefit? w whole jquery for something like this?

    Code:
    <div id="myID"></div>
    <script type="text/javascript>
    document.getElementById('myID').addEventListener('click', function (){
    window.location = 'http://google.co.uk';
    });
    </script>
    Javascript, jQuery / Prototype & PHP expert ready to complete your work on Freelancer.co.uk - Hire Me at https://www.freelancer.co.uk/users/1...&action=hireme

  5. #5
    Join Date
    Feb 2014
    Location
    Viet Nam
    Posts
    32
    Quote Originally Posted by maurycy View Post
    Really aubenefit? w whole jquery for something like this?

    Code:
    <div id="myID"></div>
    <script type="text/javascript>
    document.getElementById('myID').addEventListener('click', function (){
    window.location = 'http://google.co.uk';
    });
    </script>
    You can use:

    <div id="myID"></div>
    <script type="text/javascript>
    $( "#myID" ).click(function() {
    window.location = 'http://google.co.uk';
    });
    </script>

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    Alternative for new and older browsers...
    Code:
    <div id="divButton" style="border:1px solid blue; height:100px; width:100px; cursor:pointer; background-color:cyan;">xxx</div>
    
    <script type="text/javascript"> 
    // Example modified from: http://help.dottoro.com/ljeuqqoq.php
    
    function OnDivClick () { location = 'https://www.google.co.uk/'; }
    function Init () {
      var div = document.getElementById ("divButton");
      if (div.addEventListener) {  // all browsers except IE before version 9
        div.addEventListener ("mouseup", function () {OnDivClick(div)}, false);
      } else {
        if (div.attachEvent) {   // IE before version 9
          div.attachEvent ("onmouseup", function () {OnDivClick(div)});
        }
      }
    }
    Init();
    </script>

  7. #7
    Join Date
    Aug 2013
    Posts
    57
    You can also just do it with only HTML: <a href="mysiteEXAMPLE.tk"></div>MyDIVision</div></a>

    But to do what you want:

    Code:
    <html>
    <!--CSS style for div-->
    <style>
    #c1 {
    background-color:#FF6600;
    color:#000000;
    }
    /*Change colours when mouse is on DIV*/
    #c1:hover {
    background-color:#000000;
    color:#FF6600;
    }
    </style>
    <!--JavaScript part-->
    <script>
    function start() { //When DIV with function name start() is clicked...
    window.location.replace("http://www.icode4u.tk/forum"); //... Replace current window with this site
    }
    </script>
    <!--DIV itself-->
    <body>
    <div id="c1" onClick="start()">Click for the best coding Support!</div>
    </body>
    </html>
    Copy/Paste and test it here: http://www.draac.com/htmltester.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles