Three div tags with p tags within, stacked one on top of the other. I need them to come forward onmouseover by modifying the z-index property. Could you please tell me why this isn't working?
<?xml version="1.0" encoding="UTF-8" ?>
<!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" xml:lang="en" lang="en">
<!-- Lab Program 8A // Element stacking -->
<head>
<title>Lab 8A : Changing element stacking on mouseover</title>
<script type="text/javascript">
function MoveUp(here)
{
here.style.zIndex= 5;
}
</script>
<style type="text/css">
div {position:absolute}
p {font-size:100px; margin:0px; border:solid}
</style>
</head>
<body>
<div>
<p style="background-color:green" onmouseover="this.style.zIndex=5">IWT Lab 1</p>
</div>
<div>
<p style="background-color:yellow; margin-left:50px" onmouseover="MoveUp(this)">IWT Lab 2</p>
</div>
<div>
<p style="background-color:pink; margin-left:100px" onmouseover="MoveUp(this)">IWT Lab 3</p>
</div>
</body>
</html>
New Code :
<?xml version="1.0" encoding="UTF-8" ?>
<!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" xml:lang="en" lang="en">
<!-- Lab Program 8A // Element stacking -->
<head>
<title>Lab 8A : Changing element stacking on mouseover</title>
<script type="text/javascript">
function MoveUp(here)
{
here.style.zIndex= 1 ;
}
function MoveDown(here)
{
here.style.zIndex = 0 ;
}
</script>
<style type="text/css">
div {position:absolute}
p {position:absolute; font-size:100px; margin:0px; border:solid; height:150px; width:500px}
</style>
</head>
<body>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:green">IWT Lab 1</p>
</div>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:yellow; margin-left:50px" onmouseover="MoveUp(this)">IWT Lab 2</p>
</div>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:pink; margin-left:100px">IWT Lab 3</p>
</div>
</body>
</html>
z-index only applies to positioned elements. While your div elements as position: absolute, your p elements (which you are setting the z-index on) are position: static (the default).
Elements are positioned if their position property has any valid value other than static.
It looks like you should move your onmouseover event handlers to the div elements.
It looks like you aren't reducing the z-index back to the default once the mouse leaves - add in a function onmouseout that resets the z-index to 0 or 1 or something.
Related
I'm working on a game I want that when I press the keyboard button once, jump on my gaming character until the given loop condition is incorrect. But now the problem is that my character is jumping as well as pressing the keyboard button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--AnimationUsingKeyboard.html-->
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=utf-8"/>
<title>AnimationUsingKeyboard.html</title>
<link rel="Stylesheet" type="text/css" href=""/>
<script type="text/javascript" src="AnimationUsingKeyboard.js">
//<![CDATA[
//]]>
</script>
</head>
<body onload="init()">
<h1>Animation Using Keyboard Input</h1>
<div id="outline" style="position:absolute;
width:50px;
height:50px;
top:100px;
left:5px;">
<img id="krizen" src="krizen1.png" width="50px" height="50px" alt="krizen.png"/>
</div>
<div id="output">
</div>
</body>
</html>
var imgList=new Array("krizen1.png",
"krizen2.png",
"krizen3.png",
"krizen4.png",
"krizen5.png",
"krizen6.png",
"krizen7.png",
"krizen8.png"
);
var outline;
var krizen;
var jump;
function init(){
outline=document.getElementById("outline");
krizen=document.getElementById("krizen");
document.onkeydown=keyListner;
}
function keyListner(e){
if(!e){
e=window.event;
}//end if
if(e.keyCode==38){
jump=parseInt(outline.style.top);
while(jump!=70){
outline.style.top=jump+"px";
jump-=5;
}//end while
}//end if
}//end keyListner function
You could try to set a variable; lets say Pressed to 1 if the key is pressed, and if its released it turns Pressed to 0 and the loop checks if Pressed===1
Hello again i found a great script that does almost what i want the problem is that its not moving on its own when the page loads can we change it to do that?
The idea was to make scrolling down messages i want to make it to make a loop so il have a message and it will move from top to bottom but it will never stop moving like a marquee
thanks in advance!
<!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">
scrollStep=1
timerUp=""
timerDown=""
function toTop(id){
document.getElementById(id).scrollTop=0
}
function scrollDivDown(id){
clearTimeout(timerDown)
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}
function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}
function stopMe(){
clearTimeout(timerDown)
clearTimeout(timerUp)
}
</script>
<style>
#display{
width:200px;
height:150px;
overflow:hidden;
text-align:left;
border:1px solid black;
}
</style>
</head>
<body>
Top
ScrollDown
Scroll Up
Bottom
<div id="display">
<b>LAYER CONTENTS</b>
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>End
</div>
</body>
</html>
i want to do something like this so it will make a loop:
function scrollDown(id){
clearTimeout(timerDown)
document.getElementById(id).scrollTop+=scrollStep
if (document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight){
document.getElementById(id).scrollTop=0
}
}
<div id="display" onmouseout="scrollDown('display')" onmouseover="stopMe()">
and under this div its the messages
Try window.onload around your code you want to run at page load.
window.onload = function() { ...yourcode... };
You can try to wrap your code into the following way into the
windows.load=function(){//Your Code}
Since the script is loading before the document is loaded
<script type="text/javascript">
window.load = function(){
scrollStep=1
timerUp=""
timerDown=""
function toTop(id){
document.getElementById(id).scrollTop=0
}
function scrollDivDown(id){
clearTimeout(timerDown)
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}
function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}
function stopMe(){
clearTimeout(timerDown)
clearTimeout(timerUp)
}
};
</script>
OK here i found a solution that worked perfect!!
http://jscroller2.markusbordihn.de/
How do you assign a class dynamically to a paragraph (via javascript/CSS) IF the paragraph contains the wording "Time Recorded:"?
You'll notice that I have manually assigned the paragraph with class class="dyncontent".
However, I'd like to dynamically assign this class to any paragraph tag which contain the words "Time Recorded:".
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">')
document.write('.dyncontent{display:none;}')
document.write('</style>')
}
</script>
<div class="right">
<ul>
<li class="say agent public">
<p>Description line 1</p>
<p class="dyncontent">Time Recorded: 5MIN(S)</p>
<p>Another description line</p>
</li>
</ul>
</div>
</body>
</html>
You could use jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$("p:contains('Time Recorded:')").addClass('dyncontents');
});
</script>
$("p").each(function(ele) {if (this.html().indexOf('TimeRecorded') > 1) {$(this).addClass('dyncontent'))}});
I'd do indexOf because it will match easier than innerText
var allP = document.getElementsByTagName('p'),
pLength = allP.length;
while(pLength--){
if(allP[pLength].innerHTML.indexOf('Time Recorded') != -1){
allP[pLength].addClass('dycontents');
}
}
To explain: first you get all the <p> in the document. Then you loop through them. If any of them contain text of Time Recorded you add your class to it.
The following is solution without Jquery
o = document.getElementsByTagName('p');
for (i = 0; i < o.length; i++) {
if (o[i].innerText.indexOf('Time Recorded:') != -1) {
o[i].className = 'theClassYouWant';
}
}
I have 2 button sets that, when clicked are supposed to angle the text below them at 45 deg. However, both set 1 and set 2, when clicked, ONLY control the text linked to button 1. I want to have each button set control their respective text. Can someone help me fix this by providing the proper/accurate code? Here's what I have, below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {font-family:sans-serif; font-size:12px;}
/*#ctrls {float:left; margin-right:20px;}*/
a {margin-left:40px;}
div#ctrls {position:absolute; top:40px; z-index:1;}
div#ftP {position:absolute; top:80px; z-index:0;}
div#ctrls2 {position:absolute; top:120px; z-index:1;}
div#ftP2 {position:absolute; top:160px; z-index:0;}
</style>
<script type="text/javascript">
function transform()
{
var rotation = document.getElementById('rotation').value;
document.getElementById('ft').style.webkitTransform='rotate('+rotation+'deg)';
}
function reset()
{
document.getElementById('ft').style.webkitTransform='rotate(45deg)';
document.getElementById('rotation').value = 0;
}
</script>
</head>
<body>
<div id="ctrls">
<p type="text" id="rotation" size="4" />
<button onclick="transform()">-</button><button onclick="reset()">+</button>
</div>
<div id="ftP"><p id="ft">hello</p></div>
<div id="ctrls2">
<p type="text" id="rotation" size="4" />
<button onclick="transform()">-</button><button onclick="reset()">+</button>
</div>
<div id="ftP2"><p id="ft">taxes</p></div>
</body>
</html>
The problem you're having is because both <p> tags have the same id. You have to make one have a different id. What I would do is pass the id of the text you want to transform to the javascript function so that you can know what text to rotate.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {font-family:sans-serif; font-size:12px;}
/*#ctrls {float:left; margin-right:20px;}*/
a {margin-left:40px;}
div#ctrls {position:absolute; top:40px; z-index:1;}
div#ftP {position:absolute; top:80px; z-index:0;}
div#ctrls2 {position:absolute; top:120px; z-index:1;}
div#ftP2 {position:absolute; top:160px; z-index:0;}
</style>
<script type="text/javascript">
function transform(order)
{
var rotation = document.getElementById('rotation' + order).value;
document.getElementById('ft' + order).style.webkitTransform='rotate('+rotation+'deg)';
}
function reset(order)
{
document.getElementById('ft' + order).style.webkitTransform='rotate(45deg)';
document.getElementById('rotation' + order).value = 0;
}
</script>
</head>
<body>
<div id="ctrls">
<p type="text" id="rotation1" size="4" />
<button onclick="transform('1')">-</button><button onclick="reset('1')">+</button>
</div>
<div id="ftP1"><p id="ft1">hello</p></div>
<div id="ctrls2">
<p type="text" id="rotation2" size="4" />
<button onclick="transform('2')">-</button><button onclick="reset('2')">+</button>
</div>
<div id="ftP2"><p id="ft2">taxes</p></div>
</body>
</html>
I am trying to position my Div wherever the user clicks on my Image.
test is my Div, and myimg is my image.
Here is my JS:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
However that does not work. Can anyone tell me what I am doing wrong?
Edit: Sorry, I forgot to mention that the Div wont show up, if I include the offset line, if I dont, it shows, but not at the right position.
Here is the full code:
<!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>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='video/jwplayer.js'></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
</head>
<body>
<!--Header and Logo-->
<div id="header">
<div id='mainvid'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mainvid').setup({
'flashplayer': 'video/player.swf',
'file': 'video/Untitled1.mp4',
'controlbar': 'none',
'frontcolor': 'FFFFFF',
'lightcolor': 'FFFFFF',
'screencolor': 'FFFFFF',
'autostart': 'true',
'width': '709',
'height': '422'
});
</script>
</div>
</div>
<div id="test" style="width:100px; position:absolute; display:none; height:100px; border:#093 solid 2px; background:#0C6;">
Teeest
</div>
<!--Content-->
<div id="content">
<center><img src="Images/downloadbutton.png" id="myimg" /></center>
<br />
<div class="text">
OH YEAH!
</div>
</div>
<!--Footer-->
<div id="footer">
</div>
</body>
</html>
I think you probably want
$("#test").css({position:"absolute", left:e.pageX,top:e.pageY});
instead of
$("#test").offset({left:e.pageX,top:e.pageY});
It seems to work fine. I have set up a JSFiddle for you:
http://jsfiddle.net/JPvya/
Click on the image and the test div moves. The only change is using the $ short notation for JQuery instead of typing "JQuery" which, by the way is probably case sensetive and causing the problem!
This works well enough for me, so your problem is likely elsewhere.
HTML
<img id="myimg" src="http://placekitten.com/200/300"/>
<span id="test">This is a test</span>
CSS
#test {
display: none;
color: white;
}
JavaScript
$(function() {
$("#myimg").click(function(e) {
var o = {
left: e.pageX,
top: e.pageY
};
$("#test").show(2000).offset(o);
});
});
http://jsfiddle.net/mattball/haFMn/