Click on page to set location of note on page? [#1028736]

I use very long pages of text on my site. When I want to put a sticky note down further on the page, I have to first create the note, and then drag it from the top of the page wayyyyy down to where I want to put it, making this not very usable on long pages.

Is there some way we can click on a spot on the page where we want the sticky to be placed?

Comments

Comment #1

colorado CreditAttribution: colorado commented 16 January 2011 at 18:16

As a (hopefully temporary!) work-around, I discovered that rather than try to drag a note down the page (very, very slow), it works much better and faster to click and hold the sticky note in one place (by holding the left mouse button down over the note), while using the Arrow Down or Page Down key to scroll down the page. Then release the key and release the left mouse button from the note.

This at least moves the note more quickly down the page.

However, this trick doesn't seem to work in IE.

Comment #2

mnapier CreditAttribution: mnapier commented 21 January 2011 at 17:22

Here's a solution I came up with to remedy this. I figured as long as the sticky note started out in a viewable location that was better than way back up top. I added the follow javascript to my custom .js file for my theme and then copied the sticky-notes-note.tpl.php to my theme and add the following code to the bottom of the template. Basically this looks to see if the position is the default position that the Sticky Notes module sets and if it is it repositions the sticky note to the center of your screen. It may need some work if you don't have a Container Selector set in the Sticky Notes settings or your theme, but I do so I didn't code around that. You also want to make sure that whatever your Container Selector is set to is position: relative; in your css. Not sure why the module doesn't do this for you but I think it should, maybe I'm missing something. Hope this helps! seems to work for me.

add to your .js file:

jQuery.fn.StickyCenter = function () {
    var stickyTop = ( $(window).height() - Drupal.settings.sticky_notes.note_height ) / 2+$(window).scrollTop()-$(Drupal.settings.sticky_notes.container_selector).offset().top;
    var stickyLeft = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft()-(($(window).width() - $(Drupal.settings.sticky_notes.container_selector).width() ) / 2 );
    this.css("top", stickyTop + "px");
    this.css("left", stickyLeft + "px");
    // Find the stick notes nid
    var nid = parseInt($(this).find('span.sticky-note-nid').html(), 10);
    // Save the new position
    StickyNotes.urls = Drupal.settings.sticky_notes.urls;
    $.get(StickyNotes.urls.save_position + '/' + nid + '/' + stickyLeft + '/' + stickyTop);
    return this;
}

Add to the bottom of sticky-notes-note.tpl.php in your theme directory:

<?php if ($node->position_y == 300 && $node->position_x == 400): ?>
<script type="text/javascript">
$('#sticky-note-<?php print $node->nid; ?>').StickyCenter();
</script>
<?php endif; ?>