Features Offered:
Lightweight FootprintCSS 1,2,3 CompliantCross-browser
Interactive Map with jQuery
In this script you will find out the trick for addressing your needs on you own maps. Have a try!
jQuery
Category > Plugin |
Member Info::
Hi, we are jquerystock.com providing free jquery education with API and it's plugins to the jquerystock users. We will keep trying to provide best plugins and education tp you. Feel free to use jquerystock resources for your upcomming project.
Discussions +
David | Interactive Map with jQuery
Interactive Map with jQuery Hi Is it possible not to show this box: Choose a city The above interactive map contents the continents and cities. Please select continent through the dropdown field and view the cities details. So when the map loads up their is no black box, but when you click on a city the black box appears? Hope you can help Thanks
cancel
jQuerystock | I hope this works,
If you want to hide the black box from the layout till the user clicks on the the dot (city) then please open then css file and add a line "disply:none" to the .detail_container class.
David | Interactive Map With Jquery
Thats great! Thanks for the swift reply
David | Interactive Map With Jquery
Hi Sorry should have asked this earlier. It would be really great if I had the ability to close the pop up black box, is this at all possible? Again many thanks for your help!
David | Interactive Map With Jquery
Hi Is it also possible to close the black box once you have clicked on it? Many Thanks for your help!
jQuerystock | Yes why not?
add the following script to the includes/interactive_map.js page :: $(".detail_container").click(function(){ $(this).css({"display":"none"}); });
David | Interactive Map with jQuery
Hi Many thanks for your response regarding the "Close" box feature. One thing I have noticed is that when I do close the box the page jumps to the top, I have been told that this may need a "return false" added but I am not sure where I would add this in the code? $(".detail_container").click(function(){ $(this).css({"display":"none"}); }); Can you assist? Thanks again!
canceljQuerystock | about Close bottom
$(".detail_container").click(function(){ $(this).css({"display":"none"}); return false; });
David | Interactive Map With Jquery
Hi Thanks again for your response I added this : // When a dot is clicked $('a.dot').click(function(){ $('a.dot').removeClass('selected'); $(this).addClass('selected'); var city = '.city_detail#' + $(this).attr('city'); var htmlCode = $(city).html(); $('.detail_container').fadeOut(500, function(){ $('.detail_container .city_detail').html(htmlCode); $('.detail_container').fadeIn(500); }); }); $(".detail_container").click(function(){ $(this).css({"display":"none"}); }); // end Ready }); But if I scroll the page down a bit and then click my close button it still jumps to the top of the page. Any ideas? Many thanks for all your help!
jQuerystock | Suggestion for the links...
If you are applying effects or an action on a href elements of HTML then you must add return false; in the related function ends... I hope this works..try it because if that .dot class was given to an other elements like DIV or SPAN of HTML, it doesn't it doesn't take you to top of page.
David | Interactive Map with jQuer
Hi That works now thanks, last question I think regarding this. I have put a link within the HTML of the pop up, the thing is when I click on the link it closes the box but does not link to the page. How can I make it so it does both. 1. CLose the box 2. Link to a page. Many Thanks David
cancel
jQuerystock | Resolving your problem...
if you want to do these things 1. CLose the box 2. Link to a page. then you should have to put a link in the a href tag with class name . and in it's script action please remove return false; if you end up the script with return false code statement then the link to the http://www.jquerystock.com will not work. thanks, but please ask if you have any questions...
David | Interactive Map with jQuery
Hi I am still struggling to get this to work, would it be possible to send you my code and you can then see where I am going wrong? Many Thanks for your help. David
canceljQuerystock | Resolving your problem...
Contact me at email and left me know what and where you are getting errors...
GRAB THE JQUERY VERSION
Popular Posts
Constribute a post
Upload JQUERY for the jquerystock community help share knowledge for the benifits of all!
Constribute a Script ::
Leave a comment +