I am very new to Javascript. I have been looking into using Javascript to edit css style properties. I have searched the web and looked at a lot of different problems. Even with all of that, it is probably my inexperience as to why I can't figure out what is wrong with my code. What adds to the problem is that there are so many ways to do this. Anyway here are the specifics.
What I want it to do:
When someone clicks on the link in the code, I want the hidden DIV (which will just be near the top of my waiting to be called on) to have its visibility switched to visible so as to create a new layer on the page.
My code:
<html>
<head>
<script language="javascript">
function newwindow() {
var showme = document.getelementbyid("testing");
showme.style.visibility = "visible";
}
</script>
</head>
<body>
Show me my hidden layer
<div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;
text-align: center; vertical-align: middle;
margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
</body>
</html>
Now, I know there are a lot of ways to do this. But can someone show me what to tweak in the code I gave to make the way I am writing this work? Thanks so much for your time.
It is document.getElementById not document.getelementbyid
Working Demo
use this code
<html>
<head>
<script language="javascript">
function newwindow() {
var showme = document.getElementById("testing");
showme.style.visibility = "visible";
}
</script>
</head>
<body>
Show me my hidden layer
<div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;
text-align: center; vertical-align: middle;
margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
</body>
</html>
Related
My goal is to make the "down-arrow.svg" change to "up-arrow.svg" if the image was "down-arrow.svg" when clicked on the upper div which contains this image and versa via.
I have looked up the past questions and answers, found something but they couldn't solve my problem, these index.html and index.js files grows from one of the answers written here. What am I doing wrong? Thank you in advance.
index.html:
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
...
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="svg/down-arrow.svg" >
</div>
</div>
...
</body>
index.js:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "svg/down-arrow.svg") {
document.getElementById("up-down-arrow").src = "svg/up-arrow.svg";
}
else {
document.getElementById("up-down-arrow").src = "svg/down-arrow.svg";
}
}
stylesheet.css:
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
I think you just need to change your image source and not the ID of it.
So with your HTML structure i can guide you with changing just the ID of the img tag.
The Solution is as below:
function changeArrow() {
//First grabing the current Source in below varaiable.
var img = document.getElementById('arrowSvg').src;
/*
** Now checking if it does match with path that we have in variable.
** And updating src based on the current src of image.
*/
if (img.indexOf('svg/down-arrow.svg') != -1) {
document.getElementById('arrowSvg').src = 'svg/up-arrow.svg';
} else {
document.getElementById('arrowSvg').src = 'svg/down-arrow.svg';
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<div id="open-menu" onClick=changeArrow()>
<div id="open-menu-inner">
<p id="open-menu-text"> Menü </p>
<img id="arrowSvg" src="svg/down-arrow.svg">
</div>
</div>
Hope this helps you.
Thanks!
The issue should be in your paths, with images from Google it works fine:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png") {
document.getElementById("up-down-arrow").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Octicons-arrow-small-up.svg/1000px-Octicons-arrow-small-up.svg.png";
}
else {
document.getElementById("up-down-arrow").src = "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png";
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png" >
</div>
</div>
</body>
As an alternative, you may use classList.toggle instead. The idea of toggle is it will add the class if it's not present on the element, and remove it if it's present. It will be more optimize as well. Put the images into the class and toggle that class onClick so as the example below; see arrow-up on css and how it is used in toggle in javascript section. Initially the <div id="arrow".. has already an arrow class that's why you will see an arrow down icon, when the toggle is triggered, the element will become like this <div id="arrow" class="arrow arrow-up"></div> and this <div id="arrow" class="arrow"></div> alternatively. The toggling of arrow-up class gives the effect of changing arrow icons.
function changeArrow() {
var element = document.getElementById("arrow");
element.classList.toggle("arrow-up");
}
.open-menu {
padding: 20px;
position: absolute;
cursor: pointer;
background-color: #000000;
}
.arrow {
width: 16px;
height: 16px;
background: url('http://www.entypo.com/images/chevron-down.svg') no-repeat;
}
.arrow-up {
background: url('http://www.entypo.com/images/chevron-up.svg') no-repeat !important;
}
<div class="open-menu" onClick="changeArrow()" >
<div id="arrow" class="arrow"></div>
</div>
image's used on sample copyright to www.entypo.com
Replace
document.getElementById("up-down-arrow").src
with
document.getElementById("up-down-arrow").getAttribute('src')
src returns the full URL of the image
getAttribute('src') returns exactly what was in the HTML, i.e. the way that you wrote it
ps. I would also like to suggest a few potential improvements to your current HTML page:
I would recommend moving the JS import from the head to the bottom of the body tag just before closing it. This will make sure that the body of your webpage will render before downloading the JS file which will make the page render faster to your end users.
(This is because the way that the browser renders html is it executes
it line by line which means that it will stop to download the javascript file before executing anything else that comes after it, i.e. displaying the body of the webpage to the user.)
I would also recommend replacing the inline onClick function with an eventListener inside of your JS file that way you will have separation between your HTML and JS files which will make your website more maintainable as it grows in size
Depending on the size of your DOM it MIGHT also be faster to store, i.e. cache, the "up-down-arrow" node inside of a variable to avoid the performance cost of querying for that node inside of the DOM each time the user clicks on it, i.e.
$up_down_arrow = document.getElementById("up-down-arrow");
if ($up_down_arrow.getAttribute('src') === "bin2-lighter.svg") {
$up_down_arrow.setAttribute('src', 'bin2-darker.svg')
} else {
$up_down_arrow.setAttribute('src', 'bin2-lighter.svg');
}
I have no experience with web design and I am trying desperately to create a simple web page that will contain a D3.js graph (a sweet framework to create graphs and dashboards) but I have a very big problem with positioning elements.
I am trying to have a page that I represented like this:
The graph data will be generated by a back-end process interacting with some ajax code.
I know it's simple but I have a real problem with positions, margins, padding etc.
What I tried so far is this:
<!DOCTYPE html>
</html>
<head>
<title>E-Commerce data - Interactive Map</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'interactive_map.css' %}?v=00001">
</head>
<body bgcolor="#170061">
<div id="graph_div">
// The graph will be here
</div>
<div id="pannel_div">
// The buttons to controle the graph will be here
</div>
</body>
</html>
And a css file that look like this:
div#graph_div
{
border-radius: 2px;
vertical-align: middle;
position: relative;
width: 40%;
height: 80%;
top: 20px;
bottom: 20px;
right: 180px;
left: 20px;
background-color: #ffffff;
}
div#panel_div
{
border-radius: 2px;
vertical-align: middle;
position: relative;
width: 40%;
height: 80%;
top: 20px;
bottom: 180px;
right: 20px;
left: 20px;
background-color: #ffffff;
}
Clearly this won't work ( I know ). Can anybody help me with this?
Thank you in advance
Here's an example of what you could start doing: https://jsfiddle.net/Le232kar/
CSS looks like this:
body, html {
margin:0;
padding:0;
height:100%;
}
#topbar {
width:100%;
height:100px;
background:grey;
margin:0;
}
#graph_div {
width:60%;
height:100%;
float:left;
background:blue;
}
#panel_div {
width:40%;
float:right;
background:darkgrey;
height:100%;
}
Good luck.
Okay, so I recently learned that the ViewRight web player from Verimatrix is a so called NPAPI plugin which can be overlayed with HTML elements using a technique involving a "dummy iframe".
Div on top of ViewRight-player
HTML on top of NPAPI plugin
Now, as far as I've been able to gather, Silverlight appears to be a NPAPI plugin as well (I may be mistaking). So I tried the same approach to display a DIV on top of a Silverlight web player from another website loaded inside an iframe.
Unfortunately it doesn't work... As soon as the Silverlight player loads it sits on top of everything else.
I know that setting the windowless param to true in the player would fix it. But since the player isn't hosted by me I can't edit any of the object parameters.
Here's a test scenario based on the "dummy iframe" method: http://jsfiddle.net/c7Hsp/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background: black;
cursor: auto;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
:::-webkit-scrollbar {
display: none;
}
.wrapperDiv {
position: absolute;
bottom: 200px;
left: 200px;
width: 200px;
height: 200px;
margin: 0 auto;
}
.dummyFrame {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
background-color: red;
}
.contentDiv {
position: absolute;
top: 25px;
left: 25px;
width: 300px;
color: white;
font-family: Arial;
font-size: 18pt;
text-align: center;
background-color: green;
}
#silverFrame {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px;
background: transparent;
}
</style>
</head>
<body>
<iframe id="silverFrame" src="http://clubace.dk/silverlight.htm"></iframe>
<div class="wrapperDiv">
<iframe class="dummyFrame" frameborder="0"></iframe>
<div class="contentDiv">Weee!<br>I'm overlaying this<br>NPAPI plugin :D</div>
</div>
</body>
</html>
I hope somebody can help me make this work :-)
Thx
for your deleted question PHP: Get attribute value of a specific tag from HTML [duplicate]
you miss an S in the
document.getElementsByClassName('classname')
and you can then
.
.
$attr = $tag->item(15);
$percent = $tag.style.heigth
http://www.w3schools.com/jsref/prop_style_height.asp
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel
I am trying to learn Javascript and struggling! I have got my head around CSS & HTML to an ok level and have made a very basic file to help me learn basic Javascript functions. I just want to know if what I am doing is on the right path? I want to click on the different color boxes and change the main box.
I have made a fiddle link here: http://jsfiddle.net/Margate/mN9hs/
This should be self explanatory. Nothing that will ever be used I just want to learn with it!
After hours trying to work it out I am completely stuck as to why it is not working!
Thank you very much for any help / guidance....
<!DOCTYPE html><html><head><title> Learning Page!</title>
<style type="text/css">
#MainContent{position: relative; margin: 0px auto; top: 10px; border: 2px solid black; width: 500px; height: 250px;}
#ChangeThis{position: absolute; top: 10px; left: 50px; width: 400px; height: 100px; background-color: red; border: 2px solid black;}
#ColourBoxContiner{position: absolute; left: 99px; top: 120px; width: 302px; height: 102px; border: 1px solid black;}
#RedBox{position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red; border: 1px solid black; cursor: pointer;}
#YellowBox {position: absolute; top: 0px; left: 100px; width: 100px; height: 100px; background-color: yellow; border: 1px solid black; cursor: pointer;}
#GreenBox {position: absolute; top: 0px; left: 200px; width: 100px; height: 100px; background-color: green; border: 1px solid black; cursor: pointer;}
</style>
</head>
<body>
<div id="MainContent">
<div id="ChangeThis"></div>
<div id="ColourBoxContiner">
<div id = "RedBox" onclick="ChangeColorOne()"></div>
<div id = "YellowBox" onclick="ChangeColorTwo()"></div>
<div id = "GreenBox" onclick="ChangeColorThree()"></div>
</div>
</div>
<script>
function ChangeColorOne() {
document.getElementById('ChangeThis').style="background.color:orange";
}
function ChangeColorTwo() {
document.getElementById('ChangeThis').style="background.color:black";
}
function ChangeColorThree() {
document.getElementById('ChangeThis').style="background.color:blue";
}
</script>
</body>
</html>
When you are setting the background color you should be using "backgroundColor" without the period, like this:
function ChangeColorOne()
{document.getElementById('ChangeThis').style.backgroundColor="orange";}
function ChangeColorTwo()
{document.getElementById('ChangeThis').style.backgroundColor="black";}
function ChangeColorThree()
{document.getElementById('ChangeThis').style.backgroundColor="blue";}
BTW, Codecademy is a great place to go to learn Javascript. You can also use w3Schools as a reference.
The fiddle won't work (or won't for me on chrome) while you have the JavaScript set as onLoad, try No wrap - in <head> and you've a little syntax error in your JavaScript. Apart from that you were very close.
eg.
function ChangeColorOne() {
document.getElementById("ChangeThis").style.backgroundColor = "orange";
}
See this updated version on your fiddle: http://jsfiddle.net/mN9hs/1/
document.getElementById('ChangeThis').style="background.color:orange";
->
document.getElementById('ChangeThis').style.backgroundColor = "orange";
Stop using HTML onclick attributes and bind the click events through JS. The structure is yourElement.addEventListener("click", yourfunction); if your function is available in the scope. If you assign more than one, and you do not prevent your event from bubbling, all your observers will get the message.
Okay buddy here is your snippet in working condition.
Actually you need to do as:
function ChangeColorOne()
{document.getElementById('ChangeThis').style.backgroundColor="orange";}
function ChangeColorTwo()
{document.getElementById('ChangeThis').style.backgroundColor="black";}
function ChangeColorThree()
{document.getElementById('ChangeThis').style.backgroundColor="blue";}
ChangeColorOne();
ChangeColorTwo();
ChangeColorThree(); // call them all
Have a look. Hope it will help you =) .