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.

Answer 1

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");
    }); 
}

Answer 2

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