I'm having trouble to integrate the Galleria image gallery plugin onto one of my Jquerytools tabs. When navigating directly to the page with Galleria (example: www.domain.com/index.php#tabnameofgalleriapane), there's no problem.
Whenever the pane with galleria is not loaded immediately (default pane is another pane), Gallery throws an error: Fatal error: Could not extract a stage height from the CSS. Traced height: 0px., which is logical, because when the Galleria pane is not active, it's css is probably display:none;...
Defining the height & width literally does not seem to work. This was the previous setup:
jQuery("#jp_nav").tabs(".jp_pane", { history: true } );
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
So I was thinking to bind the load of the Galleria plugin onload of the pane that contains the Galleria plugin, because in that moment, the Galleria pane does have a height... I've found something to help me on my way, but now I'm getting other JavaScript conflict errors (see below for explanation).
jQuery("#jp_nav").tabs(".jp_pane", {
initialIndex: 0,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
var src = this.getTabs().eq(i).attr("href");
pane.load(src, "#jp_images", function(){
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
});
},
history: true
});
For reasons beyond my control, the website I'm writing this for uses both jQuery and Prototype/Scriptaculous. So please take into account that the script has to be written in noConflict mode. (Which I'm doing in my setup $.noConflict();)
Can someone please tell me if the script below puts me on the right track?
Can someone help me modify the script to work when the #jp_images tab is loaded?
Right now, the above script gives me conflict errors with Prototype.
Anxiously awaiting your expert views!
Regards,
Maarten
I've managed to find a quick and dirty solution (thanks to vfxdude)
Anytime the tab with the Galleria is clicked, I force a page reload, like so:
tabName = 'jp_images';
jQuery('#jp_nav a[href="#'+tabName+'"]').click(function() { if (location.hash == '') location.replace(location.href+'/#'+tabName); });
After this, I can just use the regular old Galleria plugin initialisation.
Granted, it is a little dirty, but it's an easy and quick fix for when on a deadline.
Related
I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.
Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle
I cannot successfully recreate this error in a fiddle. Here's a link to the site (which will never come down).
When you arrive at the site, you'll see a news ticker at the bottom of the site. As you scroll down, you'll notice as you pass 1. Main Slider, 2. Announcement Slider, and 3. Images for Military, Nursing, and Georgia... the ticker gets tucked behind all of these.
How can I keep this on top?
I've already placed this script to be called after the DOM is loaded, and before the slider script is called...
$(function() {
$('div.latest-news').jNewsbar({
position: 'bottom',
effect: 'slideup',
height: 25,
animSpeed: 600,
puaseTime: 4000,
toggleItems: 5,
theme: 's-orange'
});
});
It's using jQuery 1.9.1 (CDN).
First, you can give the CSS Class jnewsbar the attribute z-index: 99
The reason that the other elements — which are OVER the newsbar — are over the newsbar is that they are all position: relative which makes them open for the z-index. And the newsbar is position: absolute — which is also subject to z-index
Due to the fact, that all of the other elements are coming in the DOM later, they are getting a higher "priority", than the newsbar.
So either you use z-index: 99 or you move the jnewsbar DIV down in your HTML.
I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??
I am using a fancybox with plugin jquery.easydrag.js. The reason for this is to be able to drag the fancybox around.
It seems to be working fine, but the problem comes when the fancybox has scrollbars. I.e. for example when clicking on submit and not entering any fields the valdidation on screen causes scrollbars. Which is fine normally but the scrollbars causes all sorts of issues with the draggable feature so that when I am trying to click the scrollbar up and down, it actually moves the entire windows. So it seems to be confused as to what content can be moved and what to do with a scrollbar.
claimLink.fancybox({
'width': 500,
'height': 590,
'autoDimensions': false,
'onCleanup': function (e) {
var modelClaimFormId = $j(e).attr("href").replace("body", "");
var modalClaimForm = $j(modelClaimFormId);
if (!($j(modalClaimForm).valid())) {
$j(claimForm).remove();
$j(e).parents("tr").remove();
}
}
});
$j("#fancybox-wrap").easydrag(true);
EDIT :
I managed to add something for input and textareas to ignore the scrolling see below...just wondering what I can do for scrollbars.
$j("#fancybox-wrap").easydrag(true);
$j("#fancybox-wrap input,textarea").click(function(){
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").mouseover(function () {
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").blur(function () {
$j("#fancybox-wrap").dragOn();
});
$j("#fancybox-wrap input,textarea").mouseout(function () {
$j("#fancybox-wrap").dragOn();
});
This is the link to JS for easydrag plugin
I posted the first example about how to make fancybox draggable back in 2009 for v1.2.1. Then I posted some notes to make it work with v1.3.1 as seen here but when fancybox v1.3.4 was introduced, the easyDrag plugin was not working as smooth as with the previous versions and started behaving buggy. I didn't have the time to find a workaround ... so I just drop it.
The solution was simple though: the easyDrag plugin provides a way to set a "handler" as explained here so instead of holding and dragging the whole #fancybox-wrap container, which blocks access to the scroll bars if any, you just drag the lightbox from a specific defined element. Such handler can be appended to #fancybox-wrap selector and set it within the EasyDrag plugin using the onComplete callback API option like:
'onComplete': function(){
// append the handler on the top-left corner of fancybox
$("#fancybox-wrap").append("<button id='handler'>Drag me</button>");
// set the handler using the handler's element ID
$("#fancybox-wrap").setHandler('handler');
}
Notice that you can use any element as handler, in my example I used a html button but you may use an image if preferred. The important thing is to assign the minimum important css properties to the handler so it can be appended to the #fancybox-wrap container without issue like:
width: 80px; /* or whatever needed */
height: 24px;
position: absolute; /* important to position the handler into the fancybox wrap */
top: 0; /* top-left corner of the box but can be anywhere */
left: 0;
display: block;
z-index: 1120; /* important to be over the box */
other properties can be cosmetic.
See it working here!!!
Once you complete and submit the form, the response will be a new fancybox with scroll bars that you can use independently from the easyDrag handler.
Please feel free to analyze the code and customize it to your own needs (and don't forget to grant me the bounty ;)
UPDATE: Notice that since we are appending the handler to the #fancybox-wrap container every time we fire fancybox, then we need to remove it once we close fancybox using the onClosed callback, otherwise we will duplicate the handler if we open fancybox again with unexpected results:
'onClosed' : function() {
$("#fancybox-wrap #handler").remove();
}
I updated my DEMO too.
LAST NOTE: This solution is for fancybox v1.3.4.
I haven't tested it with v2.x but I don't see why it wouldn't work. Just make sure that you bind EasyDrag and append the handler to the .fancybox-wrap selector instead
$(".fancybox-wrap").easydrag();
You may use the afterShow callback to append the handler to it and afterClose to remove it.
Using the above solution to add a handler for the #fancybox-wrap selector along with the EasyDrag plugin using the onComplete callback API, I found this works nicely with the fancybox 1.3.4 title element to create a dragable fancybox with scroll functionality. Using the title, there is no need to remove it after close.
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script>
<script>
//Fancybox
$(document).ready(function () {
$("#iframeVideoPop").fancybox({
'width': 890,
'height': 595,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
//Style the title where and how you want it
$("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
//Set the fancybox-title as the handler
$("#fancybox-wrap").setHandler('fancybox-title');
}
});
$("#fancybox-wrap").easydrag();
}); //ready
<script>
In order to eliminate the scrollbar problem caused by combining Easydrag with Fancybox, you'll need to eliminate the scrollbars. By default, the Fancybox CSS stylesheet applies the overflow:auto rule to the element -- generated by Fancybox -- that wraps around the content displayed inside the Fancybox.
To override it, include your own CSS rule that supersedes the one that Fancybox applies to the wrapper. Place this style block in the <head> section of your web page:
<style>
/* id of the element generated and used by Fancybox as a wrapper around
the generated content. */
#fancy_ajax {
/* Use the important identifier to ensure the overflow:auto is suppressed */
overflow:none !important;
}
</style>
This will eliminate the scrollbars and allow the easy drag plugin to work smoothly.
After testing these solutions I ran into the problem with dragging an iframe. To resolve, I switched to the jQuery 1.9.1 UI plugin for dragging and created a transparent image while dragging. Remove the image after dragging to access the content. Works great with fancybox iframe and enables fast dragging over the iframe. See sample code below.
$("#iframePop").fancybox({
'width': 890,
'height': 430,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
$("#fancybox-title").css({'top':'-2px', 'left':'15px', 'bottom':'auto', 'cursor':'move'});
$("#fancybox-wrap" ).draggable({ handle: "fancybox-title", iframeFix: true,
start: function(ev,ui){$("#fancybox-wrap").append("<img src='#Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")},
drag: function(ev,ui){},
stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()}
});
}
});
Is it possible to have YUI menus e.g. slide in as opposed to simply popping up?
Of cause. You should set up SLIDE effect for the widget.
var oMenu = new YAHOO.widget.Menu(
"productsandservices",
{
position: "static",
hidedelay: 750,
lazyload: true,
effect: {
effect: YAHOO.widget.ContainerEffect.SLIDE,
duration: 0.25
}
}
);
One of the older (be careful as at the time I used it, it required patches) series of examples for YUI MenuBar hacks in this functionality using various events:
http://developer.yahoo.com/yui/examples/menu/topnavfrommarkupwithanim.html
I don't think this is available out of the box, which is a bummer. Another peeve of mine is that there's no (built-in) way to hide submenus automatically once the user has moused over some options. This makes sense for accessibility (and is the reason it is like that, according to the YUI team), but there's nothing I can do about clients who will only see it as broken.