Use fadeIn when attribute has changed - javascript

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')

Related

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:)

jQuery toggle slide animation down and up

im creating custom toggle animation on the list of bank while onlick it will toggle down and toggle up. However my code is working but it doesn't show up like an animation form. it just close and down directly without sliding slowly. Kindly advise :
I wish to toggle down for 200 height and toggle up for 102 height
jQUERY :
$(document).ready(function(){
$(".moreBankingBtn").click(function(){
$('.bank_listSetUp').toggleClass('bank_listSetTall'); // Will add/remove class on each click
});
});
HTML :
<div name="bankDisplay2" class="bank_list_main">
<ul data-bind="foreach: thirdPayBank" class="bank_list bank_listSetUp">
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="工商银行" data-code="ICBC" class="bank_2"></li>
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="农业银行" data-code="ABC" class="bank_3"></li>
</ul>
</div>
CSS :
.bank_listSetUp {
height: 102px;
}
.bank_listSetTall {
height: 200px;
}
You can use JQuery UI and change your code to something like
$('.bank_listSetUp').toggleClass('bank_listSetTall',500);
Here 500 is the duration of animation.
I would also suggest you to have a look at sideToggle() function http://api.jquery.com/slidetoggle/
i found an solution for this ,
jQUERY :
$(document).ready(function(){
var open = false;
var bankListMain = $("#thirdPayForm .bank_list_main");
var ul = bankListMain.find("ul");
var button = bankListMain.find("span");
button.click(function () {
open = !open;
var height;
if (open) {
height = "200px";
button.addClass("bank_hide");
} else {
height = "102px";
button.removeClass("bank_hide");
}
TweenMax.to(ul, 0.5, { css: { height: height } });
});
});
NOTE : add tweenmax.js to make it work
try slideToggle()
$(document).ready(function(){
$(".moreBankingBtn").click(function(){
$('.bank_listSetUp').slideToggle();
});
})
It doesn't look like it's animating because you're not using the jquery animate function or the slide toggle function, although since you want to animate to two different heights you can't really use the slide functions, because I believe that's just to display and hide. Maybe try this:
$(document).ready(function(){
$(".moreBankingBtn").click(function(){
If ($('.bank_list').hasClass('bank_listSetUp')){
$('.bank_list').animate({
height: 200,
}, 'slow').promise().done(function(){
$('.bank_list').removeClass('bank_listSetUp').addClass('bank_listSetTall');
});
}
else {
$('.bank_list').animate({
height: 120,
}, 'slow').promise().done(function(){
$('.bank_list').addClass('bank_listSetUp').removeClass('bank_listSetTall');
}
});
});

Slide left and hide effect using jquery or CSS

I am working on a slide menu,
Please have a look at the demo site:
kotechweb.com/new_focus/
At left side there is a main menu , when toggle , the words right now is squeeze and hide, here is how I implement:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("width", "75%");
} else {
$(".nav_bar ul").css("width", "0");
}
is_closed = !is_closed;
});
CSS:
transition: all 1s;
So the logic is using transition to implement the slide animation, however, this approach the text is squeeze when the width is smaller.
How to make the text slide left as well?
You can create a "mask" using
#menu_right{
overflow:hidden;
...
}
and move your menu in this way:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("margin-left", "-100%");
} else {
$(".nav_bar ul").css("margin-left", "-0%");
}
is_closed = !is_closed;
});
I think this works like espected
First of all, instead of using CSS transitions use animate in JQuery as it allows for more functionality.
What I actually do for my slide menus is adding overflow-x: hidden to my body tag. I then position the menu outside of the page, so I give it the CSS value of right: 0 to position it just outside the left hand side of the page.
What this allows me to do is that when the user clicks the menu button you can animate the menu to slide out by simply changing the right value, so your final code would look something like this
$("#menu_btn").on("click", function () {
if (is_closed) {
$("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
} else {
$("#slideoutMenu").animate({right:"0"}, 1000);
}
is_closed = !is_closed;
});
Use just jquery and jquery ui : Here
At the top reference the bellowed code.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And at script only add this :
$(".nav_bar ul").toggle( "slide");
Or also can use with customized time delay ms unit.
$( ".nav_bar ul" ).toggle( "slide",2000 );
Maybe you should .hide() the text when the sidebar collapses. Hope this helps.

Toggle js & expandible div

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;'

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