I'm having a hard time describing exactly what the problem is.. but the link in question is: http://www.evolutionarycollective.com/events/
You'll notice that when you load the "Calendar" tab, the calendar doesn't show up. If you resize the window, or manipulate the page in some other way, then the calendar appears. The calendar loads fine when it's not within a tab. It's being called in the header with:
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: themeforce.events
});
});
</script>
EDIT:
I believe this is the section of the script library that handles the tabs and panes.. (I'm using this with a wordpress theme that calls the tabs via a shortcode)
// jQuery tool's tab creator is not shortcode friendly, transfer the titles to the correct tabs area
jQuery('.bfi_pane').each(function(i) {
var title = jQuery(this).attr('title');
jQuery(jQuery(this).siblings('.bfi_tabs,.bfi_tabs_slide,.bfi_tabs_fade')[0]).append('<div>'+title+'</div>');
});
// Custom slide effect for tabs. slide up then down
jQuery.tools.tabs.addEffect('slide-slide',function(i, done) {
this.getPanes().slideUp(400).eq(i).delay(400).slideDown(400, done);
});
// Custom slide effect for tabs. slide up and down simultaneously
jQuery.tools.tabs.addEffect("slide", function(i, done) {
this.getPanes().slideUp(400).eq(i).slideDown(400, done);
});
// IMPORTANT: SLIDEDOWN JQUERY FIX. we need to assign the correct heights
// so that the slidedown effect doesn't JUMP
jQuery(".bfi_accordion_pane").each(function(i) {
var heightTo = jQuery(this).height();
var paddingTop = parseInt(jQuery(this).css("padding-top").replace('px', ''));
var paddingBottom = parseInt(jQuery(this).css("padding-bottom").replace('px', ''));
var marginTop = parseInt(jQuery(this).css("margin-top").replace('px', ''));
var marginBottom = parseInt(jQuery(this).css("margin-bottom").replace('px', ''));
jQuery(this).css("height", heightTo + paddingTop + paddingBottom + marginTop + marginBottom);
});
// start jQuery tool tabs. we have to do this the long way so we can make
// initialIndex work properly
jQuery(".bfi_tabs_slide").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'slide-slide', initialIndex: parseInt(openTab, 10)});
});
jQuery(".bfi_tabs_fade").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'fade', initialIndex: parseInt(openTab, 10)});
});
Is there some way I can somehow refresh the script when that tab lis loaded.. or fire off another document.ready?
Thank you!
The probable explanation is that the full calendar can't figure out its height because when initially created that tab is hidden, which will make it have zero width and height.
Just make the call to .fullCalendar() in a tab switch event handler.
Alternatively use the "off-left" method of hiding tabs, as described in the last few paragraphs of http://jqueryui.com/demos/tabs/
Related
I set the optioon triggerOnce to true, it work like a charm if i start srcolling from beginning (top of the page) and start scrolling down.
But if i refresh the page at the bottom of the page and start scrolling up, it wont trigger the above targeted element like it did when scrolling down from the top of the page.
here my code:
$('.anim').each(function(index, elHtml) {
var el = $(this);
// console.log($(this), el);
var _animation = el.data('animation'),
_duration = el.data('duration') ? el.data('duration') : 1000,
_offset = el.data('offset') ? el.data('offset') : 'bottom-in-view';
el.waypoint(function(direction){
el.velocity(_animation, _duration);
if(direction == 'up'){
el.velocity(_animation, _duration);
}
}, {
offset: _offset,
triggerOnce: true
});
});
Please let me know if you have the solution.
Thank you for your time :)
This is because when the page loads and Waypoints are added, they check to see if they have already been passed in the down direction and if they have, it triggers the waypoint. So in your case, you're hitting the waypoints in the down direction and they are being destroyed after the down trigger.
The "workaround" for your use case is to create them disabled using the enabled: false option. Then, after the page is done loading, call enable on the waypoints.
I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...
$(window).load(function() {
$(".twentytwenty-container").twentytwenty();
});
Maybe? Much appreciated.
It's a little bug, but fixed by add code.
Add this to jquery.twentytwenty.js file:
$(window).load(function() {
$(window).trigger("resize.twentytwenty");
});
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
// >>>>> HERE ADD CODE <<<<<<
return this.each(function() {
//.......
source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2
I've sat on this same issue for a long time. I was using the class to .twentytwenty-container in the code. When I switched it to an id (here, #container-id), the issue seemed to go away.
$(window).load(function(){
$("#container-id").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
});
});
Does this work for anyone else?
I am using http://jquery.malsup.com/cycle2/api/ and I am trying to destroy cycle2 slider on window resize event when I detect mobile device. Unfortunatly it returns the following two errors:
[cycle2] slideshow must be initialized before sending commands; "destroy" ignored
[cycle2] slideshow must be initialized before sending commands; "reinit" ignored
Maybe someone could help, what am I doing wrong? Here is the code:
$(function() {
var slider = $('.slider').cycle();
condition = true;
//destroy onload under condition
if(condition){
slider.cycle('destroy');
}
//destroy on resize
$(window).on('resize',function() {
condition = true; //Will be function to recondition let´s say it's true by now
if(condition){
slider.cycle('destroy');
} else {
slider.cycle('reinit');
}
});
});
Thank you.
I know this is an old question, but I was trying to figure this out too, and after careful reading of the docs, this is what I came up with.
So I use the data attributes to set my options on my slideshow. I really like this feature.
For simplicity sake, here is my opening cycle2 div
<div data-cycle-carousel-visible="3"
data-cycle-carousel-fluid="true"
data-cycle-fx="carousel"
data-cycle-prev="#carousel-prev"
data-cycle-next="#carousel-next"
class="cycle-slideshow cycle-front-page-slideshow"
>
Notice that I did add the cycle-slideshow class so Cycle2 auto initializes, then I also added another class of cycle-front-page-slideshow just in case I have other slideshows on my site I can target just this one.
My javascript then looks like this.
function check_window_size( opts ){
// Check if the max-width of window is 899px; window.matchMedia is a native javascript function to check the window size.
var w899 = window.matchMedia( "(max-width: 899px)" );
// if it is max-width of 899px, then set the number of items in the cycle2 carousel slideshow to 2, else show 3
// to see if it matches, you would use the variable and grab the matches array; this will return true or false if window size is max-width 899px
if( w899['matches'] ) {
opts.carouselVisible = 2;
}else{
opts.carouselVisible = 3;
}
}
This is where you would target your slideshow (mine using the .cycle-front-page-slideshow class)
// Grab the cycle2 slideshow initialized from the data attributes on the DIV above
$('.cycle-front-page-slideshow').on('cycle-bootstrap', function(e, opts, API) {
// run the check_window_size function to get initial window size, just in case they are max-width 899px already
check_window_size( opts );
// When window is resized, send the options to the check_window_size function so we can manipulate it
window.onresize = function() {
check_window_size( opts );
};
});
Also note that if you want to use the Carousel functionality, you must download the cycle2 carousel transition plugin from http://jquery.malsup.com/cycle2/download/
Hope this helps out other people.
Looks like you're destroying the slider here:
if(condition){
slider.cycle('destroy');
}
You could do it like that:
$(function() {
var $W = $(window),
slider = $('.slider').cycle();
$W.on('resize',function() {
if ($W.width() < 768) // width of device
slider.cycle('destroy');
});
});
i have finished this code off but im stuck on teh last thing i have to do, when a item is added it auto scrolls to the bottom which is great but what i cannot work out how to do and im sure its simple is when i use the scroll bar i want to stop it jumping to the bottom until i stop using the scroll bar.
you will see in the example ive provided if you click on scrollbar and drag up it keeps jumping down when it adds a new item, i just need to pause that until i stop using the scroll bar if that makes sense.
it uses api.scrollToBottom(); to scroll to the bottom once the new item is added which is correct, but unsure on the condition for mouseover etc... to stop that when those are the conditions.
Hope someone can help me on this, many thanks in advance! :)
JSFiddle here: http://jsfiddle.net/GT7sV/2/
JS
var settings = {
showArrows: true,
verticalArrowPositions: 'os',
horizontalArrowPositions: 'os',
animateScroll: true
};
var pane = jQuery('.scroll-pane');
pane.jScrollPane(settings);
var api = pane.data('jsp');
var i = 1;
api.scrollToBottom();
setInterval(
function()
{
api.getContentPane().append("<li>testing this new item</li>").children(':last').hide().fadeIn(1000);
api.reinitialise();
api.scrollToBottom();
},
1000
);
});
Thanks!
I dont know if this is ok for you but you could try it in different direction. You could load new rows when user scrolls to the bottom:
conversationHeadersScrollPane = $('.scroll-pane').bind(
'jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
if (isAtBottom) {
//add new rows for example with ajax call
}
});
edit: there is a function getPercentScrolledY()
so you could before calling scrollToBottom check if user is for example bellow 90%, if not let him read while he scrolls on his own to the bottom.
I know this should be simple, but it doesn't appear to be working the way I hoped it would.
I'm trying to dynamically generate jQuery UI dialogs for element "help."
I want to toggle the visibility of the dialog on close (x button in dialog), and clicking of the help icon. This way, a user should be able to bring up the dialog and get rid of it, as needed, multiple times during a page view.
// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
$(Element).dialog({
autoOpen: false,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
$("a.help").live("click", function (event) {
var helpDiv = "div#" + $(this).closest("span.help").attr("id");
var dialogState = $(helpDiv).dialog("isOpen");
// If open, close. If closed, open.
dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});
Edit: Updated code to current version. Still having an issue with value of dialogState and dialog('open')/dialog('close').
I can get a true/false value from $(Element).dialog("isOpen") within the each. When I try to find the element later (using a slightly different selector), I appear to be unable to successfully call $(helpDiv).dialog("isOpen"). This returns [] instead of true/false. Any thoughts as to what I'm doing wrong? I've been at this for about a day and a half at this point...
Maybe replace the line declaring dialogState with var dialogState = ! $(helpDiv).dialog( "isOpen" );.
Explanation: $(helpDiv).dialog( "option", "hide" ) does not test if the dialog is open. It gets the type of effect that will be used when the dialog is closed. To test if the dialog is open, you should use $(helpDiv).dialog( "isOpen" ). For more details, see http://jqueryui.com/demos/dialog/#options and http://jqueryui.com/demos/dialog/#methods.
I was able to get it working using the following code:
$("div.tooltip").each(function (index, Element) {
var helpDivId = '#d' + $(Element).attr('id').substr(1);
var helpDiv = $(helpDivId).first();
$(Element).dialog({
autoOpen: true,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
var helpDiv = $(helpDivId).first();
var dialogState = helpDiv.dialog('isOpen');
dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});
I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.