Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question manipulating css using javascript and the base html statement

    Hello,

    I came across a very odd browser behavior when trying to modify a css class using javascript and at the same time having a base html statement in my html file.

    Without the base html statement, all browsers work fine and I can change the css class definition using javascript easily.
    With a base html statement, only FireFox still works while Internet Explorer and Google Chrome dont work anymore. If there is a cross-domain issue, while one browser does work and the others dont?

    An example of what I'm talking about, with the base statement:
    http://freebsdcluster.org/~casaschi/...mple-base.html
    Without the base statement:
    http://freebsdcluster.org/~casaschi/...le-nobase.html

    Any idea how to tweak the code in the case with the base html statement in order for the javascript to work with all browser (modifying the class definition) ???

    Keep in mind, I dont want a suggestion of another way to change the color, this is only an example. I want to be able to manipulare css classes with javascript when a base html statement is in my html code.

    This is essentially the code:

    Code:
    <!--
    -->
    <base href='http://www.google.com'>
    
    <style id='myStyle' type='text/css'>
    
    .myStyle {
      color: red;
    }
    
    </style>
    
    <script type="text/javascript">
    
    var lastColor = 'red';
    function toggleColor() {
      lastColor = lastColor == 'red' ? 'green' : 'red';
      myObject = document.getElementById('myStyle');
      if (myObject.sheet) { myObject.sheet.cssRules[0].style.color = lastColor; } // Mozilla style
      if (myObject.styleSheet) { myObject.styleSheet.rules[0].style.color = lastColor; } // IE style
    }
    
    </script>
    
    <a href="javascript: toggleColor();"><span class=myStyle>click here to toggle color</span></a>
    Thanks in advance...
    Last edited by casaschi; 07-16-2010 at 03:49 PM.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You don't have a doctype, html tags, head tags, or body tags. To get consistent behavior, you'll need to use a doctype and build an appropriate document structure. Not sure if that will fix the problem, but it's where to start.
    Are you a Help Vampire?

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    You don't have a doctype, html tags, head tags, or body tags. To get consistent behavior, you'll need to use a doctype and build an appropriate document structure. Not sure if that will fix the problem, but it's where to start.
    Well... I amended the examples at the links:

    http://freebsdcluster.org/~casaschi/...mple-base.html

    http://freebsdcluster.org/~casaschi/...le-nobase.html

    Now they are tidy with doctype, html, head, body tags and so on.
    Still the web browser don't seem as fuzzy about it as you are since the behavior is exactly the same.

    What's next then?

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    366
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Hi Casaschi,

    My IE8 could pass this test, but not my Chrome5.0.375.99.
    Chrome hasn't fully implemented DOM Core 2? I don't know.

    Give <style> different id, e.g: myCSS,
    and retrieve that using document.getElementById("myCSS").
    And my Chrome finally pass the test.

    Hendra

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    My IE8 could pass this test, but not my Chrome5.0.375.99.
    Chrome hasn't fully implemented DOM Core 2? I don't know.

    Give <style> different id, e.g: myCSS,
    and retrieve that using document.getElementById("myCSS").
    And my Chrome finally pass the test.
    Not sure I understand your workaround, I'm already using an id to retrieve the style element, just changing the id value does not make a difference.
    Could you please post the actual code that works for you, with the base statement in the html code?

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    366
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Apologize I didn't rechecked my code, the <base> tag was still a comment.
    You're right, renaming id won't bring any differences.

    I've tested again http://freebsdcluster.org/~casaschi/...mple-base.html,
    and it seems that Chrome always check domain / <base> first before "doing anything".

    Since your CSS doesn't reside in www.google.com domain,
    Chrome would give error. Try change base into <base href="#" />,
    and probably your script shall do fine.

    Hendra

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Apologize I didn't rechecked my code, the <base> tag was still a comment.
    You're right, renaming id won't bring any differences.

    I've tested again http://freebsdcluster.org/~casaschi/...mple-base.html,
    and it seems that Chrome always check domain / <base> first before "doing anything".

    Since your CSS doesn't reside in www.google.com domain,
    Chrome would give error. Try change base into <base href="#" />,
    and probably your script shall do fine.

    Hendra
    Thanks, I got the same hint at the same time from somewhere else and it seems to fix the issue with Google Chrome.

    However, it seems that even changing base to "#" still IE7 does not work.
    Any hint how to get IE7 to work with the base statement?

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    366
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Did your IE7 error console tell report any errors?

    <base> statement didn't give any,
    when your script ran on IE7 emulated mode in my IE8.

  • #9
    New Coder
    Join Date
    Nov 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Did your IE7 error console tell report any errors?

    <base> statement didn't give any,
    when your script ran on IE7 emulated mode in my IE8.
    No error message.
    It just stops executing when accessing myObject.styleSheet.rules

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by casaschi View Post
    I came across a very odd browser behavior when trying to modify a css class using javascript and at the same time having a base html statement in my html file.
    Came to sort of a conclusion on this one:
    • the ability to dynamically change css classes is not supported consistently across browsers, especially when a base statement is included. practically speaking, very challenging to use
    • an alternative solution was proposed to me: since I only need to change the css classes once at html file load (reading options from the URL search string), then it's possible to add a new stylesheet using the document.write("<style ... </style>") javascript function. This works with any browser and with/without the base html statement

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I recommend jQuery. I learned in it a few days and it really is helpful for this kind of thing. With jQuery it would be easy to locate the html by id or class and with one line of code change the css to your liking. I know this isnt exactly the answer you're looking for, but thought I could promote it -- jQuery really does make this kind of thing easy.

    http://api.jquery.com/css/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •