TOPIC: popup window once click on hotspot

Hi there,

I've found few problems which I am listing below:

1) The image inside the popup window is out of the box in the first click. After that is showing fine. How to fix that?
Check http://www.virtualbc.ca



2) How can I decrease the size of the popup window once click on hotspot?

As you can see, there is a lot of empty space to the right of the image and address.

3) How can I move the popup window behind the hotspot?

4) The field Postal Code should be after the City or Town. Right now is showing before the name of the city.

5) Could be possible to add more fields like phone number, fax number and website?

6) How can I center all the elements inside the popup window?

I would recommend to go to the backend -> layout and enable the map overlay - instead of this balloon you will get the information at the bottom in classes that you can style.

so,

there is not way to fix the problems with the popup?

I am more interested in points 1, 2 and 6.

Hi,

At least, I will need the picture to shows up the first time inside the popup hot spot window. Is there any possible solution?
I can not present the site to the client in this way. It doesn't look professional.

That with the image is strange. Perhaps try to float it left? I have an image in a such a ballon and it looks just fine.

2. The width of the balloon is automatically calculated from google maps api, so you have not influence over it.

about 4 - there is already a ticket on dev.compojoom.com about this.

6. well the same like with 2.

Hi Daniel,

The align=top did the trick and I just increased the size of the image to fill all the empty space.

Is there any chance to move the hotspot to the center of the map once we click on top of it?

Everything that is connected with the default balloon is created from Google. But anyway the balloon is always well centred even if not in the middle of the map isn't it?

It is very centered on the vertical line but not on the horizontal line. Part of the balloon is behind the right popup menu.

Aha, yes this is possible, because the menu is not part of the google map. It is placed over the map.
Well a solution for this is to somehow make a smarter layout that doesn't rely on this menu to slide in, but is placed somewhere outside the div map_cont.

I remember that you asked me somewhere how to make the menu slide in only on click. Open the media/com_hotspots/js/hotspots.js file
on line 70 you have thischange it to
BTW awesome work with the gallery part. It would be cool if you share this info with the other users of the site

Hi,

Thanks to show me the way to make the menu slide in only on click.

I am using the ARI Pretty Photo module and plugin:
www.ari-soft.com/vmchk/Joomla-Components/ARI-Pretty-Photo/Detailed-product-flyer.html

I was trying to use it before but for some reason was not working, They checked your code and they sent me the message:
It didn't work in the previous time because HotSpots component calls init method "setVariables" twice.

I am glad you like my work with the gallery. If anyone has questions, will be a pleasure to answer them.

Hi,

About the right menu:

If I change the code to:

$('slide_menu').addEvent('click', function(e){
e = new Event(e);
slidemenu.slideOut();
e.stop();
});

And try to click on top of Terrain Map (for example), this function is not working.
But If I erase the changes bringing the code back to:


$('slide_menu').addEvent('mouseover', function(e){
e = new Event(e);
slidemenu.slideOut();
e.stop();
});

Everything come back to normal.

How can I fix that?

Yep, this javascript event propagates also to the buttons....
Why don't you make a new button -> an arrow that you have to click to show the menu? It would be more clear for the user what they have to do to show the menu.

then all you will have to do is to change
$('slide_menu') with $('id of your element')

Daniel

Hi,

It's a good idea your suggestion but the implementation is like Chinese to me.

But I will try to find the way to implement that button.


Thanks

just giving you some pointers.
Edit the default_menu layout. Place a new <a href="#" id="myOpenId"><< Open</a>

and then try to use the above js to create the open event on the myOpenId.
Daniel