www.webdeveloper.com
Results 1 to 6 of 6

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

Hybrid View

  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



Recent Articles