CSS toggler using Javascript - javascript

I want to toggle the white-space style of a tr element to normal when the tr is clicked. I've managed to take a function used for toggling colours and adapt this for my purposes, however I can only make the class change toggle once, and don't know how to change the this.style.background in line 3 to this.style.white-space, without breaking everything:
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
I know this is fairly basic, however I've only started using JavaScript today, so if anyone could show me the solution and explain what needs to be done then I'd be very appreciative.

You just need to change the if condition so it depends on the value of white-space property:
$(document).ready(function () {
$('tr').click(function () {
var $this = $(this);
if($this.css('white-space') === 'nowrap') {
$this.css('white-space', 'normal');
}
else {
$this.css('white-space', 'nowrap');
}
});
});

You just need to use white-space for your ifstatements, and refactor those if statements. Fixed code below:
$(document).ready(function () {
$('tr').click(function () {
if($(this).css("white-space") == "nowrap") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
Hopefully this helps!

Related

Target last visible div after js action?

Is it possible to target the last visible div/container after a js function has worked, in this case mixitup plugin. You click to filter your results, this adds display: none or display: inline-block to the appropriate containers.
Using this code from another stack question
$(function () {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
});
It works but only when the page first loads, after you active the mixitup and filter some results it doesn’t add the class red to the last ‘visible’ container i assume because its already loaded and done its job..
The mix it function is as follows..
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});
So essentially need it to fire based on when the display: none and display:inline-block appears and disappears on the page.
So I think if you wrap the code you want to fire again in a function you can then set it to fire on callback from the mixItUp and on first load.
So you'd have a function like this:
function updateDisplay() {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
And then call it on first load like this:
$(function () {
updateDisplay();
});
And then edit your mixItUp declaration to call this function also on callback of mixItUp having finished:
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(){
alert('No items were found matching the selected filters.');
}
}
});
Hope that helps.
Thanks to shodaburp i’ve managed to figure it out with the callback function, god knows how must be a fluke.
The full code i have now and seems to work...
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(state){
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});

Javascript toggle menu collapsed issue

I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo

Simplifying js for a dropdown

I have a pretty basic code html code for a dropdown, as can be seen here it works, but is there a way to simplify this js code?
$(document).ready(function() {
var n = ".dropdown-menu", no = 'drop';
$('.dropdown').click(function () {
if($(n).hasClass(no)) {
$(n).removeClass(no);
} else {
$(n).addClass(no);
}
}).mouseover(function() {
$(n).addClass(no);
}).mouseout(function() {
if($(n).mouseover()){
$(n).removeClass(no);
}
})
});
please note that I am aware that I can go css only by adding just one line.. so that isn't the question.
#navigation-top #navigation-holder li:hover > ul {
display: block;
}
We can use toggleClass instead of add/remove class.
In the below code we can remove the if check and directly call removeClass
if ($(n).mouseover()) {
$(n).removeClass(no);
}
So the final optimized code like this:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).mouseover(function () {
$(n).addClass(no);
}).mouseout(function () {
$(n).removeClass(no);
})
Fiddle Demo
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function() {
$(n).addClass(no);
}, function() {
$(n).removeClass(no);
}
);
Not tested, but that should do what you're looking for.
Refs:
https://api.jquery.com/toggleClass/
https://api.jquery.com/hover/
Off the top of my head, use toggleClass() to optimize the class switching
As well as the use of hover() to replace mouseover & mouseout events.
Therefore your code will turn out this way:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function () {
$(n).addClass(no);
}
,function () {
$(n).removeClass(no);
}
);
JS Fiddle Link: http://jsfiddle.net/g9zyd/4/
You can use toggleClass method from jQuery library, and some little trick to do your task!
function rp(el){
$(n).toggleClass(no, el.data);
}
var n = ".dropdown-menu",
no = 'drop';
$('.dropdown').click(rp).mouseover(true, rp).mouseout(false, rp);
Try demo

expand and collapse an item and remove static text from javascript

I have the following java script code to expand and collapse.
$(function () {
$(document).on('click', '.expandcollapse', function(e) {
$('.collapse').each(function(index) {
$(this).collapse("toggle");
});
if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All ") {
$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
else {
$(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
}
});
});
It works fine here:
http://jsfiddle.net/HqXMN/10/
I need to remove the static text (Expand, Collapse) and somehow place them in my html.
Is there a way to hide the text and icon plus or minus sign based on the action using the toggleClass function.
Here is what I tried so far but doesnt work at all.
$(function () {
$(document).on('click', '.expandcollapse', function(e) {
$(this).removeClass('icon-white icon-minus-sign');
$('.collapse').each(function(index) {
$(this).collapse("toggle");
});
if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i>") {
$(this).removeClass('icon-white icon-plus-sign');
$(this).addClass('icon-white icon-minus-sign');
//$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
else {
$(this).addClass('icon-white icon-plus-sign');
$(this).removeClass('icon-white icon-minus-sign');
}
});
});
Here is my html (I am using haml syntax)
%i.icon-white.icon-plus-sign
Expand All
%i.icon-white.icon-minus-sign
Collapse All
Update: Here is something more I tried but couldnt make it work.
http://jsfiddle.net/HqXMN/11/
First of all, I suggest that you should use jQuery .is() ( http://api.jquery.com/is/ ) for your if statements, that way your code will be more flexible. Then, I suppose the toggleClass will work for you too. I didn't do much, but here is a start:
JS:
$(function () {
$(document).on('click', '.expandcollapse', function (e) {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
if ($(this).is('.icon.white-icon .iconplus-sign')) {
$(this).toggleClass('is-collapsed');
} else {
$(this).toggleClass('is-collapsed');
}
});
});
CSS:
.expandcollapse .icon-plus-sign {
display:block;
}
.expandcollapse .icon-minus-sign {
display:none;
}
.is-collapsed .icon-plus-sign {
display:none;
}
.is-collapsed .icon-minus-sign {
display:block;
}
and demo here: http://jsfiddle.net/pavloschris/HqXMN/13/
I hope it helps.

Small JavaScript/jQuery mouseleave question

I got this small JavaScript using jQuery that slides down a ul when an image is clicked:
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});
});
I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?
you can use jquery mouseout()
Try this
$('img.menu_class').bind('mouseleave',function() {
$('ul.the_menu').slideToggle('medium');
});
or
$('img.menu_class').bind('hover',function() {
$('ul.the_menu').slideToggle('medium');
});
Use this code.
This is my updated code
Use this code to slidedown ur list once mouse hover on image and remains open
$(document).ready(function () {
$('img.menu_class').bind('hover mouseleave',function() {
$('ul.the_menu').slideDown('medium');
});
//to close ul
$('#id_of_close_element').bind('click',function() {
$('ul.the_menu').slideUp('medium');
});
});
This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:
$(document).ready(function() {
$('ul.menu_body').hide();
if ($.browser.msie && $.browser.version < 8) {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
$('.menu_body').css("font-weight","normal");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
} else {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
$('.dropdown').mouseleave(function() {
if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
}
});

Categories

Resources