Develop Reference

Fade in on scroll doesn't work in mobile browser

I am using this code to add class "show" to my images so when a person scrolls down, images show up. It works on desktop (tested in chrome, with mousescroll and with touch simulation) but it does not work in chrome on mobile device. Swipe(scroll with touch) is not detected. Page goes down but images dont get that .show. I am using this inside fullpage.js+iscroll.js page.
You can try this at: http://www.vinarijapantic.com/apps/onePage/project.html
Any ideas?
jQuery(document).ready(function($) {
function showImages(el) {
var windowHeight = jQuery(window).height();
$(el).each(function() {
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 250 > thisPos) {
$(this).addClass("show");
}
});
}
/*full page library */
var SCROLLING_SPEED = 600;
$('#fullpage').fullpage({
scrollOverflow: true,
css3: true,
controlArrows: true,
loopHorizontal: false,
easing: 'easeInOutCubic',
easingcss3: 'ease-out',
autoScrolling: true,
scrollingSpeed: SCROLLING_SPEED,
//anchors:['s0', 's1', 's2', 's3']
afterLoad: function(anchorLink, index) {
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
if (slideIndex == 0) {
$('.slide-' + index).addClass('show');
} else {
$('.slide').removeClass('show');
}
if ($('.bigScroll').hasClass('active') && $('.bigScroll').closest('.section').hasClass('active')) {
console.log($(".bigScroll").height());
showImages('.bigScroll img');
$('.fp-scrollable').scroll(function() {
showImages('.bigScroll img');
});
}
}
});
});

Enable JavaScript on mobile web
There are situations where the browsers throw an error like
"when trying to access ------- on a mobile device"
it means the web browser on your device needs to have JavaScript turned on before you load the page.
To turn on JavaScript, open the settings menu for your mobile web browser and look for the JavaScript option.

It's not worth the technical debt to build your own lazy loading plugin (which is a colloquial name for what you are trying to do). Use a contributed jQuery plugin instead.
I've used this one with great success in the past: https://github.com/tuupola/jquery_lazyload
It's really easy to use - just add an data attribute to your HTML img tag and instantiate the plugin with a simple jQuery reference.
HTML:
<img class="lazy" data-original="img/example.jpg">
JS:
$("img.lazy").lazyload();

Content inside fancy box need to be responsive

I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
$("#hidden_content").instagram({
clientId: blockInstaSettings.clientId
, hash: hash
, userId: blockInstaSettings.userId
, next_url: insta_next_url
, show: 10
, image_size: image_size
, onComplete: function (photos, data) {
var album_html = "";
$.each(photos, function( index, val ) {
album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","’") + "' longdesc='" + val.link + "'>";
});
$(".galleria").html(album_html);
$('#block_instagram').on('click', function () {
openPop();
return false;
});
}
});
Notice that I set up the listener in the button that show the fancybox
function openPop(){
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#popup'
});
Galleria.run('.galleria', {
transition: 'fade',
popupLinks: true,
show: no,
extend: function(options) {
Galleria.get(0).$('info-link').click();
}
});
}
Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.
Also for CSS, it need to be :
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
How to fix that?
Reference
My site:
http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
The plugin used:
http://galleria.io/
http://fancyapps.com/fancybox/

As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
// Reload theme
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.

every thing is responsive and works good. Elaborate your problem .
if you want your popup thumbnails appear in middle of your popup use the following code
.galleria-thumbnails {
text-align: center;
width: 100% !important;
}
.galleria-image {
display: inline-block;
float: none !important;
}

I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox
fitToView : true,
autoSize : true,
width : 100%,
height : 'auto',
you can play with fitToView and autoSize till you get the desired effect much like pinterest

you can do this with a simple css trick .
in the responsive media screen you have to set the css as
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
background-size: 100% auto !important;
}

Firefox CSS3 transition not working when toggled from external js file

I know there are bunch of questions already about CSS3 transitions not working in firefox. I think this one might be quite unique. As the transitions DO work when added into the relevant click functions within $(document).ready() . But once I've put the same code out into a basic js class and instantiated within $(document).ready it refuses to work in firefox 24. Works in all other major browsers.
Can anyone shed some light.
I've put up a test site here: http://test.gladekettle.com.au/modal/
var ModalApp = function (options) {
//default options
var defaultOptions = {
modalElem : "#modalresponsive",
z : 99,
overflowvisible : true,
scrollbardelay : 1000
}
for (i=0; i < options.length;i++){
if(typeof options[i] === "undefined"){ options[i] = defaultOptions[i];
}
} //for - set default options if not defined.
var $modalObj = $(options.modalElem);
var zindex = options.z;
$modalObj.css('z-index', zindex);
$modalObj.addClass('modalhidden');
this.close = function() {
$modalObj.removeClass('scrollvisible');
$modalObj.removeClass('modalvisible').addClass('modalhidden');
$('.modalactive').removeClass('modalactive');
};
this.open = function() {
$('html').addClass('modalactive');
$modalObj.removeClass('modalhidden').addClass('modalvisible');
setTimeout(function() {
$modalObj.addClass('scrollvisible');
}, options.scrollbardelay);
};
};

This has nothing to do with "external js files". The culprit is .modalactive { overflow: hidden; }, which gets set/unset to html on click and seems to be canceling out the transitions for whatever reason.
You may verify this by disabling the rule, either live on your site with the developer tools or see this fiddle.
You should file a bug and stop using that rule.

Jquery tooltip is very jumpy

I'm trying to use the jquery tooltip plugin to expand some image thumbnails, and show the full sized images when someone hovers over the thumbnails. However this is very jumpy, the tooltip jumps around 2-3 times before being fixed in one place even when the mouse stays static.
Why is that? Is there a way to fix it?
Html code:
<ul class="gallery" id="gallery">
<li>
<img src="<?=site_url('images/Balloon Fest..jpg');?>" class="galleryImg" />
</li>
</ul>
Javascript:
$(".galleryImg").tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", this.src)
.attr('width', 300).attr('height', 300);
}
});

