Related
So I have this scenario where I am using Pinchzoom.js library for zooming images. It is perfectly working and the library is very good. But I have a scenario where the PINCH IN gesture (on mobile) also makes the image zoom OUT. To see a working demo, you can refer to their working demo link. When you will PINCH IN, you will observe that the image zooms OUT but after the gesture has ended, it retains its original size. I wanted to ask if there is a way to disable this zooming out effect? My PinchZoom settings are as:
Array.from(document.querySelectorAll('.myimages')).forEach(function (el) {
new PinchZoom.default(el, {
tapZoomFactor: 5,
maxZoom: 10,
use2d: true,
verticalPadding: 1,
draggableUnzoomed: false
});
});
Try setting the property minZoom to 1.
This effect happens because it allows you to zoom out to a size that is smaller than your screen, so the browser scale it back so it fits the whole phone width.
You need to add the property which will tell the minimum zoom size. In Pinchzoom.js library there is minZoom property for that.
So if you don't want your image to be zoomed out on pinch-in then set minZoom:1.
I tried this settings by adding minZoom property to the demo link and it was working correctly.
Array.from(document.querySelectorAll('.myimages-container')).forEach(function (el) {
new PinchZoom.default(el, {
tapZoomFactor: 5,
maxZoom: 10,
minZoom:1,
use2d: true,
verticalPadding: 1,
draggableUnzoomed: false
});
});
If this solution is not working for you then maybe this is the problem is with your element selection.
Use container <div> as the parent of your every image and then apply settings to that parent <div>.
<div class="myimages-container">
<img src="my_image.jpg"></img>
</div>
In the jquery.smartWizard plugin, there is a function called fixHeight which adjusts the height of a wizard step. This is used when a step is first displayed or when revealing hidden divs within the step. It works fine in IE (at least in IE 11 on Win8.1) and in FireFox. But, in the latest version of Chrome (Version 40.0.2214.94 m) the outerHeight is a much smaller value than it should be, by over 100 pixels or more.
This is the function, out of the box:
SmartWizard.prototype.fixHeight = function(){
var height = 0;
var selStep = this.steps.eq(this.curStepIdx);
var stepContainer = _step(this, selStep);
stepContainer.children().each(function() {
if($(this).is(':visible')) {
height += $(this).outerHeight(true);
}
});
// These values (5 and 20) are experimentally chosen.
//stepContainer.height(height);
//this.elmStepContainer.height(height + 12);
stepContainer.animate({ "height": height - 12 }, 500);
this.elmStepContainer.animate({ "height": height }, 500);
alert(window.outerHeight);
}
I modify the final steps to add the animation. With or without Chrome fails.
EDIT:
Here is a fiddle that demonstrates the difference between IE and Chrome. Click member, then click non-member. You will see that second set of values is different in each browser.
http://jsfiddle.net/xjk8m8b1/
EDIT2:
Here is another fiddle that shows both browsers get the same values for height until you try and calculate the visible elements. Then Chrome is way off.
http://jsfiddle.net/xjk8m8b1/2/
While not the best solution, I did figure out the issue. Firefox and IE are both adding up the height of everything in the div, include break tags and anything that creates vertical space. Chrome, in my opinion is broken, and not adding up these extra elements! It is not returning a true value for consumed vertical space.
My workaround is to wrap the contents of the div inside another dummy div. This way jquery looks at the height of that first child div and correctly returns the height.
I have the same problem, a ScrollBar is in the middle, the StepContainer never fixes the height.
Then I change this line in jquery.smartwizard.js:
$this.elmStepContainer.height(_step($this, selStep).outerHeight());
To this:
$this.elmStepContainer.height(_step($this, selStep).outerHeight() +20);
20 is enough for me, and my problem is gone.
I created a dynamic table that scrolls left and right, has resizable columns, has a fixed header, etc. This table works great on EVERY browser I've tried. Even IE8 looks good (missing features, but still good).
This issue arises when I try to view the table in Safari 7.0.4 on my Macbook.
Attached is what is should look like (the fixed header is on the bottom for demonstration purposes):
when you scroll, the fixed header, body, and fixed scrollbar all are connected via some jQuery scrollLeft() functions (scroll one, scroll all):
var tableHeaderSpace = $('.table-full-wrap-space'),
tableHeader = $('.table-full-wrap-header'),
tableBody = $('.table-full-wrap-body'),
tableScroll = $('.table-full-wrap-scroll');
tableScroll.bind('scroll', function() {
tableHeader.scrollLeft(tableScroll.scrollLeft());
tableBody.scrollLeft(tableScroll.scrollLeft());
});
tableHeader.bind('scroll', function() {
tableScroll.scrollLeft(tableHeader.scrollLeft());
tableBody.scrollLeft(tableHeader.scrollLeft());
});
tableBody.bind('scroll', function() {
tableScroll.scrollLeft(tableBody.scrollLeft());
tableHeader.scrollLeft(tableBody.scrollLeft());
});
$(window).bind("scroll", function() {
var tableHeaderOffset = tableHeaderSpace.offset().top;
if (this.pageYOffset >= tableHeaderOffset) {
tableHeader.addClass('isFixed');
} else {
tableHeader.removeClass('isFixed');
}
});
Again, this works great...but as you scroll right a bit more, the browser starts duplicating content within that fixed header:
The issue is is that no 'actual' content is being duplicated - this is some sort of browser fragmenting that is showing duplicates - without adding elements in the DOM.
The next picture is the browser doing some more "magic". at certain points in horizontal scrolling, the whole fixed header's colors gets inverted:
I wasn't able to get a snapshot of it, but it also once duplicated the "record count" bar below it.
Anyone have any ideas what's going on here? I tried to duplicate this in jsFiddle but no dice. From that, I would assume that this is an issue with my code, but the results are only with ONE specific browser on mac (safari), and it is doing some STRANGE stuff.
Last note - since I can't replicate this in jsFiddle, i'm not sure how I could report this to Apple (the working (or 'broken') example is proprietary and I can't give out access to it).
EDIT:
here's the jsfiddle where I tried to duplicate the issue (very rough - but it's functional):
jsFiddle Duplication Attempt
so - I knew this wouldn't be a hot topic question, but I thought I would still give it a go ahead.
as for the answer, I found some old table css that was overlapping my new stuff - which in turn was somehow flipping safari out so bad that it was fragmenting it.
previous old code: background: transparent;
new code: background: #fff;
This doesn't make sense to me - but until someone else comes up with an hypothesis, I'll mark this as the answer.
now my number-one contender for worst browser: safari - look out, IE.
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.
I have a google maps on my page with a search pane I built myself which can be displayed and hidden at will. It covers like lets say 200 pixels of the map on a side. The thing is that when I resize my map or so the area where the pane overlaps is unrendered i.e the map doesn't render there for some reason.
Check out this link
In the Box type in lets say OMDB which is an icao code for an airport and press enter.
The results are shown and you see the pane. Now click on the full screen link and then click on the airports tab to make the panel go away - you see now that part of the map hasn't rendered at all...I have to drag the map around and that only partially renders that area. How can I fix it?
FYI I've run it on Google Chrome, Firefox and IE8 on Windows XP. Is there a way to like force complete rendering of a map or so? This is quite an erratic problem and could it be concerne with my code or is it a host issue? Or does Google just don't like me? :(
EDIT: See the big ugly patch on the side. Its unrendered area where the map should have been rendered as well. No amount of zooming in and panning is helping clear this :(
I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.
It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.
Yes, you MUST supply a real pixel height and width of the container DIV. This is in fact detailed in the Google API.
By using something like this:
<div id="map_canvas" style="width:500px;height:500px;"></div>
instead of
<div id="map_canvas"></div>
you'll be home free !
As far as I can see it works fine on OS X 10.6.2 in Google Chrome.
http://i33.tinypic.com/sfe3ah.png
Only problem is that Copenhagen Airport is nowhere near the location your application implies. And LAX is in the middle of the ocean ;-)
Edit:
I see your screenshot, and it would appear to me that somehow Google Maps does not render the part of the map that was covered by the search and search results pane, and afterwards the rendering is not triggered correctly upon hiding the search pane.
I haven't been able to find a decent render triggerer in the Google Maps API, but I think you should try something like programatically zooming in and out or moving the center of the map somewhere else and back, in order to maybe force the re-rendering of the map.
Alternatively you could try manually triggering some of the events that you think might set off a rerendering of the map, for example google.maps.event.trigger(map, 'resize').
I know these suggestions feel like a terrible hacking way of making it work, and I am highly unsure whether it would work, but it is my best shot ;-)
In Google Maps V3, the little bit of magic you need is documented here:
https://developers.google.com/maps/documentation/javascript/reference#Map
under events
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize')
The trick is knowing when to call this which will be situational depending on your code. If you're using Bootstrap 3 Modals, this works beautifully.
$("#modal-map")
.modal()
.on("shown.bs.modal", function() {
google.maps.event.trigger(gmap, 'resize');
});
Where gmap is the google.maps.Map object you created.
I faced same issue when i tried to load google map in dialog. It was like google map was not rendered properly. so i find out below solution which may be solve your problem.
I have triggered google map resize event after initialize dialog please check below snipped code.
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
Example:
I have loaded map by ajax call then initialized dialog and at last triggered google map resize event.
$.ajax({
url:"map.php",
type:"POST",
success:function(data){
$("#inlineEditForm").html(data);
$('#inlineEditPopUp').dialog('open');
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
}
});
If you are using the jQuery plugin goMap, then you should use:
google.maps.event.trigger($.goMap.map, 'resize');
Although you should wrap this in an event so that it runs when the map is shown.
This how i do it in my code :
$(document).on('click', '#mapClicker', 'initmap', function() {
setTimeout(function() {
google.maps.event.trigger($.goMap.map, 'resize');
$.goMap.fitBounds();
}, 100)
});
I know this question is a bit old, but I just came across a similar problem. However, in my case, I was setting the map to be loaded from the body (for a full screen effect) within an iframe.
Like Jay mentioned on his answer a width and height must be specified which I had not done then.
I changed:
<body style="margin:0;">
to:
<body style="margin:0;width:100%;height:100%">
and now it loads perfectly on Chrome, Firefox and Internet Explorer 10.
Hopefully this helps anyone out there who also came across this problem. You must specify width and height for it to work across different clients.
Regards
I had the same problem and solved it simply by changing the width of the containing div to "px" instead of "%" (e.g width="700px" instead of "80%"). I guess that google can do better size calculation that way... I don't guarantee for this but it helped me
I had this issue and I found the only solution (in my instance) was to trigger the resize inline after the element. I can't say why but I found a thread where somebody also had this solution. (sorry no ref.) My setup was a tad different; it was from a jQueryMobile injected page so the late instantiation may have something to do with my issue. Hopefully this helps someone.
<div id="my-map"></div>
<script type="text/javascript">
$('#my-map').height($("#my-map-container").height());
$('#my-map').width($("#my-map-container").width());
google.maps.event.trigger($('#my-map'), 'resize');
</script>
In my case, same issues for Mac devices on:
Safari 5.1.7 (Os Windows 10[Sorry])
Safari 5.1 (Ipad 1 [Old Sorry])
Safari 10 (Iphone 6 Plus)
Here my solution work for me:
1) capture Browser width detect.min.js
2) change attr style width parameter
3) resize map
/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
canvasWidth = $(window).width(),
$(".macarte").attr("style","width:"+canvasWidth+"px")
google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */
I faced the same issue when setting the map centre manually. I solved it by the below code:
google.maps.event.trigger(map, "center_changed");
function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
google.maps.event.addListenerOnce(largeMap, 'idle', function(){
google.maps.event.trigger(largeMap, 'resize');
largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);
}