0

I want to output the width of the window in a tag. So for example:

{exp:resolution:width} {width} {/exp:resolution:width}

Where {width} would display the width from my jQuery.

$(window).resize(function() { var width = $(window).width(); $(".test").text(width); });

The problem I have, is I can't figure out how to get my jQuery output into the tag.

This is what I have currently:

$this->load->library('javascript');

    $width = $this->EE->javascript->output(array(
        '$(window).resize(function() {
            var width = $(window).width();
            $(".test").text(width);
         });'
    ));

    $tagdata = $this->EE->TMPL->tagdata;

    /* Create Tags*/
    $data = array(
        "test" => $width,
    );

    $variables = array();
    $variables[] = $data;

    /* Output Tags */
    return $this->EE->TMPL->parse_variables($tagdata, $variables);

Also, is there a way to have the tag updated every time the window is resized?

Thanks

  • Why are you trying to (presumably) use a custom EE module for this instead of just using jQuery? I don't see where EE fits in here at all. – Dom Stubbs Jan 31 '13 at 12:31
  • I want to output the result of width through the plugin in a tag so I can use EE's conditionals with it. – ccdavies Jan 31 '13 at 12:39
5

Your EE tag can only output the jQuery snippet. It cannot run jQuery server-side and produce the width value for you to use.

The jQuery snippet will run in the browser when the page loads, after the EE tag has rendered.

You cannot gain access to a jQuery/client-side value in server-side code before the page has been rendered. You should just keep this in client-side jQuery and adapt based on the width value using jQuery.

MX Mobile Detect may be what you're looking for to use in your template. I've used that for width-based conditional output.

  • 1
    Better answer than mine :) – foamcow Jan 31 '13 at 12:41
  • Thanks, perfect. I actually found a plugin called 'ress' which does pretty much what I wanted, and I have just extended the plugin to include pixel density as well. Thanks for the explanation! – ccdavies Jan 31 '13 at 13:53
  • Yes, RESS is exactly what you're looking for, though as a term it gets a bit convoluted. It can be a purely server-side library of device lookups, or it can sometimes be an AJAX-driven interplay where client feature detection talks back to the server. Here's a great article on these options: brettjankord.com/2013/01/30/… – Mark J. Reeves Jan 31 '13 at 13:55
3

You won't be able to do this.

jQuery happens on the client side and your EE tags are parsed on the server side.

The EE tags are, therefore, already parsed before you are able to do anything with jQuery.

Whatever you are trying to achieve may be possible via a different route but not this way.

  • Thanks foamcow. That makes sense. If I run some jQuery script on session start it should work. I have managed to get javascript to work for this, but want to use jQuery... Is there some specific library I need to load for jQuery to work in plugins? – ccdavies Jan 31 '13 at 12:45
  • jQuery runs in the client. How can it work in a plugin? You could store the value in a cookie or session variable but I can't help thinking theres a better approach to what you're trying to do. – foamcow Jan 31 '13 at 13:39
2

Like others have said - you can't do this. The page is already rendered by the time the JavaScript runs.

You may be able to detect for mobile devices though, if that's what you're ultimately trying to do. There are a bunch of add-ons that could help you with this.

They mostly function something like this:

{if mobile}
  Show mobile content.
{if:else}
  Show regular content.
{/if}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.