I found a solution on the jquery forum.
Just remove show and hide effects like this:
jQuery('#myelement').tooltip({
show: false,
hide: false
});

I've used that same jQuery plug-in, but it was given me some problems with large amount of elements on the same page. After testing some, I've opted for this one:
You can see a working demo here!
And the web page link Here!
EDITED
As requested on the comments, here you have a jQuery extension based on the above plugin:
JQUERY
(function($) {
$.fn.tooltipImg = function(options) {
// options
var opts = $.extend({}, $.fn.tooltipImg.defaults, options);
// when the mouse gets over the element
$(this).hover(function(e){
this.t = this.alt;
var c = (this.t != "") ? "<br/>" + this.t : "",
src = ($(this).data("src")!='') ? $(this).data("src") : this.src,
res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>';
$("body").append(res);
$("."+opts.wrapper)
.css({
"top" : (e.pageY - opts.xOffset) + "px",
"left" : (e.pageX + opts.yOffset) + "px"
})
.fadeIn("fast");
},
function(){
$("."+opts.wrapper).remove();
});
// when the mouse moves while over the element
$(this).mousemove(function(e){
$("."+opts.wrapper)
.css({
"top" : (e.pageY - opts.xOffset) + "px",
"left" : (e.pageX + opts.yOffset) + "px"
});
});
}
// options defaults
$.fn.tooltipImg.defaults = {
xOffset : 10,
yOffset : 30,
wrapper : 'myTooltipImgWindow'
}
})(jQuery);
USAGE
$(document).ready(function(){
$('.tooltipMe').tooltipImg();
// with options
$('.tooltipMe').tooltipImg({
xOffset : 20,
yOffset : 40,
wrapper : 'myToolTipContainerClass'
});
});
You can see this working Fiddle!
This Fiddle illustrates images from cross-domain, with relative path and from the img src.
Note that the relative path under Fiddle is buggy, sometimes you see it, other times you don't, but it works just fine!

I've seen this happen before - that's why I searched for a tooltip that is more flexible, easy-to-use, and easily integrated. I found a great tool through Listly - check out WalkMe.com. I think you'll find the results very pleasing. Let me know how the images work out.

In writing my own simple toolTip, I found that when I appended my tooltip to an non-body element. It was jumpy or jittery between hiding/showing of the toolTip when in IE7, IE8, and IE9.
For example, I had $('li').append(toolTip html..) which results in jittery or jumpy hide/show of toolTip. Was not jumpy or jittery in firefox, Chrome, and Safari. Not fine in IE7, IE8, and IE9.
When I switch to $('body').append(toolTip html..), it displays as expected for IE 7, IE8, and IE9, and it still works fine in firefox, Chrome, and Safari.

How to refactor from using window.open(...) to an unobtrusive modal dhtml window?

I have a function which launches a javascript window, like this
function genericPop(strLink, strName, iWidth, iHeight) {
var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
var new_window="";
new_window = open(strLink, strName, parameterList);
window.self.name = "main";
new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
new_window.focus();
}
This function is called about 52 times from different places in my web application.
I want to re-factor this code to use a DHTML modal pop-up window. The change should be as unobtrusive as possible.
To keep this solution at par with the old solution, I think would also need to do the following
Provide a handle to "Close" the window.
Ensure the window cannot be moved, and is positioned at the center of the screen.
Blur the background as an option.
I thought this solution is the closest to what I want, but I could not understand how to incorporate it.
Edit: A couple of you have given me a good lead. Thank you. But let me re-state my problem here. I am re-factoring existing code. I should avoid any change to the present HTML or CSS. Ideally I would like to achieve this effect by keeping the function signature of the genericPop(...) same as well.

Here is my solution using jQuery and jQuery UI libraries. Your API is not changed , but parameter 'name' is ignored. I use iframe to load content from given strLink and then display that iframe as a child to generated div, which is then converted to modal pop-up using jQuery:
function genericPop(strLink, strName, iWidth, iHeight) {
var dialog = $('#dialog');
if (dialog.length > 0) {
dialog.parents('div.ui-dialog').eq(0).remove();
}
dialog = $(document.createElement('div'))
.attr('id', 'dialog')
.css('display', 'none')
.appendTo('body');
$(document.createElement('iframe'))
.attr('src', strLink)
.css('width', '100%')
.css('height', '100%')
.appendTo(dialog);
dialog.dialog({
draggable: false,
modal: true,
width: iWidth,
height: iHeight,
title: strName,
overlay: {
opacity: 0.5,
background: "black"
}
});
dialog.css('display', 'block');
}
// example of use
$(document).ready(function() {
$('#google').click(function() {
genericPop('http://www.google.com/', 'Google', 640, 480);
return false;
});
$('#yahoo').click(function() {
genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
return false;
});
});
Documentation for jQuery UI/Dialog.

I use this dialog code to do pretty much the same thing.
If i remember correctly the default implementation does not support resizing the dialog. If you cant make with just one size you can modify the code or css to display multiple widths.
usage is easy:
showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');
Modifying the js to support multiple widths:
Add width and height as attributes to show dialog function and the set them to the dialog and dialog-content elements on line 68

Try Control.Window, which requires Prototype
Here's how I use it:
New Message
And in my Javascript file:
$(document).observe("dom:loaded", function() {
$$("a.popup_window").each(function(element) {
new Control.Modal(element, { overlayOpacity: 0.75,
className: 'modal',
method: 'get',
position: 'center' });
});
});
Now if you want to close the currently open popup do:
Control.Modal.current.close()