We Keep Coding

Google Maps API V3 Add a button near to a polygon hovered

I'm working with Google Maps API V3, and I'd like to display a clickable image near to a drawed polygon when the mouse hovers it.
Until now, I'm able to create this event, but I have no idea how to display this image near to my polygon. Ideally, I'd like this image appears where the mouse entered in the polygon.
Here is a piece of my code, but it's just a try and the image is not displayed, so it is very incomplete (and maybe wrong). You can suggest me to do otherwise, Javascript is not my preferred language...
google.maps.event.addListener(polygon, 'mouseover', function(e) {
this.setOptions( {fillOpacity: 0.1} );
polygon["btnMyButtonClickHandler"] = {};
polygon["btnMyButtonImageUrl"] = MyImage;
displayMyButton(polygon);
});
function displayMyButton(polygon) {
var path = polygon.getPath();
var myButton = getMyButton(path.btnMyButtonImageUrl);
if(myButton.length === 0)
{
console.log("IN"); //Is displayed in the console
var myImg= $("img[src$='http://linkToMyImage.png']");
myImg.parent().css('height', '21px !important');
myImg.parent().parent().append('<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; width: 30px; height: 27px;top:21px;"><img src="' + path.btnMyButtonImageUrl+ '" class="myButtonClass" style="height:auto; width:auto; position: absolute; left:0;"/></div>');
// now get that button back again!
myButton = getMyButton(path.btnMyButtonImageUrl);
myButton.hover(function() {
$(this).css('left', '-30px'); return false; },
function() { $(this).css('left', '0px'); return false; });
myButton.mousedown(function() { $(this).css('left', '-60px'); return false;});
}
// if we've already attached a handler, remove it
if(path.btnDeleteClickHandler)
myButton.unbind('click', path.btnMyButtonClickHandler);
myButton.click(path.btnMyButtonClickHandler);
}
function getMyButton(imageUrl) {
return $("img[src$='" + imageUrl + "']");
}
Thanks for your suggestions !
EDIT
#MrUpsidown, unfortunately no, click event can't be a solution, I really need your Something here div appears at mouseover.
I modified your code like this :
google.maps.event.addListener(polygonPath, 'mouseover', function (event) {
if( $("#map_overlay").css('display') == "none")
{
$("#map_overlay").css({
'position': 'absolute',
'display': 'block',
'left': event.Sa.pageX,
'top': event.Sa.pageY
});
}
});
The div appears when my mouse enter the polygon and don't move except if my mouse hovers the div (which hovers the polygon). On this case, the event seems called continuously. How can we avoid this and let the div at its inital position once the mouse enter the polygon ?
Here is your modified : fiddle

You need to create an element to hold your clickable image. Make it position:absolute; with a bigger z-index than your map container. To place it at a specific place, check the mouse position on your polygon mouseover event and set the element position accordingly. Hope this helps.
Edit: Yes, wrap it in a DIV is a good idea. Here is a simple fiddle to show the concepts. And sorry, of course it was mouseover and not mouseenter like I first wrote.
http://jsfiddle.net/upsidown/zrC2D/

(CSS/jQuery) How resolve the conflict between top and bottom property with jQuery

Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !

You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/

You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.

How to implement jquery like slideDown() in zepto

I am using zepto library for my mobile web site. I have recently learnt that zepto does not have slideDown() plugin like jquery. I would like to implement the same for zepto.
I have tried one on jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Here it does not animate while showing the element. It just flashes down. How do I bring in the animation?
PS: I cannot provide a fixed height because I would be applying this plugin to the elements whose height property would not be known.
Thanks in advace!!

Demo: http://jsfiddle.net/6zkSX/5
JavaScript:
(function ($) {
$.fn.slideDown = function (duration) {
// get old position to restore it then
var position = this.css('position');
// show element if it is hidden (it is needed if display is none)
this.show();
// place it so it displays as usually but hidden
this.css({
position: 'absolute',
visibility: 'hidden'
});
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};
})(Zepto);
$(function () {
$('.slide-trigger').on('click', function () {
$('.slide').slideDown(2000);
});
});​
​

