Develop Reference

How can I click on a link which opens an image, then only display part of that image

I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.

Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.

You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>

Create Map sample that clicks into the actual map

I am trying to build something that prevents users from clicking on the interactive aspects of the map until they click the map initially like shown when you google search a place like the Toronto Eaten Centre.
I did a visual mock to better explain:
I am using google maps and I am not able to get a div to float over the google maps (which was my first attempt at creating this by just having a div float over that when clicked on would disappear and the map would resize via javascript). Google does this well when you search for a location example found here.
Here is my fiddle trying to float a div over top so that i could use it to click into the actual map.
Below is the css of the floating div that will not show above the map even with absolute position and z-indexes
.map-floater {
position: absolute;
z-index: 3;
height: 280px;
width: 100%;
background: #555;
opacity: 0.7;
}

Your markup isn't right, put the overlay in same container as the map
<div class = "map-holder">
<div class = "map-floater"> </div>
<iframe src="path/to/map" width= "100%" height = "380px" frameborder="0"/>
</div>
DEMO

tooltip displaying at random position

I have a requirement where i have multiple tables in a page and when i mouse over on one column it has to show tooltip at the top position with some data in it. Issue is tooltip is showing randomly. Thanks.

first off, make sure you're correctly terminating your spans (you're missing the ending bracket).
change this:
a.tooltip:hover span {
position: fixed;
to this
a.tooltip:hover span {
position: absolute;

Move loading div down as ajax content loads

The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?

If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps

If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.

Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.

How to get page 's scroll position change event in JS?

How to get page 's scroll position change event?
I want to implement dynamic table of contents like http://bonsaiden.github.com/JavaScript-Garden/ ( In this website, with your scrolling of the webpage, It also shows the current active item)
Is it possible to implement same thing without getting current scroll-position?
I am very new to JS and web-world.

That page does use some JS trickery with its <nav> element, but it's fixing the location of the sidebar using position: fixed, that is, using CSS not JavaScript. Here's the relevant style declaration (comments mine):
nav {
position: fixed; // fix position
margin-left: 750px; // add 750 px of room to the left
top: 0; // set 0px from top of page
}