I need help. I can't get javascript to dynamically change colour of the three divs listed in code below. I have pasted the full code below...
<!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>
.box{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="box">
quote 1
</div>
<div class="box">
quote 2
</div>
<div class="box">
quote 3
</div>
<script type="text/javascript">
var bgcolorlist=new Array( "#ff33cc", "#cc33ff")
$(".box").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);
</script>
</body>
</html>
You're using jQuery on $(".box").css(), but you haven't linked the library! Add this before your current script:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Or, simply don't use jQuery at all:
var boxes = document.querySelectorAll('.box');
for(var i=0; i<boxes.length; i++) {
boxes[i].style.backgroundColor = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
}
Related
the function setImg() if called with an argument is not running but if no argument is passed then the function runs what m i doing wrong please 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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setImg(p)
{
window.alert(p);
document.getElementById('img').innerHTML ="<img src=p width='100' height='105'>";
}
</script>
</head>
<body>
load image
<div id="img">
</div>
</body>
</html>
You are missing the quotes for the src plus you should break up the string and add the variable to prevent it reading p as text.
Update the JS to the following:
<script type="text/javascript">
function setImg(p)
{
document.getElementById('img').innerHTML ="<img src='" + p + "' width='100' height='105'>";
}
</script>
Plus in the HTML you need to be careful with quotes:
load image
<!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>
<script type="text/javascript">
function setImg(p)
{
window.alert(p);
document.getElementById('img').innerHTML ="<img src=p width='100' height='105'>";
}
</script>
</head>
<body>
load image
<div id="img">
</div>
</body>
</html>
Well your were closing html attribute accidentally, you should use ' single-quotes instead.
Small mistake of quotes
change
load image
to
load image
this is still really new to me. I just need to know where I have gone wrong. I want to change the text inside the DIV when the button is clicked. I followed a youtube link (below), because it's been the easiest to follow so far.
However it's still not working.
https://www.youtube.com/watch?v=pyfKqrjmAl4&list=PLKOf7m55-0tHTUAeef0nFy4FNlC6DBnz8
Here is what I have:
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="book">
<h1>Price</h1>
<div id="main_section">
<div id="tablef">
<div id="table">
<div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
</div>
<div id="table2">
<div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
</div>
</div>
</div>
<div id="button_section">
<input type="button"id="my_button" value="Click me"/></div>
</div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$( "#my_button").click(function() {
$("main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
</script>
add hash # before main_section
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
$("#main_section").html("this is the updated text");
the selector should be #main_section because it is an ID, i.e. add # before main_selection
So your JS code becomes
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
Just go through jQuery Selectors for better understanding.
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="book">
<h1>Price</h1>
<div id="main_section">
<div id="tablef">
<div id="table">
<div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
</div>
<div id="table2">
<div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
</div>
</div>
</div>
<div id="button_section">
<input type="button"id="my_button" value="Click me"/></div>
</div>
</body>
You just missed # sign in the jquery selector! ($("#main_section"))
My code works inside an html but not from an external .js file.
In my external .js, I have a function like .animate() and hide() etc. working fine but
just for functions like .text() or .html() it is not working in the external file.
I even deleted all my code and just kept this script, still it didn't work, but when I copy pasted into my html it worked.
<!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>
</head>
<!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>
</head>
<body >
<div id="demo"> --- </div>
<button>click me</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("button").click(function(){
$("#demo").html("text");
});
</script>
</html>
Try this in your JS
$(function() {
$("button").click(function(){
$("#demo").html("text");
});
});
your html code is fully messed up!! update your code with the below
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="demo"> --- </div>
<button>click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("button").on("click", function() {
$("#demo").html("text");
});
});
</script>
</body>
</html>
I would like to create multiple strings within this same function and make this code more useable across website.
My JS code look like this:
function() {$(".tool-tip-wrapper").click(function () {
$(".tool-tip",this).html("<img src='/images/ui-elements-sprite.png' class='top-arrow'><p>This is string one.</p><div class='close'></div>").toggle('fast');
});
My html code look like this:
<div class="tool-tip-wrapper"> click me
<div class="tool-tip"></div>
</div>
Below markup will solve the issue.
<!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" src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tool-tip-wrapper").click(function(){
$(".tool-tip",this).html("<p>"+this.title+"</p><div class='close'></div>").toggle('fast');
});
});
</script>
</head>
<body>
<div class="tool-tip-wrapper" title="This is string one.">
click me
<div class="tool-tip"></div>
</div>
</body>
</html>
I am using this script for PNG fixes for IE6.
I've noticed that when I clone an element, the cloned PNG's are unfixed even though they have the proper classes attached, and I'm unable to re-apply the fix. I'm using jquery to clone an element, and have to use clone(false,false) for extensive reasons...is there a way I can apply the fix to the new element after appending the clone? Calling DD_belatedPNG.fix(".pngfix") again does not seem to work.
Rather than use a png fix, just use transparent PNGs that are supported by IE (paletted 8-bit with alpha). ImageAlpha will do this for you if you are using a Mac, otherwise you can use pngquant (which ImageAlpha is based on) to do this for you.
Javascript/IE Filter type stuff is not needed to solve this problem, and should be avoided.
This solution is for img elements
<!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" />
<style>
body {
background:#0000FF;
}
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
$(document).ready(function () {
function imageClickHandler () {
var $newA = $("<a></a>")
var $newImg = $(this).find('img').clone(false,false);
$newImg.attr("style","");
$newA.append($newImg);
$newA.click(imageClickHandler);
$(this).parent().append($newA);
DD_belatedPNG.fix('img');
}
DD_belatedPNG.fix('img');
$('a').click(imageClickHandler);
});
</script>
</head>
<body>
<a><img src="image.png" /></a>
</body>
</html>
EDIT
this solution is for bg elements
<!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" />
<style>
body {
background:#0000FF;
}
a {
display:inline-block;
//display:inline;
zoom:1;
width:512px;
height:512px;
background:url(image.png) no-repeat center center;
text-decoration:none;
outline:none;
}
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
$(document).ready(function () {
function imageClickHandler () {
var $newA = $(this).clone(false,false);
$newA.removeAttr("style isImg vmlInitiated vmlBg");
$newA.click(imageClickHandler);
$(this).parent().append($newA);
DD_belatedPNG.fix('a');
}
DD_belatedPNG.fix('a');
$('a').click(imageClickHandler);
});
</script>
</head>
<body>
<a></a>
</body>
</html>