SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Can't remove Javascript inserted Element Style

    Page: http://ariawellnessboutique.com/index.html

    The issue I'm having only appears on mobile browsers on small screens. View the above link on your phone and you'll see that the picture frame logo is no longer centered. If you use a desktop browser,set it to mobile, and make the window thin the result is the same, however the second I resize the window (to anything) it corrects itself. I believe the culprit is here:

    Code:
    <div data-left="50%" class="art-object593136266" style="left: 449px;"></div>
    This is how the line appears in the actual HTML file

    Code:
    <div class="art-object593136266" data-left="50%"></div>
    I believe it's being modified by something in the javascript, but I'm not good with Javascript and I can't find out how to make it stop changing the code. If I use firebug, I can disable:

    Code:
    element.style {
        left: 449px;
    }
    and it problem is corrected. I just can't pinpoint how to make the change permanent. Any help would be greatly appreciated!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That is being set by the style attribute in the HTML tag you posted - not from JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    That is being set by the style attribute in the HTML tag you posted - not from JavaScript.
    Sorry, I was a bit unclear. The code in the HTML is this:
    Code:
    <div class="art-object593136266" data-left="50%"></div>
    However, when it's rendered on small screen mobile devices, the logo appears off center. If I view the element with Firebug it tells me this:
    Code:
    <div data-left="50%" class="art-object593136266" style="left: 449px;"></div>
    If I resize the window, the "left:449px" immediately disappears, and it corrects itself.

    My end goal, is that I just want the logo to center on mobile browsers. The code looks correct, but something is making it render improperly initially. Once the window is resized however, the CSS kicks in and fixes it.

  4. #4
    SitePoint Enthusiast magentoexpert's Avatar
    Join Date
    Mar 2013
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case you can use the css class and make it override the inline style. Let 's modify the code:

    Code:
    <div data-left="50%" class="art-object593136266" style="left: 449px;" class="force-left-for-div"></div>
    And add this line of css some where in your css file

    Code:
    .force-left-for-div{
        left: 449px !important;
    }
    If the style is changed by js, it will rewrite the inline style. But we already got css with "!important" so that it will have higher priority. Try and see, if it work for you.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks MagentoExpert. This is what fixed it:

    Code:
    <div data-left="50%" class="art-object593136266 force-left-for-div"></div>
    Code:
    .force-left-for-div{
        left: 50% !important;
    }


Tags for this Thread

Bookmarks

Posting Permissions

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