I have built a javascript/css dependency manager similar to http://code.google.com/p/jingo/.
It allows me to do something like this:
Loader.DependsOn(['/scripts/jqueryui.js', '/scripts/jquery.js'])
.Css('/css/jquery.css')
.Execute(function() { //Insert script here});
Loader will dynamically load both the script and the css before executing (if they haven't been loaded already).
Everything is working, except in IE. The style sheets are loaded by appending a link to the head of the document. However, before doing this, the loader looks to see if the requested css file is itself dependent on another module. If it is, it will figure out where in the order of CSS files it should be inserted. In all browsers except IE, if I insert it at the beginning of the list, any other stylesheets after will override it's styles (intended behavior). In IE, however, although it is inserted at the beginning, IE treats it as if it were at the end.
Is there a way to force IE to recompute styles?
UPDATED WITH TEST CASE:
Create two styles sheets, sheet1.css, sheet2.css
sheet1.css
.testdiv
{
width:200px;
height:200px;
background-color:#c7c7c7;
}
sheet2.css
.testdiv
{
width:400px;
height:400px;
}
markup:
<html>
<head>
<link href="style1.css" rel="stylesheet" "type="text/css" />
</head>
<body>
<div class="testdiv">
</div>
</body>
</html>
<script type="text/javascript" language="javascript>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.head || document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
setTimeout(function () {
//suggestion from Simon West
document.body.className = document.body.className;
}, 3000);
}, 3000);
</script>
What should happen:
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
What happens on IE8
Gray box 200px by 200px. After 3 seconds, it grows to 400px by 400px.
What happens on Safari (windows) -
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
This occurs with or without #Simon West's suggestion.
<html>
<head>
<link href='sheet1.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='testdiv'></div>
<script type='text/javascript'>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
var docElem = document.documentElement,
docElemNext = docElem.nextSibling;
document.removeChild(docElem); // this will clear document.styleSheets
document.insertBefore(docElem, docElemNext);
}, 500);
</script>
</body>
</html>
The following JS snippet should force a reflow/repaint of the entire page.
document.body.className = document.body.className;
Related
I'm trying to load an iFrame into a Wordpress website.
The iFrame should load the table displayed in this link, with all the colors and other styles applied.
However, when I insert the iFrame on my website, it will load the content of the table but not the CSS.
This is how I tried to 'force' load the right CSS, as I suspect the Wordpress theme is overriding the Table CSS:
<script language="javascript" type="text/javascript">
function iFrameHeight() {
var h = 0;
if (!document.all) {
h = document.getElementById('blockrandom').contentDocument.height;
document.getElementById('blockrandom').style.height = h + 60 + 'px';
} else if (document.all) {
h = document.frames('blockrandom').document.body.scrollHeight;
document.all.blockrandom.style.height = h + 20 + 'px';
var cssLink1 = document.createElement("link");
cssLink1.href = "https://www.gscris.it/lmo/lmo-style.css";
cssLink1.rel = "stylesheet";
cssLink1.type = "text/css";
frames['iframe'].document.head.appendChild(cssLink1);
var cssLink2 = document.createElement("link");
cssLink2.href = "https://www.gscris.it/lmo/lmo-style-nc.css";
cssLink2.rel = "stylesheet";
cssLink2.type = "text/css";
frames['iframe'].document.head.appendChild(cssLink2);
}
}
</script>
<div>Campioni d'amicizia</div>
<iframe onload="iFrameHeight()" id="blockrandom" name="iframe" src="https://www.gscris.it/lmo/lmo.php?todo=&file=Piccamici201819.l98" width="100%" height="600" scrolling="no" align="top" frameborder="0">
Questa scelta non funziona correttamente in quanto il browser utilizzato non supporta gli Inline Frames </iframe>
What am I doing wrong?
This is my website page where the iframe is inserted (scroll to the bottom).
Use HTTPS to serve your css in the iframe. If you open the Chrome Devtools, the following error message can be seen multiple times: Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.
First of all Iframes will not take the external css. as they have there own html head and body tags, Its a separate html document. you cannot override any styles in Iframe. instead you can try attach your stylesheet in the required document and use it in the iframe.
Following this previous question JQuery distinct between smartphones, tablet or computers with different sizes but the same $(window).width() I now that I know the real sizes from the devices I use thank to window.screen.width , I would like to use one CSS file or another depending of this size, like for example:
<script>
var w = window.screen.width;
if(w < 800){
//I should include somehow this <link href="{{ asset('assets/css/firstCSS.css') }}" type="text/css" rel="stylesheet">
} else {
//Adding the second CSS file... <link href="{{ asset('assets/css/secondCSS.css') }}" type="text/css" rel="stylesheet">
}
</script>
I know this code looks horrible but I'm not able to get a solution.
(Edited)It is possible to use a css file depending on a value from JavaScript? Don't answer me yes... and show me how please.
Yes of course you can do it:
Create a new link element.
Give it a href based on your variable.
Append this link to the head of the document.
This is how should be your code.
var w = window.screen.width;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
if (w < 800) {
link.href = "{{ asset('assets/css/firstCSS.css') }}";
} else {
link.href = "{{ asset('assets/css/secondCSS.css') }}";
}
document.head.appendChild(link);
I'm trying to change the size of the browser according to the size of the display using JQuery however it does not seem to work currently.
HTML Code:
<head>
<link rel="stylesheet" type="text/css" href="SmallDesktopScreen.css">
<link id="newSize" rel="stylesheet" type="text/css" href="LargeScreen.css">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function adjustStyleSheet(width){
width= parseInt(width);
if ((width>=1352)&&(width<=1880)){
$("#newSize").attr("href", "css/SmallDesktopScreen.css");
}
else if(width>1881){
$("#newSize").attr("href", "css/LargeScreen.css");
}
}
<!-- 1352 1881 -->
$("document").ready(function(){
$(function() {
adjustStyleSheet($(this).width());
$(window).resize(function() {
adjustStyleSheet($(this).width());
});
});
});
it is possible to switch stylesheets using jquery.
for example
var stylesheets = ['style1.css','style2.css'];
var primary_sheet = 0;
if(primary_sheet === 0) {
$('link').attr('href',stylesheets[0]);
else {
$('link').attr('href',stylesheets[1]);
}
Changing some of your scripts will do the trick.
First of all you cannot, get the link element and set href(which will eventually not work in all the browsers). But you can create one easily.
Check the script code below. This will work.
function adjustStyleSheet(width){
width= parseInt(width);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = "";
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'all';
var linkHref = "css/SmallDesktopScreen.css";
if ((width>=1352)&&(width<=1880)){
linkHref = 'css/SmallDesktopScreen.css';
}
else if(width>=1881){
linkHref = 'css/LargeScreen.css';
}
link.href = linkHref;
head.appendChild(link);
}
<!-- 1352 1881 -->
$("document").ready(function(){
$(function() {
adjustStyleSheet($(window).outerWidth());//OuterWidth gets the width of your original screen size not the window size alone.
$(window).resize(function() {
adjustStyleSheet($(window).outerWidth());
});
});
});
It is good doing stuffs in Javascript or jQuery. But I will support #media queries in CSS for responsive kind of works, which is very easy actually.
I am having a problem with the background-image inside a div.
I am trying to program a html-webgame, using mainly canvas. So as a result, my index looks like this.
<head>
<title>Cardgame</title>
<link rel="stylesheet" type="text/css" href="resoursces/css/index.css">
</head>
<body>
<div class='game_object' id='game_object'>
<canvas class='main_canvas' id='main_canvas'>Error</canvas>
</div>
<script type="text/javascript" src='main.js'></script>
</body>
The problem comes along like this:
window.onload = (function() {
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
drawing();
} resizeCanvas();
})();
in the function "drawing()" i am doing 2 things.
The first one is to remove all divs, i have created so far,
and the second is the i am drawing all div's new with new x-coordinate, y-coordinat, hight and width. So it looks like this
function drawing() {
delete_div();
create_div();
}
function delete_div() {
battlefield_div.style.removeAttribute("backgroundImage", false);
battlefield_div.parentNode.removeChild(battlefield_div);
}
funtciont create_div() {
var board_div= document.createElement("div");
board_div.setAttribute("id", "board");
board_div.style.position = 'absolute';
board_div.style.top = board.y1+"px";
board_div.style.left = board.x2+"px";
board_div.style.height = board.y2 - board.y1+"px";
board_div.style.width = board.x1 - board.x2+"px";
board_div.style.zIndex = '2';
board_div.style.backgroundImage="url(resoursces/images/board.png)";
board_div.style.backgroundSize = "100% 100%";
game_object.appendChild(board_div);
}
This game is a cardgame and i wanted to make it to resize when ever you change the height and the width of the browser without loosing its function. The divs i am creating are part of the functionality.
Everything works fine with it, except one thing: Whenever you resice the browser, the divs are getting remove and new ones are calculated but the background-images is still there. So when you resized your browser like 4 times, you are just seeing the background-images.
What am i doing wrong?
Can anyone help me?
im trying to make the iframe gradually grow onclick from the link(link being the center point). its going to be the size of the link then grow to the size of the iframe. there will be other links so they will have the same effect. any ideas? sorry im a newbie
<html>
<head>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("src","");
ifrm.style.display = "block";
ifrm.style.width = "640px";
ifrm.style.height = "400px";
ifrm.style.marginLeft = "325px";
ifrm.style.marginTop = "125px";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
}
function closeFrame(){
ifrm.style.display = "none";
}
</script>
</head>
<body>
<img src="" onclick=makeFrame() height="100px" width="100px" />
</body>
</html>
you could create another function that animates the desired behavior, i.e. something that adds small increments to the height and width of your iframe.
<script>
function grow () {
ifrm = document.getElementById('amazingIFrame');
if (ifrm.style.width < 500) {
ifrm.style.width += 10;
} else {
clearInterval(interval); // stop growing when it's big enough
}
}
function startGrow() {
makeFrame(src); // create the frame first
interval = setInterval("grow()", 10); // grow every 10 ms
}
</script>
Then you could have
<img onClick="startGrow();">
somewhere in your document.
You might also have to adjust the position as it grows so that it stays centered, but the idea is there.
It sounds like you're trying to have a box open up when a user hovers over a link. There are better ways of doing this than an iframe, such as a div with dynamically loaded content.