Using jQuery in a JavaScript function

Question

function divlightbox(val)
{
    if(val)
    {
        val=val.replace( /^\s+/g, "" );
        var count_js=0;
        var big_string='';
        document.getElementById("video_lightbox").innerHTML="";
        document.getElementById("divlightbox").style.display = "block";
        $("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});

I found out that the error is in the above. My question is can't I use jQuery and traditional JavaScript at same time? I have done coding like this numerous times and never ran into a problem like this. I used to use jQuery methods like .hide() and .css() inside JavaScript functions but this time it doesn't work.

Thanks in advance.

jQuery IS javascript. BTW, what error returns the javascript console/firebug? — fcalderan
– fcalderan, Commented Nov 11, 2010 at 13:49
what error are you getting? have you looked at it in firebug? — NG.
– NG., Commented Nov 11, 2010 at 13:49
I am calling this function on click event of a link and jQuery is loaded when I call this function...What might be the problem red-X — Wasim Karani
– Wasim Karani, Commented Nov 11, 2010 at 13:59
When you say "my error", do you mean you're getting an Error message in the console? Or are you saying that it just isn't doing what you want it to do? You haven't actually described the issue you're having. — user113716
– user113716, Commented Nov 11, 2010 at 14:03

majick · Accepted Answer · 2016-04-22 07:10:33Z

16

While the other answers fix the specific problems, I don't think the OP's question (in bold) is really answered here, as depending on the specific context, $ may possibly not be defined as a jQuery object yet (having had this problem myself a few times now.)

In which case you would need to do something like:

function divlightbox(val) {
    // ...
    // just use jQuery instead of $ one time
    jQuery("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});
}

OR

function divlightbox(val) {
    // define the $ as jQuery for multiple uses
    jQuery(function($) {
        // ...
        $("#video_lightbox").css("height":"430px");
        $("#video_lightbox").css("top":"10%");
        $("#video_lightbox").css("width":"480px");
    }); 
}

answered Apr 22, 2016 at 7:10

majick

3192 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Z. Zlatev · Accepted Answer · 2010-11-11 13:52:37Z

5

jQuery is JavaScript so YES. Instead .innerHTML="" just use .empty(). Instead .getElementById() use $('#..') and so on.

answered Nov 11, 2010 at 13:52

Z. Zlatev

4,8101 gold badge35 silver badges39 bronze badges

Comments

Patricia · Accepted Answer · 2010-11-11 13:49:16Z

4

to do things like hide(); and css() you need jquery objects. you can't do them to dom elements.

so you could do $('#video_lightbox').html(""); or

$('#video_lightbox').empty();

answered Nov 11, 2010 at 13:49

Patricia

7,8024 gold badges40 silver badges70 bronze badges

1 Comment

dan_waterworth Over a year ago

I recall you can also create a jquery object by passing a dom element. ie $(el)

fcalderan · Accepted Answer · 2010-11-11 14:07:13Z

1

You must provide error in javascript console.

1) Do you pass a val argument to divlightbox function()? When do you call it?

2) why do you use the same identifier divlightbox both for a function and for a div id? Change name to the function please, maybe the problem could be here.

3) Always check if video_lightbox and divlightbox exist before accessing them.

answered Nov 11, 2010 at 14:07

fcalderan

Collectives™ on Stack Overflow

Using jQuery in a JavaScript function

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related