I have a razor view web page that has a div that i fill data into it in some way (lazy load, or loop, doesn't matter).
If i dont use a Layout, IE:
#{
Layout = "_Layout";
}
Then the div will use my configured height, and also shows a scrollbar if needed (using overflow: auto)
However, when i add a layout, even an empty one, i cannot seem to modify the div's height, which causes it to take all the screen from the layout to the bottom, and shows no scrolling.
What disabled my ability to change the height?
(the div im loading data into is div id container)
index.cshtml:
#{
Layout = "_Layout";
}
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
<head>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body style="overflow: hidden;">
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</body>
_Layout.cshtml:
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header class="main-header" role="banner">
<div>
<a href="/" title="Home" rel="home">
<img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
</a>
</div>
</header>
<div>
#RenderBody()
</div>
</body>
</html>
Empty _Layout.cshtml: (having issues with this layout as well)
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
Generated page (The empty layout was used):
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
</head>
<body>
<div>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
<head>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body style="overflow: hidden;">
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</body>
<script>
var pageSize = 50;
var pageIndex = 0;
var totalItemsDisplayed = 0;
$(document).ready(function() {
lazyLoadCards(0);
$('#container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).prop('scrollHeight');
var clientHeight = $(this).prop('clientHeight');
if (scrollTop + clientHeight === scrollHeight) {
pageIndex++;
lazyLoadCards(pageIndex);
}
});
function lazyLoadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function loadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
if (data.length > 0) {
loadCards(index + 1);
}
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function updateProgression() {
$('#Progression').text("Displaying " + totalItemsDisplayed + " Cards out of " + 6930);
}
});
</script>
</div>
</body>
</html>
Visual to see current output and desired outcome:
(Note that thetext inside the gray box is just elements with some text. thats what the ajax call does)
Generated code after adding #section and #style and removing body everyone besides _Layout
<!DOCTYPE html>
<html>
<head>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
</head>
<body>
<header class="main-header" role="banner">
<div>
<a href="/" title="Home" rel="home">
<img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
</a>
</div>
</header>
<div>
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: visible;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</div>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
<script>
var pageSize = 50;
var pageIndex = 0;
var totalItemsDisplayed = 0;
$(document).ready(function() {
lazyLoadCards(0);
$('#container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).prop('scrollHeight');
var clientHeight = $(this).prop('clientHeight');
if (scrollTop + clientHeight === scrollHeight) {
pageIndex++;
lazyLoadCards(pageIndex);
}
});
function lazyLoadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function loadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
if (data.length > 0) {
loadCards(index + 1);
}
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function updateProgression() {
$('#Progression').text("Displaying " + totalItemsDisplayed + " Cards out of " + 6930);
}
});
</script>
</body>
</html>
You should be using sections. Sections allow you to add styles, scripts, etc. on the layout. You can't have the head and body tags anywhere except the layout page.
Empty _Layout.cshtml:
<!DOCTYPE html>
<head>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
#RenderSection("Styles", required: false)
</head>
<body>
<div>
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
Index.cshtml:
#{
Layout = "_Layout";
}
#section Styles {
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
}
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
#section Scripts {
<script src="/JQuery/jquery-3.3.1.min.js"></script>
}
UPDATE
You need to make the following change:
<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">
You can't use a percentage for height unless you add position:absolute;. If you only want the vertical scroll bar, you'll need to use overflow-y:scroll; instead.
Related
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle
I am working on creating a playlist display from our YouTube videos. I thought I had this working, but I am having some issues with how it displays. See code below.
If I used display: block the paragraph is next to the video like I want, but I can't add any padding after the video so that the videos don't together. When I use display: inline-block I can control the bottom padding, but then some videos will display next to each other.
What am I missing in my CSS?
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
cache: false,
dataType: "jsonp",
success: function(json) {
var entries = json.feed.entry;
for (var i = 0; i < entries.length; i++) {
$('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
}
}
});
});
.videoElem {
display: block;
clear: both;
padding-bottom: 25px;
}
.ytVideo iframe {
float: left;
padding-right: 10px;
}
#media only screen and (max-width: 648px) {
.ytVideo iframe {
width: 100%;
height: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>
In addition to inline-block you can make it width:100% to stop multiple videos from appearing on the same line.
.videoElem {
display: inline-block;
width:100%;
}
Is this what you wanted?
The problem is that you are clearing the floats incorrectly. You can
Use clear: both on an element after the floats, but not to the container.
.videoElem:after {
content: '';
display: table;
clear: both;
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
cache: false,
dataType: "jsonp",
success: function (json) {
var entries = json.feed.entry;
for (var i = 0; i < entries.length; i++) {
$('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
}
}
});
});
.videoElem {
display: block;
padding-bottom: 25px;
}
.videoElem:after {
content: '';
display: table;
clear: both;
}
.ytVideo iframe {
float: left;
padding-right:10px;
}
#media only screen and (max-width : 648px) {
.ytVideo iframe {
width:100%;
height: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>
Use overflow different than visible on the container:
.videoElem {
overflow: hidden;
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
cache: false,
dataType: "jsonp",
success: function (json) {
var entries = json.feed.entry;
for (var i = 0; i < entries.length; i++) {
$('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
}
}
});
});
.videoElem {
display: block;
overflow: hidden;
padding-bottom: 25px;
}
.ytVideo iframe {
float: left;
padding-right:10px;
}
#media only screen and (max-width : 648px) {
.ytVideo iframe {
width:100%;
height: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>
I have a very simple CSS 100% example, that logically as I understand it, should work, but doesn't. Can someone please explain why?
HTML:
<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
Content
</div>
CSS:
html {
height:100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#header {
background-color:red;
padding: 0;
margin: 0;
}
#nav {
background-color:gray;
padding: 0;
margin: 0;
}
#title {
background-color:azure;
padding: 0;
margin: 0;
}
#content {
background-color:antiquewhite;
height:100%;
padding: 0;
margin: 0;
}
To my understanding, there should be no vertical scroll bar. Yet one appears.
Here is a fiddle to demonstrate: http://jsfiddle.net/codeowl/9wABW/
Thank you for your time,
Regards,
Scott
UPDATE:
Here is what I ended up doing:
I developed a stack and fill approach as follows. Unfortunately fiddle has an issue with me trying to access the window in java script, so I can only paste the code:
CSS:
#header {
background-color:red;
}
#nav {
background-color:gray;
}
#title {
background-color:azure;
}
#content {
background:green;
}
HTML:
<div id="header" class="stack-y">header</div>
<div id="nav" class="stack-y">Nav</div>
<div id="title" class="stack-y">title</div>
<div id="content" class="fill-y">
<div data-role="splitter"
data-panes="[
{ scrollable: false, collapsible: true, size: '300px' },
{ scrollable: false, collapsible: true }
]"
class="fill-y">
<div>
Left Pane
</div>
<div>
Right Pane
</div>
</div>
<div class="stack-y">Test Content</div>
</div>
Java Script:
$(document).ready(function () {
var fResizeLayout = null;
fResizeLayout = function() {
var aFillElements = $('.fill-y');
$.each(aFillElements, function (i, e) {
var p = null,
iPY = 0,
iY = 0,
iH = 0;
e = $(e);
p = e.parent();
if (p.prop('tagName') === 'body') { iPY = $(window).height(); }
else { iPY = p.innerHeight(); }
e.siblings('.stack-y').each(function () {
iY += $(this).outerHeight(true);
});
iH = (iPY - iY - parseInt(e.css('border-top-width'), 10) - parseInt(e.css('border-bottom-width'), 10));
e.height(iH);
});
kendo.resize($('#content'));
};
kendo.init($('#content'));
fResizeLayout();
$(window).on('resize', function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 200);
});
$(window).on('resizeEnd', function () {
fResizeLayout();
});
});
Of course you will need to include the kendo libraries for the kendo part to work.
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
Without the keno libraries:
HTML:
<div id="header" class="stack-y">header</div>
<div id="nav" class="stack-y">Nav</div>
<div id="title" class="stack-y">title</div>
<div id="content" class="fill-y">
Test Fill Content
</div>
<div class="stack-y">Test Stacked Content</div>
Java Script:
$(document).ready(function () {
var fResizeLayout = null;
fResizeLayout = function() {
var aFillElements = $('.fill-y');
$.each(aFillElements, function (i, e) {
var p = null,
iPY = 0,
iY = 0,
iH = 0;
e = $(e);
p = e.parent();
if (p.prop('tagName') === 'body') { iPY = $(window).height(); }
else { iPY = p.innerHeight(); }
e.siblings('.stack-y').each(function () {
iY += $(this).outerHeight(true);
});
iH = (iPY - iY - parseInt(e.css('border-top-width'), 10) - parseInt(e.css('border-bottom-width'), 10));
e.height(iH);
});
};
fResizeLayout();
$(window).on('resize', function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 200);
});
$(window).on('resizeEnd', function () {
fResizeLayout();
});
});
Credit to Carlos for the resizeEnd part: https://stackoverflow.com/a/12692647/2109254
Thanks to all those that contributed.
Hopefully this can help someone else.
Regards,
Scott
Edit
This will give exactly the layout you are looking for, using display:table-row in the wrapped content.
html {
height:100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#header {
background-color:red;
padding: 0;
margin: 0;
display: table-row;
height:1px;
}
#nav {
background-color:gray;
padding: 0;
margin: 0;
display:table-row;
height:1px;
}
#title {
background-color:azure;
padding: 0;
margin: 0;
display:table-row;
height:1px;
}
#content {
background:green;
padding: 0;
margin: 0;
display:table-row;
}
#wrapper {height:100%;width:100%;margin:0;padding:0;display:table}
<div id="wrapper">
<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
Content
</div>
</div>
Check your updated fiddle
You need a wrapper for the elements, depending on your specific layout you might want to play with table css attributes (display: table-row etc).
<div id="wrapper">
<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
Content
</div>
</div>
html {
height:100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#header {
background-color:red;
padding: 0;
margin: 0;
}
#nav {
background-color:gray;
padding: 0;
margin: 0;
}
#title {
background-color:azure;
padding: 0;
margin: 0;
}
#content {
padding: 0;
margin: 0;
}
#wrapper {height:100%;margin:0;padding:0;background-color:antiquewhite;}
instead of using height:100% use height:auto..and it will work..:)
Think about what you are doing. you are telling content to be 100% of it's containing element. This would be body.
Thus, content will take up the size of the window, but you still have three other divs with height, thus total content size will = 100% (body size) + header + nav + title
If you want to fix this, you could simply make the inner contents add up to 100% and adjust the percentages to what you need. Take a look:
http://jsfiddle.net/9wABW/3/
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>
<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.