Menu

#36 DHTML-Comment-Boxes/-Info-Boxes

open
nobody
None
5
2006-02-14
2006-02-14
d-coder.de
No

InfoPopUp-Plugin

Plugin to create additional Info-Boxes or Comment-Boxes
like comments in MS Word. The Info-Boxes pop up on
rollover at the link you selected. The Boxes are styled
via CSS and positioned via Javascript.
Javascript-Function and sample-css included.

Discussion

  • d-coder.de

    d-coder.de - 2006-02-14

    files for InfoPopUp-Plugin

     
  • SimpleUpdates

    SimpleUpdates - 2006-02-17

    Logged In: YES
    user_id=1430814

    Hi there,

    This looks like an interesting item. I have tried to get it
    working, but I have not had any luck with it. I am not
    getting the icon to show up on the page.

    What config/ install steps are we needing?

    Thanks!

     
  • d-coder.de

    d-coder.de - 2006-02-17

    Logged In: YES
    user_id=1451795

    hi simpleupdates,

    the installation is the usual way of installing a plugin in
    fckeditor:
    copy the folder 'infopopup' into the plugin directory of the
    editors directory.
    then add the line
    FCKConfig.Plugin.Add('InfoPopUp', 'en,de')
    to your fckconfig.js-file (or your custom configuration file).
    Add 'InfoPopUp' to the ToolbarSets i.e.:
    FCKConfig.ToolbarSets["Default"] = [
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['About','InfoPopUp']
    ] ;
    That's all to implement the plugin into fck.
    The provided Javascript is needed in the files where you
    want to use the infopopups (generated/edited by fck), it
    handles the display of the layers.
    The provided css is just an example of styling the
    infopopup-layers with css but of course some properties are
    obligatory: an absolute top/left-position as default
    position, visibility set to 'hidden'.

    best regards,
    thomas

     
  • SimpleUpdates

    SimpleUpdates - 2006-02-17

    Logged In: YES
    user_id=1430814

    Thanks for your help!

    I now have the icon in, and it brings up the window. When I
    enter text, and apply it, I get:

    undefined
    <em>Hi</em> This is a test

    In the Source view, I see:
    undefined
    <div class="infopopups"
    id="infopopup200617114513"><em>Hi</em> This is a test</div>

    So, I am not sure what to do next. I don't think the class
    is being defined anywhere...

    Thanks for your time!

     
  • d-coder.de

    d-coder.de - 2006-02-17

    Logged In: YES
    user_id=1451795

    whats up with that undefined value? did you select some text
    before hitting the infopopup-toolbar-button? just to make
    clear how it works: you select some text which will be
    displayed as a link. on rolling over the link, the infopopup
    is displayed, on rolling out it disappears again...
    so you make a selection in fck and hit the infopopup-button.
    then you enter the text for your infopopup. when you hit ok,
    the plugin inserts
    a) your selected text with an anchor-tag, including
    onmouseover- and onmouseout-handlers with js-functions.
    b) your infopopup-div at the end of the complete text in fck.
    the infopopup-div needs some css in your document or in a
    separate css-file. take a look at the infopopups.css. there
    is the css-class defined for the infopopups.
    additionally, the provided js-functions (infopopups.js) have
    to be implemented in your document.
    take a look at
    http://www.schloss-ringenberg.de/schloss/transistor.php to
    see it in action.

    regards,t.

     
  • Alfonso Martinez

    Logged In: YES
    user_id=1356422

    I'm testing this plugin and so far the first problem is the
    'undefined' that replaces all the previous content.
    The problem is that the GetHTML function was deprecated but
    there's a bug: it doesn't return anything. The fix is to add
    the missing "return" in FCK.GetHTML at fck_1.js
    FCK.GetHTML = function( format )
    {
    return FCK.GetXHTML( format ) ;

    or change the call in the plugin from GetHTML to GetXHTML

    Now it adds the html, but in IE it gives an error whenever
    the mouse passes over the link, and nothing happens in Firefox.
    In both cases the comment appears at the end of the editor
    as the plugin doesn't load the css.

    (I'm talking always about the editor, not about the page
    where the info will be shown later)

    I'll try to see if I manage to make this work because it
    looks interesting.

     
  • d-coder.de

    d-coder.de - 2006-02-24

    Logged In: YES
    user_id=1451795

    hi alfonsoml,
    concerning the js-error in IE you are right, nothing happens
    in the editor window when rolling over an inserted
    infopopup-link. if you want to display the comment-box
    behaviour (like on the resulting page) in the editor itself
    you have to adapt the js-functions and manipulate the css
    for the comment-boxes in fck. i set the comment-boxes fixed
    after the complete text-content and visible to make it
    possible to edit them without having to call the plugin
    again...
    to completely remove the inserted code has to be done in the
    source window, so the plugin misses a clean delete
    functionality.
    concerning the 'undefined' value, i can't reproduce this
    error... tried only IE.

     
  • mohsin

    mohsin - 2006-12-11

    Logged In: YES
    user_id=1665552
    Originator: NO

    hi,
    I have tried this plug in by making some changing, first of all the functions of hide and display div was not working at all in seperate js file.
    Then I insert this javas script functions while initializing FCk editor i.e setting the value of the FCKeditor with these function. But the problem now is this, there is no error dispaly in IE but the function don't behave properly. Moreover If i copy the source code from FCKeditor and place it in seprate file, it works.
    However if i comment the code in the show and hide functions of div and insert alerts this will works fine In IE but not in firefox.

    If any one can help me out will be greatfull.

     
  • mohsin

    mohsin - 2006-12-11

    Logged In: YES
    user_id=1665552
    Originator: NO

    hi,
    I have tried this plug in by making some changing, first of all the functions of hide and display div was not working at all in seperate js file.
    Then I insert this javas script functions while initializing FCk editor i.e setting the value of the FCKeditor with these function. But the problem now is this, there is no error dispaly in IE but the function don't behave properly. Moreover If i copy the source code from FCKeditor and place it in seprate file, it works.
    However if i comment the code in the show and hide functions of div and insert alerts this will works fine In IE but not in firefox.

    If any one can help me out will be greatfull.

     
  • mohsin

    mohsin - 2006-12-11

    Logged In: YES
    user_id=1665552
    Originator: NO

    Hi again,
    Moreover, if some body can help to open the info popup window if user clicks on the anchor with the same comments in edit mode.

    Thanks

     
  • Ann

    Ann - 2007-03-06

    Logged In: YES
    user_id=1735921
    Originator: NO

    Hi,

    This functionality is just what I've been looking for! Unfortunately, it doesn't always retain the original text formatting. Here's an example:

    If I have this in the edit window -

    ABCD
    EFGH

    source view -

    <p>ABCD</p>
    <p>EFGH</p>

    Now, if I select CDEF and add a comment I end up with this:

    AB
    CD EF
    GH

    source view -

    <p>AB</p>
    <p><a onmouseover="showInfoPopUp('infopopup1076142637')" onmouseout="hideInfoPopUp('infopopup1076142637')" class="infopointer">CD EF</a></p>
    <p>GH</p>
    <div class="infopopups" id="infopopup1076142637">A comment!</div>

    It should do this, to keep the formatting intact:

    <p>AB<a onmouseover="showInfoPopUp('infopopup1076142637')" onmouseout="hideInfoPopUp('infopopup1076142637')" class="infopointer">CD</a></p>
    <p><a onmouseover="showInfoPopUp('infopopup1076142637')" onmouseout="hideInfoPopUp('infopopup1076142637')" class="infopointer">EF</a>GH</p>

    Another example:

    <strong>ABC</strong>DEF

    Selecting ABCD will eliminate the strong tags completely.

    Any idea what it might take to fix this? I'd be happy to help with testing...

    Thanks,
    -Ann

     

Log in to post a comment.