Alternative getElementById() in jQuery

Question

I'm using Drupal and I have created three floating banners.

On the frontpage there is a block (block1) that displays one floating banner and after refresh the second one is appearing and for the third too. Like a wrote before these banners has a little X button to stop overflow. I've putted this script in a one of the banners and it's working great.

<script language="javascript">
function doexpand() {
    document.getElementById("block1").style.overflow = "visible";
}

function dolittle() {
    document.getElementById("block1").style.overflow = "hidden";
}    
</script>

The real problem is that in categories pages I have #block2 and in articles #block3. These block are displaying the same banners. The code over is working only for a one ID. In this case #block1. document.getElementById is not working for more ID's as I read from other topics.

I've tried with jQuery with two blocks idents like this:

(function ($) {

    function doexpand() {
     $("#block1,#block2").css("overflow","visible");
    }
    function dolittle() {
     $("#block1,#block2").css("overflow","hidden");
    }

    })(jQuery);

It's not working. The firebug/console displays: ReferenceError: doexpand is not defined.

I've tried with a single block too with jQuery like this:

(function ($) {

        function doexpand() {
         $("#block1").css("overflow","visible");
        }
        function dolittle() {
         $("#block1").css("overflow","hidden");
        }

        })(jQuery);

and it's displaying the same error.

Note: Drupal has a different wrapping and it's like this:

(function ($) {
        //your existing code
    })(jQuery);

Your code in inside a _closure_ so those functions are not available outside of it. Add your events with jQuery. — elclanrs, Jun 26 '13 at 07:31
Your last question was misinterpreted but it was very different from this one. You should have salvaged the other one. — Denys Séguret, Jun 26 '13 at 07:32
dystroy It was a real mess, that's why I opened a new one and I voted for other thread to be deleted. — user2519032, Jun 26 '13 at 07:34
The main problem was that you tried to change it to a very different question after your first question was answered. Don't do this. Try to find what's your problem before asking. — Denys Séguret, Jun 26 '13 at 07:37

score 3 · Accepted Answer · answered Jun 26 '13 at 07:34

3

Just define your function global, or you need to expose them global.

(function ($, window) {

        function doexpand() {
         $("#block1").css("overflow","visible");
        }
        function dolittle() {
         $("#block1").css("overflow","hidden");
        }

        // expose them global
        window.doexpand = doexpand;
        window.dolittle = dolittle;

})(jQuery, window);

answered Jun 26 '13 at 07:34

xdazz

158,678
38
247
274

Isn't making stuff global a bad practice? Wouldn't it be better to return those values and use them on window context? – raam86 Jun 26 '13 at 08:05
1

dude, just add action listeners to the banners - stop polluting your global namespace and the precious html with functions, variables, js calls and stuff. – Joshua Jun 26 '13 at 08:08

Alternative getElementById() in jQuery

1 Answers1