I was having an issue with google maps javascript API returning an empty gray box except for the google logo. I probably would have gotten the UI too, though, if I didn't disable that. I couldn't for the life of me figure out what the issue was, because my test example was working fine, but then I realized it was because I was hiding and showing the div with jquery in my actual project. My fix was to keep it active behind other divs and simply hide those when I'm ready to see the map, but I was wondering if there is a better solution. I'm still not sure why exactly hiding the div and showing it later would cause it to be blank, while leaving it active the whole time works.
try to
setTimeout(function() { map.invalidateSize() }, 900);
try to redraw map after show/hide again using javascript setTimeout function
Related
I am currently developing a Webapp and I am trying to use QuillJS as a WYSIWYG Editor. I am trying to use the 'Bubble' theme as it fits nicely with the rest of my webapp, however when the tooltip is supposed to appear it does not appear on the screen and after checking using the Development console I found that the tooltip is being displayed with a Top value of somewhere around -700 to -1000 and I have absolutely no idea why.
I have tried using an element that was high-up in the HTML Heirarchy in case a parent div was messing something up but that did not solve my problem either.
Can anyone tell me why the tooltip appears so far off the screen?
Here is a JSFiddle with the current state of my code: https://jsfiddle.net/RBrNx/nwozxLzz/
Please Note: Most of my webapp does not function or look great in the JSFiddle, this is not an issue as most of the functionality involves a local database.
You may need the bounds option，set offset parent
bounds
I have a Mapbox map on a page, which loads into a sliding panel which is controlled by jQuery.
If I change the browser window size and toggle the panel, the map often appears only partially filling its container. This is a known issue with the Mapbox GL API.
From their documentation:
If you’re hiding your map initially with something like display:none
and showing it dynamically with JavaScript, it may have some problems
appearing and sizing correctly. The map can’t figure out its own size
when it’s hidden from the page, since it doesn’t have a size in the
browser’s calculation.
With Mapbox GL JS you can call map.resize() to detect and resize the
map
So, I need to call Mapbox's map.resize() function from within my jQuery code, when the sliding panel is opened. Trouble is, I can't seem to get it to work. I've tried the following:
1: $(map).trigger('resize');
2: $(window.map).resize();
3: $(window.map).trigger('resize');
as well as
4: $(window).trigger('resize');
Thing is, I'm not sure about my syntax here and the correct way to call a function residing in another script from within jQuery. I've confirmed that the 'map' object is global, as typing map.resize() directly into my browser's dev tools console works [ie. fixes the map display]. I just can't seem to get jQuery to pass the function.
Also strange is that $(window).trigger('resize') didn't work, as manually resizing the browser window automatically triggers the 'map.resize()' function too [and fixes the map rendering].
EDIT:
Should have mentioned. I've made the map object available globally with: window.map = map; inside the mapbox.js script and made sure that the mapbox.js script loads before the jQuery one, but still no joy.
I managed to solve this in the end. The problem was that the code I was using to trigger the map redraw was as follows:
//inside jQuery map click function
$("#map").slideToggle(200);
$(window.map).resize();
Being a bit of a jQuery newbie, I [idiotically] assumed that those commands would fire sequentially but, of course, the slideToggle() animation is asynchronous. Therefore jQuery was calling the Mapbox resize() function before the sliding panel had reached its final dimensions. Thus causing the map to default to its fallback size of 400x300px
All I needed to do was stick the call to Mapbox resize() into an anonymous function, triggered after the slidetoggle() has completed:
$("#map").slideToggle(200, function()
{
$(window.map).resize();
});
There is still a slight visual glitch in that the map will initially appear at 400x300px, before quickly snapping to fill its container. But since this was a bit of an edge case, dependent on the user having resized their browser window in between toggling the map open and closed, it's good enough for me to deem it solved.
I am trying to achieve the following end result: On page load, there is a content box with a heading (or image, some element, etc). When you hover over this content box, the original content fades out, and is replaced by new content. Also, the box will enlarge via animation. On mouseout the content box will return to it's original state at page load by fading out the new content, fading in the old content, and returning the content box to it's original height.
What I have done does work, but it is not bulletproof. You can hover over the box, mouseout, and then hover over the box again and it will show the box at it's original height with the new content.
I'm trying to figure out a bulletproof way to do this and have it work in IE8+/Chrome/Safari/Firefox. There must be some simple method that I am overlooking to complete this and I'm having some trouble finding a great way to do it.
I've attempted adding an animated class to the element, which is removed when the animation is completed, and then using setTimeout to check if the class is still there after 400 milliseconds, but I was having some trouble with that method working in IE8.
Not really sure of anything else I can try and if anyone has any suggestions I'd greatly appreciate the assistance.
The provided JSFiddle provides a basic idea of what I am trying to do.. I'm just looking for a bulletproof way to do it.
JSFiddle: http://jsfiddle.net/Ur78U/1/
The solution I came up with was to use the jQuery fadeTo() method.
This ensures that the animation will complete and not get stuck as it did in my example.
Here's a fiddle: http://jsfiddle.net/Ur78U/2/
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
Hello I'm quite new to using jQuery and I was trying to create a menu that showed different pictures when you moused over the links. It will show one picture and hide 4 others and when you mouse off a link it will go back to a default picture. I'm using the hover function but sometimes when I moved the mouse to the bottom both images (the one related to the link and the default) both show up and I was wondering if there was some check I could do to make sure that this didn't happen. Here's what my code looks like.
$("#blog-img").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog").hover(
function(){
$("#default").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog-img").show("slow");
},
function(){
$("#blog-img").hide();
$("#default").show("slow");
}
);
I would love any help I could get on this.
You are possibly creating a race condition by using timing to show the images.
When both images are shown it's probably because the at least one of the Shows has been executed before the first executed one completes. This can happen when you move fractionally -we're talking pixels - into/out of the object with the hover.
I recommend using CSS to resolve this. It's much cleaner than using Javascript.