I've been struggling to get this code to work for the whole day now..
I have a (content) slider (using the Coda Slider plugin) which contains more tabs then visible by default. Basically what I'm trying to achieve is to make the tabs scrollable, meaning when you arrived at the last visible tab and click next, it should become visible. Exactly the same as the jQuery UI scrollable plugin does (Demo and documentation).
I could switch to this but unfortunately I need to stick with the Coda slider plugin..
I've tried to use the code of the scrollable jQuery UI but without success.
Basically I need to write 2 functions (see my code below), one when you click directly on the tab (which changed to current state) and another one when you click prev/next.
DEMO
Any ideas?
Function when user clicks prev/next
$('.coda-nav-left, .coda-nav-right').click(function(e) {
if ($(this).hasClass('coda-nav-left')) {
$('.coda ul li').remove('.coda ul li:first');
} else {
$('.coda ul li'). remove('.coda ul li:last');
}
});
Function when user clicks on a tab and class changes to current
function current() {
var $current = $('.coda-nav ul li a.current');
if (current) {
//show next/prev tab next to and sibling from current..
}
}
Related
I need to have some of my navbar buttons redirect for instance back to my start page. It seems the smooth-scroller coding needs the menu items to direct to hashtag anchors for the menu items to function and this does work, but when I try to redirect to another page entirely, nothing happens. There is no error and there is no div covering the button.
A solution I saw on here involved adding a statement to the scroller code to disable the need for hashtags for specific external links, but I don't know how to code this and my template's code is dissimilar to the one mentioned in the thread. I would in other words need a code that states to do the regular actions onclick, as long as the button does not have the class "ext-link". See the link below for more specific details. One page theme Bootstrap Navigation Link does not direct to another page, while it works for anchors inside the page
I'm not entirely sure the below is the right code, but it seems like it. How would I rewrite it to include an "if click and not class=ext-link" case so that I could enable external links from my site-root for my navbar?
jQuery('#scrollToContent').click(function(e){
e.preventDefault();
jQuery.scrollTo("#portfolio", 1000, { offset:-(jQuery('#header .top').height()), axis:'y' });
});
jQuery('.nav > li > a').click(function(e){
e.preventDefault();
jQuery.scrollTo(jQuery(this).attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
})
jQuery(window).scroll( function() {
//setHeaderBackground();
});
If I got this right you can modify the second click even handler with this code and it should work:
jQuery('.nav > li > a').click(function(e){
var $this = jQuery(this);
if (!$this.hasClass('ext-link')) {
e.preventDefault();
jQuery.scrollTo($this.attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
}
})
Hope this helps. :)
I have a accordian menu in my asp.net page. The menu is working good but some times it's automatically collapsing. If I reload the page it's some times working but most of the time problem exist. Please find my html and jquery code from jfiddle. Here
$('.loc').click(function () {
$('#sidewrapper ul ul').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
}
});
Edit:
my problem is, If I click one list that would be active others should collapse. My code is working fine. But some time(most of the time!) if I click one list that slide is just showing and collapsing automatically without clicking other list.
Thats because your trying to slide up all the unordered list present on your page, if you can just try to slide up the list which your currently clicking on, it will work fine.
JS CODE:
$('.loc').click(function () {
//$('#sidewrapper ul ul').slideUp();
$(this).closest('li').find('ul').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
}
});
Live Demo # JSFiddle
I am making a menu and have ran in to some jQuery issues.
I want my toggles to stay up once they have been clicked but instead they are sliding up but then straight back down again.
I have managed so far to have one close and another open simultaneously. Any thoughts?
Here is the current JS :
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function(){
jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
jQuery(this).find('.food-content').slideDown();
});
I have made a JS Fiddle:
https://jsfiddle.net/marmaaduke/uyb4Lzuy/
Just exclude the current item clicked from the slideUp (with not) and use slideToggle for the current item.
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function () {
jQuery(".menu-container, .full-menu-container").siblings().not(this).find('.food-content').slideUp();
jQuery(this).find('.food-content').slideToggle();
});
https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/
i have this jquery script that i can't get to work like i want, i want a button that shows all the content at the same time and hides the content at the same time.
When pressing a link, i want all the slides to slide out, and show all the content, and pressing it again will hide it. Is this possible?
I've tried to create a link that run
javascript:slideonlyone('newboxes1')
javascript:slideonlyone('newboxes2')
but it doesn't seem to work.
Fiddle
if ($(this).attr("id") == thechosenone) {
$(this).slideToggle(400);
}
Remove the above if condition, which is preventing to slide both elements.
$('.newboxes2').each(function (index) {
$(this).slideToggle(400);
});
JSFiddle
See http://jsfiddle.net/F48AT/5/ You use
$(this).slideToggle(400);
here the this scope refers to the current clicked item. Since you want all slides to open, you need to use a class common for all slides. In your case this is .newboxes2. Therefore this code opens all slides:
if ($(this).attr("id") == thechosenone) {
$('.newboxes2').slideToggle(400);
}
Alright, I'm using the UberMenu Plugin for Wordpress. When you click the parent item in a menu, the child-menu slides down into position underneath and stays put. After clicking on a child-menu link, the normal function is for the child-menu to disappear and be reactivated by click on the parent item again.
So, I wanted the child-menu to stay visible after going to a child-page and afterwards continue with the original functionality after that very first instance. Miraculously, I've gotten this far with success.
You can view the working menu/sub-menu here: http://goo.gl/MC8Aw
I added this code to the UberMenu.dev.js:
jQuery('document').ready( function($){
var id = $( '#megaMenu ul.megaMenu > li.current-menu-item, #megaMenu ul.megaMenu > li.current-menu-parent, #megaMenu ul.megaMenu > li.current-menu-ancestor' ).live().first().attr( 'id' );
uberMenu_openMega( '#' + id );
});
You can see the entire .js file here: http://goo.gl/xZd6g
Alright, so the only issue is that when the child-page loads and the child-menu is triggered immediately by the above code, it's retaining the slide transition from the primary functionality. This gives a delayed look/experience to the child-menu that I want to avoid/minimize.
Is it possible to amend the above code (which seems already set up to only affect the first appearance of the menu) so that it also ignores the slide transition needed throughout the rest of the plugin?