I'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way:
When I click on the tab containing the panel there is a gray layer on top of the map. If I drag and move the map I get to see other tiles, but not the initial ones.
Even more strange is that if I resize the browser, suddenly it works perfectly, until I reload again, so I would guess is a problem with the css, but I cannot find the problem.
Also, placing the map outside of the tabbed panel works great.
I tested in Firefox and Chrome, and both have the same issue.
I created a test in jsfiddle to see it "live": http://jsfiddle.net/jasalguero/C7Rp8/1/
Any help is really appreciated!
It's a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/
The idea is from Google Maps, to "resize" or "redraw" the map when its container div is resized.
The changes I made are:
add id link3 to the small tab in HTML
tab3
add a listener to this tab inside $(function() {
$("body").on('shown','#link3', function() {
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
The requestAniMFrame line is taken from trackResize in leaflet.js
Update from the comments: Hi, I used map.invalidateSize(false); instead of L.Util.requestAnimFrame(... and this also seems to work. Just thought I'd point this out. Great answer though! – Herr Grumps
Bootstrap 3 has custom namespaced events, and so previous answers would work with:
$("body").on("shown.bs.tab", "#link3", function() {
map.invalidateSize(false);
});
Reference: Bootstrap Tabs
Related
I'm using a googlemap API.
And it always worked fine.
But now I am scaling the page in the website with the googleapi.
And it doesn't show the info near the marker anymore.
When I remove the scaling, it works like before.
Somebody who can help me?
The link to the script:
In the scaling, the mouse events doesn't work.
So I had to remove the 'click' function.
And now it shows the info again.
Another option could be to make a standalone webpage.
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
I am using the ElevateZoom plugin in my web app. But the default behavior of the plugin is that the zoom section is shown only when the mouse hovers around the particular area.
What I am trying to achieve is, show the zoomed version of the image in a different DIV and will keep on showing the zoomed pic even after the mouse is removed from the pic.
Is ElevateZoom plugin able to do so by default , or has someone already achieved this functionality with the plugin.If so, any pointers or help is really appreciated.
The elevateZoom plugin can’t do this out of the box.
If you look at the plugin code (jquery.elevatezoom.js) you can see the mouseleave function on line #450 and if you are ok with editing the plugin code you can just replace self.setElements("hide") with self.setElements(""). But I don’t think this will give the desired result.
You can either find another plugin or hack your way through this one. For the latter it's good to know that you can access the elevateZoom object this way:
var $image = $('#your-image').elevateZoom({...});
console.log( $image.data('elevateZoom') );
So basically, I made a simple website.
I am using bootstrap along with masonry jquery and google maps.
This is the basic page of my website.
How this website works is like when gallery is click, index page will fadeout and gallery page is faded in.
Lets go straight to the point which is my CSS. I am wondering what is wrong with it since I am encountering this problem.
My masonry images for gallery will overlap each other but if I place things out of the division class section. Everything is fine. Same goes for the google map width problem.
Things will only be ok after the window is resized manually.
Here are the SS for the problems
my entire css link
http://pastebin.com/kqWaszqF
my custom js link
http://pastebin.com/uqSvaMeT
my index page link
http://pastebin.com/eKHyJV95
As you can see, if I place all this codes for gallery and map outside of everything will be working fine and great but if I put it inside of that . This the above problem happens.
I tried everything like min-width: 100%, width: 100% or whatsoever. Seems like this problem always exist. Even if I setTimeOut to my javascript for masonry and googlemap, it works sometimes but not perfect as it also fails.
Can some kind soul please help me out here?
You need to provide a fiddle with html so i can test it in order to help you.
This is an IE7/IE8 issue --
I'm trying to load an overlay beneath a CSS pie object. The object is partially covered by the overlay until you scroll a bit.
Here is a link, http://lab.atworkinthecloud.com/csspie-index/index.php (click on the "+View History" link to trigger the dropdown with overlay)
The funny think is it works fine with only one or two objects on the page --
But with multiple objects on the page things get crazy.
http://lab.atworkinthecloud.com/csspie-index/index1.php
Any help or suggestions would be very much appreciated.
Try using the jQuery .delegate() function in place of .live(). jQuery delegate documentation shows you just how similar they are, just delegate is more efficient.
EDIT: also, try upgrading to a newer version of jQuery.