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 (=
Related
I was searching for answer on the internet and on stack's other questions, but none of the solutions are working for me. I'm trying this for days. My timepicker JQuery plugin appears behind the triggered modal window. I don't have much time left before the science fair and I'm really in trouble. I would be really, really greatful if someone knows how to help me. Cheers guys and thanks in advance. Here's the code and picture:
Form section
<div class='form-group'>
<label for='start' class='col-xs-4 control-label'>Starting time</label>
<div class='col-xs-5'>
<?php include('test.php'); ?>
</div>
</div>
Test.php
<html>
<head>
<style type="text/css" media="all">#import "timePicker.css";</style>
<style type="text/css">
input {
margin:0;
padding:0;
}
pre {
background:#fff;
border:1px solid #ddd;
padding:4px;
}
.ui-timePicker {
position: relative;
z-index: 10000 !important;
}
</style>
<meta charset='utf-8'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.timePicker.js"></script>
</head>
<body>
<p><input id="time1" type="text" class="time form-control" /></p>
<script>
$("#time1").timePicker();
</script>
</body>
</html>
Have you tried just changing the z index of your time picker?
<style>
#time1{
z-index:1151 !important;
}
</style>
When I open this page nothing happen. So what is the error on this code?
This is the code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function code(){
var filename = loc.pathname.split("/");
filename = filename[pathname.length-1];
alert(filename);
<iframe src="http://url/" +currentPageUrl scrolling="yes" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support IFrames
</iframe>`
}
</script>
<title>Index</title>
</head>
<body onload="code();">
</body>
</html>
I am not sure what you are trying to do but there are lot of mistakes in your code.
loc should be location
just guessing that your trying something similar to this.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function code() {
var filename = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
document.body.innerHTML = "<iframe src=" + filename + " scrolling='yes' style='position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;'>your browser doesn't support iframe<iframe>";
}
</script>
<title>Index</title>
</head>
<body onload="code();">
</body>
</html>
Because you don't have a valid script there.
loc is undefined.
You just have an iFrame tag flying around in your JS code.
There are several issues with this code:
loc looks like it's not defined. Maybe you want location
To add code to the DOM, you could use:
document.body.innerHTML = "<iframe src='http://' + variable ></iframe>"
Make sure all other variables are defined. i.e. use location.pathname when getting the length.
I'm new to JQuery and am hoping someone can help out with the problem I'm having.
I setup a JSFiddle Page with the issue I'm having for ease of helping me: http://jsfiddle.net/66Bwp/
The problem: When I click on the button "Test 1" or "Test 2" and then click on the black overlay that produces, the overlay disappears, however the content that was faded in stays on the page until the "cancel" button is pressed.
Interesting Side Note: If I click on the button "Test 1" or "Test 2" to produce the content effect, and then click cancel, everything works as intended (overlay and content fade out), and then if I click the button "Test 1" or "Test 2" again, without reloading the page, and then click the overlay, everything works as intended.
The Javascript File:
$(document).ready(function(){
lbHide();
})
function lbShow( idName ) {
$("#lbOverlay, #" + idName).fadeIn(300);
}
function lbHide( idName ) {
$("#lbOverlay, #" + idName).fadeOut(300);
$("#lbOverlay").click(function() {
$("#lbOverlay, #" + idName).fadeOut(300);
})
}
The CSS File:
#lbOverlay{
display:none;
background:#000000;
opacity:0.4;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lbExampleOne{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#lbExampleTwo{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
The HTML File:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lightbox Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="css/master.css" />
</head>
<body>
<button id="show-panel" onClick="lbShow('lbExampleOne')">Test 1</button>
<button id="show-panel" onClick="lbShow('lbExampleTwo')">Test 2</button>
<div id="lbExampleOne">
<h2>Example Content One</h2>
<p><button type="reset" id="close-panel" onClick="lbHide('lbExampleOne')">Cancel</button>
</div>
<div id="lbExampleTwo">
<h2>Example Content Two</h2>
<p><button type="reset" id="close-panel" onClick="lbHide('lbExampleTwo')">Cancel</button></p>
</div>
<div id="lbOverlay"></div>
</body>
</html>
I'm not sure what the problem could be. Does anyone have any suggestions?
Thanks!
Change your lbHide function to this:
function lbHide(idName) {
$("#lbOverlay, #" + idName).fadeOut(300);
$("#lbOverlay").click(function () {
$("#lbOverlay, #lbExampleOne, #lbExampleTwo").fadeOut(300);
})
}
jsFiddle example
When your overlay is clicked, there is no idName parameter being passed to it, so just fade out the divs. You should probably give them classes to make them easier to refer to.
It's because when you are clicking on the overlay you are are calling the click event that you have assigned to it. The problem is that the click event uses the idName variable which has no value at this point in time.
Therefore the overlay fades but not your other elements
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'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.