I have a 10 x 10 with data table that is created using html tags. If it is possible to create a onClick function to each cell? I mean, if I click on a cell, then it gives me its value in a n alert window? If yes, then how?
Plain JS - assuming <table id="table1">:
window.onload=function() {
var cells = document.getElementById('table1').getElementsByTagName('td');
for (var i=0, n=cells.length;i<n;i++) {
cells[i].onclick=function() { alert(this.innerHTML) }
}
}
A good example could be found here
HTML CODE:
<div id='page-wrap'>
Your content goes here.
<a id='show' href='#'>show overlay</a>
JavaScript & JQuery:
$(document).ready(function() {
$("#show").click(function() {
showPopup();
});
$("#popup").click(function() {
$(this).hide();
$("#mask").hide();
});
});
function showPopup() {
// show pop-up
$("#mask").fadeTo(500, 0.25);
// show the popup
$("#popup").show();
}
---------------------------------------
CSS CODE:
* { margin: 0, padding 0}
#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 10000;
}
#popup
{
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #333;
background-color: #ffffdd;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 10001;
display: none;
}
[![enter image description here][1]][1]
Related
So I have a pop up that originally showed on every webpage. After some modification to include the use of cookies to stop the webpage loading every single session, the pop up no longer shows. I can't figure out why and after extensive testing, research and just straight up asking for help I've concluded I do not have enough of an understanding on the subject.
If anyone is able to help me understand why its not working and help with a solution.
<div id='popup' style="display:none">
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
Test!
<br />
<br />
OK
KO
</p>
</div>
</div>
<script>
function setCookie(cname, cvalue) {
window.document.cookie = cname + "=" + cvalue;
}
function getCookie(cname) {
var ca = decodeURIComponent(document.cookie).split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim().split('=');
if (cname == c[0] && c.length > 1) {
return c[1];
}
}
return "";
}
function checkCookie() {
if (getCookie("ageverification") == "") {
$('#popup').show();
$('#popup a.close').click(function ( event ) {
event.preventDefault();
$('#popup').hide();
setCookie("ageverification", 'true');
});
$('#popup a.goBack').click(function ( event ) {
event.preventDefault();
goBack();
});
} else {
return null;
}
}
function goBack() {
window.history.go(-2);
}
checkCookie();
CSS "This is just on the same HTML page for now"
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
Is the element with id "popup" nested within (a child of) the element with id "overlay" ? If it is, the element with id "overlay" has got display:none; , meaning the popup might be displaying, but it's parent is not. Try replacing:
$('#popup').show();
with:
$('#popup, #overlay').show();
Another problem could be that the Javascript is executed before the browser added the element with id "popup" to it's DOM. Try replacing:
checkCookie();
with:
$(function () { checkCookie(); });
When a user clicks an image I would like it to clone as a fixed and more larger image but when I try to use the toggleClass() function, the image moves from it's previous location which I do not want. I want to be able to click an image and get a bigger view and be able to toggle it back while only limiting one image at a time
var count = 1;
$(document).ready(function(){
$(".img_box").click(function(){
if(count<2){
$(this).clone().attr({ 'class': 'img_box' + count }).appendTo(".zoom");
$(this).toggleClass("zoom");
count++;
}
});
});
.img_container {
justify-content: center;
display: inline-flex;
margin: 5px;
list-style: none;
}
.img_box {
height: 100px;
margin: 5px;
cursor: pointer;
}
.img_box1 {
}
.zoom {
position: fixed;
max-width: 55%;
height: 85%;
left: -50%;
right: -50%;
top: 9%;
margin: auto;
padding: auto;
z-index: 9999;
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img_container'>
<li><img class='img_box' src='http://3.bp.blogspot.com/-0llDSWL9Xm0/Ta0fJ3ulMDI/AAAAAAAAAAk/G5O-DfxD3PI/s1600/7.jpg' ></li>
</div>
<div class='img_container'>
<li><img class='img_box' src='https://ichef.bbci.co.uk/images/ic/1200x675/p049tgdb.jpg' ></li>
</div>
<div class='img_container'>
<li><img class='img_box' src='http://3.bp.blogspot.com/-uctFXnJjKvc/UCF-SlHorHI/AAAAAAAAAIU/Y4vtiVI1Jjk/s1600/animal+(5).jpg' ></li>
</div>
<div class='img_container'>
<li><img class='img_box' src='http://1.bp.blogspot.com/-g913BsBiiq4/UAFN4Z2XQBI/AAAAAAAADtc/EdyJQODnHBw/s1600/baby-animal-wallpapers-1.jpg' ></li>
</div>
It should work.
var zoom = false;
$(document).ready(function(){
$(".img_box").click(function(){
if(!zoom){
$(this).clone().attr({ 'class': 'img_box zoom' }).insertAfter(this).click(function(){$(this).remove();zoom=false;});
//$(this).toggleClass("zoom");
//count++;
}
});
});
Basically I was also thinking about .insertAfter(this) idea. Added a fiddle here guessing the functionality expected. Can give it a look.
I removed the zoomed image if the count is larger and decremented the count again so that a new image can be clicked and zoomed.
var count = 1;
$(document).ready(function(){
$(".img_box").click(function(){
if(count>1)
{
$('.img_box1').remove();
count--;
}
$(this).clone().attr({ 'class': 'img_box' + count+' zoom' }).insertAfter(this);
//$(this).toggleClass("zoom");
count++;
$(".img_box1").click(function(){
$('.img_box1').remove();
count--;
});
});
});
You can do it like this: https://codepen.io/creativedev/pen/PBpjVP
JS
var count = 1;
$(document).ready(function(){
$(".img_box").click(function(){
if(count<2){
$(this).clone().attr({ 'class': 'img_box' + count }).appendTo(".zoom");
count++;
} $(this).toggleClass("zoom");
});
});
CSS:
.img_container {
justify-content: center;
display: inline-flex;
margin: 5px;
list-style: none;
}
.img_box {
height: 100px;
margin: 5px;
cursor: pointer;
}
.img_box1 {
}
.zoom {
width: 100%;
height: 100%;
margin: auto;
padding: auto;
z-index: 9999;
border: 1px solid blue;
}
In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}
Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}
how to use same popup jquery for two div. i have a jquery for the popup and it is div popup and i want to use the same jquery for another div. please help. the code is given below
<head>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style>
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}</style>
</head>
<body>
<div id="ack" class="topopup">Location</div>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content" width="400px" height="500px">
<input type="text" name="mm" id="id">
<button id="ok">ok</button>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
jquery for popup. i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$("button#ok").click(function() {
disablePopup();
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div
you never used a <a class="topopup1"></a>?
My suggestiong is that a target attribute can be added to <a> to imply which div will be poped up.
for example:
html code
<a class="popup-button" target="#p1"></a>
<a class="popup-button" target="#p2"></a>
<div class="toPopup" id="p1">...</div>
<div class="toPopup" id="p2">...</div>
js code
$(".popup-button").click(function{
loading($(this).attr("target")); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup($(this).attr("target")); // function show popup
}, 500); // .5 second
});
function loading(selector) {
$(selector).show();
}
function loadPopup(selector) {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$(selector).fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
Use class name with your anchor tags
<a class='topopup1'>Show Popup</a>
Live link here: http://tbremer.com/
Try Architecture or Concert to see problem
My issue is that when my images are added the viewport doesn't scroll or extend to allow for the new content.
I need to understand what the root issue is here and hopefully find a work around.
Thanks!
OK, sorry here is the pertinent code.
CSS:
/* Content Wrapper */
#contentWrapper {
padding: 0px;
margin: 0px;
width: 100%;
height: 99%;
z-index: 0;
border: 0px solid #600;
}
/* Image Viewer */
#imageViewer{
position: fixed;
left: 0px;
top: 0px;
padding: 0px;
padding-left: 350px;
margin: 0px;
border: 0px solid #F0F;
visibility: hidden;
}
.portImage {
padding: 0;
margin: 4px;
border: 1px solid #000;
display: inline;
}
HTML:
<div id="contentWrapper">
<div id="imageViewer"></div>
</div>
JAVASCRIPT:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
$("#imageViewer").empty();
$("#imageViewer").css("visibility", "hidden");
//___ Get server response.
var responseArray = xmlhttp.responseText.split(',');
responseArray.pop();
//console.log(responseArray.length);
//console.log(responseArray);
for(var i=0;i<responseArray.length;i++){
$("#imageViewer").append("\
<div id='portImage"+i+"' class='portImage'>\
<img src='"+responseArray[i]+"' height='500'>\
</div>\
");
}
$(".portImage").each(function() {
var image = $("<img />").attr('src', this);
});
//$("#imageViewer").append("Test");
$("#imageViewer").css("visibility", "visible");
}
}
Position:Absolute on the imageViewer not fixed. That is all you have to change.
You need to remove the height from #contentWrapper and position: fixed from #imageViewer.
(And please post your code here.)