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
Related
I am working on a project. I want the background color to change when two checkboxes are checked. I tried the code below and it failed. I see the code working when we delete it "edit-container2" but I dont want it. I want the Javascript code to work on a different div. (Different example, CSS Body background changes color.) How can I implement the solution?
Important: The code must be JavaScript. It's possible?
$('.edit-container input[type="checkbox"]').change(function() {
var container=$(this).parent('.edit-container');
if(container.find('#a1:checked,#a2:checked').length==2)
container.css('background','red');
else
container.css('background','');
});
.edit-container2 {width:100px; height:100px; }
.edit-container { width:200px; height:200px;}
<div class="edit-container">
<div class="edit-container2">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
</div>
</div>
Jsfiddle: http://jsfiddle.net/3DPLd/17/
You are looking for wrong parent. First get .edit-container2 and then .edit-container.
Check this.
$('.edit-container input[type="checkbox"]').change(function() {
var container=$(this).parent('.edit-container2').parent('.edit-container');
if(container.find('#a1:checked,#a2:checked').length==2)
container.css('background','red');
else
container.css('background','');
})
.edit-container2 {width:100px; height:100px; background:green;}
.edit-container {background:blue; width:200px; height:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-container">
<div class="edit-container2">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
</div>
</div>
Rather than chaining an arbitrary amount of .parent methods, just use .parentsUntil('.edit-container'):
$('.edit-container input[type="checkbox"]').change(function() {
var container=$(this).parentsUntil('.edit-container'); // changed this line here
if(container.find('#a1:checked,#a2:checked').length===2) { // use triple equals, not double
container.css('background','red');
} else {
container.css('background','');
}
});
.edit-container2 {width:100px; height:100px; }
.edit-container { width:200px; height:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-container">
<div class="edit-container2">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
</div>
</div>
I think this will solve your problem.
$('.edit-container2 input[type="checkbox"]').change(function() {
var container = $(this).parent().parent();
if ($('#a1').is(':checked') && $('#a2').is(':checked')) {
container.css('background', 'red')
} else {
container.css('background', '');
}
});
First, I would apologize for my grammar I'm french (and like I already said frenchy su** in grammar, but I'm trying to improve myself)
So, I've an table with array who is automatically generated with the upload of an excel list. The table who is generated contain checkboxes. When you click on a checkboxes you've an Div who appears. In this div you can wrote a text who is reported in the excel document and you've to submit for validation. Summary this is for a guest check-list.
The length of the table is variable and I would align the Div with the checkbox who is clicked. (You click and just to the right there is the div who appears).
I've try with a fixed position but this is not enought precise. Somebody can tell me how I can do this or where I've to search ?
<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="test.css" media="all"/>
<title>Ceci est une page HTML de test</title>
</head>
<script type="text/javascript" language="JavaScript" src="find5.js">
<form action = "check.php" method="GET">
<div class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" /><label>Vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
Cacher</div>
<ul>
<?php
error_reporting(0);
include("script.php");
$i = 1;
foreach ($invites as $invite)
{
if($invite[0] != '' && $invite[1] == '')
{
echo ' <li>
<div class="circle" style="float:left;"></div>
<h4>'.$invite[0].'</h4>
<input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'" type="checkbox" style="visibility:hidden" />
<label for="'.$i.'"><i class="fa fa-check"></i></label>
</li>';
}
$i++;
}
Hum I don't know if this is more clear with the code, but the Div wich I want dynamically align is "SlidingDiv"
Thanks !
First of all, the HTML structure with some useful classes.
<form action = "check.php" method="GET">
<!-- This div will never be used directly but rather cloned-->
<div id="originalSlidingDiv" class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" />
<label>Vestiaire</label>
<input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
<!-- We add different classes to the "Cacher" button and to the checkbox as they must behave a bit differently-->
Cacher
</div>
<ul>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">bla</h4>
<input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" />
<label for="a"><i class="fa fa-check"></i></label>
</li>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">blo</h4>
<input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" />
<label for="b"><i class="fa fa-check"></i></label>
</li>
</ul>
</form>
Then, the jQuery to make it work properly:
$(document).ready(function(){
var originalSlidingDiv = $('#originalSlidingDiv'),
slidingDiv;
$(".slidingDiv").hide();
$(".show_hide").show();
// When clicking each item's checkbox.
$('.show_hide_cb').on('click', function() {
// Check if we appended the slidingDiv already.
slidingDiv = $(this).parent().find('.slidingDiv');
// If not, we clone it, remove its id then append it to the parent (.item).
if (slidingDiv.length === 0) {
slidingDiv = originalSlidingDiv.clone(true, true)
.attr('id', '')
.appendTo($(this).parent());
}
// Finally we toggle display.
slidingDiv.slideToggle();
});
// When clicking the hide button (Cacher).
$('.show_hide_btn').on('click', function(e) {
e.preventDefault();
// $(this).parent() is the .slidingDiv element, we toggle display.
$(this).parent().slideToggle();
// $(this).parent().siblings('.show_hide_cb') is the checkbox, we want it to be unchecked.
$(this).parent().siblings('.show_hide_cb').attr('checked', false);
});
});
You can find enough explanations in the comments. Basically this will clone the .slidingDiv when necessary, append it to the clicked item, and toggle its display, but also will hide the slidingDiv when we click the button "Cacher". It will also uncheck the checkbox to get back to the initial state.
Finally, the little CSS to make it look as you wanted:
.slidingDiv {
text-align: center;
float: left;
}
.item {
margin-top: 1em; /* add some margin as it's removed from the h4 */
}
.circle {
float: left;
}
.item-name {
display: inline-block;
margin-top: 0; /* remove the margin to allow alignment */
}
JSFiddle: https://jsfiddle.net/superbiche/fhqcvbpe/
And yeah, I'm french too :)
There's going to be a lot of different answers to this question! Here's another simple way of doing this.
The reason fixed positioning doesn't work is because fixed always aligns to the window. Meaning, adding position: relative; to its parent element doesn't bind a fixed element. So you have to work with absolutely positioned elements or with pseudo elements.
$('.radio-list a').click(function() {
$('#popup').css({top: $(this).parent().offset().top, left: $(this).parent().position().left + $(this).parent().outerWidth()});
console.log($(this).position(), $('#popup').position());
});
.radio-list {
position: relative;
height: 500px;
width: 25%;
overflow-y: scroll;
}
.radio {
height: 50px;
line-height: 50px;
border: 1px solid #1e1e1e;
}
#popup {
position: absolute;
border: 1px solid red;
width: 300px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="radio-list">
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
</div>
<div id="popup">
Hi I'm the popup
</div>
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
My code is working fine. I just want to make the hidden div visible. It is hidden by default. It show the div when I click on the link. I need a help to show the div by default. I tried few things but i am not able to find the right way.
#morelist {
padding:0;
margin:0;
list-style:none;
padding-right:50px;
float:left;
font:15px/18px'Playfair Display', serif;
}
.show {
cursor:pointer;
}
.show b {
font-weight:normal;
}
.hidden {
display:none;
float:left;
width:400px;
}
.clear {
clear:both;
}
$(document).ready(function () {
$(".hidden").hide();
$(".show b").html("Show");
$(".show").click(function () {
if (this.className.indexOf('clicked') != -1) {
$(".hidden").hide();
$(this).removeClass('clicked')
$(this).children("b").html("Show");
} else {
$(".hidden").hide();
$(".show").removeClass('clicked');
$(".show").children("b").html("Show");
current = $(this).children("b").attr("class");
$("#" + current).show();
$(this).addClass('clicked')
$(this).children("b").html("Hide");
}
});
});
<ul id="morelist">
<li class="show"><b class="aform">Show</b> a Form</li>
<li class="show"><b class="apicture">Show</b> a picture with text</li>
</ul>
<div id="aform" class="hidden">
<h3>Enter your login password below:</h3>
<form id="two" action="..." method="post">
<fieldset id="personal">
<label for="login">login :</label>
<input name="login" id="login" type="text" tabindex="1" />
</fieldset>
<p class="buttons">
<input id="button1" type="submit" value="Send" />
<input id="button2" type="reset" value="Reset" />
</p>
</form>
</div>
<div id="apicture" class="hidden">
<img src="more_and_more/image.jpg" title="" alt="pretty woman portrait" />
<h3>Pretty woman portrait</h3>
</div>
Demo
If you don't want it to be hidden, don't put "hidden" in the class of the div in question.
If your goal is to only have one of 2 element show at a time, then you can start with the one you want initially hidden to have the hidden class, and then use jQuery's toggleClass("hidden") on the two elements: this will remove hidden from the one that has it (hence, showing it) and add it to the one that doesn't (thus, hiding it).
I think the div that's hidden by default is this one?
<div id="apicture" class="hidden">
You gave it the default class "hidden" there.
".hidden" is declared as "display: none;" in your CSS code.
If you want it to be displayed by default it needs another display value. Standard is "display: inline;" as far as i know.
Hope this solves your problem.
You can achieve this in many ways. One of it is to change the css attribute of the element as follows
.hidden {
display:BLOCK;
float:left;
width:400px;
}
You can either remove it like this
.hidden {
float:left;
width:400px;
}
Or you can remove the class of the div you don't want to be hidden.
<div id="apicture" class="hidden">
will become
<div id="apicture">
and
<div id="aform" class="hidden">
should be
<div id="aform">
Hope this will help.
So I have browsed all over, including these posts:
Jquery change image on click
JQuery - how can I change an image src on click of a link
http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone
and other links as well and I guess I don't understand how it works and can't get it to work.
Here is what I have so far:
HTML:
<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">
<ul style="width:450px; height:220px; list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
<li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
<li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>
</ul>
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/2nd.png" />
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/1st.png" />
</div>
</div>
This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:
$(function () {
$('.menulink').click(function () {
$("#bg").attr('src', "images/imagegraph1.png");
return false;
});
});
Matched up with this HTML:
switch me
<img src="images/imagegraph2.png" id="bg" />
And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.
Try e.preventDefault();
$(function () {
$('.menulink').click(function (e) {
e.preventDefault();
$("#bg").attr('src', "images/imagegraph1.png");
});
});