We Keep Coding

Responsive setting creates page scrolling issues

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

How to hide images until AFTER jquery flexslider finishes loading

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??

Jquery Fancybox draggable issue with Scrollbars

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()}
});
}
});

amCharts doesn't display chart for initially-hidden divs

I am using amCharts (which uses Raphaël behind the scenes) to render some charts as SVG; and have noticed that if the SVG is rendered in an initially-invisible div, the browser does not immediately render the image when the div becomes visible. If I modify the display however, e.g. by resizing the browser or Ctrl-mousewheel zooming, the SVG image is then rendered as expected when the page is redrawn.
The exact method of div visibility switching is via Bootstrap's tabbed navbar.
I admit to not being very experienced with SVG - is this an issue with the browsers' rendering, or amCharts' SVG markup, or am I required to explicitly call some sort of repaint method when I can tell the visibility of an SVG has changed?
Here's a jsFiddle which illustrates the problem; if you switch to Section 2 (in Chrome, Firefox) the chart isn't visible initially. Resizing the display causes it to appear.

I've found the reason for both the initial behaviour and the workaround - and it's all amCharts specific (nothing to do with SVG per se) so I'm rephrasing the title accordingly.
What happens is that when amCharts creates the SVG, it needs to (or at least, decides to) define the width and height in absolute terms. These are based on the size of the target div, obtained via the offsetWidth and offsetHeight properties.
The inactive tab has the display: none property set, and as a result this part of the DOM is not even rendered, so returns zero for both size properties. This ultimately leads to amCharts creating a 0x0 SVG chart when chart.write is called for the hidden div.
Resizing fixes things because each chart registers a listener to the onresize window event, which calls the chart's handleResize method. This forces a recalculation of the width and height based on the div's new (current) dimensions.
So in conclusion I think there are two alternative ways to handle this:
Call chart.write for a chart when and only when its tab becomes visible.
Call each chart's handleResize method when the tabs change.
(The first option avoids the initial hit of rendering an invisible chart, but then does a full redraw every time the tabs are changed. The latter takes a hit up-front but is likely quicker thereafter. For bonus marks, the best solution would be to render each chart exactly once between each resize, the first time it becomes visible, but that's a lot more complex as it would involve interfering with the default event listeners, amongst other things.)
Update: There's further complications with rendering an invisible chart; in particular, I found issues with the height calculations not taking into account the space required by the domain axis and so stretching the chart out of its div. This wasn't fixed by calling handleResize - calling measureMargins beforehand looked like it should work but didn't. (There's probably another method one could call after this to make it work such as resetMargins but at this point it started to feel very flaky...)
As such I don't think it's practical to render a chart for the first time on a non-visible div, so I went with some combination of the bullets above. I listen for when a chart's tab becomes visible for the first time and then call chart.write for the appropriate chart object - and whenever the tabs change, all previously-rendered charts are told to handle the resize.

* Edited *
Here is a updated fiddle. The Canvas will only be rendered once the tab is shown.
I store the chartdiv ids in an array and check whether there are in it or not.
* Edited *
The only solution I found was to show the Graph after the specific tab is shown.
As you see in this jsFiddle.
var tabs = $('.tabbable').tab()
tabs.on('shown', function(e){
id = $(e.target).attr('href');
chartdiv_id = $(id).find('.chartdiv').attr('id');
doChart(chartdiv_id, true);
});
I guess it isn't exactly what you are looking for, but i hope it helps for the moment.

I had the same problem, but my solution it's alternative to display:none, you can use this class in the css
.hidden {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
this dissapear of the screen but visible for the amchart, so the resolution of the chart never lose the size!!!!

I completely agree with Andrzej Doyle.
Issuing handleresize on the chart when clicking on the selected div (tab) works for me on cs-cart with custom tabs (not jquery ones).
The following works while cart beeing globally defined.
function refreshchart(){
chart.handleResize();
};

I also ran into the issue and fixed it by making the initializer a function. Working fiddle.
$("#button").click(function(){
$("#chartdiv").toggle();
makeChart();
});
function makeChart() {
var chart = AmCharts.makeChart("chartdiv", {
//all the stuff
});
}

This Might help you to resolve issue . I have my amchart showing in different tab pan . SVG Component does not allow them to show that div due to resizing issue .
$(window).resize(function() {
setTimeout(function() {
chart.write("chartdiv1");
}, 300);
});
resize again your window while you create your charts ..

Show me charts
<div class="charts_div" style="display:hidden;">
some charts here
</div>
<script>
$(document).on('click', '.show_charts', function(){
$('.charts_div').toggle();
//just redraw all charts available on the page
for(var i = 0; i < AmCharts.charts.length; i++) {
AmCharts.charts[i].validateData();
}
});
</script>

var chart = null;
AmCharts.ready(function () {
chart = AmCharts.makeChart('chart', .....);
});
$(document).ready(function(){
$("#view_chart").click(function(){
chart.validateSize();
});
});
<button type="button" id="view_chart">View Chart</button>
<div style="display:none;" id="chart"></div>

Another work around would be
drawTransactionTypeChart();
setTimeout(function(){hidePieCharts();},1);
Initially set display:inline to div which is chart container, it gets rendered .
Then set display:none using setTimeout() after 1ms.
Hope this helps...

I have two amcharts on different tabs.
A stock chart to be place on #chartdiv and a pie chart to be placed on #chartdivpie.
This is how I solved my problem.
My custom css - to overwrite bootstrap -
#chartdivpie { width: 1138px; height: 500px; }
.tab-content .tab-pane {
position: absolute;
top: -9999px;
left: -9999px;
display: inline;
}
.tab-content .tab-pane.active {
position: inherit !important;
}
JQuery call
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show');
chart.invalidateSize();
chart.write('chartdiv');
})

Load Galleria when navigating to specific Jquerytools tab

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.