Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Claushingebjerg 939 posts 2574 karma points
    Jan 29, 2013 @ 10:49
    Claushingebjerg
    0

    Getting the width of a browser window

    I need to know the width of the browser window in an xslt macro, for some image scaling.

    So i thought i could just use some javascript, but i guess the xslt is compiled before the javascript is rendered so that won't work... My idea was like this:

    <xsl:variable name="mywidth">
      <script type="text/javascript">document.write($(window).width());</script>
    </xsl:variable>    
    <xsl:value-of select="$mywidth"/>

    Is there a way to get the width of the browser window, so it can be used as an xsl:variable?
    Ive been toying with different ideas for a couple of days now, but i guess its time to ask the experts ;).

    Copy Link
  • Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib
    Jan 29, 2013 @ 12:55
    Chriztian Steinmeier
    0

    Hi Claus,

    You're right - the XSLT has no way of knowing which size of window the rendered content will end up in. You could of course run a snippet of JavaScript on the first request and then set a cookie, which you could then read in your XSLT - but again, it's not really the right place to deal with it...

    What's the scenario like? Wouldn't you be able to use media queries or something similar to achieve the same result?

    /Chriztian

    Copy Link
  • Claushingebjerg 939 posts 2574 karma points
    Jan 29, 2013 @ 13:09
    Claushingebjerg
    0

    Its actually for a responsive site using eksponent cropup. The site uses a series of looping images which fill the browser window. I would like to server scale the images to match the browser window to save as much bandwidth as possible. Especially on mobile.

    I tried the cookie approach, but it requires a reload of the page to read the cookie. You can't set and read the cookie on the same page load...

    Any ideas?
    i looked a bit at msxsl:script, but cant realy see if it would make any diff?!?

    Copy Link
  • Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib
    Jan 29, 2013 @ 13:21
    Chriztian Steinmeier
    0

    Yeah, I didn't explain the cookie thing good enough - but that's what I meant with the "first request" - but if you need the value on the front page, you won't be able to get it before too late :-)

    Anyways, - did you look into the responsive extensions that's available with CropUp? They might be exactly what you need... (I haven't tried them myself, so can't really say)

    So here's how I'd probably do it: Use media queries for the "breakpoints" and have CropUp serve images in those sizes, and then use width: 100%; height: auto; in the CSS to have those images scale to the window. This will only "punish" thoose that open a small window, load the site and then resize their window to the largest size - they will of course get upscaled images, but as soon as they click a link (and how long does that take for the average user? :-) they will get properly sized images.

    Actually - I think that's some of what the responsive CropUp extensions do - but they probably also detect the resize event for reloading the new sizes... (I may be way off, though) 

    /Chriztian

    Copy Link
  • Claushingebjerg 939 posts 2574 karma points
    Jan 29, 2013 @ 13:49
    Claushingebjerg
    0

    Yeah i follow you. But there are a couple of strange things going on with the cropup responsive. I know it's Nils i have to turn to concerning this, but ill just metion it for good measure.

    <xsl:value-of select="Eksponent.CropUp:ResponsiveByMediaId(1058, 'p200', null, 'width:100%; height:300px', null)" disable-output-escaping="yes" /> 
    works fine
    <xsl:value-of select="Eksponent.CropUp:ResponsiveByMediaId(1058, 'p200', null, 'width:100%; height:auto', null)" disable-output-escaping="yes" /> 
    or
    <xsl:value-of select="Eksponent.CropUp:ResponsiveByMediaId(1058, 'p200', null, 'width:100%; height:100%', null)" disable-output-escaping="yes" /> 
    doesnt work. Gives a blank page.
    Secondly, every media item will render this
    <script type="text/javascript" src="/Scripts/CropUp.js"></script>
    <div style="width: 100%; height: 400px; position: relative; overflow: hidden;" class="crop-up loaded" data-gravity="0.7875,0.452" data-box="0.405,0.148,0.9175,0.924" data-zoom="true" data-upscale-url="/CropUp/{w}x{h}R/media/2/2.jpg" data-upscale-step="200">
    <img style="position: absolute; width: 1896px; height: 1185px; left: 0px; top: -336px;" src="/CropUp/10000x10000R/media/2/2.jpg">
    </div> 

    Which is a bit heavy. And it seems to load both a large image and a small one every time... This im not totally sure about tthough...

    All in all, if it could do the height:100% and width:100%, all would be pretty good :)

     

    Copy Link
  • Claushingebjerg 939 posts 2574 karma points
    Jan 30, 2013 @ 07:55
    Claushingebjerg
    101

    Ok, i went down the cookie route, and got it fixed. A bit hackish, but it works.

    First i check if the cookie value is equal to the window width. If not i set the correct cookie value and force reload the page.

    Then i can use the cookie value to scale the image to fit the window.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft