The info windows in my google maps instance are lookin' funny:
Some of the images that make up the corners and extremities of the info window graphic seem to be missing. Any idea why this is happening? I'm experimenting, but haven't figured it out yet.
I'm using gmap3, a JQuery wrapper for google's V3 API. Here's my code for setting up the map (javascript/haml):
<script>
$(window).load(function() {
$('#map').gmap3();
var bounds = new google.maps.LatLngBounds ();
-#areas.each do |area|
bounds.extend(new google.maps.LatLng(#{area.latitude}, #{area.longitude}));
$('#map').gmap3(
{
action:'addMarker',
latLng:[#{area.latitude},#{area.longitude}],
events:{click:function(marker, event){
$(this).gmap3({action:'clear',list:['infoWindow']});
$(this).gmap3(
{
action:'addInfoWindow',
latLng:marker.getPosition(),
infowindow:
{content:"#{escape_javascript(link_to area.name, area)}<br>#{escape_javascript(image_tag area.image_holder.image.url(:thumb)) if area.image_holder.present?}"}
}
)}}
}
);
$('#map').gmap3('get').fitBounds(bounds);
$('.clickable_row').click(function() {
var id = $(this).attr('id');
window.location = '#{areas_path}' + '/' + id;
});
});
</script>
I've seen this caused by a max-width rule overriding the maps one. Try setting this:
#map img { max-width: none; }
I believe it has to do with low bandwidth on your connection.I think the images for the corners are timing out.Is this happening every time?Do you have problem in your connection?Try with firebug to see the network traffic and spot the image requests and if they time out.
I don't know what caused this problem, but it's no longer happening. I was still getting familiar with integrating javascript and google maps into my rails apps at that point, so perhaps I goofed up some setting or js inclusion. Who knows.
Chalk it up to my noobishness.
had the same problem,
just put this code into your css file:
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: 99999px;
}
Related
I'm almost done with my new website and I figured I could do some improvements here and there before launching. One thing that bothers me is the fact that links are not underlined or highlighted in any way. It's okay, I want it that way. But I'm afraid certain links won't be noticed or might disappear completely next to more prominent features.
So I was wondering if there is a way to make the user notice the link without underlining/coloring/alternating it permanently. I was thinking of e.g. flashing an underscore/underline every 10 seconds (or randomly) or changing color every few seconds for a tiny bit. All without the need of the user's engagement (hovering over it). When you look at the page there should be some movement/change to help the user notice the link.
I hope you guys get what I mean. I am no expert by any means. If anyone could point me in the direction of any scripts/tutorials or whatever I'd be grateful. I tried googling around but couldn't come up with anything useful.
Thanks!
I think this is bad, you should use hover for a better user experience, or add an underline by default to make the link more recognizable because most users will know this is a link.
Anyways if you want to do this, you will need javascript in your website.
You can try the following.
var links = document.querySelectorAll("a")
setInterval(function() {
for (var i = 0; i < links.length; i++) {
var link = links[i]
link.classList.toggle("toggled")
}
}, 1000)
a {
text-decoration: none;
color: blue;
}
a.toggled {
color: green;
}
<h1>Hello</h1>
This is a link!
<p>Some text</p>
This is another link!
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
i'm still new to the mobile / fluid / responsive game and am having issues with the submenu on this site: http://www.medowsconstruction.com/
the click on mobile should replace the :hover function automagically right? seems to be the case with the standard Foundation theme.
i hadn't changed anything in those mobile specific areas of the framework, so what did I do to mess it up and cause the submenu to not show on iPad / touch?
thanks for any help
It seems that the problem is that this is not a standard pure CSS dropdown menu, as one might assume. Instead, it's been controled by jQuery. You can see it in the app.js file:
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
So you should modify the script in order to work with a touch for selected devices (there is a good discussion on that topic here). Here I am using a simple statement. I have not been able to test it in iPad, but you could have good results if you try to use something like (untested!):
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.nav-bar>li.has-flyout').bind('touch', function() {
$(this).children('.flyout').slideToggle();
});
} else {
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
}
This should give you some clues on how to deal with that. Let us know if it works.
There is also a lot of information in this stackoverflow discussion about hover and touch devices.
thanks to #hernan for setting me in the right direction with things.
i ended up fixing it up by mixing the Foundation code with his code with some better selectors. here's what I landed with:
if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) {
$('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) {
e.preventDefault();
var flyout = $(this).children('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function(){
lockNavBar = false;
});
}
else
{
flyout.slideToggle(500);
}
});
i'l definitely be checking into those two links / discussions you mentioned, too, hernan.
thanks again-
See example here: http://jsfiddle.net/KK36F/2/
How to solve this?
My old answer of:
http://jsfiddle.net/KK36F/5/
I've used jQuery noConflict to work around flowPlayer. As I can't
reproduce your problem (flowPlayer is blocked on my site rrrrr) it's
the best I can do.
Didn't work... I've managed to reproduce the problem and track it down to a line in the flowplayer code:
// skip IE policies
document.ondragstart = function () { return false; };
If you make this safer (as it is a JScript only IE thing), the draggable works again.
if(document.ondragstart) {
document.ondragstart = function () { return false; };
}
I using fancybox all is done all I want is to "avoid" the ajax-loader of fancybox
the reason is I have already set a loading for all ajax request now everytime is make request using fancybox I see two loader appearing which kind of look ugly
Is there a way to do It
I went through the api and found a method called
$.fancybox.hideLoading();
but this doesnot seem to work as I see the loading still getting displayed
any idea
Regards
You can override any fancyBox method, for example -
$.fancybox.showLoading = function () {
console.info('My loading');
}
Found a Solution to it using CSS
<style>
#fancybox-loading {
display:none !important;
}
</style>
Can anyone suggest better than this
awaiting for correct answer