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');
}
});
});
Related
I want to change css with only one onclick function
$('#hamburger').on('click',function(){
$('nav').toggle(1000);
$('.col-md-3').css('padding-bottom','30px');
$('h5').toggle(1000);
});
I want when I click again to show
$('.col-md-3').css('padding-bottom','104px');
So first time when I click #hamburger I want my col-md-3 padding bottom 30px,and when I click again and close #hamburger I want my col-md-3 padding bottom should be 104px.
How to do that?
One dirty way:
$('#hamburger').on('click',function(){
$('nav').toggle(1000);
// check for existing css values
if ($('.col-md-3').css('padding-bottom') === '30px') {
$('.col-md-3').css('padding-bottom', '104px');
} else {
$('.col-md-3').css('padding-bottom', '30px');
}
$('h5').toggle(1000);
});
Just grab the current padding of the element and set the new padding based on that - if it's 30px, set it to 104px and vice versa.
$('#hamburger').on('click',function(){
$('nav').toggle(1000);
$('h5').toggle(1000);
var padding = $('.col-md-3').css('padding-bottom')
$('.col-md-3').css(
'padding-bottom', (padding === '30px')? '104px' : '30px'
);
});
I'm working on an image slide show. There will be a set of images on the left and user can click the up or down image to see the rest of the image. I am showing only 3 Images at a time.
The way I did it is I slide up the first one, move it to the bottom. At the same time, sliding the 4th one up to show it.
Here is my jQuery code:
$("#goup").click(function(e) {
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
});
I don't have any id or class on those images ( Gonna use ajax to produce these <img> tag )
It worked when I click slowly. If I double click fast, the 3rd image is gone.
Is there any way I can stop user from fast clicking or can it wait for the last action finish to go to the next one?
$("#goup").click(function(e) {
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
return false;
});
Put a variable boolean in your click function to check whether imgslide in transition/animation mode. if clicked is true return "donothing" once slidetoggle completed set the it to false.
var clicked = false;
$("#goup").click(function(e) {
if(clicked) return;
clicked= true;
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up",complete:function(){
clicked= false;
}},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
return false;
});
OK, You can disable the double click event on the element ,So the element will not respond to the double click event.
$("#goup").dblclick(function(e) {
e.preventDefault();
}
I am having issues in closing the active state on my footer button. When you click footer it will slide a hidden div pushing the fix div up and changing the word footer to close, with a background color for its active state. Once you click close the div will slide down and the wording will change back to footer and the active state is hidden.
The issue
when I click the menu button it does not change the active state on the footer button. The div will slide down but the wording will not change from close to footer and the background color will not change.
The JS
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header').removeClass('open').animate({'bottom': "-=120"});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function(){
var $this = $(this);
$this.toggleClass('footerButton');
if($this.hasClass('footerButton')){
$this.text('Footer');
}
else
{
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Fiddle.
How can I fix this issue?
I added the following function as a callback for the animate function when clicking your menu button. It will check to see if the footer button is in the active state, and if so will update accordingly, otherwise it will leave it be.
function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
}
Updated Fiddle
I have a page with a row of boxes that are responsive........
so the smaller you resize the window the amount of boxes on each row lessens
heres a fiddle to show you whats going on
http://jsfiddle.net/abtPH/6/
Right now the behavior is......if you click on a box then a div appears under it.....if you click on the next box the div slides up a bit then slides down revealing the new content...
I want it so that if the box is on the same row and the user clicks the next one it does not slide up then down but fades the content in
I only want it to slide up when the box is on a different row...like underneath
heres my jquery so far
$('li').on('click', function(e){
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
The trick is detecting what is on the same line. For that I think the position() function is what you need. When a list item is clicked, check to see if there is an active one already, if so, check to see if the current and active items have the same top value. If they do crossfade otherwise toggle.
$('li').on('click', function(e){
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
active.toggleClass('active', 400).find('.outer').fadeOut('slow');
$(this).find('.outer').fadeIn('slow');
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
jsFiddle
I'm using the jQuery cycle plugin to cycle through multiple divs in a container. All is working well the only functionality that I would like to add that I can't seem to find an option for with in the plugin is the ability to hide both buttons if there is only one slide present with in the container. My current code is this:
//Goal summary page cycler
$('#showGoal').after('<div id="nav">')
.cycle({
fx: 'scrollHorz',
speed:300,
prev: '#goalPrev',
next: '#goalNext',
timeout: 0,
pager: '#nav',
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return'';
}
});
// call back to remove buttons on first and last slide / adjust height of container
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#goalPrev')[index == 0 ? 'hide' : 'show']();
$('#goalNext')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//animates the container's height to that of the current slide
$(this).parent().animate({ height: $ht });
}
I'm guessing I can either check the index and remove them both that way or possibly do something along the lines of an if statement for example (pseudo code) :
var index = this.index();
var numOfSlides = 0;
if ( numOfSlide < index ) {
//hide the buttons
}
else
{
//show the buttons
}
Thanks for any possible help with this!
The approach recommended by the plugin author is to hide the buttons using Javascript:
http://forum.jquery.com/topic/cycle-plugin-hide-prev-next
Problem solved and I feel like an idiot for missing it, You have to set the display of the arrows to none initially.
Shouldn't it already work? If you only have one slide then your onAfter function should take care of it. With one slide your index is always 0. Your opts.slideCount - 1 would also be zero because you would have one slide minus one.
Edit:
But as stated below, onAfter may need to be called after the page loads because when dealing with one slide the function may not be getting called.