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
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.
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 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>
I am using an iframe now i want to have a button inside the iframe on top right which will display only on mouse over. How can i add this button? Can anyone please help me into the right direction.
jQuery
$(function() {
var close = $('#close');
$('#frame').hover(function() {
close.show();
}, function() {
close.hide();
});
});
HTML
<div id="frame">
<iframe src="http://example.com"></iframe>
<div id="close">Close</div>
</div>
CSS
#frame {
width: 400px;
height: 300px;
position: relative;
}
#frame iframe {
width: 100%;
height: 100%;
}
#close {
display: none;
position: absolute;
top: 0;
right: 0;
border: 1px solid red;
background: #fff;
padding: 5px;
}
jsFiddle.
Keep in mind this obscures a portion of the iframe. It would be a better idea to not do this.