2 button sets, but 1 set performing wrong action - javascript

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>

Related

Stacking XHTML elements using z-index

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.

Changing Colour of a Div with JS

So, I have a simple onclick function set up that is supposed to change the background of a div. Here is my JS code;
var colour = document.getElementById("backgroundColour");
function changeToColour1() {
colour.style.backgroundColor = "#47535F";
}
function changeToColour2() {
colour.style.backgroundColor = "#82A3B2";
}
Here is my HTML code;
<button id="colour1" class="colours" onclick="changeToColour1()"></button>
<button id="colour2" class="colours" onclick="changeToColour2()"></button>
<div id="backgroundColour"></div>
How would I get the div to change its colour when the button is clicked?
a much cleaner way of doing this would be to just use javascript to add classes to your elements, and let CSS control the colors.
$('#colour1').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour1');
});
$('#colour2').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour2');
});
and in your CSS put
#backgroundColour.colour1 {
background-color: #47535F;
}
#backgroundColour.colour2 {
background-color: #82A3B2;
}
Give the Div a proper width and height or some content, otherwise the
div cannot be seen.
Avoid inline event handlers and use DOM3 event handlers.
You can also use data-* attributes to store the colors instead of
having a seperate function for each button.
HTML
<button id="colour1" class="colours" data-color="#47535F" >Click me</button>
<button id="colour2" class="colours" data-color="#82A3B2">Click me</button>
<div id="backgroundColour">fff</div>
JS
var colourDiv = document.getElementById("backgroundColour");
var colours = document.getElementsByClassName('colours');
for(var i=0; i< colours.length; i++) {
colours[i].addEventListener('click', function() {
var color = this.getAttribute('data-color');
colourDiv.style.backgroundColor = color;
});
}
Check Fiddle
first and foremost i recommend you to use JQuery for the task you are trying to accomplish, im recommending you do for the simple fact JQuery is a simple straight forward library for javascript that makes our lives as coders a lot more simple, now that im done saying that here is the code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
in this code we use inline css and javascript with the JQuery library, we first start the document how we should always start a html document by adding the DOCTYPE and our meta tags with the attributes content-type and content-language we also add a title.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
</head>
<body>
</body>
</html>
next we add our our script to import the JQuery library, i usually go with the google hosted version because its usually up and running and i dont have to constantly update it , google does that for you, the only thing you need to do is add the new url in the src to replace the old version of JQuery.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
next we add our html, in our html we added two buttons and placed them in a div called wrap and added our changing div and placed both the changing div and the wrap div into a div called body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
</body>
</html>
now time to add the icing to the cake with our script and css, here we added our css to determine the style of our page we made ours so that the browse menu were are buttons are located scroll with the page and are always onto, now onto the script, we made our script so that if the button is pressed it will change the background of the div body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
i hoped this helped, for any information on JQuery i recommend you go visit their online documents, they have a lot of useful info there, here is the link
http://api.jquery.com/
you can also check out w3chools they have a lot of good stuff on JQuery as well as many other programming languages, here is the link
http://www.w3schools.com/
best of luck with your project or learning the javascript language (=

Javascript function subtract from div not working.

I want to subtract 50px from a div with a javascript function when it is called. Why isnt this working?
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id)
{
obj.style.height = ( parseFloat( obj.style.height ) - 50 ) + 'px';
}
</script>
<style type="text/css">
#divId{
background:blue;
width:300px;
height:100px;
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>
You do not define obj or a style property for height, and missed a bracket in the css:
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id){
var obj=document.getElementById(id);
if(obj){
obj.style.height= (obj.offsetHeight- 50)+ 'px';
}
}
</script>
<style type= "text/css">
#divId{
background:blue;
width:300px;
height:100px;
}
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>

How to add wrapper and bind to certain element

I am having 2 issues with my code:
I want to limit the effects of the script to the div <div id="photo">
How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered.
This is my code hope you can help.
<!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>
<style type="text/css">
.selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
#cret {
position:relative;
z-index:3;
border-style:solid; border-width:5px; border-color:#000000;
padding: 10px 10px 10px 10px;
margin:auto;
width:620px;
height:420px;
}
img {
position:static;
z-index:1;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
</head>
<body>
<script type="text/javascript"/>
$(document).ready(function() {
$('img').width('10%').height('10%');
$('img').on("click", function() {
$(this).wrap('<div id="cret"/>');
$(this).animate({width:'600px', height:'400px'}).addClass("selected");
});
$(document).on("click", function(){
$("img").unwrap();
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
$(document).on("click", function(){
$('img').animate({width:'10%', height:'10%'}).removeClass("selected");
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
});
</script>
<div id="photo">
<img src="image source"/>
<img src="image source"/>
</div>
</body>
</html>
To limit the scope of the selector, you can specify a more precise jquery selector
instead of $('img') $('#photo img'); it will affect only img present in photo id div.
you should review your selector and the animate will be more effectively use in correct one...
like put your animate only on img.selected.
Hope it helps http://api.jquery.com/category/selectors/

CSS frustration: How to center floating images of different widths inside LI tags?

I'm working on a webpage that has a javascript image rotator, but it needs to be able to handle images of different sizes.
The code that I'm using as a base has a DIV outside floating LIs which contain the images, but no matter what I try I can't seem to get the images to all be centered. The only one that's centered is the one that's the full 800px wide.
I have a feeling it's something to do with float, position, or display, but I've been messing around for hours with no luck.
Here's my site:
Here's where I borrowed the image rotator code from:
http://www.serie3.info/s3slider/ (code) http://www.serie3.info/s3slider/demonstration.html (demo)
Thanks for any help you can provide!
This works as well (In Firefox and Safari, haven't tried IE). Save as a .html for an example.
<!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=iso-8859-1">
<meta name="description" content="A picture and caption that you can change for everyone in the world to see.">
<meta name="keywords" content="pic and words, pic words, caption">
<title>Pic and Words</title>
<link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<style>
body, html
{
margin:0px;
width:100%;
height:100%;
padding:0px;
}
#slider1
{
text-align:center;
vertical-align:middle;
margin:0px;
padding:0px;
width:auto;
height:auto;
}
#slider1Content
{
text-align:center;
display:table; /* this is KEY to centering the UL */
position:static;
margin:0px auto 0px auto;
padding:0px;
width:auto;
top:auto;
}
#pageWrapper
{
width:810px;
height:700px;
margin:0px auto 0px auto;
text-align:center;
}
</style>
</head>
<body>
<div id="pageWrapper">
<h1>Pic and Words</h1>
<!--Upload -->
<br /><br />
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg"
alt="Somewhere down Baja on the way to Cabo."
title="Somewhere down Baja on the way to Cabo." align="center" />
<span class="bottom">"Somewhere down Baja on the way to Cabo."</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg"
alt="Drunk dude on a bike"
title="Drunk dude on a bike" align="center" />
<span class="bottom">"Drunk dude on a bike"</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg"
alt="Do not want!"
title="Do not want!" align="center" />
<span class="bottom">"Do not want!"</span>
</div>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
</div>
</body>
</html>
Add:
left: 0;
padding: 0;
to the #slider1Content style.
Then delete the float: left; from the .slider1Image style.
Note that the source CSS contains this warning: "important to be same as image width" on several dimensions. Since this CSS isn't sized for each image, you'll have that white margin around each picture.
If you desire to reset those key dimensions dynamically (I think the site looks OK without this), then that is a separate question that has been answered here on SO before.

Categories