dotnetco.de

My previous posting shows how to use Hopscotch on asp.net Masterpages. While creating a new tour I’ve faced one thing: Sometimes the referenced element is currently hidden on the page, e.g. when using the collapse-option in Twitters Bootstrap Framework. Using Hopscotch it’s simple to show the element and then reference the tooltip to it. So current tip is regardless of the programming language (asp.net, PHP, HTML, etc.) and it’s a very simple one.

Show the elements

Of course you need to check how to show your hidden elements. Current example is about elements which were hidden using the collapse-script of Twitters Bootstrap framework. The collapse-function has an option ‘show’ which will always show the object so you could call it without previously checking whether it is already shown or not. It would not cause any problems when using the ‘show’ option even though the element is already visible. Hopscotch Multipage demo already shows how to execute Javascript code after user clicked ‘Next’. So we just add ‘onNext’ option and the necessary function. Of course it has to contain the id of the element to be shown.

onNext: function () {
                $('#collapseExample').collapse('show');
            }

Add delay

Twitters Bootstrap collapse action has some animations so it takes some milliseconds until the whole element is visible. Therefore we add a delay of 500 milliseconds to the second step so that tooltip is not displayed until the element is completely shown.

delay:500

That’s it!

As said, this is a rather short and simple tip but might be helpful. As usual here is the full code.

Hopscotch1.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master"
    CodeBehind="Hopscotch1.aspx.vb" Inherits="WebApplication1.Hopscotch1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!-- jQuery, http://jquery.com/ -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <!-- Bootstrap, http://getbootstrap.com/ -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h3 id="Start">
        Start here</h3>
    <p>
        Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi
        was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen.
        Erstens: wir haben nicht offensiv gespielt.</p>
    <p>
        Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern.
        Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Wir
        müssen nicht vergessen Zickler. Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler.</p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
        aria-controls="collapseExample">Mehr anzeigen </a>
    <div class="collapse" id="collapseExample">
        <p>
            Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke. Offensiv,
            offensiv ist wie machen wir in Platz. Zweitens: ich habe erklärt mit diese zwei
            Spieler: nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere
            Mannschaften gesehen in Europa nach diese <span id="Second">Mittwoch</span>.</p>
        <p>
            Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein
            Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese
            Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche
            Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet oder gespielt Basler oder
            hat gespielt Trapattoni? Diese Spieler beklagen mehr als sie spielen! Wissen Sie,
            warum die Italienmannschaften kaufen nicht diese Spieler? Weil wir haben gesehen
            viele Male solche Spiels!</p>
    </div>
    <p>
        <span id="startTourBtn">Hier Tour 1 starten</span>!</p>
    <script type="text/javascript" src="js/HSTour1.js"></script>
</asp:Content>

HSTour1.js

// Define the tour!
var tour = {
    id: "hello-hopscotch",
    steps: [
        {
            title: "My Header",
            content: "This is the header of my page.",
            target: "Start",
            placement: "bottom",
            onNext: function () {
                $('#collapseExample').collapse('show');
            }
        },
        {
            title: "My 2nd step",
            content: "This is the second step.",
            target: "Second",
            placement: "left",
            delay:500
        }
      ]
},
/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function (el, fn) {
    if (el.addEventListener) {
        el.addEventListener('click', fn, false);
    }
    else {
        el.attachEvent('onclick', fn);
    }
},
startBtnEl = document.getElementById("startTourBtn");
    if (startBtnEl) {
        addClickListener(startBtnEl, function () {
            if (!hopscotch.isActive) {
                hopscotch.startTour(tour);
            }
        });
    }
    else {
        // Assuming we're on page 2.
        if (hopscotch.getState() === "hello-hopscotch:1") {
            // tour id is hello-hopscotch and we're on the second step. sounds right, so start the tour!
            hopscotch.startTour(tour);
        }
    }