Develop Reference

add style with javascript to each element

I want add class to my div
but I have so many div and any time clicked button just add or remove on one div in html
how can I do?
is there any way to use value or id?
such as that link in command
if you lock i have to button to show&hide dive but no matter which one is clicked it's just add class to first one

If you mean for toggle class slow you can use e.target with next() for toggle element like:
$('.toggle').click(function(e) {
$(e.target).next().toggle('slow');
});
body {padding:30px;}
#target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle">Show & Hide</button>
<div>
<p>test1</p>
</div>
</div>
<div>
<button class="toggle">Show & Hide</button>
<div>
<p>test2</p>
</div>
</div>
Or you can use data-target like:
$('.toggle').click(function(e) {
$('#'+ e.target.dataset.target).toggle('slow');
});
body {padding:30px;}
.target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle" data-target="target-1">Show & Hide</button>
<div id="target-1" class="target">
<p>test1</p>
</div>
</div>
<div>
<button class="toggle" data-target="target-2">Show & Hide</button>
<div id="target-2" class="target">
<p>test2</p>
</div>
</div>
Another rule you must learn, id must be unique.
Reference:
Event.target
.next()
Using data attributes
id

You can have many divs with the same class but if your looking to do something more specific to a particular div you have to use id or a seperate class. Read more about CSS selectors
<div class="blue" id="standout">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
.blue{
text-align: center;
}
#standout{
text-overflow: ellipsis;
}

Add a class (or id) to the button like this:
<button class="foo-class" id="foo-id">Click me</button>
And then you can access the click on the button with the following javascript:
// class
document.querySelector('.foo-class').click(
// do something
);
// id
document.getElementById("foo-id").click(
// do something
);
See here for reference the id and here the reference for class.

Change picture on mouse click

I have this code with monitor size
<ul class="nav nav-pills large">
<li>19</li>
<li>22</li>
<li class="measure"><h4>inch <br>monitor</h4></li>
</ul>
now i want when user click on some size that picture change...
<div class="col-md-5">
<img src="img/pic1" class="img-responsive" alt="netbox2">
that is code for my picture..
I try with this jquery but it don't work.
<script>
$('classname').click(function() {
$('.filter').removeClass('classname');
$(this).addClass('classname');
});
</script>
how to use that data-toogle atributes?
Here is FIDDLE
I want when i click on first radio button to see only fisrt picture, on second other picture...

I believe what you are trying to do is toggleClass("classname").
$("img").click(function() {
$(this).toggleClass('classname');
});

To get the value of the data-toggle attribute simply do . .
$("#element").attr("data-toggle");
With the value you can then do
$('classname').click(function() {
dataToggle = $("#element").attr("data-toggle");
if(dataToggle == "foo"){
//do this
} else {
//do this instead
}
});
More info on .attr()

<style>
.small {
width:50px;
height:50px;
}
.medium {
width:150px;
height:150px;
}
.large {
width:250px;
height:250px;
}
</style>
<input type="radio" data-target="small" class="image-size" name="image"/> small <br/>
<input type="radio" data-target="medium" class="image-size" name="image"/> medium <br/>
<input type="radio" data-target="large" class="image-size" name="image"/> large <br/>
<img src="http://png-2.findicons.com/files/icons/524/web_2/512/facebook.png" class="img-responsive"/>
<script>
$(function(){
$('.image-size').on('click',function(){
$('.img-responsive').removeClass().addClass('img-responsive').addClass($(this).data('target'));
});
})
</script>
Here is the demo http://jsfiddle.net/mannejkumar/fbkvd/
Let me know if this doesn't meet your requirement

Checkboxes/radiobuttons unresponsive in expandable list form

Edit to answer: OK, so it seems this problem has come up before. The key seems to be in the return false; statement in the js prepareList function. I commented it out and now the code works fine. For more information and a more complete answer, here is the previous version of the question.
EDIT: Here's a jsfiddle that reproduces the error.
I'm trying to make a form using the expandable list code found here, and my checkboxes and radio buttons are either unresponsive or glitchy. They both know they're being pressed, they change to the depressed image when I click on them, but they don't update their value. For radio buttons, I can click one and it works, but then the others in that group become unresponsive. I have a dummy php page to just print out the results of the form, but it doesn't appear to be receiving any data. NOTE: This is my first website project, there may be something completely obvious that I'm just missing.
Here's a sample of the HTML:
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
And here's the javascript for the list function:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
And the relevant CSS:
#listContainer{
margin-top:15px;
}
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}

The issue here is with event.preventDefault() in your code. It's keeping the checkboxes / radio buttons from performing their default behavior. Removing that entry will allow the input tags to function normally. But they will no longer trigger the expand and collapse functionality you're looking for.
You'll need to modify your JS to also listen for the click on the checkboxes. Here are some similar situations that may help you:
making on-click events work with checkboxes
clicking on a div to check / uncheck a checkbox

