I want to add a marker character to a link when the user clicks it, and remove it when he clicks it a second time.
Here's what I have :
$('#text a').click(function () {
$(this).addClass('clicked');
$(this).text(markerTextChar + $(this).text());
$(this).click(function () {
$(this).removeClass('clicked');
$(this).text($(this).text().substring(1));
});
});
The marker is added on click, but it is added one more time when I click it to deselect it.
Can you help me fix that ?
Adding a event handler with bind (or click) doesn't remove the old ones.
You could unbind it but this is not needed. Do this instead :
$('#text a').click(function () {
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked');
$(this).text($(this).text().substring(1));
} else {
$(this).text(markerTextChar + $(this).text());
$(this).addClass('clicked');
}
});
demonstration
You might also use toggleClass and use :before in css to add your char, that would be much cleaner.
css :
.clicked:before {
content: "yourmarker";
}
javascript :
$('#text a').click(function () {
$(this).toggleClass('clicked');
});
demonstration
you have to unbind first click event do it like this
$('#text a').click(function () {
$(this).addClass('clicked');
$(this).text(markerTextChar + $(this).text());
$(this).removeAttr('onclick');
$(this).click(function () {
$(this).removeClass('clicked');
$(this).text($(this).text().substring(1));
});
});
Related
I have the following example:
https://codepen.io/baidoc/pen/LYVvOZq
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
$(".boxContent").removeClass("show-content");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
});
});
2 Boxes, by default deactivated (hidden), and only once clicked, the content will be shown.
What I'm trying to do: when I click again on the box, it should hide the box (display:none)
I've tried with toggle function, but somehow it doesn't seem to work. What alternative do I have?
What about this?
jQuery(function ($) {
$(".box").click(function() {
var currentActive = $(this).hasClass("active");
$(".boxContent").removeClass("show-content");
$(".box").removeClass("active");
if (!currentActive){
$(this).addClass("active");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
}
});
});
Try this below :
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
if($(".boxContent").hasClass("show-content")){
$(".boxContent").removeClass("show-content");
}else{
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
};
});
});
Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});
All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it
Hi I was wondering if there was anyway to dynamically change the class of a list when you hover over it. Here is my code and fiddle. When I hover over the li I want it to change the class. and on mouseout I want it to change back to original.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('.navi').addClass('.navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
http://jsfiddle.net/Samfr/8/
I think hover might be a little better for what you are doing.
http://api.jquery.com/hover/
Also, I'm not too clear on what you are asking but one of the examples on the above hover documentation page seems to describe something similar.
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
You had an extra period when adding and removing the class. Those should only be used to select the elements not change the class name.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
try this:
define a new class, for example dinamic-li
$('.dinamic-li').on("mouseenter", function () {
$(this).addclass('navi');
$(this).removeclass('navi2');
});
$('.dinamic-li').on("mouseleave", function () {
$(this).addclass('navi2');
$(this).removeclass('navi');
});
Will this work?
JSFiddle
Jquery:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
$(this).attr('class', 'red');
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).attr('class', '');
});
there is my solution:
$('.navi > li').on("mouseover", function () {
$(this).addClass('active').siblings().removeClass(active);
$('.hover-name', this).show();
}).on("mouseout", function() {
if( $(this).hasClass('active'))
$(this).removeClass('active');
$('.hover-name').hide();
});
Working fiddle
Why not use a CSS solution, it's much easier:
.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }
Check your updated Fiddle
http://jsfiddle.net/Samfr/14/
This is that what u mean...
$('.navi > li').on("mouseover", function () {
$(this).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).removeClass('navi2').addClass('navi');
});
When you hover a link the color will be red and when you mouseout the color will reset.
That way you can see how the script works!
CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?
jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();
When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/
$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});
An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});
check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});
I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
});
});
Using jQuery's one function is perfect for this.
$(function() {
$("#header-translate ul li").click(function(e) {
e.preventDefault();
var $toClose = $("#header-translate li ul")
$toClose.slideToggle(500, function() {
if($toClose.is(':visible')) {
$('body').one('click', function(e) {
e.preventDefault();
$toClose.slideUp(500);
});
}
else {
$('body').unbind('click');
}
});
});
});
What this will do is assure that this click handler will only get executed once, and only when the element is shown.
I believe you need to add a click() handler to the $('body'), and also event.stopPropagation() to your element.
$(function() {
$("#header-translate ul li").click(function(e) { // don't forget that 'e'
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
$("#header-translate").hide();
});
});
You'll want to check if
$(function()
{
var elToHideSelector = "#header-translate li ul";
$("body").click(function(e)
{
if ( ! $(e.target).is(elToHideSelector + ',' + elToHideSelector + ' *') )
{
$(elToHideSelector).hide();
}
});
});
I've used this code:
$(function() {
$("#header-translate ul li").click(function(e) {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
});
});
Add a click handler to BODY tag that will slide the element up and add event.stopPropagation() to the element that opens the element in the first place so the click to open is not send to BODY.
You can add a listener to the document (since the event bubbles up, you can capture it in a parent element)
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
$(document).one('click', function(){
$("#header-translate li ul").hide();
});
});
});