How can i set position absolute for ie7 only
this is not working in ie7.
$(document).find('.fixedheader').css({'position':'absolute','top':'356px'});
To add css rules targeting IE7 you can use an asterisk in front of the css rule e.g.
*position: absolute;
But this will not work with jQuery $('selector').css(... or $('selector').attr('style', ... methods.
The only way it worked for me was to add a style tag to the head of the page like so:
$('<style type="text/css">.fixedheader {*position:absolute;*top:356px}</style>').appendTo($('head'));
Here is an example:
Copy the following snippet to a new HTML document and test it in IE7 and any other browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header {
position: relative;
}
.fixedheader {
width: 100%;
min-height: 50px;
background-color: black;
}
</style>
</head>
<body>
<header>
<div class="fixedheader"></div>
</header>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('<style type="text/css">.fixedheader {*position:absolute;*top:356px}</style>').appendTo($('head'));
</script>
</body>
</html>
Related
I'm trying (and failing) to use "onScroll" on a div. All others commands are working properly. I already tried use only the onScroll and gave me nothing too. Why it isn't working?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<div onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()" style="height: 5000px">
</div>
</body>
<script>
function printSC() {
console.log("click");
}
function printPM() {
console.log("moved");
}
function printWR() {
console.log("roll");
}
function printSR() {
console.log("scroll");
}
</script>
</html>
I added a second code to show the "onClick" working properly on "body", but I neet it in a "div".
Code 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<body onScroll="printSR()">
<div style="height: 5000px" ></div>
<script>
function printSR() {
console.log("scroll");
}
</script>
</body>
</html>
If the <div> height is not 100%, you can use the wheel event instead of the scroll event. Currently, the onScroll event is not fired because the height style of the <div> element is not set. The height style is not applied when the <div> element's display property is inline. There are two ways to solve this problem.
Method-1
Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%:
function printSR() {
console.log("scroll");
}
let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);
#onwheelContainer {
display: block;
height: 50px;
border: 1px solid red;
}
<div id="onwheelContainer"></div>
Method-2
Applying a height style after applying the block style to the <div> element's display property:
.container {
display: block;
height: 5000px;
}
Method-3
Applying the height style to the <div> element using !important:
.container {
height: 5000px !important;
}
Additionally, the <script></script> element must be written before the closing </body> tag. In the following application, the class style .container has been applied to the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style>
/* [METHOD-1] The class style applied to the <div> element. */
.container{
display: block;
height: 5000px;
border: 1px solid blue;
}
/* [METHOD-2] Class style that can be applied to the <div> element. */
.container2{
height: 5000px !important;
}
#onwheelContainer {
display: block;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- The class style ".container" has been applied to the <div> element. -->
<div class="container" onClick="printSC()" onPointerMove="printPM()" onWheel="printWR()" onScroll="printSR()"></div>
<div id="onwheelContainer"></div>
<!-- The <script></script> element is positioned before the closing tag </body>. -->
<script>
function printSC() {
console.log("click");
}
function printPM() {
console.log("moved");
}
function printWR() {
console.log("roll");
}
function printSR() {
console.log("scroll");
}
/* Similar to the scroll event, the wheel event can be used if the height of the <div> element does not exceed 100%. */
let onwheelContainer = document.getElementById('onwheelContainer');
onwheelContainer.addEventListener('wheel', printSR);
</script>
</body>
</html>
Theres full html code.
Hope somebody help me with it. Please.
Need to change background image to another one, but only when Curves script be doned.
Trying to find answer by google, but cant.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #141414 url(Wallpaper.jpg);
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Theres some script things
<title>HTML5 Canvas Generative Art</title>
<style type="text/css">
body {background-color:#141414; overflow: hidden;}
#caption {position:absolute; width:1360px; text-align:center; top:688px; z-index:1}
canvas {}
#displayCanvas {position:absolute; top:0px; left:0px; z-index:0;}
div {}
#container {width:1360px; height:688px; margin:auto;}
</style>
</head>
<body>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">
Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
full html code in Drive Google:
link
Place your code at the bottom of your document. And any external js files you're loading, put them above the below script tag. That should work for you.
<script type="text/javascript">
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('new_image.gif')";
};
</script>
Update:
Your mark up is not properly created. Keeping the tags consistent and putting the relevant tags within head and body is a good practice. Refer to the code below.
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('https://i.imgur.com/cCqp22b.gif')";
};
body {
background: #141414 url(Wallpaper.jpg);
}
body {
background - color: #141414;
overflow: hidden;
}
# caption {
position: absolute;
width: 1360 px;
text - align: center;
top: 688 px;
z - index: 1
}
canvas {}
# displayCanvas {
position: absolute;
top: 0 px;
left: 0 px;
z - index: 0;
}
div {}
# container {
width: 1360 px;
height: 688 px;
margin: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
</head>
<body>
<p>...</p>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
You can set the style.background property using JavaScript after the script is loaded.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<!--Load some script here-->
<script>
setTimeout(()=>document.body.style.background = "url('https://i.pinimg.com/originals/f4/52/a2/f452a2f4b634b3011e065da8eaf0a5c3.gif')",1500);//simulate waiting
</script>
</body>
</html>
I am trying to make a fade in- fade out transition between two pages with full screen images. Currently I'm trying to achieve this with the swup plugin.
I can achieve a new full screen image on each page by setting a class on every html, like:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
</body>
</html>
And css:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
Html for the transition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
And the css:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
There is also one line js for the transition:
const swup = new Swup();
My problem is I can't seem to get these two to work together. I either get the full image pages OR the transition, not the full image pages WITH transition. The problem seems to lie in the fact that the image has to be within the "swup". But every time I try to put my image there, I lose control over its size and proportions, even if I give it a class of its own.
Now I have tried about a zillion things and I have tried to google this for a few days but no luck. I have only been working with html, css and js with this. Should I be looking elsewhere?
Any help here is highly appreciated.
Thanks
I finally managed to solve this. It may not be the best solution, so if you have a better one, please let us know.
I added this html-part below the navigationbar:
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
And in the css:
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
I have an issue with CSS property cursor on Windows operation system.
It seems that "col-resize" tries to invert the color of cursor depending on background.
The problem appears with gray color because one makes the cursor invisible.
.test {
cursor: col-resize;
background: gray;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class='test'>
</div>
</body>
</html>
There is an example here where he inserts an iframe where the height of the iframe is changed to be the height of the inserted content. He explains the trick here.
However when I try and do it with my Bootstrap example, then something is preventing the JavaScript from modifying the iframe. height is never added to the iframe.
Question
Can someone see why height isn't added to the iframe, as it is done in the original example?
I am using this as iframe content
wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html
and my html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
iframe {
width:100%;
margin:0 0 1em;
border:0;
}
#external-frame {min-height:800px;}
body {
padding-top: 70px;
}
.container .jumbotron {
background-color: #ffffff;
padding-right: 0px;
padding-left: 0px;
height: 100%;
margin:0 auto;
}
</style>
<script>
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>
</div>
</div>
</body>
</html>
This feels too obvious, but it really looks like you just didn't define setIframeHeight or include any script that defines it.
If you want to call a function, obviously you need to have that function.
That's the function, copied from the page you linked to:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
Paste it in your script tag and you should be good to go.