threejs


WebGL and Three JS dedicated forum. Here we can discuss about Three JS 3D library.
 
HomeCalendarGalleryFAQSearchRegisterLog in

Share | 
 

 Shader responsive

View previous topic View next topic Go down 
AuthorMessage
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Shader responsive   Mon Feb 20, 2017 12:11 pm

Hello is there any way to disable shader scripts when tha device is on mobiles?and in what format i save shader scripts if i make them external?Here is the site,in desktop works well but on mobile, it slows the page, it is not seen from inspect but in mobiles.Some of the elements is running and mnake it slow

http://www.pcai.gr/1rstPhase_PP/PP_Main.html
Back to top Go down
Khappa MJ

avatar

Posts : 8
Points : 14
Reputation : 0
Join date : 2017-02-10

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 12:23 pm

Hi man, you can just activate or deactivate a potion of code based on CSS:

Code:

@media screen and (min-width: 480px) {
    body {
        background-color: @ff0000;
    }
}

CSS media screen are the best way to make a website or web app responsive. You can also run CSS via Javascript.
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 1:53 pm

i used:

Code:
@media screen and (min-width: 480px) {
    #myScript {
        display:none;
    }
}

but it didnt work.in mobile version of the site i have hidden the canvas element,and worked only with css and html,because some mobiles where heating,when loading the page.
Back to top Go down
WebForce

avatar

Posts : 22
Points : 30
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 2:11 pm

you cant use "#myScript" in CSS. CSS cant recognize it. You should use Javascript and the property "innerHTML" like:

javscript:
divFile.innerHTML = divFile.innerHTML + '<div class="container"></div>'

css:
@media screen and (min-width: 480px) {
.container {
display:none;
}
}

This should works Smile
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 2:30 pm

I have a thought that maybe its the custom font,not the scripts,and what do you mean by adding container class?Where?to the script?
Back to top Go down
WebForce

avatar

Posts : 22
Points : 30
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 2:55 pm

oh yes, sorry! You can call 'container' class as you wish just like 'yourelement'. Its a simpe div which contains the code you want to hide so do that:

javascript:
divFile.innerHTML = divFile.innerHTML + '<div class="shader_script_container">here you put your shader javascript</div>'

css:
@media screen and (min-width: 480px) {
.shader_script_container {
display:none;
}
}

Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 3:30 pm

i can put also manually.Without js?or not
Back to top Go down
Khappa MJ

avatar

Posts : 8
Points : 14
Reputation : 0
Join date : 2017-02-10

PostSubject: Re: Shader responsive   Tue Feb 21, 2017 4:25 pm

Hi Phaidonas, sorry for my late answer.
The example of WebForce is cool and answering to your question i say yes, you can write the HTML code manually without javascript if you prefer.
Back to top Go down
Sponsored content




PostSubject: Re: Shader responsive   

Back to top Go down
 
Shader responsive
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Pixel Shader
» Fallout New Vegas responsive kill reactions?
» Crashing to desktop with error/006: Unable to create shader?

Permissions in this forum:You cannot reply to topics in this forum
threejs :: WEBGL and Three JS Library :: Discussions about WebGL coding via Three.js-
Jump to: