Question

im using jquery to add a quickmenue to my website.
my source code is like this :

var span = $('body').append('<span id="quickmenu">');
       $('#quickmenu').css('position','fixed')
              .css('background-color','white')
              .css('border','4px solid black')
              .css('border-left','0px solid black')
              .css('top','15px')
              .css('left','0px')
              .css('font-family','Calibri')
              .css('font-size','14px')
              .css('line-height','0px')
              .css('color','#777777')
              .css('text-align','center');

My problem on that is, everything works really fine in FF and Chrome, but IE9 isn’t showing anything to me.

So i tried some alerts() after accessing the above code…:

alert('I run'); // I run
alert(span); // [object Object]
alert($("#quickmenu")); // [object Object] 
alert(span == $("#quickmenu")); // false

So i seems to be created , but not shown?!

I really have no idea what went wrong there,…. Console shows no errors in FF and IE9

Any ideas ?! :-/

Answer 1

I believe the code is running too early. You need to wrap your code in the document ready function:

jQuery(document).ready(function() {

//your code goes here

});

I would in fact change your function to something like below:

 jQuery(document).ready(function(e) {   
    var span = $('<span id="quickmenu" >')
        .css({
            'position':'fixed',
             'background-color':'white',
             'border':'4px solid black',
             'border-left':'0px solid black',
             'top':'15px',
             'left':'0px',
             'font-family':'Calibri',
             'font-size':'14px',
             'line-height':'0px',
             'color':'#777777',
             'text-align':'center'
        })
        .appendTo($("body"));
});