Images scaled in safari & chrome but not in ff & opera - javascript

I'm using an image slider called jb gallery 3.0 - running using jQuery.
It's just a normal image slider, but it's got a feature that detects the browser size and then scales the image to the size of the browser ie. if your viewing on an iPad it will give you a smaller image so that you can still see the entire picture.
The resizing is done each time the image loads in the slider, so if you resize the window in between slides, the next time the image loads it will be scaled... No need to refresh the page.
This all works fine it safari and chrome, but in firefox and opera (12.14) it doesn't, it just serves the full size image cropped...
I've made a js fiddle of what's happening here - http://jsfiddle.net/ktvvW/5/ - try resizing the 'result' panel in chrome or safari to see what's meant to be happening.
Any idea why this doesn't work in ff or opera?
.
Cheers

Forcing webkit behaviour on the jbgallery-3.0.js script seems to fix the issue.
See the options below, I'm forcing webkit to true (disregarding the userAgent).
I've tested this on both FF and Opera and functionality is as expected, the images display with the same zoom as in Chrome.
$(".jbgallery").jbgallery({
style : "zoom", //"centered"|"zoom"|"original" - image style
menu : "simple", //false|"numbers"|"simple"|"slider" - menu type
shortcuts: [37, 39], //[prev,next] - keyboard code shortcuts
slideshow: true, //true|false - autostart slideshow
fade : true, //true|false - disable all fade effects
popup : false, //true|false - modal box & traditional popup hack to display multiple gallery (3.0 : fullscreen:false)
randomize: 0, //0|1|2 - randomize first image (1) or randomize "slideshow" (2) - blackout: http://www.grayhats.org
caption : false, //true|false - show/disable internal caption system
autohide : false, //true|false - auto hide menu & caption
clickable: false, //true|false - "image click & go"
current : 1, //number - set initial photo (modal "hack" - see demo. don't use "hash". jbgallery use "location.hash" only in popup mode)
// webkit : (navigator.userAgent.toLowerCase().search(/webkit/) != -1), //boolean - used for specific browser hack. if you want, you can force disable this flag & try to find crossbrowser solution
webkit : true,
ie6 : (/MSIE 6/i.test(navigator.userAgent)), //boolean - IDEM
ie7 : (/MSIE 7/i.test(navigator.userAgent)), //boolean - IDEM
labels : { //labels of internal menu
play : "play",
next : "next",
prev : "prev",
stop : "stop",
close: "close",
info : "info"
},
timers : { //timers
fade : 1000, //fade duration
interval: 3000, //slideshow interval
autohide: 7000 //autohide timeout
},
delays: { //delays (timers) to improve usability and reduce events
mousemove: 200, //used by autohide. cancel autohide timeout every XXXms.
resize : 10, //used by ie6 to reduce events handled by window.resize
mouseover: 800 //used by tooltip. show tooltip only if the mouse STAY over thumb for XXXms
},
close : function(){}, //callback handled by menu's button close. see demo. example : close : function(){window.close()}
before : function(){}, //callback handled BEFORE image gallery loaded
after : function(ev){}, //callback(ev) handled AFTER image gallery loaded. receive the native load event.
load : function(ev){}, //callback(ev) handled AFTER native image load event. receive the native load event.
ready : function(el){$('.jbg-menu').hide(); $('.jbg-loading').remove(); $('.jbg-caption').remove(); $('.jbg-menu-opacity').remove();}, //callback(el) handled AFTER jbgallery render. receive the HTML element.
fullscreen: false, //true|false : the most important feature of jbgallery 3.0. now jbgallery can "stay in a box" and have multiple istance in one page.
push : function(o){}, //callback handled by push public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. useful for external menu system
unshift : function(o){}, //callback handled by unshift public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external.
shift : function(){}, //callback handled by shift public method
pop : function(){}, //callback handled by pop public method
empty : function(){} //callback handled by empty public method
});
Here's the link to my jsfiddle

Seems to be the CSS which is an issue.
original
.jbgallery .jbgallery-target.zoom {
min-height: 50%;
min-width: 50%;
}
modified
.jbgallery .jbgallery-target.zoom {
height: 50%;
width: 50%;
}
error had to add the css in the css panel as the original was in the plugin css
here is a link of the new css http://jsfiddle.net/ktvvW/8/

I think i know how to do this:
Change the load function like below:
load : function(ev){$(".zoom").css("width",$("#slider").width()),$(".zoom").css("height","auto");$(".zoom").css("left","0px");$(".zoom").css("top","auto")},
It will work on all browsers, tested and worked successfully

I have not the full answer of this, but I had a similar issue in the past with this. I learnt that Gecko (Firefox) and Webkit (Safari and Chrome) do not handle images the same way. The information of the size of the image was not available when I was trying to scale it, so it was not possible to scale them with the same code.
I can only suggest to do some research on image + onload event. This would be a javascript issue in my point of view.

Related

Disable fullpage js on mobile devices

I tried to disable the fullpage js for mobile devices but it is not working.
The script i am using is :
<script>
var isPhoneDevice = "ontouchstart" in document.documentElement;
$(document).ready(function() {
if(isPhoneDevice){
//mobile
}
else{
$(document).ready(function(){
$('#fullpage').fullpage();
responsive: 700 // here is solution
})
}
});
</script>
website link : http://demo.lamppostmedia.in/arklan-dev/
Help me disable it.
There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?
The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.
That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.
See the Responsive width example for fullPage.js.
And the examples code here:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You can read more about responsive options in the the fullpage.js documentation:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

autoPanMargin in Openlayers is not working in IE

