Is there a way to change a website's actual media queries through javascript ?
I'm developping an app contained in an iframe on my client's websites who recalculate body's width to place a panel in the right side. When the browser is resized, the client's media queries are called and act without taking my iframe into consideration resulting in a messed up layout.
Do you see a way for me to change the clients media queries with javascript so that I can keep the layout clean ?
Thanks for your help !
In this question there's an example of how load css files dynamicly with javascript. You could combine this with removing the original stylesheet via jquery, like:
$("link[rel='stylesheet']").remove()
and reload the same css file but with another media (your new media query).
I found the answer here : https://stackoverflow.com/a/19593526/1324357 We can go to css with document.styleSheets.
Related
On Canva (a graphic designer site), you can create your own websites easily and get the link for it and everything. This is very helpful for me as I constantly put out new content for social issues around the world, so this makes it easier to just make it look already good without having to do CSS.
However, Canva has two options, either a laptop only responsive design or a phone-first responsive design. I was thinking, what if I created both and depending on what device you are in (either laptop or phone), it takes you to that specific site? Is this possible to do?
https://www.canva.com/design/DAEAv3UwPN0/sQ3gyqHwuiMfLJZn19o5yw/view?website#1:an-example-site-from-canva (laptop)
https://www.canva.com/design/DAEAv3ciA4Y/fxQc100hivGOOQqTO6kbGg/view?website#1:1 (phone)
This is the simple I use to link to the specific page: <li><a class="link" href="Campaigns/example-site-here">Campaigns</a></li>
Please let me know! Thank you
What you are trying to do is kind of unusual since most designers use only one html file and then add different styles depending on the screen size. If you really want to use 2 separate html files you're going to have to dynamically generate link tags when loading or resizing the page.
This is perfectly possible, but what happens when a user resizes his browser after clicking on the link? He is now looking at the webpage optimized for the wrong screen size. This will force you to redirect users to the second page when they resize their window.
For short: You're better off using media queries in css and thus only using one html file.
You could check that like this:
if(window.outerWidth < 800) {
window.location.href = "/url_for_mobile";
} else {
window.location.href = "/url_for_pc";
}
and just put that in a function for a click event.
I have a rather tricky problem. I work with a client who are restricted to only use HTML, CSS and JavaScript. We have build a form using PHP and Javascript - and currently we only find it possible to embed the form using an iFrame. We have no FTP-access, so the iFrame is loaded from a different domain.
While the form use JavaScript to load new questions and results, this makes it difficult for the height to fit the screen. If the frame fits some of the screens, it will cut off some elements on other screens.
While I am unable to upload any files to the FTP that contains the iFrame, it is not possible to use the helper-file solution, as described here.
So, my question is: is it possible to add a JavaScript action that change the css of the iFrame height, when a specific div id is loaded / action executed?
Thanks in advance! :)
EDIT: I decided to solve this differently. But in case anyone else will stumble across this post, I think the solution offered here might work (if the code is updated to fit the latest jQuery). The main problem in my case seemed to be the limited access to the client domain.
You can't control the parent window document property if the iframe is from different domain. How ever you can try busting out of the iframe.
https://css-tricks.com/snippets/javascript/break-out-of-iframe/
My purpose is to achieve something like what you can do with CSS links, when you add media attribute and you can disable those CSS for a resolution of less than n pixels and still load them and use them.
What I'm trying to do is adapt a Joomla website into a mobile one using jQuery and Bootstrap, but some plugins call their own scripts and CSS files when they are inserted, and I can't change this behaviour, nor delete the scripts because client doesn´t want desktop layout to change. So for CSS i did this:
$(document).ready(function({
$('body').find('link').attr('media', 'screen and (min-width:969px)');
}));
This actually works perfect for CSS because it still loads, but doesn´t interfere with mobile layout that calls Bootstrap. So what comes next its try to do the same for scripts, I have tried this
$(document).ready(function({
$('body').find('script').each(function(){
var screen = parseInt($(window).width());
if(screen>==969){
$(this).removeAttr('src');
}
});
}));
But it's not working, and this solution won't work either if screen size change, so am I missing something, or what could be the best approach? My intention is to target the body since here is where this inserted tags could appear. If I remove all script tags content for dekstop would not display properly. Is there something as the media attribute for script tags?
For the javascript you can use the mq function of Modernizr, this allows for you to programmatically check if the current browser window state matches a media query.
First you have to load modernizr.js
For example:
small = Modernizr.mq('only all and (max-width: 1200px)');
...
if(small){
...
}
I Need to get certain JS files when page response.
for example:
If the page min-width 800px get this
<script" src="800.js"></script>
And if page min-width 1920px get this
<script" src="1920.js"></script>
Just like css media queries but just to get js files.
Thank you.
have a look at MatchMedia https://github.com/paulirish/matchMedia.js should be exactly what you need
Possible answer to this problem is described in the article Media specific JavaScript written by Stephen Chapman.
There is snippet isMedia() writen by Nicholas Zakas. It can be found here isMedia()
Is it possible?
I want an make an adaptive layout but neither CSS or JS can force the iframe content to change from the calling page.
However the the iframe pages and the caller use the same CSS and JS file.
This is only possible, if they are from the same origin. It doesn't matter if both use the same CSS or JS file. That means, both are using the same domain name, application layer protocol, and (in most browsers) port number. (Same origin policy)
If you are sure that you fullfil the above mentioned requirements, please check the following links:
Adding a stylesheet to an iframe
How to apply CSS to iFrame?
How to load up CSS files using Javascript?