Removing text with links with JavaScript, new at this - javascript

How do I allow the X inside the "li" tags to be the only clickable part of the text, but still delete the whole line? Thank you in advance. This is my third day working with JS.
$("button#hello").click(function() {
$("ul#user").prepend("<li>Hi X</li>");
$("ul#webpage").prepend("<li>Hello X</li>");
$("ul#user").children("li").first().click(function() {
$(this).remove();
});
$("ul#webpage").children("li").first().click(function() {
$(this).remove();
});
});

Try something like this:
$("button#hello").click(function() {
var x = $('<span>X</span>').click(function() {
$(this).parent().remove();
});
$("<li>Hi </li>").append(x).prependTo("ul#user");
$("<li>Hello </li>").append(x.clone(true)).prependTo("ul#webpage");
});
JsFiddle:
http://jsfiddle.net/KHUbf/1/

Related

Make Jquery text a clickable link

How can I make blahblah#gmail.com a clickable link?
I'd like to include
href="mailto:xxxx#gmail.com"
Fiddle
$('#hello').attr('data-originalText', function() {
return (this.textContent || this.innerText).trim();
}).hover(function() {
$(this).fadeOut(500, function() {
$(this).text('blahblah#gmail.com').fadeIn();
});
},
function() {
$(this).fadeOut(800, function() {
$(this).text($(this).attr('data-originalText')).fadeIn();
});
}
);
Convert this
$(this).text('blahblah#gmail.com').fadeIn();
to this
$(this).html('blahblah#gmail.com').fadeIn();
DEMO
You need to use .html() in order to get html to display.
Replace: $(this).text('blahblah#gmail.com').fadeIn();
With: $(this).html('blahblah#gmail.com').fadeIn();
Working fiddle: https://jsfiddle.net/u8xqrp96/1/

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

jQuery Add Class on Click but only allowed once.

Here is what I have so far:
Javascript:
$(document).ready(function() {
$(".thumb_wrapper").click(function() {
$(this).addClass("active");
});
});
So this is working, it is adding the class but I want only one item to be active at all times. So when I click on an item, and it turns active, the next item I click on should be the new active one, and remove the class on the previous one.
Does that make sense? How can I do something like this?
Thanks!
You need to first remove the active class from your thumb_wrapper elements. Try this:
$(".thumb_wrapper").click(function() {
$(".thumb_wrapper").removeClass("active");
$(this).addClass("active");
});
Cache your wrapper and call a removeClass() on it first:
var $wrapper = $(".thumb_wrapper");
$wrapper.click(function() {
$wrapper.removeClass("active");
$(this).addClass("active");
});
$(".thumb_wrapper").on('click', function() {
$(".thumb_wrapper").removeClass('active').find(this).addClass("active");
});
This should do it.
$(document).ready(function() {
$(".thumb_wrapper").click(function() {
$(this).parent().children().each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
$(document).ready(function(){
$('.what').click(function(){
$('.what').removeClass('active');
$(this).addClass('active');
});
});
I assume something like this?

jQuery if div contains text, toggle button

I'm trying to get a button to be toggled if a div contains a string of text. Something like:
$(document).ready(function(){
$(function() {
if ('$div#trackingnumber:contains('Hello')');') {
$("dinput#submitam").toggle()});
}
});
Does anybody know how to do this?
You are on the right way. I only see some syntax errors. Try this
$(document).ready(function(){
if ($("#trackingnumber:contains('Hello')").length != 0)
{
$("dinput#submitam").toggle();
}
});
Checkout this jsFiddle too.
Just do like this
$(document).ready(function(){
if ($("div#trackingnumber:contains('Hello')").length > 0)
$("dinput#submitam").toggle();
});
$(document).ready(function() {
if ( $("#trackingnumber:contains('Hello')").length > 0 ) {
$("#submitam").toggle();
}
});

jQuery hide dropdown when clicked anywhere but menu

I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});

Categories

Resources