I have a font resizer that needs to be contained in one link. eg. show text link "Larger Type" and switch to text link of "Smaller Type" when clicked. I am not sure why it will toggle the class "plus/minus" but it will not switch the text or call the font resize function after the else statement?
Currently, it works the first click to resize the text and add the minus class but after that it does nothing.
http://jsfiddle.net/infatti/P6SVv/
var targetContainers = $('.two-thirds');
var newLargerSize = 16;
var newSmallerSize = 14;
$('.resize-font a').click(function(){
if ($(this).hasClass('plus')) {
$(targetContainers).css('font-size', newLargerSize);
$(this).text('Smaller Type').toggleClass('minus');
} else {
$(targetContainers).css('font-size', newSmallerSize);
$(this).text('Larger Type').toggleClass('plus');
};
});
Your condition is not calibrated with your toggle.
You check if the a has the class plus, but if it does, you never remove the plus, you remove (or add) the minus.
You should toggle plus always, to remove it when it exists, and add it when it doesn't:
$('.resize-font a').click(function() {
var hasPlus = $(this).hasClass('plus');
$(targetContainers).css('font-size', hasPlus ? newLargerSize : newSmallerSize);
$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus');
});
If you need the minus for styling, you should toggle both, at all times:
$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus minus');
problem is with toggleClass()
please have a look this will solve your problem
http://jsfiddle.net/3w2nG/
Related
I have a form with multiple HTML checkboxes. I want to hide some dividers only if at least one checked checkbox have a custom HTML5 attribute called "terminator". Otherwise I would want to show the dividers.
I tried to accomplish this by using the change() event to check if one has the terminator attribute.
Here is what I have done.
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
//Hide all groups that have the class equal to className
if( $(this).is(':checked') ){
if( $(this).data('terminator') ){
hideControls($(this), existingElements, className);
}
} else {
showControls(existingElements, className);
}
}).change();
The function hideControls will hide the desire inputs. The function showControls will display the desired inputs if any are hidden.
My code kinda works, but has one problem that I can't figure out a solution to. The problem happens after checking a box that has the terminator attribute and checking a box that does NOT have the terminator attribute, and then "un-checking" a box that does NOT have the terminator attribute.
When first checking the box with the terminator attribute the dividers hide as expected.
Then when un-checking a box that does not have a terminator attribute it shows dividers that should be hidden with appear since I still have 1 checked box with the terminator attribute.
How can I fix this problem?
I created this jFiddle to show the code and the problem in action. You can re-create the problem by jumping into the "1:b) More Questions" section on the jFiddle, then check the "Red" box and then the "Green - Terminator" box, and finally unchecking the "Red" box. You will see how the dividers below will appear where they should be hidden since "Green - terminator" is still checked"
You should be checking for the "checked" status of the checkbox with data-terminator attribute set on each change.
Something like
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
var isTerminatorChecked = $("input:checkbox[data-terminator='Yes']").is(":checked");
//Hide all groups that have the class equal to className
if (isTerminatorChecked) {
hideControls($(this), existingElements, className);
} else {
showControls(existingElements, className);
}
});
Updated fiddle
To make sure that showControls will only get invoked when the checkbox with the data-terminator attribute gets unchecked,
change this :
...
} else {
showControls(existingElements, className);
}
to
...
} else if ($(this).is("[data-terminator]")) {
showControls(existingElements, className);
}
Updated jsFiddle: http://jsfiddle.net/8yf0v3xt/10/
the code below said 'If any input that have the type checkbox is changing'
$("input[type='checkbox']").change(function(e) { /*hide*/ }
else { /*show*/}
when you uncheck the "red" checkbox this="red", and red is not checked so... it automatically go to the else statment which in to show divider
in my code i have around 11 image tags , all of them have an id of "#bigimage"
i want to change the style of an image on each click on a specific button for the specific image
meaning on the first click changing the #bigimage [0]
second click changing the #bigimage [1]
etc...
this is what i did:
<script>
//click event
$('.jssora05r').click(function() {
var abc=$('#bigimag').length;
var ind=0
$("#bigimag").index(ind).css("display", "block !important");
ind++;
});
</script>
it's not working, could someone help me?
just declare ind out side of the click event
also you need to change that id selector to some class selector and add same class to all images
<script>
var int = 0;
//click event
$('.jssora05r').click(function() {
// change id to some class
var abc=$('.someclass').length;
$(".someclass").index(ind).css("display", "block !important");
ind++;
});
I've made a fiddle of my code (without the css styling) here: http://jsfiddle.net/X8bVr/
I'm trying to show a trash icon when a user hovers over a list input (dynamically generated from an input). Right now, the icon shows on hover, but doesn't go away on hover. Upon multiple mouseovers, it multiples the amount of icons on each list item.
I also want to make the trash icon a link that removes that specific list item.
Any other helpful tips towards optimizing my code is appreciated!
$(".input").click(function() {
if ($(this).val() == "Add task...") {
$(this).val('');
}
});
$('.input').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13' && $('.input').val().length != 0){
var input = $(".input").val();
var li = $("<li/>").text(input);
$("#tasks").prepend(li);
if ($(".input").val() != "Add task...") {
$(".input").val('');
}
$("li").hover(function() {
var trashIcon = $("<i class='fa fa-trash-o'></i>");
$(trashIcon).appendTo($(this)).stop();
}, function() {
$(trashIcon).hide();
});
}
});
Try looking mouseenter and mouseleave instead of hover:
1) Just add the icon on page load, and hide it
var trashIcon = $("<i class='fa fa-trash-o'></i>");
$(trashIcon).appendTo($(this)).stop();
$(trashIcon).hide();
2) Insted of hover, show icon when mouse enters li elements and hide when mouse gets out:
$("li").mouseenter(function() {
$(trashIcon).show();
};
$("li").mouseleave(function() {
$(trashIcon).hide();
};
This is a very small mistake.The scope of var trashIcon is only when the mouse is on the li so this is the problem.
you can fix it in two ways
make var trashIcon global variable.
to the image use following code.
$(this).find('.fa').hide();
hope this solves your problem.
Edit :
The $(trashIcon) is global hence when the next li is being appended the previous ones is being removed.
you can check it by F12 elements.
So here is the solution to your problem.
Declare the
var trashIcon = $("<i class='fa fa-trash-o'></i>");
just before you register the mouseenter and mouseleave event
Fiddle demo to explain more
Using zepto.js, how can You show X items from a ul, hide the rest and show them
only when the user clicks "show more" Link/button?
10X!
Here's one way to accomplish what you're asking.
$(function() {
$('li').slice(5).toggle();
$('span').click(function() {
$('li').slice(5).toggle();
});
});
The first .slice(5).toggle() functions take all the list items selected, narrow them down to a subset of elements that starts at index 5 through the end. Then it toggles the visible state of the first element it finds in that subset.
We then attach a function to the click event on the span, which is our Show/Hide element. That function is actually just the same as the initial function we ran to hide all the elements past index 5.
Check out this JS Fiddle for a working example. Also, for further reference here are the docs on .slice() and here are the docs on .toggle().
Hope that helps!
Basically there are 2 ways.
Use zepto to toggle a class and use css to define what to hide
/* show only the first 3 list items */
ul.collapsed li:nth-child(n+4) {
display: none;
}
var $list = $(ul.collapsed); // initially the list is collapsed
// use a show-more link to toggle display of remaining items
$("a.show-more").click(function(){
// get the current state of the list by querying the className
var shouldShow = $list.hasClass("collapsed") == true;
$list.toggleClass("collapsed");
// set the link text according to the task (show or hide)
$(this).html(shouldShow ? "Show less" : "Show more");
// its a link, don't follow it
return false;
});
Use zepto "standalone"
var $list = $(ul);
// use the link to set the css properties directly
$("a.show-more").click(function(){
var shouldShow = $list.hasClass("collapsed") == true;
$("li:nth-child(n+4)", $list).css({
"display": shouldShow : "" : "none"
});
$(this).html(shouldShow ? "Show less" : "Show more");
return false;
});
When I slideToggle the simple accordian that I have, I would like to change the class of the link element and the .revealBox div that wraps the whole accordion depending on whether the accordion is opened or closed
my jquery is
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText = 'Hide Information';
var hideText = 'Show Information';
var is_visible = false;
$('.collapseLink').append('<span class="dottedBot">' + showText + '</span>');
$('.revealBoxContents').show();
$('a.collapseLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html((!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.revealBoxContents').slideToggle('slow');
// return false so any link destination is not followed
return false;
});
// toggle the bottom link
$('.collapseLink').click(function() {
$(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
$(".collapseLink").html((!is_visible) ? showText : hideText);
$(this).parent('.item').toggleClass('current');
});
});
my Url is
http://satbulsara.com/NSJ-local/eqs1.htm
Thanks,
Sat
You want to use the addClass() function on the element.
http://api.jquery.com/addClass/
You can also do that using toggleClass() as seen on jQuery documentation :
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
return 'happy';
} else {
return 'sad';
}
});
http://api.jquery.com/toggleClass/
You can make use of jquery's addClass() and removeClass() to add and remove classes .