#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221

    A Jquery CSS question. Is this possible?


    Hi;

    How can I get the countdown timer to stick to the top without changing the style of #countdown_timer?

    I understand if I add position:fixed; top:0 to #countdown_timer it sorta works.

    But the only thing I have access to is the iframe and what happens there.

    https://jsfiddle.net/k6r1bszp/6/

    Thanks
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    That's up to the site hosting the timer. If they want it positioned at the top (eg, fixed) then they should do that. If they don't then you shouldn't force it to happen.

    You can always give people options on how to customize the timer. Normally that works by having a little form where people click options and it spits out the HTML markup they copy and paste. Customizing options is typically either query string arguments to the main script or a separate <script> executed just before like
    Code:
    <script>
    var webmoosh = webmoosh || {};
    webmoosh.ctb = {position:fixed}; // this is the part that gets customized based on the form options
    </script>
    <script src="..."></script>
    Then you check the webmoosh.ctb object for options and customize the output accordingly.
  4. #3
  5. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221
    Originally Posted by requinix
    That's up to the site hosting the timer. If they want it positioned at the top (eg, fixed) then they should do that. If they don't then you shouldn't force it to happen.

    You can always give people options on how to customize the timer. Normally that works by having a little form where people click options and it spits out the HTML markup they copy and paste. Customizing options is typically either query string arguments to the main script or a separate <script> executed just before like
    Code:
    <script>
    var webmoosh = webmoosh || {};
    webmoosh.ctb = {position:fixed}; // this is the part that gets customized based on the form options
    </script>
    <script src="http://forums.devshed.com/..."></script>
    Then you check the webmoosh.ctb object for options and customize the output accordingly.
    Thoughts? ==> Link <==

    It updates the code when you change settings. They update and click save.
  6. #4
  7. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
  8. #5
  9. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221
    It would be so much cooler if I didn't have to add inline CSS to the code I give them :0
    Code:
    <div id = "countdown_timer" style="position:fixed; width: 100%; top:0"  > <script type="text/javascript" src="https://webmoosh.com/ctb" data-launch_owner_email_hashed="94bd214b329301668349352de430bb6d" data-launch_id="64" data-lt="broadcast"></script></div>
    This is how the other guys do it
    Code:
    <!-- Deadline Funnel --><script type="text/javascript" data-cfasync="false">function base64_encode(e){var r,t,c,a,h,n,o,A,i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",d=0,l=0,s="",u=[];if(!e)return e;do r=e.charCodeAt(d++),t=e.charCodeAt(d++),c=e.charCodeAt(d++),A=r<<16|t<<8|c,a=A>>18&63,h=A>>12&63,n=A>>6&63,o=63&A,u[l++]=i.charAt(a)+i.charAt(h)+i.charAt(n)+i.charAt(o);while(d<e.length);s=u.join("");var C=e.length%3;var decoded = (C?s.slice(0,C-3):s)+"===".slice(C||3);decoded = decoded.replace("+", "-");decoded = decoded.replace("/", "_");return decoded;} var url = base64_encode(location.href);var parentUrl = (parent !== window) ? ("/" + base64_encode(document.referrer)) : "";(function() {var s = document.createElement("script");s.type = "text/javascript";s.async = true;s.setAttribute("data-scriptid", "dfunifiedcode");s.src ="https://a.deadlinefunnel.com/unified/reactunified.bundle.js?userIdHash=eyJpdiI6IisxXC9PODljVXRubjZQU3JyZGFpaGNnPT0iLCJ2YWx1ZSI6Im1ubk83TmNSQXZCbXBON05kWk9ITEE9PSIsIm1hYyI6Ijk0N2NlNTdmNTY2NmQ2ODQ2OTM3YjlhYzEzODI2OThkMTNhMDBmM2RhMDIzMTFhNDM4ZTIwZmU1OWUxNzE4NDUifQ==&pageFromUrl="+url+"&parentPageFromUrl="+parentUrl;var s2 = document.getElementsByTagName("script")[0];s2.parentNode.insertBefore(s, s2);})();</script><!-- End Deadline Funnel -->
  10. #6
  11. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    Well there's something obfuscated in there, that's why it's so much longer.

    Inline styles are not inherently evil. The problem is when people use it when proper CSS rules are more appropriate. And here they are not.
  12. #7
  13. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221
    Originally Posted by requinix
    Well there's something obfuscated in there, that's why it's so much longer.

    Inline styles are not inherently evil. The problem is when people use it when proper CSS rules are more appropriate. And here they are not.
    You think my approach is more proper?
  14. #8
  15. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    Apples and oranges. I can't compare the two without knowing what the second does (I didn't read much) or why it's obfuscated.
  16. #9
  17. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221
    If I could update the class of the item outside iframe, then I wouldn't have to change the code I give them.

    Not sure if it's an option to change the class outside an iframe from inside.
  18. #10
  19. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    Again, don't. Let the user customize the output. Yeah, it is possible for you to manipulate other HTML on the page, but that's not a good thing to do. The site owners are trusting you by embedding your script on their pages - don't go mucking about.

IMN logo majestic logo threadwatch logo seochat tools logo