jQuery css problem with safari

Forum Moderators: open

Message Too Old, No Replies

jQuery css problem with safari

whyyi

3:15 am on Mar 12, 2011 (gmt 0)

I just can't seem to figure out why this would work fine in firefox but not in safari.

jQuery:

$(document).ready(function(){
$("#page #page_inner").parent().css({'display' : 'block'});
});

html:

<div id="page">
<div id="page_inner">some content</div>
</div>

I'm essentially trying to add a "display:block" to the page div and it renders in firefox no luck in safari. Any help is greatly appreciated.

JAB Creations

5:39 pm on Mar 12, 2011 (gmt 0)

Don't use jQuery or any other framework, they're not cross-browser compatible and they're overbloated at 70KB (they are always 70KB).

function change(id, newClass)
{
 if (document.getElementById(id)) {document.getElementById(id).className=newClass;}
 else if (id) {id.className=newClass;}
 else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);
 }
}

// usage
change('page_inner','block');

//CSS
//.block {display: block;}

...or if you aren't going to create a CSS class for a single element use an individual script...

function setstylebyid(i,p,v)
{
 if (document.getElementById(i))
 {
 var n = document.getElementById(i);
 if (n != null) {n.style[p] = v;}
 }
 else {alert('Error: the id \''+i+'\' was not found or has not yet been imported to the DOM.\n\nNew property intended: '+p+'\n\nNew value intended: '+v);
}

- John

whyyi

6:36 pm on Mar 12, 2011 (gmt 0)

Thanks! But unfortunately I have to use jQuery (trust me you don't want me to get into the details as to why)

I'm a bit of a newbie but just don't understand why my code would work in firefox and not safari. This has to be something simple I'm missing.

Thanks for the help!

JAB Creations

8:09 pm on Mar 13, 2011 (gmt 0)

Because jQuery is not cross-browser compatible, it's poor code that relies on things like innerHTML. The code I posted for you will work cross-browser even in very old browsers without any problems.

What this mentality of having to use jQuery? It's not JavaScript, it's a framework. Anyone telling you to use jQuery in place of JavaScript is someone who doesn't know what they're doing and that's not the type of person you want telling you what to do if you're new to code. Trust me, code correctly and it'll pay off in the long term or code incorrectly and forever wrestle with mediocrity.

- John

caribguy

10:29 pm on Mar 13, 2011 (gmt 0)

How about just answering the OP's question instead of spreading FUD?

Change the colon into a comma:

$(document).ready(function(){
$("#page #page_inner").parent().css('display' , 'block');
});

[api.jquery.com...]

whyyi

4:36 pm on Mar 14, 2011 (gmt 0)

Thanks caribguy I appreciate it.

But still no luck in safari, your solution worked in firefox just not safari.

Anything else you can think of, thanks!

caribguy

6:16 pm on Mar 14, 2011 (gmt 0)

If the code below works in Safari, then your problem is somewhere else:



<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <style>
      #page {
        background-color: #777;
        height: 400px;
        width: 400px;
        display: inline;
      }
      #page_inner {
        background-color: #00ff00;
        margin: 30px auto;
        height: 300px;
        width: 300px;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#page #page_inner").parent().css('display' , 'block');
      }); 
    </script>
  </head>
  <body>
    <div id="page">
      my outer div
      <div id="page_inner">
        my inner div
      </div>
    </div>
  </body>
</html>

whyyi

8:59 pm on Mar 14, 2011 (gmt 0)

Thanks Caribguy this is great.

I should have added in the post that I'm using jquery to prepend an empty div to the "#page" id which is named "#page_inner", then trying to access "#page" using parent().

You're absolutely right there was a syntax error in my code when I was prepending the div.

Thanks so much, my problem's solved :)

JAB Creations

6:34 am on Mar 15, 2011 (gmt 0)

caribguy, I did reply with real code. It is in the OP's best interests to understand the nature of their situation instead of being blindly led down the path of bad code and bad practices. Since jQuery is based on JavaScript the fact that the OP stated they have to use jQuery is very disconcerting. It would be a very good opportunity for the OP to learn more about the DOM instead of being misled in to thinking they should rely on something that will ultimately subjugate them to static coding practices.

- John

caribguy

7:03 pm on Mar 15, 2011 (gmt 0)

My .02...

We can get all philosophical about what constitutes 'real code' or we can help people solve an immediate problem. I think it's best if we leave the banter on Foo and use this forum to provide fixes.