CODEWITHSUNDEEP
javascriptjquerycsshtml
sgerbhctim
sgerbhctim

Reputation: 3640

Having difficulty with my JS/jQuery creating a div

I'm making a little post it web app just to learn JavaScript and jQuery because I was told it would be a good practice project, so I'm having a couple of errors here and have no clue how to fix them. I'm new to StackOverflow -- I use it more as a reference than anything.

This is the code: http://pastebin.com/raw.php?i=67i5HwY5

The problem: -When adding multiple post-its it messes up the div..

I have ideas of how to fix it, I just am also new to jQuery and JS so I dont know how to apply them. If you guys could help me out, that'd be great.

Thanks!

http://jsfiddle.net/mitchbregs/fYTFV/5/

Upvotes: 5

Views: 121

Answers (3)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

Here you go: http://jsfiddle.net/mattblancarte/fYTFV/12/

You basically need to add a unique identifier to each of those post-it notes. :) In this case, I just augmented the ID you are using, then incremented the id each time you make a new post-it note.

You may want to cache those selectors, too... Instead of using $("#postIt-" + id) over and over, just do:

var postit = $("#postIt-" + id);
postit.css();

You can also pass in all of your css within one method, like so:

postit.css({
  'background' : 'blue',
  'height' : '100px',
  //etc.
});

Upvotes: 3

Ashirvad
Ashirvad

Reputation: 2377

Hey just to answer your question.. i made a solution using only jquery.This could be another solution where you wont need to declare a var. Here it is..http://jsfiddle.net/vwPDr/

i used :last selector of jquery and applied it to draggble class. check it out.

Upvotes: 0

Pete Leaning
Pete Leaning

Reputation: 486

Looks like 

$("#header").append("<div id='urlPost'

might be causing a problem? appending multiple items with the same ID usually isn't good. Each postit will need a unique identifier.

maybe create a global variable called 'id' and set to 0.

then your click function can look like:

$("#header").append("<div id='urlPost" + id + "' class='etc'");

$("#urlPost"+id).css("width",wh);

then at the end of the function:

id++;

This way each time you add a new post, css is only applied to the newest one.

Upvotes: 0

Related Questions