I have an overlay in openlayers and I am providing the autoPanMargin of 100 pixels. It will work fine Chrome but in IE 11 if we click on the right side it will not work.
According to the API, autoPanMargin is the margin (in pixels) between the overlay and the borders of the map when autopanning.
So here is the overlay how I am using in the code
var overlay = new ol.Overlay(/** #type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanMargin : 100
}));
Here is the sample. Check this in both chrome and IE by clicking on the right side of the screen. In Chrome it will pan. But in IE it will not. May I know the reason and possible solution for this behaviour.
Thanks for asking. This is a bug. I just created a fix, which will be included in the next release (> v4.0.1).

jQuery height change not working in Safari

I have a JS feature on the following site that is working just fine in Firefox but not in Safari: http://rossbolger.com/kids/light-stories/
The feature slides out a grid of thumbnails called #image-thumbs when the mouse hovers over the container called #hit-area. It works (at least in Firefox) by first changing #image_thumbs height from '48px' to 'auto', the height is then measured using jQuery's height(). This height is stored in a variable and then using jQuery's css() it is given back to the #image-thumbs when the mouse is over.
The code on the site looks a little something like this:
// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');
// Slide Up Thumbs
(function revealThumbs() {
// On hover let the thumbs become their full height
$('#image-thumbs #hit-area').hover(function(){ // Mouse over
// Get the unrestricted height of the thumbs
thumbs.css('height', 'auto');
thumbs_height = thumbs.height();
// then put it back to what it was so we can animate it using CSS3 transition
thumbs.css('height', 'inherit');
// delay 0.1s before triggering the change in height (time for the calculations to complete)
setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );
}, function(){ // Mouse out
hideThumbs();
});
})();
// Hide thumbs
function hideThumbs(){
thumbs.css('height', thumbs_original_height );
};
The reason for measuring the unrestricted height and passing it back as a pixel value, rather than simply setting the height to 'auto', is to create a sliding effect via CSS3 (i.e. transition: height 0.5s). The transition only takes place if the affected attribute goes from one numeric value to another.
Thanks for any help bug testing this. I haven't even looked at other browsers yet.
All the best,
Laurence
Okay, so I've worked it out...
In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9!
I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.

jQuery ui dialog dragging issues

I used the jQuery ui (jquery-ui-1.10.3) dialog pluggin for one of our products, and found a possible "problem":
When the hosting page is small or the current view of the hosting page is scrolled to the top, dragging an openned dialog box behaves as what is expected. The problem start to manifest when hosting a dialog in a large page which is scrolled to somewhere not at the top, in which case the dialog box starts to jump around during dragging. It happens to both IE 9 and the latest Firefox (21.0).
The page is dynamically generaed, complex and has to be long. I am not familiar with fiddle, but it seems to have no option for jQuery-ui lib option that I can use.
More specifically, I found if I scoll the hosting page 100px down (so the top 100px of the hosting page is 'feed' into the top border of the browser window) then when I drag the dialog, instead of it following the mouse, it jumps down 100px so that it is out of the mouse capture.
The dialog is initiallized as
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: true
});
My questiong is: 1) does any one else has the same issue? 2) If so, is this an setting issue or a bug.
Any expert here can help me with it?
I used to have the same issue, content on the page is generated automatically. It is very long.
html, body {position: relative} solves the problem.
OK, I found this is a bug of jQuery-ui 1.10.3, see here:
That appears only with using UI 1.10.3 and when the scrollbar is not
at the very top in Firefox, Opera, IE8.
In Chrome works fine and also with 1.10.2 on other browsers.
The UI dialog demo page has this bug too:
drag the dialog down until appears the scrollbar scroll down again
drag the dialog down. dialog goes down with the offset
My solution to fix this bug is similar to that of Dado, but using the drag event:
$(element).dialog({
draggable: true,
drag: function(event, ui) {
var fixPix = $(document).scrollTop();
iObj = ui.position;
iObj.top = iObj.top - fixPix;
$(this).closest(".ui-dialog").css("top", iObj.top + "px");
}
});
My version: jQuery UI - v1.10.3 - 2013-10-10
I think there is a bug. I faced to this problem too. My solution for fixing this to turn off the dragging. Just make draggable false.
Like this:
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: false
});
Update the jQuery UI Library (js) worked for me.
http://jqueryui.com/download/
Remember to update your css files too.
Bugreport: view bug report
My solution to fix this bug is to "reset" the "ui.position.top" (for me 228px).
$(element).dialog({
dragStart: function(event, ui) {
var fixPix = 228; // offset top (add your own here!)
iObj = ui.position;
if (iObj.top > fixPix) {
iObj.top = iObj.top - fixPix;
}
ui.position = iObj;
}
});
My version: jQuery UI - v1.10.4 - 2014-01-17
This solution works for me. Hope it helps you too until this ugly bug is fixed.

I want to remove the Start/Stop button in Anythingslider, but leave the rest of the navigation

I'm using AnythingSlider (fun toy) as a website where the panels are the site's pages. As such, I want to disable and remove the Start/Stop button but leave the rest of the navigation. I'm under the impression that it's part of the navigation and can't be optioned out. If that's correct, how do I do it?
Actually, I want to move the navigation to the top right of the panel, as well.
Cheers
Completely removing the "start/stop" button:
buildStartStop: false
(no hiding, no tricks, simply removed)
From the examples here: http://css-tricks.com/examples/AnythingSlider/
The 2nd example does not have the button. If you read the source:
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})
Look at autoPlay. It is clearly responsible for the start/stop functionality, including the button.
Hiding play/stop button, but still working with autoplay:
startText : '',
stopText : '',
Call of the dogs. It is an option:
autoPlay : false,

Categories

Resources