I am very very new to JavaScript so sorry if this is really silly.

Question

0

Asked: June 6, 20262026-06-06T14:26:11+00:00 2026-06-06T14:26:11+00:00

I am very very new to JavaScript so sorry if this is really silly.

0

I am very very new to JavaScript so sorry if this is really silly.
Basically the issue is I have 2 JavaScripts, both useing ul and li tags but both need it for different thing, so how do I apply it to diffrent ul and li tags?

This is the question in more detail

I have two bits of JavaScript.

(1)

<script src="js/jquery.roundabout2.js"></script>
<script src="js/jquery.roundabout-shapes2.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
        $(document).ready(function() {
            $('.verb ul li').focus(function() {
                $('#hidden-verb').val($(this).text());
            });

            $('.feeling ul li').focus(function() {
                $('#hidden-feeling').val($(this).text());
            });

            $('.adjective ul li').focus(function() {
                $('#hidden-adjective').val($(this).text());
            });

            $('ul').roundabout({
                shape: 'waterWheel',
                minOpacity: -1.0,
                duration: 300,
                easing: 'easeOutCubic'
            });

            $('li').dblclick(function(e) {
                e.preventDefault();
                return false;
            });

            $('form').submit(function(e) {
                e.preventDefault();
                alert('Thank you for telling me that my art work is ' + $('#hidden-adjective').val() + ' ,and to improve it I should add ' + $('#hidden-verb').val() + ' and the website is ' + $('#hidden-feeling').val() + '.');
                return false;
            });
        });
    </script>'

Then (2)

<script type="text/javascript">
        jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });

            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     2500,
                numThumbs:                 15,
                preloadAhead:              10,
                enableTopPager:            true,
                enableBottomPager:         true,
                maxPagesToShow:            7,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play Slideshow',
                pauseLinkText:             'Pause Slideshow',
                prevLinkText:              '&lsaquo; Previous Photo',
                nextLinkText:              'Next Photo &rsaquo;',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 false,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                }
            });
        });
    </script>'

Number 1 comes from http://fredhq.com/projects/roundabout/demos/form and number 2 from here http://www.twospy.com/galleriffic/example-2.html

Now you can see that both use ul and li, but (1) needs it for it’s purpose and the (2) for it’s purpose, but I am unable to get the it to apply different things to both. If you look at the links you will see there different purposes. I have attempted adding id’s to the tags and class, but it does not seem to work.

Any help will be much appreciated.

Thank you

This is the two peices of HTML this is being applied to.

(1)

<div id="tellmeform"><form id="form2" action="" method="get">
      <div class="part"> My art work is</div>
            <div class="part moving adjective">
                <ul class="il1" id="ul1">
                    <li class="li1" id="li1">creative</li>
                    <li class="li1" id="li1">delicate</li>
                    <li class="li1" id="li1">lovely</li>
                    <li class="li1" id="li1">stunning</li>
                    <li class="li1" id="li1">elegant</li>
                </ul>
            </div>
            <div class="part">, so to imrpove I should add</div>
            <div class="part moving verb">
                <ul class="il1" id="ul1">
                    <li class="li1" id="li1">tones</li>
                    <li class="li1" id="li1">colour</li>
                    <li class="li1" id="li1">shadows</li>
                    <li class="li1" id="li1">faces</li>
                    <li class="li1" id="li1">shadeing</li>
                </ul>
            </div>              
            <div class="part">but before you go, I think the website is</div>
            <div class="part moving feeling">
                <ul class="il1" id="ul1">
                    <li class="li1" id="li1">clean</li>
                    <li class="li1" id="li1">stunning</li>
                    <li class="li1" id="li1">poor</li>
                    <li class="li1" id="li1"i>smooth</li>
                    <li class="li1" id="li1">expired</li>
                </ul>
            </div>
            <div class="part">.</div>
            <div class="part button">
                <input type="hidden" id="hidden-adjective" name="hidden-adjective" value="" />
                <input type="hidden" id="hidden-verb" name="hidden-verb" value="" />
                <input type="hidden" id="hidden-feeling" name="hidden-feeling" value="" />
                <input type="submit" value="Tell Me" name="post" id="post-it" />
            </div></form></div>'

and number (2) – This is long, sorry.

<div id="gallery" class="content">
                <div id="controls" class="controls"></div>
                <div class="slideshow-container">
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container"></div>
            </div>
            <div id="thumbs" class="navigation">
                <ul id="ul2" class="thumbs noscript">
                    <li id="li2">
                        <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
                            <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #0</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>
                    <li id="li2">
                        <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
                            <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #2</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
                            <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #3</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
                            <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #4</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
                            <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #5</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
                            <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #6</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
                            <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #7</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
                            <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #8</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
                            <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #9</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
                            <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #10</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
                            <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #11</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
                            <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #12</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
                            <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #13</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
                            <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #14</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
                            <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #15</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
                            <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #16</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
                            <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #17</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
                            <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #18</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
                            <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #19</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
                            <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #20</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
                            <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #21</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
                            <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #22</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>

                    <li id="li2">
                        <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
                            <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
                        </a>
                        <div class="caption">
                            <div class="download">
                                <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
                            </div>
                            <div class="image-title">Title #23</div>
                            <div class="image-desc">Description</div>
                        </div>
                    </li>
                </ul>
          </div>
            <div style="clear: both;"></div>
         </div>'

You can see I have attempted to add class and id, but when I say it does not seem to work, I mean that it only applies the setting to one. For example by leaving it as ul and li on code 1, code 1 works and then code two fails, and appears in the same way as code 1. But if I put code 1 as ul1 and li1 then 1 doesent work and 2 works. Sorry if this is a little confusing. But basically I can not get them to work independently.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-06T14:26:12+00:00

Sorry I would add this as a comment but don’t have the option. It looks as though you need to add the classes into the script itself to get each script to relate to the correct ul and li or do you want both scripts to work on all ul and li s?

Right, I think I’ve got it, try changing the following:

        $('#ul1, #ul3, #ul4').roundabout({
            shape: 'waterWheel',
            minOpacity: -1.0,
            duration: 300,
            easing: 'easeOutCubic'
        });

        $('#li1, #li3, #li4').dblclick(function(e) {
            e.preventDefault();
            return false;
        });

and change your div structure for the waterWheel bit to:

            <ul class="il1" id="ul1">
            <li class="li1" id="li1">creative</li>
            <li class="li1" id="li1">delicate</li>
            <li class="li1" id="li1">lovely</li>
            <li class="li1" id="li1">stunning</li>
            <li class="li1" id="li1">elegant</li>
        </ul>
    </div>
    <div class="part">, so to imrpove I should add</div>
    <div class="part moving verb">
        <ul class="il1" id="ul3">
            <li class="li1" id="li3">tones</li>
            <li class="li1" id="li3">colour</li>
            <li class="li1" id="li3">shadows</li>
            <li class="li1" id="li3">faces</li>
            <li class="li1" id="li3">shadeing</li>
        </ul>
    </div>              
    <div class="part">but before you go, I think the website is</div>
    <div class="part moving feeling">
        <ul class="il1" id="ul4">
            <li class="li1" id="li4">clean</li>
            <li class="li1" id="li4">stunning</li>
            <li class="li1" id="li4">poor</li>
            <li class="li1" id="li4"i>smooth</li>
            <li class="li1" id="li4">expired</li>
        </ul>`

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am very very new to JavaScript so sorry if this is really silly.

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply