this is so simple and I searched but couldn't find the exact answer.
All I want to do is have a div that will change color when you click a link. I want to have about 3 or 4 color choices. How do I do it?
Thanks!
Heres a quick solutions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeColor(color){
var div = document.getElementById('box');
div.style.backgroundColor = color;
}
</script>
</head>
<body onload="changeColor('green')">
<div id="box" style="width:200px; height:200px;"></div>
Yellow|
Green|
Blue|
White
</body>
</html>
Demo: http://jsfiddle.net/jnAem/
JS:
var els = document.getElementsByClassName('change-color'),
target = document.getElementById('target'),
changeColor = function(){
target.style.backgroundColor = this.getAttribute('data-color');
};
for(var i=els.length-1; i>=0; --i){
els[i].onclick = changeColor;
}
HTML:
<div id="target"></div>
<button class="change-color" data-color="red">Red</button>
<button class="change-color" data-color="#000">Black</button>
<button class="change-color" data-color="rgb(0,0,255)">Blue</button>
Note that if you want all color changers to be children of same element, you can use event delegation and reduce the previous code to
JS:
document.getElementById('color-changers').onclick = function(e) {
var color = (e ? e.target : window.event.srcElement).getAttribute('data-color');
if(color){
target.style.backgroundColor = color;
}
}
HTML:
<div id="target"></div>
<div id="color-changers">
<button data-color="red">Red</button>
<button data-color="#000">Black</button>
<button data-color="rgb(0,0,255)">Blue</button>
</div>
Demo: http://jsfiddle.net/jnAem/1/
Related
There is a "scanning" graphic here that hides when you find the marker.
https://webxr.io/webar-playground/app/
How is that done? I have tried a bunch of different things with no luck. Maybe I am just not putting it in the correct place? Or need to call the action? Here is the last thing I tried:
'''
var m = document.querySelector("a-marker")
AFRAME.registerComponent('hide-on-scan', {
init: function () {
m.addEventListener("markerFound", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: none;");
})
m.addEventListener("markerLost", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: block;");
})
});
'''
I figured it out for those looking to do the same thing here's my HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type="text/css">
#HeadText {
position: absolute;
top:0px;
left:50%;
z-index: 10000;
}
</style>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js">
</script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs='sourceType: webcam;'>
<div id="HeadText" style="visibility:visible;">
<h1>test</h1>
</div>
<a-marker preset='hiro'>
<a-box id="MyBox" position='0 0.5 0' material='opacity: 0.5;' color="red" ></a-box>
</a-marker>
<a-camera-static />
</a-scene>
</body>
<script src="assets/script.js"></script>
</html>
</head>
<body>
And here is the script.js:
var m = document.querySelector("a-marker")
m.addEventListener("markerFound", (e)=>{
console.log("found")
document.getElementById("HeadText").style.visibility = "hidden";
})
m.addEventListener("markerLost", (e)=>{
console.log("lost");
document.getElementById("HeadText").style.visibility = "visible";
})
cant believe im asking this question but,
why this work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
</style>
</head>
<body onload="return ran_col()">
<div id="posts">
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
</body>
</html>
and this doesn't?
its pretty much the same code,
if anyone can edit the code that would be brilliant?
<!DOCTYPE html>
<html>
<head>
<title>Splash!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="refresh" content="6.5;url=home.html" />
<link rel="stylesheet" href="../css/stylessplash.css" type="text/css">
</head>
<body id="posts">
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="wrapper">
<p>
<span>u</span>
<span>u</span>
<span>H</span>
<span>!</span>
</p>
</div>
</body>
</html>
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
On your second code block you are simply creating a function
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
It doesn't run because you are not invoking the function in form load or whenever you want. Which is shown in your 1st code block
<body onload="return ran_col()">
You can use that code to set the background to a specific element (not to the whole body like you did). To set the background of the whole page, instead of
document.getElementById('posts').style.background = color;
you will need
document.body.style.backgroundColor = color;
Hope this helped!
<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}
I want to block scroll in my pages
this is the html pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script src="frise.js"></script>
<link rel="STYLESHEET" type="text/css" href="style.css">
<script>
var a;
function start()
{
a = new frise("frisekk", 'Mon Nov 15 2014 19:25:00', 'lab', 600);
}
</script>
</head>
<body onload="start();">
<div id="blocantiscroll">
<div id="frisekk"> <br/> </div>
</div>
</body>
</html>
So I call my CSS in <div id="blocantiscroll">
but nothing happen, I have look on the web and this should work but it doesn't, the sroll is always active.
Is there a problem in my html page or in my CSS ?
my CSS :
blocantiscroll {
height: 100%;
overflow: hidden;
}
blocantiscroll is an ID so you need to use # in your selector:
#blocantiscroll {
height: 100%;
overflow: hidden;
}
Your current selector is looking for an element of type blocantiscroll which doesn't exist.
Further reading
Also, if you want #blocantiscroll to be 100% height of the window, you will need to set the below:
html, body {
height: 100%;
}
blocantiscroll is an ID..
so you need to specify # before "blocantiscroll"
give it as:
#blocantiscroll
Add this to your css
body {overflow: hidden;}
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="Index.css">
<title>Info</title>
<script type="text/javascript">
function fn(name){
document.getElementById("link").src = name;
}
</script>
</head>
<body>
<div id="contain">
<div id="head">
<h1 align="center">Represent</h1>
</div>
<div id="list">
<a href="NewFile1.html" onclick='fn("NewFile1.html")'>file1</a><br>
<a href="NewFile2.html" onclick='fn("NewFile2.html")'>file2</a><br>
nasdd
</div>
<div id="fr">
<iframe id="link" align="left" src="about:blank" style="width: 78%;>
</iframe>
</div>
</div>
</body>
</html>
When I click on the link say 'file1', the correct html is displayed but not in the iframe and is displayed as a new page. How to display the html only in the frame?
I think I got it working!!
I just did :
<a href="NewFile1.html" onclick='return fn("NewFile1.html")'>file1</a><br>
<a href="NewFile2.html" onclick='return fn("NewFile2.html")'>file2</a><br>
function fn(name){
document.getElementById("link").src = name;
return false;
}