This worked for me:
https://github.com/Ilycite/zepto-slide-transition
The Zepto Slide Transition plugin add to Zepto.js the functions bellow :
slideDown();
slideUp();
slideToggle();

Speransky's answer was helpful, and I'm offering a simplified alternative for a common drop-down navigation list, and separated into slideUp and slideDown on jsfiddle: http://jsfiddle.net/kUG3U/1/
$.fn.slideDown = function (duration) {
// show element if it is hidden (it is needed if display is none)
this.show();
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};

This would work for what you need:
https://github.com/NinjaBCN/zepto-slide-transition

Todays Special: How is this done? Is there a jquery plugin or product to do it?

I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .

position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.
This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature

You can check out my version of this at uxspoke.com
I wrote a jQuery plugin to do it, and calling it is straightforward:
$('#about').pulloutPanel({open:true}).
click(function() { $(this).trigger('toggle'); }) });
I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!
The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.
Here it is:
$.fn.pulloutPanel = function(options) {
var settings = $.extend({}, {
attachTo: 'bottom',
css: {
left: 0,
minHeight: 390,
border: '1px 1px 1px 0 solid #666',
has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))],
cursor: 'pointer'
}, options);
return $(this).each(function() {
var $this = $(this);
$this.addClass('pullout_panel');
$this.bind('open', function(event) {
$this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
$this.removeClass('closed').addClass('opened');
$this.trigger('opened');
});
});
$this.bind('close', function(event) {
var height = $this.innerHeight();
$this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
$this.addClass('closed').removeClass('opened');
$this.trigger('closed');
});
});
$this.bind('toggle', function(event) {
$this.trigger($this.hasClass('opened') ? 'close' : 'open');
});
once(function() {
Csster.style({
'.pullout_panel': {
position: 'fixed',
bottom: 0,
has: [settings.css]
}
});
});
$this.trigger(settings.open ? 'open' : 'close');
});
};

jQuery animate() to position issue

I'm just working on my personal website, giving it a bit of a revamp.
I've implemented a sort of 'accordion' menu feature, where if a menu button is clicked, the "non-clicked" buttons disappear, and then the clicked button is moved to the top of the list, where then a panel animates down in which I will be putting text content.
In Firefox this works perfectly, however in IE and Chrome the button jumps to the top of the page and then animates to position, instead of animating from where it started from.
Anyone any ideas how to fix this?
Offending code:
function Accordion(e)
{
var o =
{
init: function()
{
o.button = e;
o.addClickHandler();
},
addClickHandler: function()
{
o.button.click(function(){
o.button.removeClass('unselected');
o.button.addClass('selected');
o.fader();
});
},
fader: function()
{
$j('.unselected').animate({opacity:0}, 1000);
var wait = setInterval(function() {
if(!$j('.unselected').is(":animated") ) {
clearInterval(wait);
o.shifter();
}
}, 100);
},
shifter: function()
{
o.button.css({'position':'absolute'});
o.button.animate({top:91}, 500, o.createInfoBox);
},
createInfoBox: function()
{
var buttonParent = o.button.parent();
buttonParent.append("<div class='infoBox'></div>");
$j('.infoBox').animate({height:390});
}
}
o.init();
return o;
}
}
The issue lies within the shifter function, where I'm setting the position to absolute and then animating so the desired effect can be achieved. I understand why it's doing this (presume it's just resetting itself to top:0 and then animating to top:91) but does anyone have a quick solution? It's late and it's doing my head in.
Much appreciated,
Dave

HAve you tried using the current position of the element when you switch it to absolute... for example:
function() {
var currentp = $(this).offset();
o.button.css({'position':'absolute', top: currentp.top});
o.button.animate({top:91}, 500, o.createInfoBox);
}
Note there are two different offset functions and im not sure which one you want use here so you might want to review the docs on that.
Also you could always just re-theme the jQuery-ui accordian and save yourself the trouble ;-)