[RESOLVED] Javascript to show clicked/or hovered content: Is this an efficient script?

Joseph_Sliker

Hi; I am working towards a script that will show a set small thumbnail images on one side of the page, that when clicked will show a larger version of the same image, plus related text content on the other side of the page. I am not very good with javascript yet and wonder if the <script> section here is fussier than necessary to accomplish this. It does seem to work. But can the script/code be simpler to accomplish this? Should I use "id" or "class" for each item? Thanks for any pointers.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").hide();
  $("p.default").show();
  /*$("p.one").show();*/ /*this would probably be default*/
  $(".btn1").click(function(){
  $("p").hide();
  $(".one").show();
  });
  $(".btn2").click(function(){
  $("p").hide();
  $(".two").show();
  });
  $(".btn3").click(function(){
  $("p").hide();
  $(".three").show();
  });
});
</script>
</head>
<body>
<div class="btn1">Show1</div>
<div class="btn2">Show2</div>
<div class="btn3">Show3</div>  

<p class="default">This is default content.</p>
<p class="one">This is content 1.</p>
<p class="two">This is content 2.</p>
<p class="three">This is content 3.</p>

</body>
</html>

johanafm

Joseph Sliker;11042921 wrote:
Hi; I am working towards a script that will show a set small thumbnail images on one side of the page, that when clicked will show a larger version of the same image, plus related text content on the other side of the page. I am not very good with javascript yet and wonder if the <script> section here is fussier than necessary to accomplish this. It does seem to work. But can the script/code be simpler to accomplish this?

Yes it can. If you don't mind changing your approach completely, the event handler can be changed to a single statement! But you would have to check browser support. It's entirely possible that this has been possible for many years, but I really don't know. This solution comes in the next post.

But without fundamentally changing your original approach, I'd at least go with a "grouped structure", one group for controls and one for display items. I'd also use the same class names for both input and its corresponding display item.

<div id="singular-display-input-group">
    <div class="one">Show 1</div>
    <div class="two">Show 2</div>
    <div class="three">Show 3</div>
</div>
<div id="singular-display-group">
    <p class="default">This is default content.</p>

<p class="one">This is content 1.</p>

<p class="two">This is content 2.</p>

<p class="three">This is content 3.</p>
</div>

Using this approach, you can create an event listener on the control group, with a filter of 'div'

$('#singular-display-input-group').on('click', 'div', function (e) { … });

This way you may use e.target.className inside the event handler to relate to the display group, while at the same time retrieving specific elements by first targeting an element by its id.

$('#singular-display-group.' + e.target.className)

This means that only the part of the DOM tree rooted at #singular-display-group has to be traversed in order to find elements with matching class. If you cannot keep .singular-display-group small in the long run, you could also resort to either prefixing id attributes (or suffixing them).

<div id="click-one">Show 1</div>
<div id="click-two">Show 2</div>

<p id="display-one">This is content 1.</p>
<p id="display-two">This is content 2.</p>

And then you could find your display items using (once again inside the event handler above)

    // "click-" is 6 characters long, which means "click-one".substring(6) yields "one"
    $('#display-' + e.target.id.substring(6));

If you also store a reference to the previously displayed element, you can also target that right away. For example using window.previouslyVisible.

Full example

        $(document).ready(function () {
            window.$previouslyVisible = $('#singular-display-group .default');

        $('#singular-display-input-group').on('click', 'div', function (e) {
            var $el = $('#singular-display-group .' + e.target.className);

            // .children looks for direct descendants only
            $el.removeClass('no-display');
            window.$previouslyVisible.addClass('no-display');
            window.$previouslyVisible = $el;
        });
    });

    <style>
        #singular-display-group .no-display {
            display: none;
        }
    </style>
</head>
<body>
<div id="singular-display-input-group">
    <div class="one">Show 1</div>
    <div class="two">Show 2</div>
    <div class="three">Show 3</div>
</div>
<div id="singular-display-group">
    <p class="default">This is default content.</p>

<p class="one no-display">This is content 1.</p>

<p class="two no-display">This is content 2.</p>

<p class="three no-display">This is content 3.</p>
</div>

johanafm

It can also be done by modifying the CSS selector, which is done with a single statement once you have a reference to the CSS rule in question. But you should probably check which browsers support doing it this way.
Documentation can at least be found over at MDN (but was lacking compatibility charts)
https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet
https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList

I use the same structure with containing elements and correlating class names.
CSS

    <!-- There can be only one -->
    <style title="Highlander">
        /* All direct descendants of #singular-display-group should not be displayed.
            For _very_ old IE (6?) support, you may have to ditch the "direct" part and
            turn it into: #singular-display-group *
         */
        #singular-display-group > * {
            display: none;
        }
        /* This rule has higher specificity than the one above, and thus
            a descendant p element with class name "default" will be displayed.
         */
        #singular-display-group > p.default {
            display: block;
        }
    </style>

In order to change what element is displayed and which are hidden, all you have to do is change the selector of the second rule to match whichever class you want to show. To show element with class name "one".

        #singular-display-group p.one {
            display: block;
        }

