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 12 of 12
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    how to prioritise css effect

    Hi,

    I am designing a website for iPad and on detecting its orientation I change the Top margin of an image using jquery depending on a value returned from another function. This top margin can be different for different pages, so the images top margin depends on this value returned and injected as an data- attribute value, which I fetch and apply to the image through jquery only if its in lanscape mode (using window.orientation).

    When I rotate the ipad I get this bump up effect for the image. It looks like its taking the original css style for margin top defined in the css stylesheet first and then applies the css injected through jquery.

    I would really appreciate any of your help.

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Yes, that’s usually the case because CSS is parsed/executed quicker than JS. Avoiding that depends on various factors and isn’t always 100% controllable. These factors are loading/parsing order (JS in head or body), size of script, download speed of page, complexity of function, complexity of HTML/DOM to traverse, etc.
    The quickest way to change something would be to execute the function right after the element has been parsed but that might not be an option. It would help tremendously if you posted your code to find the best approach for the specific situation.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    one dirty fix is to put everything into one "wrapper" div, then add an event listener for window.onorientationchange. In that function, hide the wrapper div, set a timeout which will give your js enough time to do the calculations, etc, and then redisplay the div at the end of the timeout.

    There are probably more elegant ways to do this. You could, for example, look at using an ondomloaded event instead of the timeout. Untested, but worth a shot.
    Last edited by xelawho; 03-17-2014 at 04:33 PM.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks you both for your replies. The web application i am building is using similar technology to query mobile and has page ready, page loaded events. The code is as below

    Code:
    <section class="buysection">
    <div class="book-col book-span12">
    <figure class="book-fullbleed hero landscape" data-margin="-250">
    <img src="images/70eaa66979507ceaabc85d375dc7b776_1254x1672.png" alt="" style="margin-top: -250px !important;">
    <figcaption class="over-image">
     <h1 class="block sugar">Rose Fairy</h1>
    </figcaption>
    </figure></div>
            <figcaption class="over-image-footer">
                      <div class="book-col book-span6">
    <h3 class="buy-header-body-margin">Rose Fairy</h3>
                             </div><div class="book-col book-span6 align-middle"><a class="buybutton buy sugar" href="#">buy</a>
                      </div>
    </figcaption>
    </section>
    If you see there is the data-margin value that is automatically provided by the framework to adjust the image top margin (only for landscape mode) . so I change the value of the default css from style sheet to this value using query as follows

    PHP Code:
    <script type="text/javascript">

    $(
    document).on('bookstrapready', function(){
          
    bookstrap.on('pageload', function(page){
              var 
    fig page.$el.find('figure');
              var 
    val fig.attr("data-margin");
            
           
          

              function 
    doOnOrientationChange()
                {
                  switch(
    window.orientation
                  {  
                    case -
    90:
                   
    // $("figure[data-margin] > img ").css("marginTop",val+"px");
                  
    break;
                    case 
    90:
                   
    // $("figure[data-margin] > img ").css("marginTop",val+"px");
                      
    break; 
                    default:
                   
    // $("figure[data-margin] > img ").css("marginTop","auto");
                      
    break; 
                  }
                }
                
    window.addEventListener('orientationchange'doOnOrientationChangeTwo);
                
    doOnOrientationChangeTwo();

          });
    });



    </script> 
    Thanks
    Last edited by VIPStephan; 03-17-2014 at 05:37 PM. Reason: added code BB tags

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    what does doOnOrientationChangeTwo do, and did you try what I suggested?

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks again for your reply.

    Yes I did try it out with no luck.

    Sorry regarding the doOnOrientationChange, I did a mistake, the correct code is

    PHP Code:
    <script type="text/javascript">

    $(
    document).on('bookstrapready', function(){
          
    bookstrap.on('pageload', function(page){
              var 
    fig page.$el.find('figure');
              var 
    val fig.attr("data-margin");
            
           
          

              function 
    doOnOrientationChange()
                {
                  switch(
    window.orientation
                  {  
                    case -
    90:
                    $(
    "figure[data-margin] > img ").css("marginTop",val+"px");
                  break;
                    case 
    90:
                    $(
    "figure[data-margin] > img ").css("marginTop",val+"px");
                      break; 
                    default:
                    $(
    "figure[data-margin] > img ").css("marginTop","auto");
                      break; 
                  }
                }
                
    window.addEventListener('orientationchange'doOnOrientationChange);
                
    doOnOrientationChange();

          });
    });



    </script> 
    Thanks

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Why not just use CSS Media Queries to set the top margin based on orientation?

    Code:
    @media screen and (orientation:portrait) {
        figure img {
            margin-top: -250px;
        }
    }
    Last edited by glenngv; 03-17-2014 at 06:36 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Glenn,

    Thanks for your reply. The reason why I can't use css media query is because the margin top value can be different for different pages and the pages are also generated dynamically through javascript like in query mobile .

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Then do this:

    Code:
    $('<style>@media screen and (orientation:portrait) { figure > img { margin-top: ' + val + 'px; } }</style>').appendTo('head');
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Quote Originally Posted by glenngv View Post
    Then do this:

    Code:
    $('<style>@media screen and (orientation:portrait) { figure > img { margin-top: ' + val + 'px; } }</style>').appendTo('head');
    Ooh, that feels ugly.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    That may look ugly but that works better than using orientationchange event. If you have a pretty solution, please feel free to post.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Then do this:

    Code:
    $('<style>@media screen and (orientation:portrait) { figure > img { margin-top: ' + val + 'px; } }</style>').appendTo('head');
    HI Glenn

    Thank you again, thanks very much. It works !!. I don't know why I din't think about this earlier.

    Thanks again

    Ryan


  •  

    Posting Permissions

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