#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    311
    Rep Power
    8

    Making a div clickable


    Hi,

    I'm trying to make a button out of a div, but when I click in the div it doesn't work. It only does when I click on the border of the div.

    The code looks like this:
    PHP Code:
    <div class='clickable' onclick='click_func()'></div
    click_func() is just a function...

    Does anyone know a way to do this? I now use a button for this but I just want to use the divs.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,870
    Rep Power
    369
    why are you making the whole div clickable?

    also onclick="javascript:click_func()" something like that, have you defined that function yet?

    Secondly this way of JS is long gone, try to use jquery and id.. for eg

    <div id="clickabke"></div>


    then in the head/bottom do:

    // import jquery
    <script>

    $(function(){
    $("#clickable").click(function(){
    alert("clicked div");
    });
    });
    </script>

    see what that does to you

    Comments on this post

    • richpri agrees : Good advice, You should also consider using the ON construction in place of click.
    • Nilpo disagrees : Poor advice. This method is not outdated and adding the bloat of jQuery just to handle an intrinsic onClick event is poor practice.
  4. #3
  5. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    97
    Rep Power
    4
    Originally Posted by derplumo
    Hi,

    I'm trying to make a button out of a div, but when I click in the div it doesn't work. It only does when I click on the border of the div.

    The code looks like this:
    PHP Code:
    <div class='clickable' onclick='click_func()'></div
    click_func() is just a function...

    Does anyone know a way to do this? I now use a button for this but I just want to use the divs.
    I have had success with this construction:

    PHP Code:
            $('#content').on({
              
    "mousedown"mapMouseEvent
            
    }); 
    where #content is the ID of the DIV and mapMouseEvent is the function that the event calls.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    184
    Rep Power
    31
    I'm trying to make a button out of a div, but when I click in the div it doesn't work...
    Maybe because <div> just can't natively receive a focus. Other elements which are natively "focusable" are anchors, inputs, textareas, etc.

    If you only need to style this button, maybe you should try <button> instead of <input>.

    But if you really have to, try add "tabindex" and/ or contenteditable attributes to it (your div).
  8. #5
  9. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,182
    Rep Power
    1469
    Originally Posted by derplumo
    Hi,

    I'm trying to make a button out of a div, but when I click in the div it doesn't work. It only does when I click on the border of the div.

    The code looks like this:
    PHP Code:
    <div class='clickable' onclick='click_func()'></div
    click_func() is just a function...

    Does anyone know a way to do this? I now use a button for this but I just want to use the divs.
    Why wouldn't you use a button to make a button? It sounds like you're doing it correctly now, why do you want to change?

    That being said, divs do send click events so the problem is in your click_func() function. What error are you getting? Are you using a console?
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    311
    Rep Power
    8
    Originally Posted by paulh1983
    why are you making the whole div clickable?
    Because I think it looks cleaner, I don't really know how to say it, I think I can do more with it than with a button

    Originally Posted by paulh1983
    Secondly this way of JS is long gone, try to use jquery and id.. for eg
    Yea I think that is better, I didn't know that Jquery could do that but also I haven't used it a lot. Thanks for the advise.

    Originally Posted by Nilpo
    That being said, divs do send click events so the problem is in your click_func() function. What error are you getting? Are you using a console?
    yea it was the function... I just tried a new page etc. for good measuring... sorry for the holdup

    But now a new question, what is better to use, this

    PHP Code:
    <html>
        <
    head>
            <
    script>
                function 
    click_func() {
                    
    alert('a');
                }
            
    </script>
        </head>
        <body>
            <div onclick="click_func();" style="height:100px;width:100px;background-color:black;"></div>
        </body>
    </html> 
    or JQuery like paul said?
  12. #7
  13. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,182
    Rep Power
    1469
    Originally Posted by derplumo
    But now a new question, what is better to use, this

    PHP Code:
    <html>
        <
    head>
            <
    script>
                function 
    click_func() {
                    
    alert('a');
                }
            
    </script>
        </head>
        <body>
            <div onclick="click_func();" style="height:100px;width:100px;background-color:black;"></div>
        </body>
    </html> 
    or JQuery like paul said?
    It depends on your needs. I absolutely disagree that this way of JS is long gone. This is the correct way of implementing this and it is not deprecated in any way. (You should however, move your script down to the bottom of your page and get rid of the inline styling...)

    jQuery is a helper framework. It can make doing things like this easier, but it is not necessary. If you are only doing a few simple things like this, it may not be worth having the overhead of loading a full framework like jQuery that will slow down your page load times unnecessarily. It may not be the right tool for this job. Only you can determine how much javascript you are using and how involved it is.

    Comments on this post

    • derplumo agrees
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    311
    Rep Power
    8
    ok, yes I normally move the js and css to an other file, but this was just for the functionality.

    I will just keep using this then till I need the JQuery because just what you said the loading time will be increased, and if I use it for something like this it will be a waste. Thanks
  16. #9
  17. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,182
    Rep Power
    1469
    Originally Posted by derplumo
    ok, yes I normally move the js and css to an other file, but this was just for the functionality.

    I will just keep using this then till I need the JQuery because just what you said the loading time will be increased, and if I use it for something like this it will be a waste. Thanks
    Ya, that is a good approach. I use jQuery on nearly every one of my projects, but always have to weigh the options. Here's how I figure it out. If my working Javascript is significantly smaller than the size of the jQuery library, then I don't use it. Also, for something as small as this, there's no need for external JS files. The added network request will take longer than loading the JS in the current file. This is where site testing can help out. Try it both ways and use whichever is quicker. In this case, I can tell you that such a small function is much quicker to keep in page.

    The only other thing to consider is the size and scope of your project. If you are building a very large site, you may want to keep your JS externally to make it easier to maintain, regardless of the few microseconds you could save on page loads.

    If you have the ability to load your JS asynchronously, you could do that as well to save on page load time. But in this case, the amount of code it would take to load it asynchronously is about the same as what you already have. There's a good likelihood that loading it asynchronously could actually take longer and add unnecessary bandwidth. Maybe not a problem now, but if you're serving 50,000 page views an hour, it makes a massive difference.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  18. #10
  19. Web Developer/Musician
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Nov 2004
    Location
    Tennessee Mountains
    Posts
    2,407
    Rep Power
    1031
    Originally Posted by Nilpo
    Why wouldn't you use a button to make a button? It sounds like you're doing it correctly now, why do you want to change?
    My first guess would be that buttons on certain platforms and certain browsers don't allow much styling.
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    311
    Rep Power
    8
    ok now I got an other problem, I want to make a collection of divs and when someone clicks on one it has to be (de)selected. Also I want it in some sort of an input because I want the user to submit the selected divs. How can I do this best?
  22. #12
  23. Web Developer/Musician
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Nov 2004
    Location
    Tennessee Mountains
    Posts
    2,407
    Rep Power
    1031
    Originally Posted by derplumo
    ok now I got an other problem, I want to make a collection of divs and when someone clicks on one it has to be (de)selected. Also I want it in some sort of an input because I want the user to submit the selected divs. How can I do this best?
    "Selecting" divs from the user's perspective is a matter of changing styling to make it "look" selected. If the div responds to the javascript click event then part of the callback for the event should be changing the style of that div. You would set up in a style sheet a "div_selected" and "div_deselected" class and toggle between the two. Because you aren't using some sort of preconfigured "window" control like a form element with a shadow DOM that automatically changes visual state when clicked (like a radio button), the process of making it look selected is entirely up to you. This isn't really a PHP issue but a Javascript one, so if you have any further questions about it, it would probably be best addressed in the javascript forum.
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    311
    Rep Power
    8
    of course

    where is this located?
  26. #14
  27. Web Developer/Musician
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Nov 2004
    Location
    Tennessee Mountains
    Posts
    2,407
    Rep Power
    1031
    Originally Posted by derplumo
    of course

    where is this located?
    http://forums.devshed.com/javascript-development-115/

IMN logo majestic logo threadwatch logo seochat tools logo