Hello I have made a basic sticky notification that shows on my website, I am trying to make it so you can manually close it by clicking a button but it won't seem to work? Here is my code:
<script>
$(function() {
$("#closeBtn").click(function () {
$(".notification").fadeOut(500);
return false;
});
});
</script>
<div class="notification" id="success">
Message sent
<a href="#" id="closeBtn">
<div class="close">
<div class="closeTxt">X</div>
</div>
</a>
</div>
try using .on() for the elements created dynamically
$(document).on('click','#closeBtn',function() {
$(".notification").fadeOut(500);
return false;
});
Because the element is added to the DOM after page load, you need to use .on() instead of .click():
$(document).on('click', '#closeBtn', function (e) {
e.preventDefault();
$('.notification').fadeOut(500);
});
When the element is added Dynamically you have two choices.
function myFadeOut() {
$(".notification").fadeOut(500);
return false;
}
Using the on:
$(document).on('click', '#closeBtn', myFadeOut);
Or more clean, adding the click directly on the node when you generate it:
var $myNode = $('<div class="someNode"></div>');
$myNode.click( myFadeOut);
$(".foobar").append($myNode);
Related
I have a jQuery click event which adds a class (active) to a dropdown.
In the dropdown there are boxes (with the class generically called box).
Currently the jQuery event fires anytime you click anywhere in the item class, but if you click the box it also closes the dropdown. Thus I am adding an if statement above the addClass part which checks if you clicked a box.
Here's the html:
<div class="trainee-item">
<div class="dropdown">
<div class="box"></div>
</div>
</div>
and here's the JS:
$('.item').click(function(e) {
$('.box').click(function() {
console.log('stop!!!');
});
if ($(this).children('.dropdown').hasClass('active')) {
$(this).children('.dropdown').removeClass('active');
return;
}
$(this).children('.dropdown').addClass('active');
});
I've tried return (where the console.log('stop!!!!'); currently is, but that only stops the $('.box').click(function() (the immediate "parent" function). I am trying to stop the function above that one
Any help? thanks
One way would be
$('.item').click(function(e){
if (e.target.className=="box"){
e.preventDefault()
return
}
})
$('.item').click(function(e) {
if (e.target.className=="box"){
e.preventDefault()
alert("don't close it!")
return
}
if ($(this).children('.dropdown').hasClass('active')) {
$(this).children('.dropdown').removeClass('active');
return;
}
$(this).children('.dropdown').addClass('active');
});
.dropdown{display:none;width:100px;height:100px;background:#bbb}
.active{height:120px;}
.item{height:20px;background:#ccc}
.active.dropdown{display:block}
.box{border-bottom:1px solid #999;padding:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trainee-item item">
<div>Click me</div>
<div class="dropdown">
<div class="box">hi</div>
</div>
</div>
You should separate these into separate click events. You should also delegate them, since you'll trigger both due to event bubbling. It's been a while since I've written jQuery, but from what I remember you should be using .on();, since you can delegate with that method.
I'll leave the delegation as homework for you, but here's how you should be approaching this issue:
$('.item').on('click', function(e, el) {
var $child = $(this).children('.dropdown'),
activeClass = 'active';
$child.hasClass(activeClass) ? $child.removeClass(activeClass) : $child.addClass(activeClass);
});
$('.box').on('click', function(e, el) {
console.log('box clicked');
});
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();
}
});
});
Here is the JsFiddle
I have a button that will add a new header, textbox, and a link when it's click.
But when I click on the remove link. It's removes every new item that was added.
Html:
<div id='main'>
Top of Boby
<div id='main_1'>
<div>
<h3> Item</h3>
<input type="text" />
</div>
</div>
</div>
JS:
$(function() {
$('.AddItem').click(function() {
$('div#main_1').append("<div><h3>Item</h3><input type='text' class='remove_skill'/><a href=''>Remove</a</div>");
});
})
$(function() {
$('.remove_skill').click(function() {
$(this).remove();
});
})
2 issues..
You have never defined the class for the anchor. Add the class to the anchor
You need to remove the enclosing div and not the anchor. Use .closest
Also you need to delegate the event as the elements are being added dynamically
$('#main').on('click', '.remove_skill', function (e) {
e.preventDefault();
$(this).closest('div').remove();
});
Check Fiddle
The problem with the code you've posted is that no links exist at the moment you call $('.remove_skill').click, so you can't add event listeners to them.
I recommend a step-by-step approach. Create, add behaviour, append to the document.
$('.AddItem').click(function () {
var new_element = $('<div class="item"><h3>Item</h3><input type="text"/><a class="remove" href="#">Remove</a></div>');
new_element.find(".remove").click(remove_item);
$('div#main_1').append(new_element);
});
function remove_item() {
$(this).closest(".item").remove();
return false;
}
I recommend <a href="#"> for javascript-handled links.
Alternative solution using a closure:
$('.AddItem').click(function () {
var new_element = $("<div class="item"><h3>Item</h3><input type='text'/><a class="remove" href="#">Remove</a</div>");
new_element.find(".remove").click(function() {
new_element.remove();
});
$('div#main_1').append(new_element);
});
Your problem is that your "Remove" is in an 'a' tag. This causes the page to reload, and removing all of your previous changes.
There is a html page like this:
<div id="list"><a onclick = "javascript:addplaylist('shv231a','1');" href="javascript:void(0);">+</a></div>
<div id="list"><a onclick = "javascript:addplaylist('jhr2a13','1');" href="javascript:void(0);">+</a></div>
<div id="list"><a onclick = "javascript:addplaylist('thy2b1k','1');" href="javascript:void(0);">+</a></div>
There are javascript functions
addplaylist('shv231a','1');
addplaylist('jhr2a13','1');
addplaylist('thy2b1k','1');
I want to change value '1' with '2' in javascript function (addplaylist) when user click this
<a id="make2" onclick="" href="javascript:void(0);">Change the value 2</a>
How can I do that with jquery?
The way to do this with jQuery is to move all of the Javascript code into a separate file or script block within the HTML. Any way which abstracts the display (HTML + CSS) from the behavior (Javascript)
This will require a bit of reworking of the HTML. In particular removing the duplicate id fields in favor of having id's be unique. Additionally removing the javascript references from the onclick handler.
<div id="list1"><a>+</a></div>
<div id="list2"><a>+</a></div>
<div id="list3"><a>+</a></div>
Then with jQuery you can specify the behavior of these links directly from the JavaScript. This is true for both the play list links and the one which modifies them to pass '2',
$(document).ready(function () {
var secondArg = '1';
$('#list1 a').click(function (e) {
addplaylist('shv231a1', secondArg);
e.preventDefault(); // Don't follow link
});
$('#list2 a').click(function (e) {
addplaylist('jhr2a13', secondArg);
e.preventDefault(); // Don't follow link
});
$('#list3 a').click(function (e) {
addplaylist('thy2b1k', secondArg);
e.preventDefault(); // Don't follow link
});
$('#make2').click(function (e) {
secondArg = '2';
e.preventDefault();
});
});
This is a possible solution:
<a id="make2" onclick="javascript:changeToTwo();" href="javascript:void(0);">Change the value 2</a>
Javascript
function changeToTwo() {
$('div#list a').each(function() {
$(this).attr('onclick', $(this).attr('onclick').replace("'1'","'2'"));
});
}
If I remember right ie will only select 1 element with the same id so you may want to consider moving it to a class selector
1) Ids should be unique on a page
2) use a class to select
3) keep your functional code out of the markup
HTML:
<div id="1" class="list"><a>+</a></div>
<div id="2" class="list"><a>+</a></div>
<div id="3" class="list"><a>+</a></div>
javascript:
$('.list').each(function ( index, element) {
addplaylist(element.id);
});
I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!
Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});
The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.
You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following: