jqzoom flyout alignment with mobile safari (ipad) - ipad

I have jqzoom all setup and everything works great except a couple things, one being even though I tell jqzoom to align the flyout image to the right of the original image, on our ipad it puts the image on the left.
Does anyone know the workings of jqzoom well enough to know why it would do this? It looks like jqzoom is setting [left:] no matter what, and just adjusting the [left:] value accordingly (say in the -minus direction) if the flyout is to be on the right? If that's the case, can't it just do an if/else, and if it needs to be on the right, set the [right:] instead of the [left:]?
This is how I have jqzoom setup:
<div id="jqDiv" style="width:400px; height:400px;">
<a id="imageNameAId" href="http://path.to.image/bigImage.jpg" class="MYCLASS" rel="gal1">
<img src='http://path.to.image/smallImage.jpg' alt='imageName' id='imageNameImgId' height="400" width="400" />
</a>
</div>
<script type="text/javascript">
var options = {
zoomType: "standard",
lens: true,
preloadImages: true,
alwaysOn: false,
zoomWidth: 600,
zoomHeight: 600,
xOffset: 10,
yOffset: 0,
position: "right",
title: false
};
// Delay jqzoom binding to allow (rel) thumbnail images time to load
setTimeout( function() {
jQuery('#imageNameA').jqzoom(options);
}, 500);
</script>
Normal and Expected:
.--. .-----.
| | | |
`--' | |
`-----'
Mobile Safari:
.-----. .--.
| | | |
| | `--'
`-----'

I found the answer myself. jqzoom determines if there is enough room on the right to place the flyout image, and on the iPad, there isn't (in our case), so it displays it on the left instead. It does this despite the fact that there's more room on the right than on the left.
So I am detecting iPad and forcing it to the right side as intended.
In jquery.jqzoom-core.js around line 535:
Before:
this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
After:
if (navigator.userAgent.match(/iPad/i) != null) {
this.node.leftpos = (smallimage.ow + Math.abs(settings.xOffset));
} else {
this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
}

Related

dimple tooltip too wide

I am using dimple.js on a mobile device but when the text is too long for the tool tip is just goes off the screen instead of wrapping down. Is there a way to set a maximum width for the tooltip? I am currently using this code to show only certain info:
s.getTooltipText = function (e) {
return [
"Product Description: " + e.aggField[0],
"Volume: " + e.yValue
];
};
Thanks!
The quick and dirty way would be just to use CSS:
.dimple-tooltip{
width: 200px !important;
}
Note that this won't auto-wrap text though.

jQuery animate() on Chrome 37.0.2062.120 m / Webkit?

This is my first question here on SO, so bear with me. I am developing a small project and I recently discovered one particular problem that I did not have before.
In my project I have a small map used for selection of different regions of my country, Romania. I implemented this with Raphael.js library and jQuery/UI. It looks like this:
http://s28.postimg.org/pzg3gaiod/output_Cuap_Ye.gif
The idea is when you select a region it gets dynamically coloured and added to a vector of regions. Simple. So for every region (that is declared as a path for the Raphael library to understand and paint) I have a small function:
function clickableMinimapRegions(st, regio) {
st[0].style.cursor = "pointer";
st[0].onclick = function () {
if ($.inArray(regio, regions) != -1) {
regions.splice($.inArray(regio, regions), 1);
st.animate({
fill: "#FFFFFF"
}, 0);
} else {
regions.push(regio);
st.animate({
fill: "#e6e6e6"
}, 0);
}
};
}
Then I have this HTML:
<ul class="element-menu drop-up">
<li>
<a id="toggle" class="dropdown-toggle bg-lime text-shadow button shadow">
<img src="../img/regions.png">
</a>
<div id="content" class="dropdown-menu bg-steel" data-role="dropdown">
<div id="minimap" class="minimap"></div>
</div>
</li>
</ul>
I use Metro UI CSS library, it's a simple drop-down menu. But it's behaviour is to autoclose on click. So for that I did:
$("#minimap").click(function (event) {
event.stopPropagation();
});
http://s28.postimg.org/trltqsu19/Captura3.png
This menu is at the bottom of the screen over a leaflet map, the map is the background and this drop-down is over the map. The thing is, if the map is not loaded, than it works fine. If the map tiles are loaded, something is happening that prevents the regions to be coloured when clicked.
Thank you.
SOLUTION FOUND:
Force DOM redraw/refresh on Chrome/Mac
The second parameter in jQuery's .animate() is the duration, in milliseconds. Having set it to 0, I'd rather say the behaviour you see in other browsers is wrong, and you should expect to have the property changed immediately with no animation.
st.animate({
fill: "#FFFFFF"
}, 0);
// ^---- duration
Try changing that to a bigger value (400 ms is the default)
Here's a fiddle showing the difference: http://jsfiddle.net/exrj973b/

Best plugin for in-page image+text slider, Jquery Mobile + Phonegap app

I would like to insert a "slider" in my hybrid app.
I need each slide to contain an image and some text. And I would like it not to be a full page slider but a partly hidden in-page slider, like on the Amazon app:
Which is the best Jquery Mobile + Phonegap friendly slider ?
(I've heard of Photoswipe, Swiper, Flexslider, ...)
Thanks
I chose Flexslider V2 and it seems to work fine : http://www.woothemes.com/flexslider/
$(document).on('pageshow','#result-page', function(){
var suggestionSlider = $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
//slideshow: false,
itemWidth: 70,
//itemMargin: 5,
pausePlay: false,
touch: true,
//useCSS : false,
pauseOnAction: true
});
var slider = $('.flexslider').data('flexslider');
for (i = 0; i < matched.length; ++i) {
slider.addSlide('<li><a class="suggestPro" proId="'+matched[i]['id']+'" href="#"><span><img src="images/boards/'+matched[i]['imageName']+'" /></span>'
+'<p class="flex-caption">'+matched[i]['model']+'</p></a></li>'
);
}
$('.flexslider').resize();
});
However V2.2 doesn't scroll well on Android phones (touch horizontal scroll), any hint would be apreciated.

jQuery horizontal ui scroll not calculating outerWidth in Chrome

I'm having a problems to make a jQuery horizontal ui scrollbar work in Chrome. It works just fine in FireFox and even IE, but in Chrome I simply can't make it calculate the correct width of my "content" area. The "container" has a 920px fixed width, so no problem with that, but my "content" is, "on this page", exactly 4983px wide but when calculating with outerWidth() and even outerWidth(true), it will return a nonsense value that's a lot smaller than it should be!
Here's the link to the page I'm working on.
And here's the code I have until now. It's a mess because I'm still working and doing some tests...
var container = $('.gallery');
var content = $('.content', container);
var itemsWidth = content.outerWidth(true) - container.width();
var width = 0;
$('figure').each(function() {
width += $(this).width();
});
console.log('I dont know if I chose width: ' + width);
console.log('Or if I chose itemsWidth: ' + itemsWidth);
console.log('Actually, none of them is working on Chrome/webkit browsers');
$('.slider', container).slider({
min: 0,
max: itemsWidth - 20,
stop: function(event, ui){
content.animate({ 'margin-left' : ui.value * -1}, 500);
},
slide: function(event, ui){
console.log(ui.value);
content.css('margin-left',ui.value * -1);
}
});
Notice that I'm trying to calculate the width value in two different ways: itemsWidth (var) and width (var). None of them work. Strange thing is... if you keep refreshing the browser (Chrome), it will eventually grab the correct width of the "content", but it's like once in every 10–15 tries =\
It seems to be a Chrome/Webkit bug, but I have no idea about how to solve that!
Thanks for your time and help!

getting jQuery UI's datepicker to always open in a certain direction?

I'm using jQuery UI's datepicker control in a position: fixed toolbar at the bottom of my page. Occasionally, on random computers, the datepicker appears below the toolbar, which means it's off the page and impossible to view or interact with.
Is there a way to force the positioning of the datepicker control to always be above and to the right of its <input>?
The only way to be certain (for the jQueryUI version of datepicker) is to disable the functionality of the datepicker that tries to render inside the viewport. Here's a way to do it without modifying the source code files:
$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
on later versions of JQuery UI try:
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
That just nukes the _checkOffset function inside datepicker that makes it squirrelly. Then you can use the .ui-datepicker css to make sure it stays fixed if that's what you're after. More info at how-to-control-positioning-of-jqueryui-datepicker.
Problem is that element in position: fixed show top position 0px (check with: alert$('#datepicker2').position()).
Solution:
$('#datepicker').datepicker( {beforeShow: function(input) {
var x = 100; //add offset
var y = 20;
field = $(input);
left = field.position().left + x;
bottom = y;
setTimeout(function(){
$('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});
},1);
}}
Test HTML:
<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
<label>
<input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
</label>
</form>
You could change the lines:
offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;
...to read:
offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;
This loses flexibility, though. If your input happens to be at the top of the page, you'll have the opposite problem from before.
http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php
check this. I used this and was able to position the datepicker control in all browsers.
I had a similar problem. I have a page with date pickers potentially used at various placed on the page but also on a fixed header where the user can scroll the page both horizonally and vertically with the fixed header staying in place. The header also has a datepicker. So I can't do a global change of datepicker.
This is what I did. It is admittedly a kluge but it works so I thought it might help someone else. Hopefully in the future the jquery datepicker will add a position option.
beforeShow: function(input, inst) {
$("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none" );
window.setTimeout(function() {
var leftPosition = parseInt($(window).width() / 2);
$("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition });
$("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit" );
}, 500);
}
From the documentation, it looks like you might be able to use the 'dialog' method of the datepicker plugin to achieve your desired outcome. However, using this most likely means that you will have to implement some of the glue that you would otherwise get out-of-the-box with datepicker, such as a callback handler to extract the date, etc.
I tried to mock up some code to see it in action and short of getting the datepicker to display, I couldn't quite get it working, though. Anyway, I wanted to point you to it in case you have better luck than I did.

Resources