[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1026
  • Last Modified:

use javscript to trigger onclick event on image in jQuery zoommap

I am using http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps for an interactive map. I added a legend. One icon on the legend should trigger a clickable region on the map and thereby cause the map to zoom in. How can I create such an oncllick event to make the browser click that zoomable region? Will some CSS do or do I need JavaScript?
0
rhandalthor
Asked:
rhandalthor
  • 10
  • 4
4 Solutions
 
Justin MathewsCommented:
If the zoomable region has an ID 'zoomrgn', you can add this jQuery code:

$('#zoomrgn').click();

to invoke a click on that region.

0
 
rhandalthorAuthor Commented:
@ jmatix How would I add that code to divs - one for each legend icon or an image (legend image?
0
 
rhandalthorAuthor Commented:
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
rhandalthorAuthor Commented:
I guess I would have to load something like
$('#other').click(function() {
  $('#target').click();
});

Open in new window

0
 
Justin MathewsCommented:
If all <img>s have a common class, say, legend i.e. <img class='legend'>

Then you can say:

$('.legend').click(function() {
  $('#target').click();
});

It will apply it for all images.
0
 
rhandalthorAuthor Commented:
Loaded
 $('#destinations-legend').click(function() {
  $('#kadavu').click();
});

Open in new window

Just to make the whole legend image a trigger. Reloaded the page. No luck yet and an error:
$ is not defined
http://abc.com
Line 1

Open in new window

0
 
Justin MathewsCommented:
Have you included jquery.js at the top as:

<script src="http://code.jquery.com/jquery-latest.js"></script>

0
 
rhandalthorAuthor Commented:
WordPress normally loads jQuery on the home page and all pages unless blocked and it is loaded on that page. I checked using Firebug. Maybe the legend.js is loaded too late or too early to work with jQuery?
0
 
rhandalthorAuthor Commented:
Read http://wpengineer.com/2028/small-tips-using-wordpress-and-jquery/ and tried
]jQuery(function ($) {
// Now you can use $ as a reference to jQuery without any problem
$('#destinations-legend').click(function() {
$('#kadavu').click();
 });
}); 

Open in new window

in legend.js which I load using
wp_enqueue_script('legend', '/wp-content/themes/decondo-child/lib/scripts/legend.js');

Open in new window


No luck yet :-(
0
 
dxdinhCommented:
do you url to page that I can take a look at the error messages?
0
 
rhandalthorAuthor Commented:
Site is not open to the public yet. I see this error:
$ is not defined
http://abc.com
Line 1

Open in new window


when I use this
$('#destinations-legend').click(function() {
$('#kadavu').click();
}); 

Open in new window

When I check other script loaded i DO see jQuery JavaScript Library v1.4.2 . legend.js is loaded before jQuery in the header.
in legend.js
0
 
Justin MathewsCommented:
Can you move loading of legend.js down to be below jquery.js so that it loads after jquery.js?
0
 
rhandalthorAuthor Commented:
Trying to figure out how to do that with the WordPress'
wp_enqueue_script('legend', '/wp-content/themes/decondo-child/lib/scripts/legend.js');

Open in new window

in function.php. Never done that before..
0
 
rhandalthorAuthor Commented:
wp_enqueue_script('legend', '/wp-content/themes/decondo-child/lib/scripts/legend.js','jquery');

Open in new window


was supposed to load the script and make it clear to WordPress that it depends on jQuery, but I still get
jQuery is not defined
http:/abc.coms?ver=3.0.1
Line 1

Open in new window

using
jQuery(document).ready(function ($) {
$('#destinations-legend').click(function() {
$('#kadavu').click();
});
});

Open in new window

0
 
rhandalthorAuthor Commented:
OK. Working. Had to load it before wp_head() in the parent theme :-)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 10
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now