I have create this html page and I want to put 2 or 3 background images on that(from links).I want in 5 seconds,autoplay to change auto those background images.How can I do it?I searched but nothing was helpful.Can it happen something like that?
<head>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style>
body {
background-color: green;
}
IMG {width:5cm; height:5cm;text-align:center;}
TD {border: 1px solid black;}
table {border: 1px solid black;}
</style>
<script>
function the_click(event,table) {
var img = event.target;
var other_table;
if(img.tagName!='IMG') {return;}
if(table.id=='thetable1') {
other_table=document.getElementById('thetable2');
} else {
other_table=document.getElementById('thetable1');
}
var t=img.outerHTML;
other_table.rows[0].innerHTML += '<td>'+t+'</td>';
img.parentNode.outerHTML='';
}
</script>
</head>
<body >
<table id='thetable1' onclick='the_click(event,this)'>
<tr><td><img src='http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg'>
</td><td>
<img src='https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg'>
</td><td>
<img src='https://cdn.pixabay.com/photo/2015/06/21/22/46/soap-bubbles-817098_960_720.jpg'>
</td><td>
<img src='https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'>
</td></tr>
</table>
<table id='thetable2' onclick='the_click(event,this)'>
<tr></tr>
</table>
</body>
</html>
You can create list image
var items = [
'http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg',
'https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg',
'https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'
];
Get random item in list as var img = items[Math.floor(Math.random() * items.length)];
And use setInterval as
setInterval(function(){
[...document.getElementsByTagName("img")].reduce((acc, item)=>{
var img = items[Math.floor(Math.random() * items.length)];
item.src = img;
})
}, 5000);
var items = [
'http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg',
'https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg',
'https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'
];
function the_click(event,table) {
var img = event.target;
var other_table;
if(img.tagName!='IMG') {return;}
if(table.id=='thetable1') {
other_table=document.getElementById('thetable2');
} else {
other_table=document.getElementById('thetable1');
}
var t=img.outerHTML;
other_table.rows[0].innerHTML += '<td>'+t+'</td>';
img.parentNode.outerHTML='';
}
setInterval(function(){
[...document.getElementsByTagName("img")].reduce((acc, item)=>{
var img = items[Math.floor(Math.random() * items.length)];
item.src = img;
})
}, 5000);
<head>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style>
body {
background-color: green;
}
IMG {width:5cm; height:5cm;text-align:center;}
TD {border: 1px solid black;}
table {border: 1px solid black;}
</style>
<script>
</script>
</head>
<body >
<table id='thetable1' onclick='the_click(event,this)'>
<tr><td><img src='http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg'>
</td><td>
<img src='https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg'>
</td><td>
<img src='https://cdn.pixabay.com/photo/2015/06/21/22/46/soap-bubbles-817098_960_720.jpg'>
</td><td>
<img src='https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'>
</td></tr>
</table>
<table id='thetable2' onclick='the_click(event,this)'>
<tr></tr>
</table>
</body>
</html>
Related
i've a array of three links for a button which i'm using in footer and when i press the button again and again , array will work one by one good ..and every time it shows a link when press the button. That is good.
but i want , when i click on button that "link" should open in "iframe" ... i used iframe code to pass them src= button id but not working.. please below code and help..
.
my button code with array
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"
let intlinkIndex = 0;
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
intlinkIndex++;
}
</script>
</head>
<body>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>
</div>
</body>
</html>
You can get it by specifying iframe's name in target when generating link html.
So add a name property in your iframe like following:
<iframe id="iframe" name="iframe" src="mylink" width="100%" height="400"></iframe>
Then add a target property.
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
document.getElementById('iframe').src = link[intlinkIndex];
intlinkIndex++;
}
Full source code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"
let intlinkIndex = 0;
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
document.getElementById('iframe').src = link[intlinkIndex];
intlinkIndex++;
}
</script>
</head>
<body>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>
</div>
</body>
</html>
I'm a beginner so I'm sorry for a stupid question. The matter is I can't add div "title" inside of div "app" using JS. Help me please.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<meta name = "description" content = "Field v.1">
<title> Field v.1 </title>
<style>
.app{
background-color: 'black';
}
.title{
background-color: 'green';
}
</style>
</head>
<body>
<div class = "app">
</div>
<script>
var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = "BREAKING NEWS"
app.appendChild(title);
</script>
</body>
</html>
The JavaScript works perfectly. Here's the result of your JS:
<div class="app">
<div class="title">BREAKING NEWS</div>
</div>
However, there's a small problem with your CSS. Do not quote CSS values!. It should be:
.app{
background-color: black;
}
.title{
background-color: green;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<meta name = "description" content = "Field v.1">
<title> Field v.1 </title>
<style>
.app{
background-color: black;
}
.title{
background-color: green;
}
</style>
</head>
<body>
<div class = "app">
</div>
<script>
var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = "BREAKING NEWS"
app.appendChild(title);
</script>
</body>
</html>
There is nothing wrong with your JS code.
You can see your working code in this Codepen:
https://codepen.io/kmpkt/pen/bvYwpm
But there is a error in your CSS code. CSS values may not be quoted:
background-color: black;
I try to toggle class when td clicked in multiple class but it does not work. I prefer working on DOM.
window.onload = function() {
var seats = document.getElementsByClassName('seat');
for(var i = 0; i < seats.length; i++) {
seats[i].onclick = function() {
seats[i].classList.toggle = 'selected';
}
}
}
td {
width: 30px;
height: 30px;
background-color: red;
color: white;}
td.selected {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td class="seat">1</td>
<td class="seat">2</td>
<td class="seat">3</td>
<td class="seat">4</td>
<td class="seat">5</td>
</tr>
</table>
</body>
</html>
http://jsbin.com/kufemuhagi/edit?html,css,js,output
Problem :
You've a scope problem in the posted code where your variable i counldn't found inside the event handler, this variable is accessible just outside of it, to fix this you need to wrap the assignment of the event listener in a closure, like :
for (var i = 0; i < seats.length; i++) {
(function(i) {
seats[i].onclick = function() {
seats[i].classList.toggle('selected');
}
})(i);
}
window.onload = function() {
var seats = document.getElementsByClassName('seat');
for (var i = 0; i < seats.length; i++) {
(function(i) {
seats[i].onclick = function() {
console.log(i);
seats[i].classList.toggle('selected');
}
})(i);
}
}
td {
width: 30px;
height: 30px;
background-color: red;
color: white;
}
td.selected {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td class="seat">1</td>
<td class="seat">2</td>
<td class="seat">3</td>
<td class="seat">4</td>
<td class="seat">5</td>
</tr>
</table>
</body>
</html>
My suggestion :
Separate you logic and use addEventListener() to attach the events, then use this to toggle your class, like the sample below shows.
window.onload = function() {
var seats = document.getElementsByClassName('seat');
var clickHandler = function() {
this.classList.toggle('selected');
};
for (var i = 0; i < seats.length; i++) {
seats[i].addEventListener('click', clickHandler, false);
}
}
div.selected {
background-color: green;
}
<div class="seat">Div 1</div>
<div class="seat">Div 2</div>
<div class="seat">Div 3</div>
<div class="seat">Div 4</div>
The Problem with your code is that the variable i isn't defined per iteration it is defined in the function scope. That means that the for loop you have goes trough every element and assigns the onclick handler to each "seat" but after the last iteration the i variable will be set to an out-of-bounds index since the for loop does the i++ expression after each iteration. The problem is your onclick handler refers to the i variable, which is set to an out-of-bounds index, so that the seats[i] expression returns an undefined value. You can fix this by using the this statement inside the onclick handler or by using the first argument which is the click event. The click event contains a target which refers to the clicked EventTarget (this should be your "seat" element).
function handleSeatClick(ev) {
var seat = ev.target;
if(seat.classList.contains('selected')){
seat.classList.remove('selected');
} else {
seat.classList.add('selected');
}
}
window.onload = function() {
var seats = document.getElementsByClassName('seat');
for(var i = 0; i < seats.length; i++) {
seats[i].addEventListener('click', handleSeatClick);
}
}
td {
width: 30px;
height: 30px;
background-color: red;
color: white;}
td.selected {
background-color: black;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td class="seat">1</td>
<td class="seat">2</td>
<td class="seat">3</td>
<td class="seat">4</td>
<td class="seat">5</td>
</tr>
</table>
</body>
</html>
Hope this will help.
window.onload = function() {
var seats = document.getElementsByClassName('seat');
for(var i = 0; i < seats.length; i++) {
seats[i].onclick = function() {
this.classList.toggle('selected'); //this will refer current object here and toggle is function
}
}
}
td {
width: 30px;
height: 30px;
background-color: red;
color: white;}
td.selected {
background-color: black;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td class="seat">1</td>
<td class="seat">2</td>
<td class="seat">3</td>
<td class="seat">4</td>
<td class="seat">5</td>
</tr>
</table>
</body>
</html>
What I have
I have a HTML & javascript code : The javascript generate a random_number and use it as indexing on the array of images.Then,the script add the selected picture to the <img> tag of html code.
It's works very well.
What I need
I want to make the tags as background_image(display texts in it,buttons and more). Is there any way to do it? /searched lot of in google and there's no excellent result/.
Thank you for help. :(
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image
};
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--width:45%; margin: 10px;-->
<div id="container1" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
</body>
</html>
If you need to apply those random images as a background, it will be set as a background image of a div and not an img, so replace your img with a div and instead of writing:
comp1GameImage.src = cGamePic[randomItemContainer1];
You will need to write:
comp1GameImage.style.backgroundImage = "url('"+ cGamePic[randomItemContainer1]+"')";
Where comp1GameÎmage is your div.
Here's your updated Snippet:
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg", "http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer1] + "')";
//cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer2] + "')";
//cGamePic[randomItemContainer2]; //Random image
};
#container1,
#container2 {
display: inline-block;
width: 45%;
height: 100%;
float: left;
margin: 10px;
}
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--width:45%; margin: 10px;-->
<div id="container1">
<h1>Title</h1>
</div>
<div id="container2">
<h1>Title</h1>
</div>
</body>
</html>
EDIT:
To make the two divs split the page into two frames, give them these styles:
#container1, #container2{
display:inline-block;
width:45%;
height:100%;
}
You could make images look like background (NOT in background) by overlapping H1 on IMG using CSS :
[id*=container] {
position:relative; /*--container is relative*/
}
h1 {
position:absolute; /*Image title is absolute*/
top:30px;
left:30px;
}
DEMO :
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image
};
[id*=container] {
position:relative;
}
h1 {
position:absolute;
top:30px;
left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--width:45%; margin: 10px;-->
<div id="container1" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
I cannot seem to make my javascript .click() method work with my dynamically created divs. In this code I have divs created each under the class name "class1" but my click method does not seem to detect their existence. Here is my code:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
}
// window.onload = populate;
$(function () {
$("container2").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<div id="myBox">Hello World!</div>
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
#Html.DropDownList("centres")
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
And here is what it returns (taken from google chrome):
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Description of your web page goes here." />
<meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this list short and relevant to the content and title of this specific page." />
<title>OneEighty Asset Manager
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
<p></p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<!-- end #menu -->
<div id="wrapper">
<div class="btm">
<div id="page">
<h1>
<img src="../../Content/Images/1Eighty.png" alt="" style="height: 100px; width: 750px;" /></h1>
<div id="content">
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
}
// window.onload = populate;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#container2").on("click", ".class1", function () {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
<select id="centres" name="centres"><option>Southdale</option>
<option>Sasolburg</option>
<option>Sandton City</option>
<option>Greenstone</option>
<option>Morningside</option>
<option>Easgate</option>
<option>Bedfordview</option>
<option>Fourways</option>
<option>Linksfield Terrace</option>
<option>Carlton Centre</option>
<option>testcentre1</option>
<option>testcentre2</option>
<option>testcentre3</option>
</select>
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
</div>
<!-- end #content -->
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
</div>
</div>
<div id="footer">
<p>
Copyright (c) 2009 1eightyintra.com. All rights reserved.
</p>
</div>
<!-- end #footer -->
</body>
</html>
Because the element doesn't exist in the DOM on page load, you need to use an event delegate, such as on:
$(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
Or for pre-1.7 jQuery, use delegate:
$(function () {
$("body").delegate(".class1", "click", function () {
alert("The div was clicked.");
});
});
click only binds handlers to elements that were present in the DOM when you called it.
Instead, use the jQuery on method:
$(document).ready(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
You will need to re-apply the click handler to the newly created divs.