on div click show all divs with X id [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want that when I click on one of the circle it shows the next row of circles. But can only have on with is-selected class. This is the code I have:
<table>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
</table>
Javascript:
$('.can-select1').click(function(e){
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
});
CSS:
.can-select1 {
cursor:pointer;
opacity:0.4;
}
.can-select-text{
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px 'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
cursor:default;
opacity:1.0;
}
.nothing1{
cursor:default;
opacity:0;
}
JS fiddle: http://jsfiddle.net/p3Q7Z/7/

It's hard to tell what you actually want but this should help:
http://jsfiddle.net/p3Q7Z/8/
First, ids must be unique. I removed them.
Next, I added the line:
$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1');
This traverses from the button, up to the parent td, to the next sibling td, looks for its .nothing1 button, and makes it clickable.
Also, I changed the click handler line to:
$('table').on('click','.can-select1',function(e){
So the handler will apply when classes are added and removed. As you had it, the handler will only apply to the elements that existed when the page loaded for the first time.
edit
To modify all next td in the column:
$(this).closest('td').nextAll('td').each(function() {
$(this).find('.nothing1').removeClass('nothing1').addClass('can-select1');
});
edit after chat, here's a re-write
http://jsfiddle.net/p3Q7Z/12
Use radio buttons and labels:
<td class="column-0 selectable">
<input type="radio" name="column-0" id="column-0-row-0">
<label for="column-0-row-0">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png">
<div>1</div>
</label>
</td>
Do all the styling in css without names:
td input[type="radio"] {
display: none;
}
td input[type="radio"] + label {
display:none;
cursor:default;
opacity:0;
position: relative;
}
td input[type="radio"] + label img {
vertical-align: middle;
}
td input[type="radio"] + label div {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
color: #111;
}
td.selectable input[type="radio"] + label {
display:block;
cursor:pointer;
opacity:0.4;
}
td.selectable input[type="radio"]:checked + label {
cursor:pointer;
opacity:1.0;
}

Related

How can I align three elements in a legend tag in the same line?

I have three elements: a letter in a <h1> tag, a <hr /> tag and an image.
This is how they are in html:
<h1 class="red">&nbsp A &nbsp</h1>
<hr />
<img src="Immagini\images1.png">
I put all into a <legend> tag, like this:
<legend align="right"><h1 class="red">&nbsp A &nbsp</h1><hr /><img src="Immagini\images1.png"></legend>
but the elements are not aligned in the same line, they are one over the other.
How can I align all the elements in the same line?
This is the complete html:
<fieldset class="accordion"><legend align="right"><h1 class="red">&nbsp A &nbsp</h1><hr /><img src="Immagini\images1.png"></legend></fieldset>
The class="red" is only to give the red color.
The class="accordion" only contains this:
.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}
Definitely, I want something like this:
<hr width="45%" style="float: left" /><h1 class="red" style="float: left">&nbsp A &nbsp</h1><hr width="15%" style="float: left" /><img src="Immagini\images1.png" style="float: left">
but all aligned on the same line and using the <fieldset> border instead of the <hr /> left tag.
An example of the fieldset I use can be found here: Animated Series.
Solved with this:
.rightalign {
display:inline-block;
vertical-align:middle;
}
.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}
<fieldset class="accordion"><legend style="width: 52%" align="right"><h1 class="rightalign" style="color: red">&nbsp A &nbsp</h1><hr width="45%" class="rightalign" color="#e3e3e3" /><img src="Immagini\images1.png" class="rightalign">
</legend></fieldset>
But now, when I change the size of the window, all returns not aligned.
How can I solve this?
/*css part */
h1,hr,img
{
display:inline-block;
vertical-align:middle;
}
/* this will work */
You can use display:inline (this prevents width and height) and display:inline-block in style attribute for same line.
However you can easily use display:flex on the parent of these elements
You can use display:inline-block for both legend and inner element.
Here is the code sample-
.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}
.legend {
display: inline-block;
vertical-align: middle;
width:100%;
}
<fieldset class="accordion">
<legend class="legend">
<hr style="display:inline-block" width="45%"/><h1 class="red" style="display:inline-block">&nbsp A &nbsp</h1><hr width="15%" style="display:inline-block"/><img style="display:inline-block" src="Immagini\images1.png">
</legend>
</fieldset>
You can also use display:flex but the problem is with the fieldset and legend tags. fieldset and legend tag not work with flexbox. You can see this answer for more details.

