screen resolution

  • I would like to whether show or not a precise template according to the visitor screen resolution
    now i can get the resolution in javascript however i dont know how to pass the result in wbb template system so i can use it (an if statement)


    Code
    {if screenResolution>XXX} {include file=YYY} {/if}
  • hi!


    you're mixing up the client and server part ;)


    javascript is executed on the client side (the browser is running a js engine) which gets the code from the server.


    templates are parsed by the wcf (to be acc.: by the php engine on the webserver). the generated html from the template will be delivered to the client.


    in the moment the client receives the html code and could start running any js code, the servers part is allready over - so you can't pass javascript code or information retrieved from javascript directly to a template.


    you could only use http requests from within you js code to load different html code regarding to your screen resolution - but you would need an extra page in your wcf to generate and deliver this code.


    i don't know what you're planning to do, but i guess it's something where you want to distinguish between a mobile device and a "static" pc? there are tons of libraries to detect a mobile browser based on his user agent string. this is much more accurate (especially because some mobile devices have higher resolutions than older pcs...). get a hint with a google query on "mobile browser detection" + the coding language you're looking for.


    regards,
    andreas

  • im trying to make a certain banner disappear for lower resolution, even on computers. its not only for mobile devices.
    any ideas to achieve this goal?

  • i wrote a javascript that rewrite the screen resolution in th eurl
    now i would like to know what is the equivalent to $_GET in wbb template? I want to read the variables from the url.

  • im trying to make a certain banner disappear for lower resolution, even on computers. its not only for mobile devices.
    any ideas to achieve this goal?


    Why dont you use JavaScript and CSS ?


    Check the screen Resolution with JavaScript and then hide the banner via CSS, if the Resolution is too low...


    Quote

    now i would like to know what is the equivalent to $_GET in wbb template? I want to read the variables from the url.


    Since all GPC data hat to be validated it is not possible to use them directly in any template. Hava a look at the readParamters method of AbstractPage...

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • Why dont you use JavaScript and CSS ?


    Check the screen Resolution with JavaScript and then hide the banner via CSS, if the Resolution is too low...



    how can i do it? that is exactly what im intending to do. im just new to css and i only know the basics.

  • Give your banner an unique id, e.g.


    Code
    <div id="banner"> ... banner code here </div>


    If the screen resolution is too low, you can simply use


    CSS
    document.getElementById("banner").style="display:none!important;";



    To explain what happens: The javaScript code above does the same as the CSS Deklaration


    CSS
    #banner
    {
    display:none !important;
    }


    but you are ablo to set it via javascript only if you want, in this case, if the screen resolution is too low.

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • i tried the css declaration and it just removed the banner


    Working as intended.


    The CSS declaration above removes the banner. That is intended.


    As i wrote above, that javascript code

    CSS
    document.getElementById("banner").style="display:none!important;";


    hast the same effect.


    What you want to do is not to set that declaration in the CSS stylesheet, but dynamically add it when you need it (when the screen resolution is too low).


    So, you will end up with something like this


    CSS
    if(screen_res_too_low) // Here you have to determine wether the screen resolution is too low
    document.getElementById("banner").style="display:none!important;"; // altering the css so that the banner is hidden
    else ; // in all other cases (screen resolution is fine), do nothing

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • that is exactly my problem!
    im looking for a way to detect screen resolution and apply it in the code.
    i have 2 leads for now:
    i created a javascript that writes the resolution value in the url now i need to get them in the code, i need to document myself on how to do it (i read the official documentation for readparameters() but it doesnt explain it well so i have to go through the code to find an example and undertsnad it)
    the second solution is to use css Media feature: im not sure how to work since i found it in the internet few minutes ago right before i went to school :p i will read more about it when i get back home.


    when i find a solution i will let you know, meanwhile if anybody have an idea about the Media tag you can save me some time by explaining it :)
    im greatly thankful for every help you bringed and going to bring.

  • i created a javascript that writes the resolution value in the url now i need to get them in the code


    You did not understand, what i tried to tell you.


    You do not need to alter the templates to apply for lower resolutions.


    Simply do the following: Write the templates exactly the way you want them to be on high resolution screens.


    Then you have the javascript code, which determines the screen resolution. If the resolution is too low, you can use the javascript to make some elements disappear.


    So you do not need to make any changes at the server side (php), but you simply hide some elements on client side...

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • You said, you have a Javascript that determines the screen resolution.


    So instead rewriting the URL (and creating a new http request) just use your code that determines the screen resolution and use a simple if-else statement where you can put in the code that should be executed when the screen resolution is too low (in your case, hiding the div with the id "banner" or other parts of the website).

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • What he tried to explain is that you mixed up server and client side in your first approach. I am aware of that. The solution i am proposing is running completely on the client side...

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • once the script run on the client side its parameters cant be passed to the server back unless using $_GET which requires rewriting the url. if you know a solution let me know
    give me the exact code

  • First of all, parameters can be passed back to the server... its called AJAX.


    But if you would read what i am writing you hab noticed, that you do NOT need to give parameters back to the server.



    I will try to explain it one last time.


    You are creating the normal HTML document on the server side... e.g. something like this:


    HTML
    <html><title>Demo</title><script> <!-- Here you will place the javascript, that hides the parts of the website that should not be displayed in lower resolutions (initialize it on 'dom:loadad')--> <body><div id="banner">banner code here</div> ... other body contens</body></html>


    So, what will happen? The document is delivered completely, with all parts, to the client. The client will run the javascript and , if the screen resolution is below an level that you can choose freely, hide some parts of the website.



    that would be ONE possible way to achieve your goal - on the client side.


    You could also achieve your goal an server side. I wont explain it now because i worry this would be more confusing than making things clear...

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • try to read Tr3kk3r's postings in this thread again ;) he is explaining a good way to do what you want to.


    you can not modify the Template Code (written in a smarty dialect) on the client side - because when it reaches the client, it is allready parsed by the template engine and is pure html/css/JS etc.


    but what you can do - like in every static html file - is modifying your DOM or CSS with JavaScript on the client side. So every client gets the same HTML code but you use JavaScript to modify the HTML element's CSS declaration.


    Tr3kk3r allready posted some javascript/html code snippets you can use for this.


    please consider to read a book about javascript to get the basic methodes of js/html ;) it would make things much easier for you!


    regards,
    andreas