38 comments found.
of course, sorry.
Thank you
Hi, thanks. Its possible open link in a blank widow?
Regards.
Ya sure, it’s a native HTML tag option. add “target=_blank” this when you add link.
label: 'Your text goes here <a href="http://www.website.com" target="_blank">Your Link Goes Here</a> rest of the text goes here'
Hello, how do I insert a link to the text of the “Label”
You can add link into label as per below…
label: 'Your text goes here <a href="http://www.website.com">Your Link Goes Here</a> rest of the text goes here'
Feel free to let me know if you need further help.
Regards, DotDesign.in
Hi its possible insert a html link in text?
Yes of course you can.
Thanks for the great support! really appreciated. The site hasn’t gone live yet, but when it does I’ll post a link to the page where this script is implemented.
Can you send the updated file to “matt at ifpdesigns dot com”? The .js I have is minified so I can’t find line 74. Thanks!
Thanks for your reply. The first option seems best, being able to toggle is half the fun!
A wordpress module would be really great!
Also, I’m having a bit of trouble with one bubble right now. I’m trying to insert a LOT of html into one bubble. It’s not showing the plus sign and thus not expanding. Here’s the code I’m using: jQuery('#airport').addDot({
leftPos: 572,
topPos: 202,
label: '<h3>Content</h3><ul><li><h4>Content Creation Software</h4><br /><img src="full-url-path" width="50px" style="margin-right: 10px;" /><img src="full-url-path" width="100px" style="margin-right: 10px;" /><img src="full-url-path" width="100px" style="margin-right: 10px;" /><img src="full-url-path" width="100px" style="margin-right: 10px;" /></li></ul>',
showOnLoad: false,
aniType: 'slide',
aniSpeed: 0.75,
width:200,
});
Any advise would be greatly appreciated!
Can you please send html & css file so that I can look into this.
First you have to correct mistake in hot spot you are creating. At end “width:200,” remove ”,” from last option always otherwise any plug-in will break.
Second, you have to change one tag in code. If you send you email then I will send you updated file via an email.
Otherwise change below code on line no: 74
$('<div class="defaultDot" />').attr('id',this.dotObjId).css({ left:this.settings.leftPos, top:this.settings.topPos }).html("<div class="labelTxt">"+ this.settings.label +"</div><p class="showHideBtn">" + btnVal + "</p><p style="clear:both"></p>")
By replacing above line it will work. Issue was I was defining label as <p></p> tag so any other block element like <hx> family, <ul />, <ol /> etc will jump out of <p></p> tag they can not contain inside <p></p> tag which was causing <p></p> tag as empty and hence plus icon was not showing up.
Hope above explanation clear your doubts.
Thanks for pointing out that. It wasn’t caught when I tested it. 
Regards, DotDesign.in
jQuery(window).load(function($) {
jQuery('#airport').addDot({
I also was able to use the Google jquery api instead of the downloaded version. This really makes it quick!
Also, for any interested in using this in WP, I used a module called “CSS & JavaScript Toolbar” to plug the js and css styles in the head ONLY on the pages where I was using this plugin. Super useful!
Anyway! My question is: Is there an easy way to click one “dot” and have all the dots on a given image appear together? Thanks for your hard work!
Hey mattatifpdesigns,
Thanks for liking the plug-in and sharing tips on how to integrate to WP users. It would be great if you can list down some of WP sites that you have used addDot plug-in.
Answer to your question: Yes can add this feature, I will work on this. Is it fine if I give plug-in option, showAll: true
by setting true there will be one button above plug-in “Show All Hot Spots”, when user press that button all hot spots will be open at same time.
Alternately I can do same functionality, by setting showAll: true. Clicking on any hot spot will open all hot spot. But reverse will not be possible in this case while in first approach user can toggle hot spots.
Regards, DotDesign.in
Hey mattatifpdesigns,
Adding to this, I am in a process to develop this plug-in for Wordpress. Which will have admin in Wordpress admin panel through which user can add hot spots.
Regards, DotDesign.in
Are there any plans for this to become compatible with the latest version of jQuery? Does it currently work with 1.7.2?
Hi pathwaysoftware,
Actually it is working perfectly fine, I have checked that.
Regards, DotDesign.in
I just checked too and it seems to be fine, thank you!
I highly recommend this Plugin, very friendly seller that is open to new features and implements them very fast!
Hey Ines,
Thanks for the recommendation.
Regards, DotDesign.in
Is it possible to change the directions and positions the boxes open to?
If you place a dot near the corner of an image, the overlay should open into the other direction, so it won’t get scaled.
Is it possible to override the defaults? I tried to frickle with the css but the javascript ignores it.
Best regards
Hi Ines,
Actually feature for opening dot in specified direction is not provided in the plug-in. To avoid this take image width bit longer so that hot spot has enough space to open on right side.
I will try to incorporate feature to open hot spot label in user specified direction. If its easy to add in existing code, I will send you updated min.js version.
Regards, DotDesign.in
HI Ines,
As promised I have incorporated your request & added feature in the plug-in. I have send you updated file.
Regards, DotDesign.in
how I can change the position of the opening? all open down to the right
Hi Estuardo,
Position of the opening, do you want it to open in right top, left down, left top etc? Actually that is not included in the plug-in features.
Regards, DotDesign.in
uhhh this is a problem if the hotspots are a little closer.
is possible to open one the rest are hiding, or send the hotspots backwards?
Hey Estuardo,
I have incorporated that. Now if you click hot spot, it will be above all hot spots. I guess you purchased plug-in yesterday. My updated code got approved today morning. As you have purchased my plug-in I don’t want to make you unhappy. Send me an email I will send you updated file. You can find my email in plug-in javascript file.
Regards, DotDesign.in
Nice idea! Wish you lots of sales.
Hey O_Key, Thanks for the wishes.
Hi,
Can you add a version not compressed in the file zip?
Thanks!
Mick
Hi,
Is it possible to give a different value for showHideBtn?
I would like to use values numerics (1, 2.3…)
Thanks,
Mick
Hey Mick_,
Wow that’s great idea. I guess yes we can give numeric values. Point noted down. I will consider this for next version.
Thanks, DotDesign.in
Hi,
Would there be a solution with the current version?
I bought your script while thinking of being able to do this. 
Thanks!
Mick
You should have get the source uncompressed version. Did you? I will try to do that in current version.
Thanks, DotDesign.in
In fact, I thought of being able to modify the value of showHideBtn directly in the file js. But, it seems that it is a little more complicated to do that.
Thanks again!
Mick
Hi Mick,
You are right, modifying might be difficult. I have changed code a bit to not disappoint you by purchasing my plug-in.
With updated plug-in you can add numbers as you wanted. You can give ‘1 to N’, ‘a – z’, roman numbers etc.
I have submitted code to codecanyon for the review. As you have already purchased it below are steps to get it working.
View this for demo : http://www.dotdesign.in/hotspot/ click on Demo 3 button.
Changes you need to do in your CSS .
~~~~~~~~~~~~~~~~~
1. You have to updated your css class
.showHideBtn - remove background image from this class
.hideBtn - add background image to this class for close button icon
~~~~~~~~~~~~~~~~
2. When you define addDot just pass one more attribute as below
btnLabel: ‘1’
~~~~~~~~~~~~~~~~~
3. Change in code
Just remove “child.append(......)” and add below updated code.
if(this.settings.btnLabel != undefined){
btnVal = this.settings.btnLabel;
}else{
btnVal = '';
}
child.append(
$('<div class="defaultDot" />').attr('id',this.dotObjId).css({ left:this.settings.leftPos, top:this.settings.topPos }).html("<p class="labelTxt">"+ this.settings.label +"</p><p class="showHideBtn">" + btnVal + "</p><p style="clear:both"></p>")
);
Thanks,
DotDesign.in
Hi,
Thanks, it is perfect!
I have an idea. It would be interesting to add a function to obtain the position of the cursor on the image in the documentation page.
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
<h2 id="status">0, 0</h2>
Mick
Hi,
The script does not seem to take account of z-index. The points (addDot) are displayed on defaultDot current.
Is there a solution?
I tested .defaultDot {z-index: 9999}. but that does not function.
Thank!
Mick
>I tested .defaultDot {z-index: 9999}. but that does not function.
Hi,
If the points are contiguous, it is a true problem!
It would be possible to open the div on various directions (top, right, bottom, left).
Thanks for your assistance.
Mick
> If the points are contiguous, it is a true problem!
Are you always there?
Mick
Hey Mick,
My apology for late reply to you. I was away last week.
Regarding your idea Its a good idea to maintain/display point, but what will be benefit of that? Do you have any real life example in which it may be helpful?
Regarding z-index of hot spots I intentionally didn’t maintain z-index, because overlapping will always create problem even though we maintain z-index. Because you are not always sure that user will not click who’s z-index is lower.
Well to address your concern, I have an solution. Set z-index:10 on hot spot open event & set z-index: 1 on leaving it. So in that case opened dot will always be on top of others.
I hope this solves your issue.
Thanks,
DotDesign.in
Hey Mick,
To avoid late reply, it would be great if you email me the same on my mail id which you can find with jQuery plug-in file when you purchased.
So that I will give you prompt reply.
Thanks, DotDesign.in
That’s really nice, will you do a wordpress version?
Hey corsonr,
Sure I would love to create wordpress version. I will look into it what sort of options I have to give or what points do I consider to create wordpress plug-in.
Thanks, DotDesign.in
Very nice! Good luck with the sales.
Hey SamBenson, Thanks for the wishes…
Thanks amzee!!! Really appreciated…
Very good work. Bookmarked
