Adaptation for mobile

Resolved savohij
(@savohij)

10 years, 1 month ago

Hi there!
First of all, I really like this slider a lot! It’s free and has all the cool stuff available to use.
But I have a problem with it while trying to adopt my web-site(and the slider) for a mobile-friendly version.
You see, the mobile version MUST be light-wight(less mb – faster load), so I disable big images(background-images) with display:none with my @media queries, so it will be as light as possible. However, even tho the images of the CrellySlider are background-images(means I can display:none on them) I cant disable them. They are loaded each time. The thing is, the slider change the DOM, so when @media queries try to “display:none” on them, they changed back with JS.

Is there anyway I can make this more mobile-friendly, so the images of the slider(and the layers of each one of them) will not load for mobile versions?

I’m not a big expert(he-he), I don’t know JS, but perhaps this rule(of code) would help to solve the problem:
if (document.documentElement.clientWidth < 600) {
// disable all the scripts related to the slider on the loading, so it won’t load unnecessary images of the slider, will disable the layers of the slider and DOM changing
}
elseif (document.documentElement.clientWidth < 900) {
// disable all the scripts(as before), but load another slider(created special for this) without layers and with different images(of course)
}
if (document.documentElement.clientWidth > 900) {
// use normal slider
}

Thanks in advance!

https://wordpress.org/plugins/crelly-slider/

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author Fabio Rinaldi
(@fabiorino)

10 years, 1 month ago

Before trying a JavaScript solution, did you try to use the !important attribute in css? Like display: none !important;

Thread Starter savohij
(@savohij)

10 years, 1 month ago

Yes, fabiorino. Tried that too.
The thing is, the slider is using the inner styles(style=”…”) inside of it, and also change it every time in the DOM it self. So nothing helps(as I tried) from the external css file(styles.css).

Plugin Author Fabio Rinaldi
(@fabiorino)

10 years, 1 month ago

The !important tag should be “stronger” that the inline tag. Please, if you can, send me a screenshot of the piace of code that you tried (fabiorino@outlook.com). Also, if your website is online, send me the link.
Thread Starter savohij
(@savohij)

10 years, 1 month ago
I did lots of things in order to try, but as for about the display: none !important; I did and try this:

the screen shot!

I put the slider into the container(id – #container) – it’s not shown on the screenshot;
The id of the slider is – #crellyslider-2;
Now, in my css I did this:
```
@media (max-width:600px){
   #container, #crellyslider-2, #crellyslider-2 ul li {
      display: none !important;
   }
}
```
And that didn’t work, unfortunately.

P.S. the site isn’t on the air yet
Plugin Author Fabio Rinaldi
(@fabiorino)

10 years, 1 month ago
I tried this successfully on my test website:
```
<div class="crelly-container">[crellyslider alias="test"]</div>

<style>
.crelly-container {
    display: block;
}
@media (max-width:600px){
   .crelly-container {
      display: none !important;
   }
}
</style>
```
Here is the screen: http://i.imgur.com/6GxRQHN.jpg
Thread Starter savohij
(@savohij)

10 years, 1 month ago

I see… That’s not what I meant 🙂
I know the container can get the display: none without any problem. The problem however is not this.
The problem is, if the container gets the display: none, the images of the slider still downloaded, and whole of this display:none thing is made to stop them from download, because this images impact the weight of the mobile-site version.

So… What is needed to be done is, to disable somehow the images of the slider, layers it contains and DOM from automatic changes(no need for this if there’s no slider, but I’m not sure how seriously this if we talking about the speed of the page).
Plugin Author Fabio Rinaldi
(@fabiorino)

10 years, 1 month ago
Ok ok, I get it. Sincerely I’m not sure if Javascript is the right solution because I don’t know if that will prevent the content to download or will just hide it (like display: none; does)

Anyway, you could try this one:
```
[crellyslider alias="desktop_version"]
[crellyslider alias="mobile_version"]

<script>
if (document.documentElement.clientWidth < 600) {
    jQuery('.crellyslider-slider-desktop_version').remove();
    jQuery('.crellyslider-slider-mobile_version').remove();
}
else if (document.documentElement.clientWidth < 900) {
    jQuery('.crellyslider-slider-desktop_version').remove();
}
else {
    jQuery('.crellyslider-slider-mobile_version').remove();
}
</script>
```
I’ve never tried to do a speed test for this solution, you have to tell me if it works.
If it doesn’t, the only other remaining solution is working on the server side with php (it’s more difficult but that should work)
Thread Starter savohij
(@savohij)

10 years, 1 month ago

I actually tried this my self, but with a little bit more of code(with connection to css display:none of the element and eventListener on the resize). But there’s two problems with this:
1) (the main problem) – It still load the images… I think this is happens because JS loaded a little bit after, but I’m not sure. Anyway, this isn’t working.
2) I don’t know how to resize back with the slider on(something like: jQuery('.crellyslider-slider-desktop_version').undoTheRemove();). Silly, I know 🙂 But this would finish the job, I think.

Thread Starter savohij
(@savohij)

10 years, 1 month ago

I was wrong! This method is working! If the JS loading normally it would work… well… normally too 🙂
So, the performance issue is solved! This was THE problem.
Thanks a-lot, fabiorino, for your invaluable help and support! 🙂

Plugin Author Fabio Rinaldi
(@fabiorino)

10 years, 1 month ago

You’re welcome!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Adaptation for mobile’ is closed to new replies.