Hide input button

Here is the code I have: http://jsfiddle.net/Draven/rEPXM/23/
I'd like to know how I can hide that Add submit button until I click the + image to add input boxes to the form.
I don't want to add the submit button next to the input box because I want to be able to add multiple input boxes and submit them all when I click Add.
HTML
<div id="left">
<div class="box">
<div class="boxtitle"><span class="boxtitleleftgap"> </span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><div class="addplus"> </div></div></span></div>
<div class="boxcontent">
<form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
<a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
<div id="foldercontainer"><input type="submit" value="Add"></div>
</form>
</div>
</div>
</div>
jQuery
function AddFolder() {
$('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}​

Just give the button an ID, and make it start hidden
<input type="submit" id="addButton" value="Add" style="display: none;">
Then use the show() jQuery method:
$("#addButton").show();
http://jsfiddle.net/TcFhy/

Here's a way you could do this... also, cleaned up the method used for making these input boxes a bit:
http://jsfiddle.net/mori57/4JANS/
So, in your html you might have:
<div id="foldercontainer">
<input id="addSubmit" type="submit" value="Add">
<input id="folderName" name="folder[]" type="text" size="20" style="" />
</div>
and your CSS might be:
#foldercontainer #addSubmit {
display:none;
}
#foldercontainer #folderName {
display:none;
width: 120px;
background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left;
color: #000;
border: 1px solid #cdc2ab;
padding: 2px;
margin: 0px;
vertical-align: middle;
}
and your script could be:
// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
folderAddCt = 0;
function AddFolder() {
if(is_vis == false){
// if it's not visible, show the input boxes and
$('#foldercontainer input').show();
// set the flag true
is_vis = true;
} else {
// if visible, create a clone of the first add-folder
// text box with the .clone() method
$folderTB = $("#folderName").clone();
// give it a unique ID
$folderTB.attr("id","folderName_" + folderAddCt++);
// and append it to the container
$("#foldercontainer").append($folderTB);
}
}​

I moved the button out of the folder wrap, and I am showing it when you add a new folder. This way the button will stay at the bottom when adding new folders. I also removed the inline style, and replaced it with a class.
This is used to display the button, just add it to the AddFolder() function:
$('#addBtn').show();
I am hiding it with CSS like this:
#addBtn { display: none;}
I moved the button out of the #foldercontainer, this way it will always stay at the bottom when you add multiple folders, as you wanted:
<div id="foldercontainer"></div>
<input id="addBtn" type="submit" value="Add">
Look here for the jsFiddle: http://jsfiddle.net/kmx4Y/1/

$('form#folderform input[type=submit]').hide();
Then show the add button after you click the submit
http://jsfiddle.net/SQh8L/

Javascript, html and css to create an overlay

I'm stuck for a while now with the following problem. I've created an website which contains an overlay. The overlay is placed in the html as below;
<html>
<body>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<!--More html - snipped-->
</div>
</html>
The css for the overlay and div#search is as below. There is a bit more css to style the form elements inside the div#search, but since I don't think it's relevant I left this out.
div#search
{
clear:both;
width:990px;
height:50px;
z-index:1002;
display:none;
position:absolute;
margin:49px 0px 0px 0px;
background-color:#FFF;
}
#overlay
{
background-color:#000;
position:fixed;
opacity:0.7;
display:none;
z-index:1001;
width:100%;
height:100%;
top:0;
left:0;
}
When a user clicks an menuitem to open the searchwindow the following bit of javascript is executed. The javascript is just a concept, but it works.
function showSearchBar() {
//Check if search bar is shown, if it is hide it, otherwise show it.
var isVisible = $("#search").is(":visible");
if (isVisible) {
//Hide the div
$("#search").fadeOut(600);
//hide the overlay
$("#overlay").hide();
}
else {
//Show the overlay
$("#overlay").show();
//Show the hidden div
$("#search").fadeIn(600);
//$("input#searchInput").watermark("Enter your criteria");
}
}
The problem here is that whenever the javascript is executed the overlay is being placed at the top of the page disabling every other element on the page, including the searchform. I want the searchform to be available to the users, so it should be on top of the overlay. It's probably a very small issue, but I don't see the problem here. What is causing the overlay to be placed over the searchform instead of the searchform being on top of the overlay?

Problem solved. I modified the html to look like this;
<html>
<body>
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
</div>
</html>
This was necessary because the wrapper has it's own z-index and is positioned relative. By placing the div#search as first element in the body I was sure that it lied on top of all other elements because of it's absolute positioning. Moving the html-element solved my problem. Other suggestions for improvement are welcome.