[map module] infowindows

CoBo

Joined: 2006-03-24
Posts: 3

Posted: Fri, 2006-03-24 12:13

Would it be possible to have all text and links in infowindow in black. Or maybe links in dark blue?
Using themes with white link color, the links are not visible in the infowindows
Great module by the way!

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Fri, 2006-03-24 14:36

Add this to your CSS

.infowindow {
font-size: 13px;
}
.infowindow a {
color: #ffffff!important;
}

then in the infowindow .inc file add the infowindow class:
+'<div class=\"infowindow\" style=\"width:200px\"><a href=\"'+itemLink+'\">'+title+'</a><br/>'
The above example is from the /templates/infowindow/default.inc

I guess I can do this for all in the future.
Termite do you have any opinion on link and font colors for defaults?
____________________________________________________

Termitenshort

Joined: 2005-10-09
Posts: 1894

Posted: Fri, 2006-03-24 20:02

This way is the correct way to handle it I believe

It'll be easier once the infowindow creation tool will be finish. It'll be a settings to change someplace to configure this type of things

For the time being it's using the default settings selected by the theme and indeed in some instances it looks horrible
-------------------------
The Termite

dotnature

Joined: 2005-10-26
Posts: 224

Posted: Sun, 2006-03-26 23:01

I did it another way just using css with

#map .active:hover{
color:black; 
and
#map .noprint  a{
color:blue
}

Though floridave's way is better.

infowindow creation tool ! Damn you termite I just spend like an hour customizing an infowindow
I like it but Im having a problem of course this only occurs in IE (gasp) but when you click details the infowindow has a large empty white space at the bottom. Of course it looks fine in firefox. Any ideas whats doing this? I attched the inc file.

Termitenshort

Joined: 2005-10-09
Posts: 1894

Posted: Mon, 2006-03-27 02:39

dotnature wrote:

infowindow creation tool ! Damn you termite I just spend like an hour customizing an infowindow

Sorry I didn't mean to hurt, just trying to help make this easier to use

Tomorrow I'll be taking a look at your infowindow problem ... now it's time to sleep for me

dotnature

Joined: 2005-10-26
Posts: 224

Posted: Mon, 2006-03-27 02:55

[img]http://www.siouxvocational.org/cc/images/awesome_cookie.jpg[/img]

Termitenshort

Joined: 2005-10-09
Posts: 1894

Posted: Mon, 2006-03-27 02:56

That a cool cake does it taste good by any chance ?
-------------------------
The Termite

galmoid

Joined: 2005-11-07
Posts: 364

Posted: Mon, 2006-03-27 15:31

dotnature wrote:

...the infowindow has a large empty white space at the bottom. Of course it looks fine in firefox. Any ideas whats doing this?...

You will need to use a div to fix this.

Change:

$map['infowindow'][2]="''
      +'<table width=180px><tr><td><a href=\"'+itemLink+'\">'+title+'</a><br/>'
      +'<font color=black><b>Date:</b> '+created+'</font>'";

to this (alter the numbers according to taste):

$map['infowindow'][2]="''
      +'<div style=\";margin-top:10px;width:250px;height:150px;overflow:auto;\">'
      +'<table width=180px><tr><td><a href=\"'+itemLink+'\">'+title+'</a><br/>'
      +'<font color=black><b>Date:</b> '+created+'</font>'";

-and-

Change:

$map['infowindow'][2]=$map['infowindow'][2]."
        +'</td></tr></table>'";

to:

$map['infowindow'][2]=$map['infowindow'][2]."
        +'</td></tr></table></div>'";

Note: The overflow:auto will cause a scrollbar if necessary.

dotnature

Joined: 2005-10-26
Posts: 224

Posted: Mon, 2006-03-27 20:03

Thanks galmoid that worked perfectly, I also addded the div style to the infowindow[1] and though it looks fine in ff theres still whitespace in ie only for infowindow 1, damn this can be confusing. Its more or less the same so I cant see why.

$map['infowindow'][1]="''
      +'<div style=\";margin-top:5px;width:150px;height:180px;\">'
      +'<a href=\"'+itemLink+'\">'+title+'</a><br/>'
      +'<a href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\"/></a>'";

if ($map['showZoomLinks']){
$map['infowindow'][1]=$map['infowindow'][1]."
     +'<br/><br/><a href=\"#zoominlink\" onclick=\"javascript:map.centerAndZoom(new GPoint('+px+','+py+'), '+zoomlevel+'); return false;\">Zoom In</a></div>'";

galmoid

Joined: 2005-11-07
Posts: 364

Posted: Mon, 2006-03-27 20:27

Can't see it... don't know. Does infowin 1 react to changes in
the div style settings?

dotnature

Joined: 2005-10-26
Posts: 224

Posted: Mon, 2006-03-27 20:42

Ya it does in both ie and ff, but it starts reacting wierd at a certain level. In ie the height (and width) seems fixed at around height:190 (width about the same) no matter if I go lower, yet in ff if I set it lower to like height:150 is will show up, you can even set it so low that is practically disappears. Its not big deal im just wondering why ie doesnt work but that seems pretty common with a lot of things.

galmoid

Joined: 2005-11-07
Posts: 364

Posted: Mon, 2006-03-27 20:51

Maybe IE is checking the image in the img tag. Try putting
the

style=\"max-width:180px;max-height:200px;\"

back in the img tag (adjusting as you like). Hey, it's worth a try.

dotnature

Joined: 2005-10-26
Posts: 224

Posted: Mon, 2006-03-27 21:02

hehe Im done with this I hate ie, a bit of extra whitespace doesnt really matter, maybe its a google thing because its acting the opposite of ff. In ff the picture tag is small and the details is larger, in ie its the picture tag thats bigger than the details, who knows.

galmoid

Joined: 2005-11-07
Posts: 364

Posted: Mon, 2006-03-27 21:28

Hey man, here's something top try...

$map['infowindow'][1]="''
      +'<div style=\";margin-top:5px;width:150px;height:135px;overflow:hidden;\">'
      +'<a href=\"'+itemLink+'\">'+title+'</a><br/>'
      +'<a href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\"/></a>'";

The overflow:hidden will clip the window at 'height'. Adjust
accordingly.

dotnature

Joined: 2005-10-26
Posts: 224

Posted: Mon, 2006-03-27 21:54

sweet that worked

If anyone wants to use it I mashed togther the table and g3 I think, first tab displays title/orangeline/photo/zoom link, the detials tab has title/orangeline/date/directions/teraserver/topozone/weatherbonk
I slimmed the directions and weatherbonk down to fit nicely in so there is no need for scroll bars. Also I centered the pic in the infowindow by adding

#map a img {
padding-left:15px;
}

to the css

of course this is probably pointless since termite is making the map module into a full blown application soon;)

CoBo Joined: 2006-03-24 Posts: 3	Posted: Fri, 2006-03-24 12:13
	Would it be possible to have all text and links in infowindow in black. Or maybe links in dark blue? Using themes with white link color, the links are not visible in the infowindows Great module by the way!
	XUser login Username: * Password: * Create new account Request new password
floridave Joined: 2003-12-22 Posts: 27300	Posted: Fri, 2006-03-24 14:36
	Add this to your CSS .infowindow { font-size: 13px; } .infowindow a { color: #ffffff!important; } then in the infowindow .inc file add the infowindow class: `+'<div class=\"infowindow\" style=\"width:200px\"><a href=\"'+itemLink+'\">'+title+'</a><br/>'` The above example is from the /templates/infowindow/default.inc I guess I can do this for all in the future. Termite do you have any opinion on link and font colors for defaults? ____________________________________________________

Termitenshort Joined: 2005-10-09 Posts: 1894	Posted: Fri, 2006-03-24 20:02
	This way is the correct way to handle it I believe It'll be easier once the infowindow creation tool will be finish. It'll be a settings to change someplace to configure this type of things For the time being it's using the default settings selected by the theme and indeed in some instances it looks horrible ------------------------- The Termite

dotnature Joined: 2005-10-26 Posts: 224	Posted: Sun, 2006-03-26 23:01
	I did it another way just using css with #map .active:hover{ color:black; and #map .noprint a{ color:blue } Though floridave's way is better. infowindow creation tool ! Damn you termite I just spend like an hour customizing an infowindow I like it but Im having a problem of course this only occurs in IE (gasp) but when you click details the infowindow has a large empty white space at the bottom. Of course it looks fine in firefox. Any ideas whats doing this? I attched the inc file.

Termitenshort Joined: 2005-10-09 Posts: 1894	Posted: Mon, 2006-03-27 02:39
	dotnature wrote: infowindow creation tool ! Damn you termite I just spend like an hour customizing an infowindow Sorry I didn't mean to hurt, just trying to help make this easier to use Tomorrow I'll be taking a look at your infowindow problem ... now it's time to sleep for me

dotnature Joined: 2005-10-26 Posts: 224	Posted: Mon, 2006-03-27 02:55
	[img]http://www.siouxvocational.org/cc/images/awesome_cookie.jpg[/img]

Termitenshort Joined: 2005-10-09 Posts: 1894	Posted: Mon, 2006-03-27 02:56
	That a cool cake does it taste good by any chance ? ------------------------- The Termite

galmoid Joined: 2005-11-07 Posts: 364	Posted: Mon, 2006-03-27 15:31
	dotnature wrote: ...the infowindow has a large empty white space at the bottom. Of course it looks fine in firefox. Any ideas whats doing this?... You will need to use a div to fix this. Change: $map['infowindow'][2]="'' +'<table width=180px><tr><td><a href=\"'+itemLink+'\">'+title+'</a><br/>' +'<font color=black><b>Date:</b> '+created+'</font>'"; to this (alter the numbers according to taste): $map['infowindow'][2]="'' +'<div style=\";margin-top:10px;width:250px;height:150px;overflow:auto;\">' +'<table width=180px><tr><td><a href=\"'+itemLink+'\">'+title+'</a><br/>' +'<font color=black><b>Date:</b> '+created+'</font>'"; -and- Change: $map['infowindow'][2]=$map['infowindow'][2]." +'</td></tr></table>'"; to: $map['infowindow'][2]=$map['infowindow'][2]." +'</td></tr></table></div>'"; Note: The overflow:auto will cause a scrollbar if necessary.

dotnature Joined: 2005-10-26 Posts: 224	Posted: Mon, 2006-03-27 20:03
	Thanks galmoid that worked perfectly, I also addded the div style to the infowindow[1] and though it looks fine in ff theres still whitespace in ie only for infowindow 1, damn this can be confusing. Its more or less the same so I cant see why. $map['infowindow'][1]="'' +'<div style=\";margin-top:5px;width:150px;height:180px;\">' +'<a href=\"'+itemLink+'\">'+title+'</a><br/>' +'<a href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\"/></a>'"; if ($map['showZoomLinks']){ $map['infowindow'][1]=$map['infowindow'][1]." +'<br/><br/><a href=\"#zoominlink\" onclick=\"javascript:map.centerAndZoom(new GPoint('+px+','+py+'), '+zoomlevel+'); return false;\">Zoom In</a></div>'";

galmoid Joined: 2005-11-07 Posts: 364	Posted: Mon, 2006-03-27 20:27
	Can't see it... don't know. Does infowin 1 react to changes in the div style settings?

dotnature Joined: 2005-10-26 Posts: 224	Posted: Mon, 2006-03-27 20:42
	Ya it does in both ie and ff, but it starts reacting wierd at a certain level. In ie the height (and width) seems fixed at around height:190 (width about the same) no matter if I go lower, yet in ff if I set it lower to like height:150 is will show up, you can even set it so low that is practically disappears. Its not big deal im just wondering why ie doesnt work but that seems pretty common with a lot of things.

galmoid Joined: 2005-11-07 Posts: 364	Posted: Mon, 2006-03-27 20:51
	Maybe IE is checking the image in the img tag. Try putting the style=\"max-width:180px;max-height:200px;\" back in the img tag (adjusting as you like). Hey, it's worth a try.

dotnature Joined: 2005-10-26 Posts: 224	Posted: Mon, 2006-03-27 21:02
	hehe Im done with this I hate ie, a bit of extra whitespace doesnt really matter, maybe its a google thing because its acting the opposite of ff. In ff the picture tag is small and the details is larger, in ie its the picture tag thats bigger than the details, who knows.

galmoid Joined: 2005-11-07 Posts: 364	Posted: Mon, 2006-03-27 21:28
	Hey man, here's something top try... $map['infowindow'][1]="'' +'<div style=\";margin-top:5px;width:150px;height:135px;overflow:hidden;\">' +'<a href=\"'+itemLink+'\">'+title+'</a><br/>' +'<a href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\"/></a>'"; The overflow:hidden will clip the window at 'height'. Adjust accordingly.

dotnature Joined: 2005-10-26 Posts: 224	Posted: Mon, 2006-03-27 21:54
	sweet that worked If anyone wants to use it I mashed togther the table and g3 I think, first tab displays title/orangeline/photo/zoom link, the detials tab has title/orangeline/date/directions/teraserver/topozone/weatherbonk I slimmed the directions and weatherbonk down to fit nicely in so there is no need for scroll bars. Also I centered the pic in the infowindow by adding #map a img { padding-left:15px; } to the css of course this is probably pointless since termite is making the map module into a full blown application soon;)

[map module] infowindows

XUser login