html – Making a JavaScript code works with any element

document.getElementById(\"but\").onclick = showDropDown;

function showDropDown(e) {
    document.getElementById(\"but\").onclick = function() {};
    if (e.stopPropagation) e.stopPropagation(); // W3C model
    else e.cancelBubble = true; // IE model
    document.getElementById(\"window\").style.display = \"inline-block\";
    document.onclick = function(e) {
        var ele = document.elementFromPoint(e.clientX, e.clientY);
        if (ele == document.getElementById(\"but\")) {
            hideDropDown();
            return;
        }
        do {
            if (ele == document.getElementById(\"window\")) return;
        } while (ele = ele.parentNode);
        hideDropDown();
    };
}

function hideDropDown() {
    document.onclick = function() {};
    document.getElementById(\"window\").style.display = \"none\";
    document.getElementById(\"but\").onclick = showDropDown;
}​


<input id=\"but\" type=\"button\" value=\"pressMe\" />
<div id=\"window\" style=\"display:none\">popup</div>

Demo: http://jsfiddle.net/nazym/

I was trying to make the JavaScript code dynamic using variables instead of the specified elements\’ names but I could not. It always returns errors. I want to link it with different elements.

update

I want to replace the ids of the elements in the JavaScript code with variables so I can use it with any element.I tried to do it but failed. Basically, I want to use variables instead of the ids of the element and link it to the elements somehow again.

Rating: 3 out of 5 based on 3 ratings

Posts Related to html - Making a JavaScript code works with any element

• Aug 25th, 2012 javascript - How to scroll an element inside parent when a fixed element passes? Saturday PM 15:01:09


• Jul 07th, 2012 css - positioning an element absolutely *within* another element Saturday PM 22:55:41


• Aug 18th, 2012 javascript - getelementbyid and tagname and classname Saturday PM 17:20:25


• Jul 31st, 2012 html - How do I add a CSS class to an element from CSS (not jquery nor javascript)? Tuesday AM 07:16:26


• Aug 18th, 2012 jquery - Set onclick of <a> using javascript Saturday AM 04:20:57


• Jul 10th, 2012 javascript - Finiding the number of times li is cliked Tuesday PM 12:13:19


• Aug 05th, 2012 css - jQuery - How to replace $(element).nextAll().remove() for this particular case Sunday AM 11:49:10


• Aug 14th, 2012 Explanation needed understanding jQuery objects and offsets Tuesday AM 01:12:50


• Jul 12th, 2012 javascript - Update window hash (at url) Thursday AM 08:21:22


• Aug 18th, 2012 javascript - Choosing div placement using append in jQuery Saturday PM 16:20:23

The post html – Making a JavaScript code works with any element appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/html-making-a-javascript-code-works-with-any-element.html