1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Access to style properties in JS

Discussion in 'XenForo Development Discussions' started by CyberAP, Apr 14, 2014.

  1. CyberAP

    CyberAP Well-Known Member

    Is there any way to access style properties from JS?
    For example I have a property 'loginBarCollapsedHeight' in Login Bar and I need to use it in my JS, how should I do this?
  2. Chris D

    Chris D XenForo Developer Staff Member

    It's probably best to use the data attribute somehow.

    <div class="SomeElement" data-loginbarheight="{xen:property loginBarCollapsedHeight}"></div>
    Then you can do something like this:

    rainmotorsports, Steve F and CyberAP like this.
  3. CyberAP

    CyberAP Well-Known Member

    Thanks! I know this should be working but my variable (loginBarCollapsedHeight) somehow is always undefined. Data attribute is present in loginBar.

    var $loginBar = $('#loginBar');
    var loginBarHeight = $loginBar.outerHeight();
    var loginBarCollapsedHeight = $loginBar.data('loginBarCollapsedHeight');
    loginBarCollapsedHeight.replace(/[^0-9]/g, '');
    var loginBarMargin = loginBarHeight - loginBarCollapsedHeight;
  4. Chris D

    Chris D XenForo Developer Staff Member

    data attributes must always be lower case.

    That was one of the major breaking changes from old versions of jQuery to new.

    It may be that. It must be lowercase in the HTML, e.g. data-loginbarcollapsedheight and also lower case in the JS, e.g. $loginBar.data('loginbarcollapsedheight');
    CyberAP likes this.
  5. CyberAP

    CyberAP Well-Known Member

    Figured it out the same time you posted :) Huge thanks for your help!
    Chris D likes this.

Share This Page