I want to add new div with same design on the box when I click on it! But I could click and it appears new divs as I wished, but I want to add one at the time not more than one. I mean if I click once and one new div should appear and if I click again 1 new div should appear. But when i clicked many times it adds more than one! Why?
$(".answered_box").click(function () {
$(".answered_box").prepend('<div class="answered_box"> hej </div>');
});
http://jsfiddle.net/jbNEC/
Thanks for the the help!
Do like this:
<div id="container">
<div class="answered_box"> test </div>
</div>
and jquery:
$(document).ready(function () {
$(".answered_box").live('click',function () {
$('#container').append($(this).clone());
});
});
Here is Fiddle DEMO
You may want to use this:-
$(this).prepend('<div class="answered_box"> hej </div>');
$(document).ready(function () {
$(".answered_box").click(function () {
// only apply on "this" and not on all members with the class.
$(this).prepend('<div class="answered_box"> hej </div>');
});
});
Your code is adding the div with class answered_box to all the divs with class answered_box. You should add the parent div and add divs to there.
Use this keyword it means to owner only the current div(class) will executed and other div's with same are omited.
$(document).ready(function () {
$(".answered_box").click(function () {
$(this).append('<div class="answered_box"> hej </div>');
});
});
Related
I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});
I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});
Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/
I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?
Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO
here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});
I am trying to check whether or not a particular element has been clicked but am having trouble doing so. Here is my HTML:
<div id="my_special_id" class="switch switch-small has-switch" data-on="success" data-off="danger">
<div class="switch-on switch-animate"><input type="checkbox" checked="" class="toggle">
<span class="switch-left switch-small switch-success">ON</span>
<label class="switch-small"> </label>
<span class="switch-right switch-small switch-danger">OFF</span>
</div>
</div>
Here is my jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
</script>
I am guessing that my id "my_special_id" is not what is actually being clicked?
I guess click event should have event parameter.
$(document).ready(function() {
$('#my_special_id').click(function(e) {
if (e.target check condition) {
window.alert('ON!');
}
});
});
parameter 'e' above specified is the event object that has all info about click event.
so if u check all info under 'e.tartget', u will be able to find out which one is clicked.
Hope it's helpful for you.
Cheers :)
Since you are looking for a alert when the checkbox is clicked
$(document).ready(function() {
$('#my_special_id input.toggle').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
Demo: Fiddle
Simply put alert when you click on that particular class switch-on
<script type="text/javascript">
$(document).ready(function() {
$('#my_special_id div:first-child .switch-on').on('click',function() {
window.alert('ON!');
});
});
</script>
Or even try like
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($(this + 'div:first-child').hasClass('switch-on')) {
window.alert('ON!');
}
});
});
This JavaScript works for me.
$(document).ready(function() {
$('#my_special_id').click(function() {
if ($('#my_special_id div:first-child').hasClass('switch-on')) {
alert("On!");
}
});
});
You are sure you have JQuery?
Your code looks fine I think either you have a syntax error somewhere else or you do not have JQuert.
does this alert?
$(document).ready(function() {
alert("Jquery works");
});
The click event will trigger to whatever you're bound do. the only time you'd have to be worried is if you bound to both a parent and child (e.g. you had listed #my_special_id,.switch-small--then you'd have to look at e.target).
With that said, you can use scope to limit how jQuery finds the div:first-child. I'm not 100% sure what you're after, but the below appears to do what you're after:
$(document).ready(function() {
$('#my_special_id').click(function() {
// look for div:first-child within `this` (where `this=#my_special_id`
// per the .click selector above)
if ($('div:first-child',this).hasClass('switch-on')) {
window.alert('ON!');
}
});
});
If you're looking to bind to the on/off separately, you may want to change it around a bit. we can still check for .switch-on, just have to traverse differently:
// here we bind to the on/off buttons and not the container
$('#my_special_id .switch-small').click(function(){
// you want the facsimilee of `div:first-child`, so (because we're now
// within that node, we use .parent() to get back up to it
var $firstChild = $(this).parent();
if ($parent.hasClass('switch-on')){
alert('ON!');
}
});
I have this jquery code:
http://jsfiddle.net/y8wPw/60/
All I want is that after DIV with content opens, it must stay visible, so that I can go over it and use this div as a form( or some other purpose). But now, if I make a MOUSEOUT from Content div , it disappears.
Jquery code:
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").toggle();
})
})
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
})
Why not try:
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
})
I have edited your js fiddle code by adding a wrapper and assigning the event to it.
I guess that fixes you problem :)
updated the html to
<div id="wrap">
<div class="body">Hellp</div>
<div class="desc">Any content here!</div>
</div>
<div class="clear"></div>
updated the css
#wrap{overflow:hidden}
updated the js
$(document).ready(function() {
$("#wrap").hover(function () {
$(".desc").toggle();
})
})
The link http://jsfiddle.net/RUtgE/1/
Use .css('display', 'block') instead of .toggle()
JSFiddle
You can use mouseenter instead of hover. In this case it will show the first time you go over the "help" button, the next time it will close again.
Check out http://api.jquery.com/category/events/mouse-events/ for more mouse events to play with!
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
$(".close").click(function () {
$(".desc").hide();
})
$(".wrap").mouseleave(function () {
$(".desc").hide();
})
})
http://jsfiddle.net/y8wPw/74/
This is what i was looking for! With some of your help i managed to make it!
Thanks to all!