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();
Related
I am using Alvaro fullpage plugin, and it works well.
But i have discovered some Iphone with IOS 9.2 and safari browser issue.
I have some code in afterLoad callback, it checks what slide is visible. If it's first slide, i am removing scroll-menu, and when slide is not first, i am adding this class.
And this works well, but on orientation change, IOS don't respect this callback.
Below my Javascript code for Fullpage plugin:
$('#fullpage').fullpage({
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
keyboardScrolling: true,
//animateAnchor: true,
recordHistory: true,
// Callback - issue on orientation change
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
if(index > 1){
header.addClass("scroll-menu");
}
if(index == 1){
header.removeClass('scroll-menu');
}
}
});
I don't have any idea, how to fix this.
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;
}
I have built a few popups - some using YUI dialog, some using panel. These get rendered correctly in FF, Windows Safari, Chrome. Please refer following screenshots:
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/WorkingDialog-Firefox.PNG
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/WorkingPanel-Firefox.PNG
However in IE 7, 9 & 10 the dialogs appear in a distorted manner sometimes and appear normally sometimes. See the screenshots below:
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/DistortedDialog-IE9.PNG
http://dl.dropbox.com/u/7681433/YUI%20Forum%20Screenhots/DistortedPanel-IE9.PNG
I am not able to figure out what goes wrong only sometimes in IE. I am using YUI version 2.7.0.
To see this in action, you can access this blog page. Hover on one of the thumbnails and click on preview/download/transmit buttons.
http://embed-test-blog.blogspot.in/2012/04/sample-for-yui-forum.html
The blog url I provided above embeds the following url using an iframe.
http://embed.mediapartner.com/embed.aspx?e=f2+Wk9GtFDM=
I have noticed that if I directly access this url from IE, the dialogs appear to render alright! So I strongly feel that this is something to do with YUI dialogs being invoked within an iframe in IE. But I am not able to figure out how to overcome the problem. Any ideas?
Here is the code I am using for the preview dialog above - just in case that's of any help.
LargePreviewPopup =
{
popup: null,
init: function()
{
this.popup = new YAHOO.widget.Panel("LargePreviewPopup",
{
width: "380px",
height: "410px",
zIndex: 3000,
fixedcenter: true,
visible: false,
draggable: true,
modal: true,
constraintoviewport: false,
effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.10 }
});
if (YAHOO.env.ua.ie > 0)
this.popup.cfg.setProperty("iframe", true);
PluginFix.showHidePlugins(this.popup);
this.popup.setHeader("NA");
this.popup.setBody("NA");
this.popup.render(document.body);
},
onShowLargePreviewClick: function(userId, captionId, height, width)
{
if (!this.popup)
this.init();
this.popup.setBody("<div class='ajaxloader'></div>");
this.popup.setHeader("Preview");
this.popup.hideEvent.subscribe(function()
{
LargePreviewPopup.popup.setBody("<div class='ajaxloader'></div>");
});
this.popup.cfg.setProperty("height", height + 57 + "px");
this.popup.cfg.setProperty("width", width + 35 + "px");
this.popup.show();
var cObj = Custom.Ajax.asyncRequest('GET',
'/embed/embed_operations.aspx?action=large_preview&user_id=' + userId + '&caption_id=' + captionId
+ '&h=' + height + '&w=' + width,
{
success: function(o)
{
LargePreviewPopup.popup.setBody(o.responseText);
}
});
}
};
For anyone who might be facing this problem - I could not figure this out using YUI. So I implemented my pop-ups using jquery-ui on IE. So on all the non-IE browsers I use YUI pop-ups while for IE this is done using jquery-ui.
I found this post
http://www.netmagazine.com/tutorials/create-jquery-tab-system
And modified this tabs to fit my current design. The only thing I need is to make this tabs plug-in work with hashtags. For example, if user opened mydomain.com/#firstTab open this tab.
My code looks like that
var url, tabToken;
$(function() {
var indicator = $('#indicator'),
indicatorHalfWidth = indicator.width()/2,
lis = $('#tabs').children('li');
$("#tabs").tabs("#content section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400,
onBeforeClick: function(event, index) {
var li = lis.eq(index),
newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
indicator.stop(true).animate({
left: newPos
}, 600, 'easeInOutExpo');
}
});
});
$(document).ready(function() {
url = document.location.href;
tabToken=url_data = url.split('#')[1];
if(tabToken){
What to do???
}
});
Please take a look at the link that I posted, and check if I can make it work with hashtags? I don't want to change this plug-in, because I will not find any plugin with similar design.
It looks like the tutorial you are referring to is using jQuery tools tab system,
It already have history options along with backbutton support
Check http://jquerytools.org/demos/tabs/history.html#tab3
$(function() {
$(".css-tabs:first").tabs(".css-panes:first > div", { history: true });
});
http://jquerytools.org/demos/tabs/history.html#tab1
http://jquerytools.org/demos/tabs/history.html#tab2
http://jquerytools.org/demos/tabs/history.html#tab3
Also Check this for internal linking
http://jquerytools.org/demos/tabs/anchors.html
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()