Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    continent surrounded by sea
    Thanked 0 Times in 0 Posts

    Question Need help with this .JS, begging for just 2 features

    See attached zip file.
    Note if anyone doesnt know how to write applets, please disregard anything mentioned about applets and focus on javascript code.

    Begging for 2 features to be implemented (i) make images lock-in to thumbnail tables (ii) if drag n drop image(s) onto other image(s) in any row, a new image(s) will replace the original image(s) that was drag n dropped over.

    Currently I just want the script(s) to work off a html page on my USB Flash Drive, using W98, Firefox, with Javascripts enabled.

    I do have the latest version of Java installed also in the case someone with some time on their hands creates an applet for me which would be an example of one of the premium options available for me.

    Note see ZIP attachment, referring to my 2 sample html pages 1.2 & 1.3, if you use a Browser Zoom function, the thumbnails lose their position and are no longer aligned in the table.
    Must design a script where thumbnails slot into each table row and therefore making the thumbnails snap-fit lock-in to the table thumbholder and if for example use Browser Zoom, the images dont lose positions in table.
    The script must have a codename ID or something for each table row and for each table thumbnail slot (ie. rows and columns).

    Note that the script must work (back and forth) between at least 2 different tables (ie. 2 separate rows of thumbnails).
    Or is it better (for the script to work more efficiently), to create a large table which has a large portion in the middle that is empty, giving the visual impression that its 2 separate tables, and have the script working within just the 1 large table that has many rows but only some rows (eg. top row and bottom row) are being used for script?

    Once a thumbnail image is drag n dropped onto another thumbnail slot (note that the thumbnail image can be dragged onto any and all other thumbnail slots that are interactive) that within the script, I will have pre-set / pre-determined in the script which new image will replace that thumbnail slot. Is that even possible with javascript or only with a java applet?

    For example if I drag n drop the Green-thumbnail-image onto Red-thumbnail-image, the new value of the thumbnail slot where Red was positioned, will now be Yellow-thumbnail-image.
    Is it possible in javascript or some similar dynamic code where a replacement thumbnail can load up if the user drags and drops another thumbnail image ontop of an interactive thumbnail?

    Or must an applet be developed or can both options be developed but the applet is more robust and can perform more features.
    I would prefer both options developed for me as I still want a javascript version despite applet being more dynamic.
    Definitely want a javascript version exhausted to its fullest capabilities the language can offer.

    Note that other scripts such as jigsaw javascripts could aid in developing this hybrid-combination script that i want.
    For inspiration please see:
    Note regarding the snapfit script there should be a settings for my hybrid script to allow the mouseover silhouette color changes turned on or off, depending on what I want at the time.

    Also note that some thumbnails cannot be dragged/interactive and are fixed (permanently locked-in to the slot) therefore the script must allow for this function.
    I must have the ability to set if the thumbnail slot is fixed/static or interactive (or some sort of code that allows me to adjust the setting for fixed/static).


    values for fixed/static

    0 = off
    1 = on

    Note that the number of columns (thumbnails) for each rows may vary therefore must be compatible/adjustable in the script.

    With the feature (ii) to be implemented, whatever the new image value will be, in the script code it is pre-determined.
    For example if you drag Row2-Image2 over and drop it on Row1-Image6 the new value will not be chased up through some A.I but through pre-determined code because we have already determined if this move is made what the new value will be.
    Note that I would like to know if the script could be flexible enough for more images drag n dropped over eg. Row1-Image6 again, changing the value once again and so on.

    This mean some sort of javascript code would have to be written. Below is not the code, rather explanatory equations of some possible scenarios.
    if {r2i02(bbb.jpg) DnD onto r1i06(www.jpg)} = xxx.jpg
    if {r2i04(ddd.jpg) DnD onto r1i06(www.jpg)} = yyy.jpg
    So if either of those DnD moves are made we get 2 new different values.
    However if both those moves are made then we would have to create a new {if} equation which accommodates for eg. {r2i04(ddd.jpg) being moved first and {r2i02(bbb.jpg) being moved last or vise verse.
    if {r2i02(bbb.jpg) DnD onto r1i06(www.jpg)} = xxx.jpg
    if {r2i04(ddd.jpg) DnD onto r1i06(xxx.jpg)} = zzz.jpg
    and so on

    The more I think about it the more I suspect this code can only be achieved with an applet.
    Can anyone verify this?

    Please check my 2 sample html pages 1.2 & 1.3

    You will notice that currently the drag-able thumbnails are just floating ontop of thumbnail images found in 2 tables.
    It is just an illusion that the drag-able images appear to be in tables.

    I have attempted to move the code for the first row of drag-able images into the first table, replacing the old code for the first table. My test/theory was unsuccessful.

    I leave it in your hands to play around with.

    If by extensive research anyone discovers that javascript alone will not allow the new value of a thumbnail image to replace an older thumbnail image in a thumbnail slot, please dont drop the project altogether.
    I will still accept just being able to move the interactive thumbnail images around which lock-in to interactive thumbnail slots (columns).

    Please Help. Thanks for your attention.
    Attached Files Attached Files
    Last edited by __i__; 05-21-2012 at 07:24 AM. Reason: made more clear definitions

  2. #2
    New to the CF scene
    Join Date
    May 2012
    continent surrounded by sea
    Thanked 0 Times in 0 Posts


    This is a suggestion but not solution:

    <script type="text/javascript">
    function changeImg(){
    var imag = document.getElementsByTagName('img');
    for(var i=0;i<imag.length;i++){
    if(imag[i].getAttribute('src')=='THE IMAGE LOCATION HERE'){
    imag[i].setAttribute('src','IMAGE YOU WANT TO PUT IN PLACE');

    Note that because I am using a drag n drop javascript that the new image loaded needs to be changed onDrop not onClick.
    Must change the script above to function onDrop and work with drag n drop javascript.
    Note that 'THE IMAGE LOCATION HERE' will not work alone, as need to set the Row&Column location also where the images are in the tables.

    Can someone please combine the 2 scripts together to work and I will bow down and I will unequivocally worship them for the remainder of 2012.

  3. #3
    New to the CF scene
    Join Date
    May 2012
    continent surrounded by sea
    Thanked 0 Times in 0 Posts

    Made progress found another script

    Made progress found another script.

    Please see my attachment to play around with and I also attached a screen capture image to get an idea of GUI.

    Anyone care to help out?

    Need help on the following features:

    1A) clean up all the code so it has a better CSS

    1B) create a better/efficient code for the gap between the 2 rows of images.
    currently using paragraph breaks etc which is primitive code but Im only limited to self-taught in code design.
    Note the code for the gap must allow also allow the option/possibility of putting in an iFrame for another page if required.

    2A) need to modify the Drag n Drop script to allow images to be dragged onto other images in any rows of tables where onDrop a new image loads up replacing both the original image and the image that was Drag n Dropped.
    2b) optional the thumbnail position from which the Drag n Dropped image originated from must load another image that signifies (notifies the user/viewer) it has been moved. Or some code which changes the color of the original thumbnail position.

    3) <div id="div16" thumbnail is set to > draggable=false > though if you click onto it to test if its draggable the image changes color. Is there a better code that can be added which can prevent that little bug for all images set to false?

    4) lastly if its possible to have 2 buttons
    (i) reset the last image moved (ie. cancel the last image move if it was a mistake for example)
    (ii) reset from beginning (basically a refresh page script can be used or if someone recommends a better code to handle that button)

    Any help with listing links to helpful code that I require will be appreciated 1000 times.

    Attached Thumbnails Attached Thumbnails -screen_dump-png  
    Attached Files Attached Files
    Last edited by __i__; 05-24-2012 at 05:49 PM. Reason: Adding a screen dump image


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts