Javascript/css/div help please!

tres

tres

tres

Soldato
Joined
16 Oct 2007
Posts
7,481
Location
UK
Hi all,

I was hoping someone might be able to help me, as I'm a bit stuck with something!
I've made an interactive map to show cottage locations around an island, using simple infowindows/markers.

http://www.tresco.co.uk/about-tresco/about-tresco/mapv1413.aspx

Which works great, apart from one thing - the info windows have scroll bars!
I've reduced the image so the horizontal bars go, and could shrink it even further so the vertical ones also go, but I'd ideally like to find a way to change them properly so I can include further information within the info window.

I've heard that it might be possible to set the info window height using css/div, to a preset size, and then load the image inside the div - but to be honest, I wouldn't know where to start.

If you have any ideas, it would be great. Thanks
 
Can you not just change the size of the infowindow to make it either bigger for everything or dynamically create it for each point. And/Or add height tags to each of the markers?

Code: 
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size([COLOR="Red"]150[/COLOR],300)
  });

EDIT:

Ignore all that (although your images should really have the hight defined correctly and not the width twice like some of them) It's the padding on your links.

In tresco.css you define a:link as padding :1px; if you locally override it the problem goes away in chrome.

Code: 
var marker = createMarker(point,"Tower Flat","<a [COLOR="Red"]style=\"padding:0pt\"[/COLOR] href=\"http://tresco.co.uk/Accommodation/cottages/rental-cottages/tower-flat.aspx\"><b>Tower Flat</b> <i>Sleeps 8</i><br><img width=\"168\" height=\"100\" src=\"http://tresco.co.uk/includes/site-images/latest-news-no-image.jpg\"></a>")
 
Last edited:
By golly Simon, that works (the padding method).

You are a star, thank you! I am in your debt
 
If you stick it in the style tag at the top of the page you don't have to modify the links but I'd guess you are just dragging them from the DB anyway.

Code: 
<style type="text/css"> 
  a:link {padding: 0px;}
  html, body { height: 100%; } 
</style>
 
I'd rather modify the links than change the tresco.css, as I'd be afraid of breaking the whole site. Your method is awesome, thanks chief. Are you a JS expert?
 
In that case change the HTML to use a class in your CSS. Inline styling makes baby Jesus cry.

Code: 
var marker = createMarker(point,"Tower Flat","<a class=\"google-marker\" href=\"http://tresco.co.uk/Accommodation/cottages/rental-cottages/tower-flat.aspx\"><b>Tower Flat</b> <i>Sleeps 8</i><br><img width=\"168\" height=\"100\" src=\"http://tresco.co.uk/includes/site-images/latest-news-no-image.jpg\"></a>")

Then in CSS
Code: 
.google-marker { padding: 0; }
 
tres said:
I'd rather modify the links than change the tresco.css, as I'd be afraid of breaking the whole site. Your method is awesome, thanks chief. Are you a JS expert?
Click to expand...

I used to be :cry: far too out of date now.

Spunkey said:
In that case change the HTML to use a class in your CSS. Inline styling makes baby Jesus cry.

Code: 
var marker = createMarker(point,"Tower Flat","<a class=\"google-marker\" href=\"http://tresco.co.uk/Accommodation/cottages/rental-cottages/tower-flat.aspx\"><b>Tower Flat</b> <i>Sleeps 8</i><br><img width=\"168\" height=\"100\" src=\"http://tresco.co.uk/includes/site-images/latest-news-no-image.jpg\"></a>")

Then in CSS
Code: 
.google-marker { padding: 0; }
Click to expand...

Totally agree. Was just getting it to work.
 
I've banned all IE6 users from the site. They're just not allowed on.

So, as we have a couple of awesome people here. Anyone up for a small javascript challenge?
 
You must log in or register to reply here.
Back
Top Bottom