I recently created a button that displays a black popup box with text (outside of the button itself) when the user scrolls over the button. I would like the box to be displayed when the button is clicked rather than hovered over and for the box to go away once the user clicks the button again. I have been told that this can't be done with CSS and I would have to use JavaScript. Pleas help. Thanks! Below is a fiddle link of how the button currently works.
http://jsfiddle.net/44hx4/2/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0016)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Theory of Operation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
margin-left: 0px;
margin-top: 0px;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:visited {color:#0000FF;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
body {
font: 16px/1.4 arial;
background-color: #7D8859;
}
body {
font: 16px/1.4 arial;
background-color: #7D8859;
}
.imgWrap {
position: absolute;
height: 76px;
width: 50px;
top: 556px;
}
.imgDescription {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.80);
color: #fff;
margin: -500px -340px 85px 50px;
padding: 10px;
z-index:10;
visibility: hidden;
opacity: 0;
/*remove comment if you want a gradual transition between states
-webkit-transition: visibility opacity 0.2s;
*/
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
</style>
<script src="../javascript/swfobject_modified.js" type="text/javascript"></script><script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
<script language="javascript" src="../javascript/configure.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/scorm.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/lms.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common2.js" type="text/javascript"></script>
<script type="text/javascript">
function popup(){
cuteLittleWindow = window.open("hey", "littleWindow", "location=no,width=320,height=200");
}
</script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/2-3_A.jpg','images/Module 3/3-0_A.jpg','images/Module 3/3-0_B.jpg','images/Module 3/3-0_E.jpg','images/Module 3/3-0_F.jpg','images/Module 3/3-2-1-7.jpg','images/Module 3/3-6-1a-5.jpg','images/Module 3/3-6-1a-2.jpg','images/Module 3/3-6-1a-1.jpg','images/module 4/4-2_A.jpg','interface/text_2.jpg')">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="800" height="600">
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
<tr> </tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','interface/text_2.jpg',1)">
<div class="imgWrap"><img src="interface/text_1.jpg" name="Image10" width="76" height="50" border="0" id="Image10" />
<p class="imgDescription">
HELLO!
</p>
</div></a></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
You could try something with jQuery like so Fiddle
$(function(){
$("#Image10").click(function(){
$(".imgDescription").toggleClass("show");
});
});
Although I personally would change to toggling display rather than visibility like in this Fiddle
Related
I can't get the scroll-bar to actually scroll on either axis
I've tried added the "overflow-y" property but that just makes the scroll bar appear, it doesn't actually let me scroll. I added the html file but removed all the content except what has to do with styling.
html
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div>...
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
css:
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
width: 100%
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
I want to be able to scroll if for example I make the browser small or if the browser is not big enough to show all of the content.
You need some content which is wider than the viewport in order to be able to scroll. I have added some in the code snippet below, without making any other changes to your code.
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div style="white-space: nowrap; color:white">This_is_a_reall_long_piece_of_text_which_will_be_wider_than_the_viewportttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
Basically, overflow will allow the page to scroll if the content larger than the screen.
Try this CSS: overflow: auto;.
Another way around if you still can't scroll is using this JavaScript:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and call the function from the <body> tag or from a <button> tag, whatever the event you want to use.
I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>
I made a button that displays text when hovered over but I would like for the text to be displayed once the user clicks the button and disappears once the user clicks the button again. The code is basically a button and text that displays "HELLO" in a black box set at .80 opacity. Any advice?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0016)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
margin-left: 0px;
margin-top: 0px;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:visited {color:#0000FF;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
body {
font: 16px/1.4 arial;
background-color: #7D8859;
}
body {
font: 16px/1.4 arial;
background-color: #7D8859;
}
.imgWrap {
position: absolute;
height: 76px;
width: 50px;
top: 556px;
}
.imgDescription {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.80);
color: #fff;
margin: -500px -340px 85px 50px;
padding: 10px;
z-index:10;
visibility: hidden;
opacity: 0;
/*remove comment if you want a gradual transition between states
-webkit-transition: visibility opacity 0.2s;
*/
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
</style>
<script src="../javascript/swfobject_modified.js" type="text/javascript"></script><script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
<script language="javascript" src="../javascript/configure.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/scorm.js" type="text/javascript"></script>
<script language="javascript" src="../javascript/lms.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common.js" type="text/javascript"></script>
<script language="Javascript" src="../javascript/common2.js" type="text/javascript"></script>
<script type="text/javascript">
function popup(){
cuteLittleWindow = window.open("hey", "littleWindow", "location=no,width=320,height=200");
}
</script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/2-3_A.jpg','images/Module 3/3-0_A.jpg','images/Module 3/3-0_B.jpg','images/Module 3/3-0_E.jpg','images/Module 3/3-0_F.jpg','images/Module 3/3-2-1-7.jpg','images/Module 3/3-6-1a-5.jpg','images/Module 3/3-6-1a-2.jpg','images/Module 3/3-6-1a-1.jpg','images/module 4/4-2_A.jpg','interface/text_2.jpg')">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="800" height="600">
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
<tr> </tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="800">
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','interface/text_2.jpg',1)">
<div class="imgWrap"><img src="interface/text_1.jpg" name="Image10" width="76" height="50" border="0" id="Image10" />
<p class="imgDescription">
HELLO!
</p>
</div></a></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
When i understand your question correct, you want a button which hover is different when the user has clicked on it?
You can do that by adding a class to the button, which handles the clicked CSS.
$('button').on('click', function () {
$(this).addClass('clicked');
});
And the the css
button { background: red; }
button:hover { background: green; }
button.clicked { background: orange; }
button.clicked:hover { background: black; }
Use innerText and innerHTML
Upon examining the code, you seem to have used some WISIWYG tool.
The tags on your question showed only javascript and html, css (your real work environment) and so I am assuming this in javascript and html, css.
Here is some code snippet you can copy and test
<!doctype html>
<head>
<script>
function changeButtonText(el){
if (el.value == "HELLO")
el.value = "GOOD BYE";
else el.value="HELLO";
el = document.getElementById("concerned_ptag");
if (el.innerText == "HELLO")
el.innerText = "GOOD BYE";
else el.innerText="HELLO";
}
</script>
</head>
<body>
<p id="concerned_ptag">
HELLO
</p>
<input type="button" value ="HELLO" id="concerned_button" onclick="changeButtonText(this);">
</body>
</html>
And styling the p tag is easier for you. otherwise, ping again.
When user clicks button, the text should appear, and when click again, disappear right?
$(document).ready(function(){
$('.bt').click(function(){
$(this).find('span').fadeToggle();
});
});
<a class="bt"><span>Button Text</span></a>
Check Fiddle for full CSS/HTML/jQuery:
http://jsfiddle.net/y45nY/1/
How can i solve this overflow at the top when I scroll down? This is an application in a facebook page. This is a google chrome snapshot.
HTML:
<!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=utf-8" />
<title><?php echo TITLE ?></title>
<link href="<?php echo CSS; ?>style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>-->
<script type="text/javascript" src="js/UnityObject2.js"></script>
<script type="text/javascript">
var config = {
width: 760,
height: 827,
params: {enableDebugging: "0"},
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function(progress) {
switch (progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "GermsBuster.unity3d");
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 760px;
}
.back{
z-index:10 !important;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 827px;
width: 760px;
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<div id="fb-root" class="_56b8"></div>
<div class="video-ar" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_ar.php">video ar</a>
</div>
<div class="video-en" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_en.php">video en</a>
</div>
<div class="fb-app-requests-container" style="display:none">request</div>
<div class="fb-user-info-container" style="display:none">user info</div>
<p class="header" style="display:none"><span><!--Unity Web Player | --></span><?php echo TITLE ?></p>
<div class="content" style="z-index:-1000 !important;">
<div id="unityPlayer" style="display:block; z-index:-1000 !important">
<div class="missing">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="images/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="images/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<!-- LIGHTBOX -->
<script type="text/javascript" src="js/lightbox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<!-- LIGHTBOX -->
</body>
</html>
The fan page "Canvas URL" is not designed by facbook to handle unity applications, use the app page "Canvas Page" instead. You will not face this issue there.
Add style in HTML tag-
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden">
Hope it helps
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Javascript Create Div Element Dynamically</title>
<style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
width:800px;
height:800px;
border:1px solid #000;
}
.myimage
{
height: 80;
width: 80;
top:100;
margin:5px;
}
.border
{
border:1px solid #000;
}
</style>
<script>
cc=1;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementByClassName('myimage').src="images/white_contact.png";
}
else if (cc==1)
{
cc=2;
document.getElementByClassName('myimage').src="images/yellow_contact.png";
}
else if (cc==2)
{
cc=3;
document.getElementByClassName('myimage').src="images/red_contact.png";
}
else
{
cc=0;
document.getElementByClassName('myimage').src="images/green_contact.png";
}
}
</script>
<script type="text/javascript" language="javascript">
var i=0;
function createDiv()
{
if(i < 6) {
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","left");
divTag.style.margin = "0px auto";
divTag.className ="ex";
divTag.innerHTML = "<img class='myimage' onclick='changeimage()' border='0' src='images/white_contact.png' width='100' height='180' />";
document.getElementById("newdiv").appendChild(divTag)
}
i++;
$( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
$( ".ex" ).droppable({ hoverClass:'border' });
}
</script>
</head>
<body>
<p align="left">
<b>Click this button to create div element dynamically:</b>
<input id="btn1" type="button" value="create div" onClick="createDiv();" />
<div id = "newdiv">
</div>
</body>
</html>
I have edit the ID to class, and change all to getElementByClassName, but still not working, the picture nvr change when I click on it
What is the problem............................................................................................................
The HTML specification requires ID attribute to be unique in a page (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2), so your HTML is actually not valid. You may want to use class attribute instead.