Toggle js & expandible div - javascript

This is my fiddle, http://jsfiddle.net/8wKxY/153/
$(document).ready(function () {
$("#toggle").click(function () {
$("#menu_categorias").animate({
height: 'toggle'
});
var value = $("#home_categorias")[0].style.height !== "243px" ? '500px' : '500px';
$("#menu_categorias").animate({
height: value
});
});
});
I need that when you click the toggle button, the list remains in 343px of height, not 0. The list has a priori a fixed height, so I need that only when I press the toggle button the list expands itself and when it is open and I press the toggle button the list return to the normal height.
I think the problem is here
var value = $("#home_categorias")[0].style.height !== "243px" ? '500px' : '500px';

$("#home_categorias")[0].style.height !== "243px" ? '500px' : '500px';
the code above does not make sense to me, it always set the value to be 500px!,
? '500px'(when expression is true) : '500px'(when expression is false) ;
so change this based on your requirement, it should work! like ? '200px' : '500px;'

Related

Clicked drop down menu

When I click menu text that should toggle the menuContent the first time, it works as it shows the menuContent which is what is meant to be shown. However, after it shows it does not hide so the display = block does not go back to display = none.
I tried using a show value but it did not work so I used display = block instead in an if statement.
(By the way: menu = button that toggles text and menuContent = text that should be shown or hidden)
This is the JavaScript:
menu.addEventListener('click', menuClick, false);
menuContent.style.display = 'none'
function menuClick() {
menuContent.classList.toggle('show');
if (menuContent.style.display = 'none') {
menuContent.style.display = 'block'
} else {
menuContent.style.display = 'none'
}
}
So the first part of the if statement worked but not the else part.
How do I fix this?
menuContent.style.display = 'none'
should be
menuContent.style.display === 'none'
otherwise you're setting menuContent back to "display: none" again.
Remind '=' and '==='!
menuContent.style.display = 'none' is variable assignment, not a test for equality. You need to use === or == (loose check).
So, you always end up in the first situation because you always assign it to a value.

Faking a toggle switch with an Input Range, dealing with custom range

I need to fake a toggle switch with an input range.
The idea is to create a short range, with just 2 values, min and max. the css button will match one end of the range. So far you click on it, the div containing the range will move a bit bringing the other end of the ranger under your mouse.
I have this function, which applies on all input ranges on the page. But i need to apply it only on some classes, not all. But i can't find the right syntax and it doesn't work.
The Javascript:
$('input[type="range"]').on('change', function() {
$('div#launcher01').css('margin-top', parseInt($(this).val() ) > 0 ? parseInt($(this).val() ) + 'px' : '0px');
});
CSS:
.fakbl input {
height: 50px;
width: 50px;
HTML:
<div id="launcher01">
<div class="fakbl">
<input type="range" id="launch01" name="launch01" min="0" max="50" step="50"" />
</div>
</div>
Fiddle
Since you are already using jQuery, you can phrase your widget-maker as a jQuery plugin as follows :
$.fn.rangeButton = function(containerSelector) {
return this.each(function() {
var $self = $(this);
$self.on('change', function() {
$self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
}).trigger('change'); // trigger 'change' immediately to initialize everything.
});
};
Now, invoke the widget on each of your ranges, and pass a selector for the appropriate container :
$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');
Demo
Alternatively, by giving all containers the same class, you can invoke all your widgets with a single command :
$('.myClass input[type="range"]').rangeButton('.myClass');
Demo
May I ask a refinement please?
I completed the fake button. As you can see in this FIDDLE
(the white box will disappear, I added some opacity to it just to show that the button is working)
The red box (now green due to my buggy code part) is in the background and I would need it to change color depending on the status. I tried this but it doesn't work.
Here the code:
$.fn.rangeButton = function(containerSelector) {
return this.each(function() {
var $self = $(this);
$self.on('change', function() {
$self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
// this part is not working, if you remove this part, the button works flawlessy
if ($self = 100) {
document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 191, 1)";
} else {
document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 0, 255)";
}
// end of buggy code
}).trigger('change'); // trigger 'change' immediately to initialize everything.
});
};
$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');
Thanks:)

