www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] DOM Manipulation -> need little advice

  1. #1
    Join Date
    Apr 2013
    Posts
    6

    resolved [RESOLVED] DOM Manipulation -> need little advice

    Hello,

    I'm currently working on some code I need to manipulate. Unfortunately I'm not really familiar with javascript so I ask you for a little help.
    The code is for use on eBay.

    This is the code I use:

    Code:
    <div id="slider">
                	<a href="$#Link.Picture:1#$" id="bild1" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:1#$">$#Picture.1:600x450#$</a>
                	<a href="$#Link.Picture:2#$" id="bild2" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:2#$">$#Picture.2:600x450#$</a>
                	<a href="$#Link.Picture:3#$" id="bild3" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:3#$">$#Picture.3:600x450#$</a>
                	<a href="$#Link.Picture:4#$" id="bild4" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:4#$">$#Picture.4:600x450#$</a>
                	<a href="$#Link.Picture:5#$" id="bild5" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:5#$">$#Picture.5:600x450#$</a>
                	<a href="$#Link.Picture:6#$" id="bild6" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:6#$">$#Picture.6:600x450#$</a>
                	<a href="$#Link.Picture:7#$" id="bild7" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:7#$">$#Picture.7:600x450#$</a>
                	<a href="$#Link.Picture:8#$" id="bild8" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:8#$">$#Picture.8:600x450#$</a>    
    </div>
    the $#anything#$ in the code is filled automatically by an inventory management system.

    $#Link.Picture:X#$ ist filled with link to a Picture (http://example.example.de/example/pi.../example_1.jpg) in full resoulution (in my case 1200*900px)

    $#Sichtbarkeit.Picture:X#$ sets "display:none" if the corresponding $#Picture.X:600x450#$ is not set. If it is set $#Sichtbarkeit.Picture:X#$ does nothing

    $#Picture.X:600x450#$ creates IMG-Tag with link to PictureX resized to 600*450 px including the ALT-Attribute (<img src="http://example.example.de/example/pictures/example_1_resized.jpg" alt="something i can not change">

    So this is the Code i get when - for example - 4 pictures are set in my inventory management system:

    Code:
    <div id="slider">
    <a href="http://example.example.de/example/pictures/example_1.jpg" id="bild1" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_1_resized.jpg" alt="something i can not change"></a>
    <a href="http://example.example.de/example/pictures/example_2.jpg" id="bild2" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_2_resized.jpg" alt="something i can not change"></a>
    <a href="http://example.example.de/example/pictures/example_3.jpg" id="bild3" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_3_resized.jpg" alt="something i can not change"></a>
    <a href="http://example.example.de/example/pictures/example_4.jpg" id="bild4" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_4_resized.jpg" alt="something i can not change"></a>
    <a href="" id="bild5" class="MagicZoomPlus" style="display:none;"></a>
    <a href="" id="bild6" class="MagicZoomPlus" style="display:none;"></a>
    <a href="" id="bild7" class="MagicZoomPlus" style="display:none;"></a>
    <a href="" id="bild8" class="MagicZoomPlus" style="display:none;"></a>
    </div>
    The Problems are:

    1. As you can see ALT-Attribute of the Pictures is automatically set to "something i can not change". It is the same attribute for all pictures.
    2. If i use - for example - only 4 pictures instead of the 8 which are maximum possible i get 4 empty A-Tags.

    I have to set ALT-Attribute to "#htmlcaption1" for picture 1, "#htmlcaption2" for picture 2 and so an

    AND

    I have to completely remove the empty A-Tags if I use less than 8 pictures.

    Unfortunately I can not give ID to IMG-Tag because they are automatically created by $#Picture.X:600x450#$

    BUT I gave IDs to the parent A-Tag of the IMG-Tag so I think it can be changed by setting Attribute to child of A-Tag

    AND

    complete A-Tag can be removed if there is no IMG-Tag inside

    This should be managed by a script for DOM manipulation.

    Can anybody help me there because I am not very familiar with Javascript...

    P.S. I would also like to make a little donation for this

    Thanks in advance

  2. #2
    Join Date
    Apr 2013
    Posts
    6
    Sorry I didn't find a possibility to edit previous post.

    So this is how it actually should be (removed empty A-Tags and edited ALT-Attribute by Hand after uploaded to ebay)

    http://cgi.ebay.de/ws/eBayISAPI.dll?...m=181123995607

  3. #3
    Join Date
    Apr 2013
    Posts
    3
    This can be modified as you need. Search by topics: jQuery, onLoad

  4. #4
    Join Date
    Apr 2013
    Posts
    6
    Thank you for reply

    unfortunately I cannot do what I need with your script; because of limitations on ebay it has also to be pure javascript without any frameworks.

    For information the "example_X.jpg" and "example_X_resized.jpg" in the code are not neccessarily numbered 1 to 8, this is instead random which i cannot influence, i can not even influence the link itself because it is set automatically by variables I don't know and they are NOT on my own server. This means links can be anything. But it should not matter what links exactly are because I gave IDs to the A-Tags.

    if you want to see the expected result you can go to
    Code:
    cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=181123995607
    I edited ALT-Tags and deleted unused A-Tags by hand there after uploading.

    I thought a bit about it and it should be quite easy to realize, I'm just not able to write script on my own...

    expected Solution:

    I need a script with a loop counting 0 to 7 or 1 to 8 (because there are 8 possible pictures)

    Script calls element by ID "bild1" first and checks if Attribute style="display:none" is set.

    If so script deletes the current A-Tag (bild1)
    If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption1"

    script goes to next loop, counter is +1

    Script calls element by ID "bild2" and checks if Attribute style="display:none" is set.

    If so script deletes the current A-Tag (bild2)
    If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption2"

    ...
    and so on till loop count is 7 (or 8)
    ...

    after doing so script is finished and everything is as it should be

    How do you think about it?

  5. #5
    Join Date
    Apr 2013
    Posts
    6
    Thank you for reply

    unfortunately I cannot do what I need with your script; because of limitations on ebay it has also to be pure javascript without any frameworks.

    For information the "example_X.jpg" and "example_X_resized.jpg" in the code are not neccessarily numbered 1 to 8, this is instead random which i cannot influence, i can not even influence the link itself because it is set automatically by variables I don't know and they are NOT on my own server. This means links can be anything. But it should not matter what links exactly are because I gave IDs to the A-Tags.



    I thought a bit about it and it should be quite easy to realize, I'm just not able to write script on my own...

    expected Solution:

    I need a script with a loop counting 0 to 7 or 1 to 8 (because there are 8 possible pictures)

    Script calls element by ID "bild1" first and checks if Attribute style="display:none" is set.

    If so script deletes the current A-Tag (bild1)
    If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption1"

    script goes to next loop, counter is +1

    Script calls element by ID "bild2" and checks if Attribute style="display:none" is set.

    If so script deletes the current A-Tag (bild2)
    If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption2"

    ...
    and so on till loop count is 7 (or 8)
    ...

    after doing so script is finished and everything is as it should be

    How do you think about it?

  6. #6
    Join Date
    Apr 2013
    Posts
    6
    Here is the solution, pretty easy for someone who is familiar with javascript i think. In fact this is the first JS i wrote
    Works very well on ebay...

    Code:
    <script>
    for (var i=1; i<9; i++) {
    var bildnummer = 'bild'+i;
    if (document.getElementById(bildnummer).style.display == 'none')
    {
    document.getElementById(bildnummer).parentNode.removeChild(document.getElementById(bildnummer))
    }
    else
    {
    document.getElementById(bildnummer).firstChild.setAttribute('alt', '#htmlcaption' + i);
    }
    }
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11808 seconds
  • Memory Usage 2,911KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates