Elxis CMS Forum
Extensions => Bots and plugins => Topic started by: nikos on June 08, 2015, 17:00:24
-
I am creating a plugin for Elxis 4.x using jQuery and i face a matter regarding the mobile friendly version. I want to check if a mobile device visits a site, so to give a different display option.
The method if (ELXIS_MOBILE == 1) {do something} serves only for the first versions of Elxis 4.x and for those sites they do not use responsive templates. My issue by css can not be faced because the plugin does not use css. So i need something (function?) into main php file to detect if a mobile device visits the site, so to give the other display option, which is regulated by a javascript parameter.
Any idea?
-
You are thinking of it wrong. You don't have to detect the mobile device.
Before I reply in your question I must clarify that "ELXIS_MOBILE" is an Elxis constant available in all Elxis 4.x versions, not just the first versions as you said. This constant works ONLY if you have selected the mobile devices to get auto-detected. In this case elxis sets the value of the constant to 1 and, among others, loads a mobile specific template.
Regardless if Elxis loads a mobile specific template or not, regardless the device that visits the site you can use CSS media queries or CSS3 rules to achieve the result you want. You don't need to detect anything. Also there is nothing that doesn't use css. If you dont have a css file, you can create one, or if you dont want that (why??) you can use inline css.
Here is an example like we have talked on the phone.
<div id="container" style="width:500px;">
<img src="...." alt="my image" style="width:600px; height:auto; max-width:100%;" />
</div>
The image above will be reduced to 500px width because of the "max-width" rule which tell the image not to become wider that its container which has width 500px.
<div id="container" style="width:500px;">
<img src="...." alt="my image" style="width:400px; height:auto; max-width:100%;" />
</div>
The image above will be displayed at 400px width because it is smaller that the container's width (500px) and the max-width rules takes no action.
If that container is the whole screen the same effect will apply to a larger scale for a mobile device, tablet, pc, etc. So you don't have to detect anything. Just write smart and responsive CSS.
-
Thank you for your reply and clarification about constant ELXIS_MOBILE.
My issue is solved by constant ELXIS_MOBILE and the problem i was facing had not to do with images but with the position of zoom window for the Elevate Zoom plugin which i finished and you can see it here (http://www.osw.gr/elevate-zoom.html).
I just wanted (and i did it) only for the mobile version to place the zoom window automatically under the image independently of position which has on pc version and this is regulated by plugin parameters.