I'm trying to add a class of "active" to the current slide in carouFredSel, and I can't get it to work. The closest I could get it to work was to add it on the first slide, using trigger("currentVisible"), but it doesn't update.
Help! Thanks :)
So far, I used this function ( it doesn't work on page load though and it seems to be a lot of code for that simple task)
Maybe someone has an idea how to simplify this and also make it work on page load
function highlight( items ) {
items.filter(":eq(1)").addClass("active");
}
function unhighlight( items ) {
items.removeClass("active");
}
$('#foo').carouFredSel({
scroll : {
onBefore: function( data ) {
unhighlight( data.items.old );
},
onAfter : function( data ) {
highlight( data.items.visible );
}
},
});
Here's an update that should work fine on page load and scroll:
Here are more details about the trigger event.
var $highlight = function() {
var $this = $("#foo");
var items = $this.triggerHandler("currentVisible"); //get all visible items
$this.children().removeClass("active"); // remove all .active classes
items.filter(":eq(1)").addClass("active"); // add .active class to n-th item
};
$('#foo').carouFredSel({
scroll : {
onAfter : $highlight
},
onCreate : $highlight
});
scroll : {
onAfter : $highlight
}
solved my issue
Related
Hope someone can help me out since I don't really know js and would like to build upon an existing function on a WP site...
I have two versions of a site header. On the homepage the alt (transparent background) version loads, and after scrolling, it swaps to the sitewide non-alt (white bg) version.
I would like to add a condition where the header also swaps to the non-alt version when the the menu button is "toggled" (class="main-navigation toggled").
Here's the existing function. Thanks is advance.
jQuery(document).ready(function ($) {
console.log('ready');
var header = $(".site-header");
if( $("body.home").length ) {
header.addClass("site-header-alt");
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if( $("body.home").length ) {
if (scroll <= 100) {
header.addClass("site-header-alt");
} else {
header.removeClass("site-header-alt");
}
}
});
});
Just simply put:
$(document).ready(function () {
// check if .main-navigation contains toggled class
if ( $(".main-navigation").hasClass("toggled") )
{
header.addClass("site-header-alt");
}
// Also listen to the click event of the element that does the toggling.
$(".menu-toggle").click( function () {
if ( $(".main-navigation").hasClass("toggled") )
{
header.addClass("site-header-alt");
}
});
// other stuffs
});
hope that helps
I'm working on creating a mobile accordion nav for a website. I have a basic accordion set up, the problem I am having is when I open one tab I want the other tabs to automatically close so only one tab can be opened at once. Here is the code
$(document).ready(function() {
// Collapsible Menu
function accordion(trigger) {
//variables
var $button = $(trigger),//trigger firing the event
visible = true;//flag for wayfinding
$button.hover().css({'cursor': 'pointer'});
//event
$button.click(function() {
//conditional check
if ( ! visible ) {
$button.removeClass('active');
$('.panel-title .icon').html('⊕');
$(this).next().slideUp('slow',function() {
$(this).addClass('visuallyhidden').slideDown(0);
$('.panel-content').attr( 'aria-expanded','false' );
});
}else {
$button.addClass('active');
$('.panel-title.active .icon').html('⊗');
$(this).next().slideUp(0,function() {
$('.panel-content').attr( 'aria-expanded','true' );
$(this).removeClass('visuallyhidden').slideDown('slow');
});
}
//flag dude
visible = !visible;
return false
});
}
//call to widget trigger1
accordion('#trigger1');
//call to widget trigger2
accordion('#trigger2');
//call to widget trigger3
accordion('#trigger3');
Codepen link - http://codepen.io/Ahhmmogh/pen/WvMMZN
Any help would be greatly appreciated.
Here's a working codepen: http://codepen.io/alezuc/pen/OVQvMV
I've added a check on panel's visibility and on 'active' title
if ( $(this).find('.panel-content').css('display') == 'none' ) {...}
if ( $(this).hasClass('active') ) {...}
I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});
Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?
My javascript looks like the following:
<script type="text/javascript">
$(document).ready(function() {
// isotope
var $container = $('#content');
$container.imagesLoaded( function(){
$container.isotope({
filter: '*',
itemSelector : '.element',
getSortData : {
colors : function( $elem ) {
return $elem.find('.colors').text();
},
number : function( $elem ) {
return $elem.find('.number');
}
}
});
var $sortedItems = $container.data('isotope').$filteredAtoms;
// filter items when filter link is clicked
$('#filter a').click(function(){
alert("filter");
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
// sorting
$('#sort a').click(function(){
var sortType = $(this).attr('data-sort');
$container.isotope({ sortBy : sortType });
return false;
});
});
});
function updateContent(path, args) {
$.ajax({
url: (path+args),
type: "POST",
success: function( data ){
$(allCards).remove();
$("#content").html( data );
$('#content').isotope( 'reLayout', callback );
}
});
}
function callback() {
alert("success: "+$('#content').height());
}
</script>
Whenever I use the updateContent() function the height of the #content div becomes 0. I think there could be a race condition happening due to the content not having been fully loaded and isotope initializing before the next set of images have been loaded.
It works fine when I first load the document. However when I load a new set of images with updateContent() it sets the #content div height to 0. Ideally I'd like to be able to load a new set of images and isotope would initialize as it normally does and height should be an appropriate value for all of the images to fit inside the #content div.
The following part needs to be fixed and this is what I have so far...
$(allCards).remove(); // remove all previous images
$("#content").html( data ); // load new images
$('#content').isotope( 'reLayout', callback ); // <- reinit isotope to manage the new images
Basically I'd like it to remove all previous images and load all the new images in data and isotope would work with the new images.
I solved the issue by prepending. I'm putting this up so people don't have to suffer like I did.
$("#content").isotope( 'remove', $(".element"), function(){
$("#content").prepend($(data)).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
});
Have a look at http://isotope.metafizzy.co/docs/methods.html
Firstly make sure the markup your appending to $("#content") has the .element class.
If they don't have it, you'll need to append it to them before attempting to insert them into the isotope container.
Secondly try using the inbuilt method for removing appending objects
.isotope( 'addItems', $items, callback )
In your case it would be:
$("#content").isotope( 'remove', $(".element"), function(){
$("#content").isotope( 'addItems', $(data), function(){
$("#content").isotope( 'reLayout' callback );
});
});
You probably do not need to utilize the callbacks from 'remove' and 'addItems', but without a jsfiddle example it's hard to tell.
Want to create jquery menu like on this website slide from left and when click on icon restores to its orignal position.
http://wittlingerorthodontics.com/default2.asp
only able to achieve this on jsFiddle
http://jsfiddle.net/messi1987/tfASa/
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "slide";
// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).effect( selectedEffect, options, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
whereas i want to make it slide in and on click to button/image slides back to orignal positon. New to jquery so do'nt get the helping content any where. Help me out to do this.
for complete understanding check the referenced website.
try this fiddle , i think this is what u want
$(function() {
$('#button').click(function(){
$(".ul_menu").toggleClass('show');
if( $(".ul_menu").hasClass('show')){
$(".ul_menu").show("slide",{direction: 'left'});
}else{
$(".ul_menu").hide("slide",{direction: 'left'});
}
});
$('#button').mouseleave(function(){
if($(".ul_menu").hasClass('show')){
$(".ul_menu").hide("slide",{direction: 'left'});
}
})
});