Once you have a reference to the correct CSS rule, your event handler is down to a single statement.

        $(document).ready(function () {
            var i, sheet, rules;
            window.displayRule = null;

        for (i = 0; i < document.styleSheets.length && window.displayRule === null; i += 1) {
            if (document.styleSheets[i].title === 'Highlander') {
                sheet = document.styleSheets[i];
                // I believe the property is .rules for IE and .cssRules for everyone else
                rules = sheet.cssRules || sheet.rules;
                /* In my example, we target the second rule of the style sheet */
                window.displayRule = rules[1];
            }
        }

        /* This turns your event handler into one line of code, doing nothing other than
         * very simple string manipulation.
         */
        if (window.displayRule) {
            $('#singular-display-input-group').on('click', 'div', function (e) {
                window.displayRule.selectorText = '#singular-display-group p.' + e.target.className;
            });
        }
    });

But I don't actually know if this approach is quicker or slower than directly referencing the two elements involved (previously displayed and next to be displayed). Changing the CSS selector might cause the browser to recheck the entire page for all I know.

Joseph_Sliker

GASP! Wow. Thank your for all the time and effort you put into this response! I have just seen it for the first time and it looks a little overwhelming (for me, at my current minimal understanding of javascript), but I will be poring over it this morning to see if I can get a handle on it, and make it work. I'll post a progress report when(if?) I've finally wrapped my head around it sufficiently.

...and here I thought that: "sadly, no one here writes code for you" 😉

Joseph_Sliker

Okay! I think I get it! I pasted the code sections from your last post into a new page, and studied them section by section. I took the liberty of renaming some things (simplifying them for myself as I began to grasp the concepts involved), and added some notes and a couple experiments in the display section (I'm not too good with CSS either, but that's another story). I came up with this:

<!doctype html>
<html lang="en"> 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS_TEST</title>
    <link rel="stylesheet" type="text/css" href="ccre_theme.css" />
    <style type="text/css">
        /* SYNTAX NOTE: there must be a space between "#displays" and ".hidden" */
        #displays .hidden { /* if any of the items in the id group "displays" group has  the class "hidden", it will not be displayed*/
            display: none;
        }
        #buttons{width: 50%; float: left;}
        #displays{width: 50%; float: left;}
    </style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
        $(document).ready(function () {
            window.$ViewItem = $('#displays .default'); //displays the div <p class="default">This is default content.</p>
            $('#buttons').on('click', 'div', function (e) {
                var $el = $('#displays .' + e.target.className);
                // .children looks for direct descendants only
                $el.removeClass('hidden');  /* if a button is clicked, the "hidden" class is taken off of any display items, so that they will be displayed*/
                window.$ViewItem.addClass('hidden');  /* whatever WAS being shown gets the "hidden" put back on so that it will disapear*/
                window.$ViewItem = $el;
            }); /*closes the #buttons function*/
        }); /*closes $(document).ready*/
</script> 
 </head>

<body>

<div id="displays">
    <p class="default">This is default content. in a p</p>
    <div class="default">This is default content. in a div</div>
    <p class="one hidden">This is content 1.</p>
    <p class="one hidden">This is more of content 1.</p>
    <p class="two hidden">This is content 2.</p>
    <p class="two hidden">This is more of content 2.</p>    

    <p class="three hidden">This is content 3.</p>
    <div class="three hidden">This is content 3. in a div<div>content in a nested div within 3<br /><img src="archive/imapic.png" /></div></div>
</div>
<div id="buttons">
    <div class="one">Show 1</div>
    <div class="two">Show 2</div>
    <div class="three">Show 3</div>
</div>
</body>
</html>

Now, my next step is to generate the sets of buttons and displays using a MySQL query and php from current real-world data I have in my database. THAT I know how to do (I was doing this stuff with php forms and buttons but I wanted to speed up the visitor's experience of the page by seeing if I could do this in javascript. Your solution seems to be exactly what I need. Thanks so much!

Joseph_Sliker

I thought there were some typos in the script above that I can no longer edit. But I guess it's just the way it wraps in the code window.

Joseph_Sliker

Ack! I am having one unexpected problem with this script!

If/when I happen to re-click an item (which is currently displayed in the "displays" div, that whole div seems to disappear (or at least is empties of any content/shrinks to nothing onscreen).

I can't seem to figure out the logic in the script as to why this would happen. (Again, my ignorance of javascript is still pretty much breathtaking).

Is there something I can add or edit in this script that will prevent this from happening? (ie if I re-click the visible item, make sure it re-displays?)

If you run the script exactly as I put it in my next to last message, you'll see what I mean.

Joseph_Sliker

In the words of Emily Litella: "Never Mind!"

I found that if the following lines are re-ordered, the problem goes away.

//original
$el.removeClass('hidden');
window.$ViewItem.addClass('hidden');

//should be:
window.$ViewItem.addClass('hidden');
$el.removeClass('hidden');

Joseph_Sliker

...now I have to figure out if it is possible to have dynamic content (i.e. a slideshow specific to the item clicked) appear in one of the revealed displays