CODEWITHSUNDEEP
javascriptjqueryhtml
Lizzaran
Lizzaran

Reputation: 155

JQuery add Image to Div

I tried to create a plugin for jQuery, but there is a problem.

This is the .html: http://pastebin.com/amLSFSZX

and this is the .js file: http://pastebin.com/CmrHzKRk

I want 4 arrows in a div.

  1. Top Middle
  2. Right Middle
  3. Bottom Middle
  4. Left Middle

If it's not packed in a plugin it works fine.

But if I include the plugin, it bugs.

This is the output via Firebug:

<img class="arrows" src="arrow-top.png" alt="Arrow-Top" style="height: 26px; width: 20px; top: 50px; left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-right.png" alt="Arrow-Top" style="position: absolute; display: none;">
<img class="arrows" src="arrow-bottom.png" alt="Arrow-Top" style="left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-left.png" alt="Arrow-Top" style="height: 20px; width: 26px; top: 50250px; left: 480px; position: absolute; display: none;">

Can anyone help? Sorry for my bad english.

Upvotes: 0

Views: 631

Answers (1)

veeTrain
veeTrain

Reputation: 2915

It could be just a copy/paste or other mistake, but your inline styles output by firebug look odd in a few places.

You have left: 480480px; in two places and top: 50250px. You haven't explained exactly what is not happening or what the desired behavior is beyond 'it bugs'.

Regarding your jsfiddle, thanks for pulling those resources together, but when I first execute run on it there are already two errors which show up in my Developer Tools. arrow.js is not found and that you can't call method AddArrow on #map. You're probably using jQuery so you'll need to pick that as your framework on the left-hand side of the window.

But I think those odd left and top aspects might be causing the bugs that you were referring to.

Edit: It looks like your problem is that you are including the arrow.js plug-in but then overriding it yourself. At first glance arrow.js and the code in your javascripting area looks identical. (Of course, they both shared the problem of not having parentheses around your calculations!)

I have removed relying on arrow.js in my fiddle and I think you should too since you apparently are copying the code into your mark-up. If you don't have control over arrow.js then you should be using your own code because arrow.js is flawed when it doesn't put parentheses around the calculations of top and left.

Here is the updated fiddle with basic arrows taken from the greater Internet (since I don't have access to your arrows). Stop relying on arrow.js; correct it as I have described, and you will be in a better place. The answer to your question of why everything breaks when you include the plugin is that the plugin is wrong.

You will need to adjust the code to execute it properly in your context. For example: jsfiddle fires $(document).ready() for you.

Upvotes: 1

Related Questions