Is it possible to float a nav bar over a iframe here is the code that i have so far?
the nav bar as you will be is in the html page and contains buttons that trigger the iframe to go to the next page etc.
Any ideas?
<!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>
<title>Fraud Protection - Course</title>
<style>
.backbutton[type="button"] {
border: 0;
background: url("back.png") no-repeat;
text-indent: -9999em;
line-height:3000;
width: 100px;
height: 35px;
cursor:pointer;
}
.nextbutton[type="button"] {
border: 0;
background: url("next.png") no-repeat;
text-indent: -9999em;
line-height:3000;
width: 100px;
height: 35px;
cursor:pointer;
}
.savebutton[type="button"] {
border: 0;
background: url("save.png") no-repeat;
text-indent: -9999em;
line-height:3000;
width: 100px;
height: 35px;
cursor:pointer;
}
</style>
</head>
<body>
<iframe src="" width="100%" class="naviframe" id="contentFrame" hieght="100%"></iframe>
<div id="navDiv">
<input type="button" class="backbutton" id="butPrevious" onclick="doPrevious();" value="<- Previous"/>
<input type="button" class="nextbutton" value="Next ->" img src="/images/Btn.PNG" id="butNext" onclick="doNext();"/>
<input type="button" class="savebutton" value="Save Progress" img src="/images/Btn.PNG" id="butExit" onclick="doExit();"/>
</div>
</body>
</html>
It is possible. You have to position the element to be floated, as absolute with negative margin.
Demo
It's possible with position: absolute;
Simple CCS for your nav bar:
.navDiv{
position: absolute;
top: 100px;
left: 100px;
}
Just change the values for top and left as you need. In this case, these values are relative to document.body.
You have a misstypo in height-attribute for iframe in your code. Also it seems that percentage is not allowed for iframe height, you have to use some other unit instead.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to go back to when I learned javascript to make a game of pong. I am trying to get the "left" value to see how far the playArea is from the left to set the position of the ball in the middle.
The script is located at the bottom of the body tag.
Where I am trying to call the resetGame function just to test to see if I can change the balls position to be in the center of the play area. I am trying to log the value of the playArea's left value and it is returning it as if it is nothing. (See below)
It should say "Value of playArea's left: 150px" or maybe just the 150 but it is just empty
The live server is just so i can run it on my browser. Any help would be great as to why this is not returning anything. Thanks!
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
return document.getElementById(id).style[property];
}
#playArea{
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body{
background-color: black;
}
#ball{
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
#start{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 500px;
}
#reset{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 700px;
}
.insidebuttons{
font-size: 20px;
padding: 13px;
text-align: center;
font-family: sans-serif;
}
.insidebuttons:hover{
cursor: pointer;
}
.paddle{
width: 30px;
height: 100px;
position: fixed;
background-color: white;
top: 33%
}
#paddleLeft{
left: 170px;
}
#paddleRight{
left: 1105px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
You cannot get the value directly from the style of the element. For values coming from external css stylesheets, you need to use getComputedStyle() function to get the actual value coming from the stylesheet. The returned value of getStyle() will be in px value.
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
//return document.getElementById(id).style[property];
let el = document.getElementById(id);
return getComputedStyle(el).getPropertyValue(property); // getComputedStyle will get the actual value from the stylesheet
}
#playArea {
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body {
background-color: black;
}
#ball {
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
because i need to give a constant width & height to my div depending on my background image size,i need to find out that.
here was many solutions for this issue....
like here:
How do I get background image size in jQuery?
here is my code
body{
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-image: url(./mybgimg.png);
}
#a{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 980px;
max-height: 680px;
background-image: url(../myImage.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<div class="container">
<div id="a">
<div >
<!-- sth that should place exactly in this div depending on what size is my #a div ... -->
</div>
</div>
</div>
</body>
</html>
how i get background image size of div with #a id ?
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
Have a block with another relative block inside, which has a background in style of parent block (like on a a picture). When i trying to change width of my block, relative block disappears.
picture
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
#button
{
width: 195px ;
height: 60px;
display: inline-block;
position: relative;
background: url('/res/bg.png') repeat-x;
}
#button div#arrow
{
background: url('/res/Arrow.png') no-repeat;
width: 30px;
height: 60px;
display: block;
position: absolute;
top:0px;
right: -30px;
}
</style>
</head>
<body>
<div id='button'>
<div id='arrow'></div>
</div>
</body>
</html>
Forgot about the code of animating:
$('#button').animate({width:'-=120px'}, 2000)
Set overflow: visible !important on the parent div.
Demo: http://jsfiddle.net/P5CHX/2/
I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img.
But what actually happens is that the div gets displayed below the image. Do you know how I can get the div with the id 'main' to be displayed over the top of the img with the id 'mainImg' (but the div also needs to be/remain centred).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
#mainImg { z-index: -1; }
#main { text-align: center; width: 1000px; height: 700px; top: 0px; }
#navBar { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ }
#content { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ }
-->
</style>
</head>
<body>
<div id="heading">
<img src="images/heading.png" alt="" width="100%" height="300px"/>
</div>
<img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/>
<!-- the below div is meant to be displayed over the top of the above image but it actually get display below it -->
<div id="main">
<div id="navBar">
<img src="images/navBackground.png" alt="" width="100%" height="700px"/>
</div>
<div id="content">
<img src="images/contentBackground.png" alt="" width="100%" height="700px"/>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>
Instead of using an img tag for your site's background I would strongly suggest applying a background image style to a div or your body tag.
That way you can keep a floated layout & the contents will appear above the image since your #main div can be nested inside the element with the backgrund image applied.
so for example css would be:
body { background:url('images/mainBackground.png'); }
and just remove the img (#mainImg) tag from your markup
you may also want to do this for your navigation
you must use the css property position: absolute for your div and then tamper with margins of the div to position it properly.
Instead of referencing the image as an inline tag, try setting the CSS background properties of the content div itself. Something like this should do the trick:
#main {
background-image:url('images/mainBackground.png');
background-repeat:no-repeat;
}
try this:
#mainImg {
left: 100px;/*adjust accordingly*/
position: relative;
top: 100px;/*adjust accordingly*/
z-index: 2;
}
z-index is for layering html elements.