File upload and data (text) form into HTML table [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I`m trying to make a form that has 3 inputs:
image (file) upload
1st text field
2nd text field (that saves entered text as .txt file and displays a link in the third column)
After entering all 3 inputs, I would like to add the data into existing html table as an additional row.
Could you please suggest where should I start? Do I need to use mySQL in order to accomplish this? Or I can only use PHP and jQuery?
Here is the link to my page: https://jsfiddle.net/tvLn0qw7/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:white;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 1000px;
background-color: #FFFFFF;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%;
border: 2px solid #000000;
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
text-align: center;
margin: 0 auto;
}
div#header p {
font-style:normal;
font-size:1.1em;
margin:0;
}
div#content {
padding:0em 0em 5em; /* bottom padding for footer */
border-color: #000000;
border: 2px;
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
text-align:center;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:0.5em;
margin:0;
}
table {
margin: auto;
text-align: center;
color: #0454A8;
font-size: xx-large;
font-style: normal;
font-weight: bold;
border: 1px;
border: #000000;
}
body,td,th {
color: #000000;
}
#upload {
margin: auto;
text-align: center;
}
a:link {
color: #3757A3;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/crown1.png" width="108" height="77" alt=""/><br><br>
<p>Databse</p>
</div>
<div id="content">
<br><br>
<table width="600px" border="2" cellpadding="15" cellspacing="5">
<tbody>
<tr>
<th style="font-size: medium" scope="col"><div align="center">SCREENSHOT</div></th>
<th style="font-size: medium" scope="col">#</th>
<th style="font-size: medium" scope="col">TEXT FILE</th>
</tr>
<tr>
<th width="111" style="font-size: medium" scope="col"><div align="center"><img src="images/b0.png" width="200" height="113" alt=""/></div> </th>
<th width="8" style="font-size: medium" scope="col">1</th>
<th width="79" style="font-size: medium" scope="col">sample.txt</th>
</tr>
</tbody>
</table>
<br><br> <br>
<<br> <br><br>
<div id="upload"><form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
<br><br>
Type #:
<input type="text" size="100">
<br><br>
Insert text here:
<input type="text" size="100">
</form>
</div>
<br><br><br>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thank you very much.
You're going to need to use mySQL and PHP to do it. PHP is server side scripting and mySQL is database management. You could use jQuery Ajax, but you are going to need some kind of database to accomplish what you're after.
Edit: Forgot to specify if you want it forever it needs to be in some kind of database.

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});
Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2
I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}

How to open popup window from each of dynamically generate tr

I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?
Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.

on click change next TD table

I want to make a table that when we click a box it unclock next column one.
I made this work with two tds and it works, but when I replicate it it doesnt work.
My ideias where, If I have a TD that has a class (can be cliqued), then the java script will allow us to click there and change next tds or even next column class to be clicked like the one before and changes that class to a non clickable one so we dont click there again.
My code for 2 tds is this one:
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
JS:
$('.can-select1').click(function(e){
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
var nextTd;
nextTd=$(this).parent().find('.nothing1');
nextTd.find('.nothing').addClass("can-select1");
nextTd.addClass("can-select1");
nextTd.removeClass('nothing1')
});
CSS:
.can-select1 {
cursor:pointer;
opacity:0.4;
}
.can-select-text{
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px 'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
cursor:default;
opacity:1.0;
}
.nothing1{
cursor:default;
opacity:0;
}
JSFIDDLE for 2 td: http://jsfiddle.net/p3Q7Z/5/
JSFiddle for table: http://jsfiddle.net/p3Q7Z/6/
I don't watch for your first code (working), just for your the second (not working).
I have to change the line.
nextTd=$(this).parent().find('.nothing1');
to
nextTd=$(this).parent().next().find('.nothing1');
Just it.
That is, parent() reaches the first 'td'; next() reaches the second, where you can find the element with the specified class.
You can select the next TD with .next() : http://api.jquery.com/next/

Categories