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>
Related
I have the following flex elements that can take different widths depending on their content, I want to increase their width and height depending on their previous width or height. For example, I want to add 10px to the the element with the id of id_1 regardless of its current of width.
note: I can just add a width to styles and make it like 300px to increase it, but I don't want that I want to increase the width depending on the the current width,( width = previous_width+10 )
note: I didn't provide the element styles with the previous width value.
note: I added a background color just to make it easier to understand.
note: I am using reactjs and this is just a simplification, so answers with react or javascript will be ok.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='id_1'>this should have longer width</div>
<div id='id_2'>second</div>
<script>
console.log(document.getElementById('1'))
</script>
<style>
body {
display: flex;
}
div {
background-color: orange;
display: block;
}
#id_1 {
background-color: red;
}
</style>
</body>
</html>
For doing this you need to get the width of the current element and add the value you want. For the width of the element we have to see their "real" width.For more about the width of an element here's the doc.
console.log(document.getElementById('id_2'))
let seconddiv = document.getElementById('id_2')
function increment(value){
seconddiv.style.width = `${(seconddiv.offsetWidth + value*1)}px`
}
body {
display: flex;
}
div {
background-color: orange;
display: block;
}
#id_1 {
background-color: red;
}
<div id='id_1'>this should have longer width</div>
<div id='id_2'>second</div>
<button onclick="increment(10)">Increase width</button>
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>
My question is very similar to this one in that I need to pass the background color that an element has to a javascript function. The difference is that I want the color to be defined outside the element itself, in a stylesheet:
<!DOCTYPE html>
<html>
<head>
<style>
button.red_button {
background: red;
cursor: pointer;
border: none;
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<button class="red_button" onclick="javascript:changeColor(this)"></button>
<p id="change_me">Click on the red box to change this text to red!</p>
<script>
function changeColor(button) {
document.getElementById("change_me").style.color = button.style.background;
}
</script>
</body>
</html>
It works fine when the background color is defined inline, but can't seem to find it when it's declared externally.
You can use getComputedStyle method to get the all the styles applied on the button. Then apply it to the text
function changeColor(button) {
var style = window.getComputedStyle(button);
document.getElementById("change_me").style.color = style['background-color'];
}
DEMO
As #nnnnnn mentioned you can use getComputedStyle() to get the CSS of your element, simply .style only gets the inline style attribute of the element:
function changeColor(button) {
document.getElementById("change_me").style.color = getComputedStyle(button)['background-color'];
}
<!DOCTYPE html>
<html>
<head>
<style>
button.red_button {
background: red;
cursor: pointer;
border: none;
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<button class="red_button" onclick="changeColor('#ff0000');"></button>
<p id="change_me">Click on the red box to change this text to red!</p>
<script>
function changeColor(color) {
document.getElementById("change_me").style.color = color;
}
</script>
</body>
</html>
what I did is I changed a bit of the script so that you set the color on the function, and it colors the place automatically
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>
I have two elements "src" and "dest"
"src" and "dest" are in different DOM-nodes, that can not have the same parent.
I need to place "src" element in the same visible position, as "dest".
"src" element must also have the same sizes, as "dest".
I have following code for case, when "src" and "dest" having the same parent:
src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());
// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();
Unfortunately, it does not works. "src" element has displacement to bottom and left, for that i cannot find the reason.
Maybe, i do something wrong ...
How to do it right for two cases ?
"src" and "dest" having the same grand-parent
"src" and "dest" does't having the same parent. Maybe grand-grand-grand-parent is the common for both.
Update:
I have arranged a simple HMTL document, that does a simple visual swapping of one element with another:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MacBlog</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">
.dest {
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
// Setup
src.hide();
// Interaction
dest.click(function(){
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
src.show();
});
});
</script>
</head>
<body>
<div>
<!--On clicking, this element should visually be swapped by ".src" element -->
<div class="dest"><p>dest</p></div>
<div class="src"><p>src</p></div>
</div>
</body>
</html>
It does not work correctly. After "swapping", "src" element has a strange displacement to top-left direction on ~30 pixels.
I use latest version of Safari 5, if i makes sense.
Update 2:
Unfortunately, this also does not works. I updated my example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MacBlog</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">
div {
margin: 0;
padding: 0;
}
.holder {
position: relative;
top: 40pt;
left: 40pt;
border: black solid thin;
}
.dest {
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
// Setup
src.hide();
// Interaction
dest.click(function(){
src.css("position", "absolute");
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
src.show();
});
});
</script>
</head>
<body>
<div class="holder">
<!--On clicking, this element should visually be swapped by ".src" element -->
<div class="dest"><p>dest</p></div>
<div class="src"><p>src</p></div>
</div>
</body>
</html>
I tested it here:http://jsfiddle.net/YEzWj/1/
Using your second example make your CSS like this:
div {
position:relative;
margin: 0;
padding: 0;
}
.holder {
position: relative;
top: 40pt;
left: 40pt;
border: black solid thin;
}
.dest {
position:absolute;
background-color: #0cf;
width: 480px;
height: 320px;
}
.src {
background-color: #09c;
width: 1024px;
height: 768px;
}
EDIT: After playing around with it some, it did not work in all circumstances. I decided to change the javascript. Note: My example toggles the display of src and dest within the holder, making holder the same size as dest so the border shows outside the dest and src.
jQuery(function($){
// Common items, to deal with
var src = $(".src");
var dest = $(".dest");
var holder=$(".holder");
holder.width(dest.width());
holder.height(dest.height());
// Setup
src.hide();
// Interaction
dest.click(function(){
src.show();
src.css("position", "absolute");
src.width(dest.width());
src.height(dest.height());
src.offset(dest.offset());
dest.hide();
});
src.click(function(){
dest.show();
src.hide();
});
});
EDIT2: Remove the src.click() event if you wish it to NOT go back to the dest on src click.
You need to make the dest element absolute, otherwise the top and left offsets will not apply.
src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());
Also, elements like p and body will have default stylesheets depending on browser. So try to supply a reset style to make things consistent:
p {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
You can call the offset function to set the offset and handle different parents correctly, like this:
dest.offset(src.offset());