screen resolution
-
Majdi 2.0 -
8. Dezember 2009 um 00:33 -
Erledigt
-
-
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...
Zitatnow 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...
-
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.
If the screen resolution is too low, you can simply use
To explain what happens: The javaScript code above does the same as the CSS Deklaration
but you are ablo to set it via javascript only if you want, in this case, if the screen resolution is too low.
-
i tried the css declaration and it just removed the banner
-
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
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
-
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...
-
can you please write a tiny tutorial about it. i still dont get it
-
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).
-
0xdefec explained why it can't work if it did i would have done it
-
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...
-
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...
-
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 -
its working
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!