Change btn color back to original when dropdown menu is empty

Once a user clicks atleast 1 option from my dropdown menu, then the button colours change. Now when the user deselects ALL options (so that there are zero selected options), then I want the button colours to automatically change back to their original colours. Is that possible to achieve?
I tried working with if-else, but it didnt work. P.S. the user can deselect either unchecking each option box or use the "clear" button which clears all.
var i = $("li").index( $(this).parent() );
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
Here is my BOOTPLY ... BOOTPLY
just change your 2 click handlers to the 1 below:-
$(".products .checkbox, .availability .checkbox").on("click", function(e) {
var menu = $(this).closest('.dropdown-menu');
var checkCount = menu.find(':checked').length;
$('.btn_clear', menu).css('background', checkCount > 0 ? 'blue' : 'grey');
$('.btn_apply', menu).css('background', checkCount > 0 ? 'green' : 'yellow');
});
this just counts the checked from in its dropdown and sets the color accordingly.
Bootply
addendum
Here's the updated code for clear handler.
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
var menu = $(this).closest('.dropdown-menu');
menu.find('input[type="checkbox"]').prop('checked', false);
$('.btn_apply', menu).css('background', 'yellow');
});
Just set up a default value for your color, and assign it that way:
var i = $('li').index($(this).parent()),
// here is the "original" color of the button.
color = 'red';
if (i === 1) {
color = 'blue';
} else if (i === 2) {
color = 'green';
} // etc
// Save yourself a bunch of repeated code, and only have the assignment once.
$('#btn_clear').css('background', color);
I'd consider using jQuery's .addClass() and .removeClass() then defining what color that class should have. This allows for some separation of concern when dealing with application logic vs. styling
style
.blue-text {
color: blue;
}
jQuery
var i = $("li").index( $(this).parent() );
if ( i === 1 ) {
$('btn_clear').addClass('blue-text');
} else if ( i === 2 ) {
$('btn_clear').removeClass('blue-text');
}

Use fadeIn when attribute has changed

When I click on the toggle button, it changes the style attribute of the element from display none to block. Now, when this happens, I want to animate the left position of the menu. I have code like this, but works buggy and also, when it should go back to the right, it appears on the left..
var toggled = false;
$(toggleBtn).click(function() {
toggled = !toggled;
$(collapse).attr("style", toggled ? 'display:block !important' : 'display:none !important');
if (collapse.attr('style', 'display:block !important')) {
$(collapse).animate({left:'10%'});
} else {
$(collapse).animate({left:'100%'});
}
});
Any help would be appreciated, thank you.
You can simplify this more as:
var toggled = false;
$(toggleBtn).click(function() {
toggled = !toggled;
$(collapse).toggle(toggled)
.animate({ left: $(collapse).is(':visible') ? '10%' : '100%' });
});
change the condition
if (collapse.attr('style', 'display:block !important'))
with the following
if (collapse.attr('style')=='display:block !important')

Avoid TAB on a Div in browsers

I have JQuery slide in-out div, which slides in-out on click of a button
The Problem#
when i open it in broswer, and start pressing TAB, when the selection reaches the options of that div(which slides), the slide div comes out(become visible without clicking on button).
is there any way by which that slide div can avoid TAB selection..
CHECK HERE http://global.redhatsalesteam.com/slide_test/
Start off with the display of the animated div at display: none; - this will mean the links inside it can't get focus from "tabbing" - then on click (in the function) change it to display: block just before starting the slide animation
var $marginLefty = $('#slidemarginleft div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'none'
});
$('#slidemarginleft .button').click(function() {
$marginLefty.css('display', 'block').animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
set the tabindex on your links to -1. that should take them out of the tab order. if you want them to be tab-able to when you open the menu, you can set them back to something reasonable in the complete call back.
something like this should do it:
$('#slidemarginleft .button').click(function() {
$marginLefty.animate({
marginLefty: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
},
function(){
var counter = 1;
if($marginLeft.is(':visible'){
$marginLefty.find('a').each(function(){
$(this).attr('tabindex', counter);
counter++;
});
}
else{
$marginLefty.find('a').attr('tabindex', '-1');
}
});
});

Categories