Simplify multiple versions of the same script

multichild · December 29, 2013, 2:50pm

How can I simplify all the functions below, as they all the same but for one bit, and I have got a load more to do too.


<script>
Shadowbox.init({
    skipSetup: true
});
$('.btn').click(function() {
    var content = $('#sbdiv').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn2').click(function() {
    var content = $('#sbdiv2').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn3').click(function() {
    var content = $('#sbdiv3').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn4').click(function() {
    var content = $('#sbdiv4').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn5').click(function() {
    var content = $('#sbdiv5').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn6').click(function() {
    var content = $('#sbdiv6').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn7').click(function() {
    var content = $('#sbdiv7').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btn8').click(function() {
    var content = $('#sbdiv8').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
</script>

James_Hibbard · December 29, 2013, 4:21pm

Hi there,

It seems that only the content variable differs, so why not make one generic function and derive the content variable accordingly?
Within the anonymous function $(this) will refer to the button, so for example, $(this).next() will select the button’s immediate sibling.

E.g.

$('.btn').click(function() {
    var content = $(this).next().html(); // Just an example
    Shadowbox.open({
        content: content,
        player: 'html',
        displayNav: false,
        height: 600,
        width: 700
    });
});

If you could provide some sample HTML, then I can help you refine it more.

Other than that, you could store the selector for which the content should be obtained as a data attribute on the button itself.

E.g.

<button class="btn" data-content="#sbdiv4">Button</button>

$('.btn').click(function() {
    var contentSelector = $(this).data("content"),
        content = $(contentSelector).html();

    Shadowbox.open({
        content: content,
        player: 'html',
        displayNav: false,
        height: 600,
        width: 700
    });
});

Or, you could use the “starts with” selector, select the buttons to attach the click handler to, then derive the content variable name from $(this).className

E.g.

$(".btn[class^='btn']").click(function(){ ... });

HTH

multichild · December 29, 2013, 4:42pm

Hi Pullo,

Those bits of code are calling these divs to appear in shadowbox.


<div id="sbdiv2" style="display: none;">
<div id="box">
<h1>Tunnels</h1>
<p></p>
</div>
</div>

<div id="sbdiv3" style="display: none;">
<div id="box">
<h1>Welfare</h1>
<p></p>
</div>
</div>

<div id="sbdiv4" style="display: none;">
<div id="box">
<h1>Broadgate Ticket Hall</h1>
<p></p>
</div>
</div>

<div id="sbdiv5" style="display: none;">
<div id="box">
<h1>Moorhouse Shaft</h1>
<p></p>
</div>
</div>

<div id="sbdiv6" style="display: none;">
<div id="box">
<h1>Moorgate Shaft</h1>
<p></p>
</div>
</div>

<div id="sbdiv7" style="display: none;">
<div id="box">
<h1>Finsbury Shaft</h1>
<p></p>
</div>
</div>

<div id="sbdiv8" style="display: none;">
<div id="box">
<h1>Blomfield Box</h1>
<p></p>
</div>
</div>

James_Hibbard:

Hi there,

It seems that only the content variable differs, so why not make one generic function and derive the content variable accordingly?
Within the anonymous function $(this) will refer to the button, so for example, $(this).next() will select the button’s immediate sibling.

E.g.
$('.btn').click(function() {
    var content = $(this).next().html(); // Just an example
    Shadowbox.open({
        content: content,
        player: 'html',
        displayNav: false,
        height: 600,
        width: 700
    });
});
If you could provide some sample HTML, then I can help you refine it more.

Other than that, you could store the selector for which the content should be obtained as a data attribute on the button itself.

E.g.
<button class="btn" data-content="#sbdiv4">Button</button>

$('.btn').click(function() {
    var contentSelector = $(this).data("content"),
        content = $(contentSelector).html();

    Shadowbox.open({
        content: content,
        player: 'html',
        displayNav: false,
        height: 600,
        width: 700
    });
});
Or, you could use the “starts with” selector, select the buttons to attach the click handler to, then derive the content variable name from $(this).className

E.g.
$(".btn[class^='btn']").click(function(){ ... });
HTH

system · December 29, 2013, 4:59pm

Here’s a jsbin: http://jsbin.com/okOmEFU/1/

Pay close attention to the HTML I used.

James_Hibbard · December 29, 2013, 7:10pm

myty:

<div id="sb">
    <button id="one">btn one</button>
    <button id="two">btn two</button>
    
    <div id="one" class="slide">slide one</div>
    <div id="two" class="slide">slide two</div>
</div>

A neat solution, but no two elements should have the same id on the same page.

Maybe something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Slides</title>
  </head>
  
  <body>
    <div id="sb">
      <button id="one">btn one</button>
      <button id="two">btn two</button>
    
      <div id="slide_one">slide one</div>
      <div id="slide_two">slide two</div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $('#sb').on('click', 'button', function() {
        var sbdiv = '#slide_' + $(this).attr('id'),
            content = $(sbdiv).html();
      
        console.log(content);
      });
    </script>
  </body>
</html>

Depending on how many elements you are dealing with, you could maybe think about caching the slide divs and using find() instead.

multichild · December 29, 2013, 9:25pm

Thank you guys, great help cheers. I will work on this later, but before I do I was going to try and get this workign too.

Whilst shadowbox is open I have another set of buttons, and basically what I would like to do is when a button is clicked shadowbox closes, and then another shadowbox opens up with a new set of buttons again.

I tried this below, but its not calling the function by the seems, or if it is the shadowbox.close() isnt working.

Im not sure if within shadowbox, its calling the function.


<div class="box1"><a href="#" title="Moorgate Ticket Hall" class="btn"><div class="circle">Moorgate Ticket Hall</div></a></div>

<div id="sbdiv" style="display: none;">
<div id="box">
<h1>Moorgate Ticket Hall</h1>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" class="btnRoof">Roof level</a></li>
<li><a href="#">Ground floor &#8211; 114</a></li>
<li><a href="#">Level - 1 108.1</a></li>
<li><a href="#">High walk escalator</a></li>
<li><a href="#">Escalator ES5 (upper)</a></li>
</ul>
</div>
</div>
</div>
<div id="sbdivRoof" style="display: none;">
<div id="box">
<h1>Roof Level</h1>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
</div>

<script>
Shadowbox.init({
    skipSetup: true
});
$('.btn').click(function() {
    var content = $('#sbdiv').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
$('.btnRoof').click(function() {
 Shadowbox.close();
    var content = $('#sbdivRoof').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        /*title: "Hi",*/
        displayNav: false,
        height: 600,
        width: 700
    });
});
</script>

Does that make sense, basically once the one button opens up the first shadowbox, then user is then presented with a new set of options, so my theory was that for the new shadowbox to appear, I would close it down at the start of the fucntion and then the rest of the code would work its magic.

Maybe Im being a bit naive, but got to start somewhere i suppose.

Thanks again guys

multichild · December 30, 2013, 12:32am

This is where the project is, i might help to explain it better.

http://www.lorhnm.co.uk/liverpoolst/main.php

Basically, click the first button (Moorgate Ticket Hall) then inside that in this example (Roof Level 118)

Thanks

system · December 30, 2013, 9:36am

I agree. You got me there! I think is also required for me to post some more details.

While HTML or CSS will not complain for having multiple HTML elements with the same id attribute, and while in this instance, the JS code is working, in general, $(‘#one’).each() or vanilla JS document.getElementById(‘one’) will only return the first HTML element it finds.

Using data-id=“one” for both buttons and sbdivs, like you suggested, together with my simplified approach, I think that that will make for a good solution.

James_Hibbard · December 30, 2013, 10:48am

Hi there,

So having looked at this I have a number of suggestions:

You have several unclosed tags in your markup. This needs fixing!
Remove the inline CSS. E.g. don’t write style="display: none". Change this to class="hidden"
You have multiple elements with the id box. This is not good and should be changed
To address your initial problem, name the content containers <div id="sbdiv1">, <div id="sbdiv2"> and so on.
Select all of the links which can trigger the shadow box using jQuery’s attribute starts with selector $("a[class^='btn']")
I would also be tempted to choose a more semantic name than “.btn”. They are not buttons, rather links
Finally construct a reference to the content div from within the cick handler using the value of this.className.

Now you have removed over 100 lines of redundant JS

Here’s the code:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <base href ="http://www.lorhnm.co.uk/liverpoolst/" />
  <meta name="viewport" content="width=600">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Page 1 - Drop downs</title>
  <link rel="stylesheet" href="css/global.css" type="text/css" />
  <link rel="stylesheet" type="text/css" href="css/adaptive_css.css">
  <link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css">
  <style>
    .hidden{ display: none; }
  </style>
</head>

<body>

  <div id="sbdiv1" class="hidden">
    <div id="box">
      <h1>Moorgate Ticket Hall</h1>
      <div id="navcontainer">
        <ul id="navlist">
          <li><a href="#" class="btnRoof">Roof level 118</a></li>
          <li><a href="#">Ground floor 114</a></li>
          <li><a href="#">Level 1 108.1</a></li>
          <li><a href="#">High walk escalator</a></li>
          <li><a href="#">Escalator ES5 (upper)</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="sbdivRoof" class="hidden">
    <div id="box">
      <h1>Roof Level</h1>
      <div id="navcontainer">
        <ul id="navlist">
          <li><a href="#">Delivery corridor</a></li>
          <li><a href="#">Site entrance</a></li>
          <li><a href="#">Stores</a></li>
          <li><a href="#">Lay down area</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div id="sbdiv2" class="hidden">
    <div id="box">
      <h1>Tunnels</h1>
      <p></p>
    </div>
  </div>

  <div id="sbdiv3" class="hidden">
    <div id="box">
      <h1>Welfare</h1>
      <p></p>
    </div>
  </div>

  <div id="sbdiv4" class="hidden">
    <div id="box">
      <h1>Broadgate Ticket Hall</h1>
      <p></p>
    </div>
  </div>

  <div id="sbdiv5" class="hidden">
    <div id="box">
      <h1>Moorhouse Shaft</h1>
      <p></p>
    </div>
  </div>

  <div id="sbdiv6" class="hidden">
    <div id="box">
      <h1>Moorgate Shaft</h1>
      <p></p>
    </div>
  </div>

  <div id="sbdiv7" class="hidden">
    <div id="box">
      <h1>Finsbury Shaft</h1>
      <p></p>
    </div>
  </div>

  <div id="sbdiv8" class="hidden">
    <div id="box">
      <h1>Blomfield Box</h1>
      <p></p>
    </div>
  </div>

  <div id="wrapper" >
    <div id="Drop_down_wrapper">
      <ul>
        <li id="firstDropMenu"><a href="main.php" title="Home">HOME ></a></li>
        <li>PAGE <span style="position:relative; border:#000000 solid 1px; height:20px; width:20px; background-color:#fffc00; padding:4px;">1</span> | 2 | 3 | 4
          <div id="secondDropMenu" style="margin-left:-3px;">
            <li><div id="time">30/12/2013 09:31</div>
            </div>

            <div id="button_Container_1">
              <div class="box1"><a href="#" title="Moorgate Ticket Hall" class="btn1"><div class="circle">Moorgate Ticket Hall</div></a></div>
              <div class="box2"><a href="#" title="Tunnels" class="btn2"><div class="circle">Tunnels</div></a></div>
              <div class="box3"><a href="#" title="Welfare" class="btn3"><div class="circle">Welfare</div></a></div>
              <div class="box4"><a href="#" title="Broadgate Ticket Hall" class="btn4"><div class="circle">Broadgate Ticket Hall</div></a></div>
              <span class="stretch"></span>
            </div>

            <div id="button_Container_2">
              <div class="box1"><a href="#" title="Moorhouse Shaft" class="btn5"><div class="circle">Moorhouse Shaft</div></a></div>
              <div class="box2"><a href="#" title="Moorgate Shaft" class="btn6"><div class="circle">Moorgate Shaft</div></a></div>
              <div class="box3"><a href="#" title="Finsbury Shaft" class="btn7"><div class="circle">Finsbury Shaft</div></a></div>
              <div class="box4"><a href="#" title="Blomfield Box" class="btn8"><div class="circle">Blomfield Box</div></a></div>
              <span class="stretch"></span>
            </div>

    <!--- LOTS OF UNCLOSED TAGS HERE -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/toggle.js"></script>
    <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>

    <script>
      Shadowbox.init({
        skipSetup: true
      });

      $("a[class^='btn']").click(function(e){ 
        e.preventDefault();
        var contentContainer = "#sbdiv" + this.className.replace(/btn/, ""),
        content = $(contentContainer).html();
        Shadowbox.open({
          content: content,
          player: 'html',
          displayNav: false,
          height: 600,
          width: 700
        });
      });
    </script>
  </body>
</html>

Have a look at what I have done, then let me know if we are moving in the right direction.

If we are, then it would be better to implement a solution as myty suggests in the previous post, as what we have now is an improvement, but more of a quick fix.

multichild · December 30, 2013, 11:13am

Morning Pullo,

Thnk you for getting back to me.

As you may have noticed over the years, my jscript isnt the best, but each day I try and work a bit more out and I’m getting there, so thanks to you and the others for helping me out.

I have implemented your changes and it works well, and yes the code is a lot tidier now, even before I implement what myty suggests.

The second level of options appear when, and when the one option is clicked we move away from the page, and go to the holding page before it.

I can see where that has been added, and I expect its for a good reason, as initially I thought you missed the main.php out, so added it in, and then it didnt go anywhere.

James_Hibbard · December 30, 2013, 11:39am

Hi,

That’s looking better

Could you fix the markup (duplicate ids and missing tags) then we can look at implementing the rest.

multichild · December 30, 2013, 11:56am

OK think thats it Pullo

James_Hibbard · December 30, 2013, 2:00pm

There’s still a couple of duplicate IDs.
Try running it through the W3 Validator.

Other than that we’re looking good
I’m tied up right now, but I’ll have a look this evening and get back to you.

James_Hibbard · December 30, 2013, 7:30pm

Hi,

I had a look at the page and altered it to this (this incorporates myty’s data-id suggestion (kind of).

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href ="http://www.lorhnm.co.uk/liverpoolst/" />
    <meta name="viewport" content="width=600" />
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title>Page 1 - Drop downs</title>
    <link rel="stylesheet" href="css/global.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/adaptive_css.css" />
    <link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css" />
    <style>
      .hidden{ display: none; }
      .pageNo{ position:relative; border:#000000 solid 1px; height:20px; width:20px; background-color:#fffc00; padding:4px; }
      #secondDropMenu{ style="margin-left:-3px;" }
    </style>
  </head>

  <body>
    <div id="sbdiv1" class="hidden">
      <div class="box">
        <h1>Moorgate Ticket Hall</h1>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="#" class="btnRoof">Roof level 118</a></li>
            <li><a href="#">Ground floor 114</a></li>
            <li><a href="#">Level 1 108.1</a></li>
            <li><a href="#">High walk escalator</a></li>
            <li><a href="#">Escalator ES5 (upper)</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="sbdivRoof" class="hidden">
      <div class="box">
        <h1>Roof Level</h1>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="#">Delivery corridor</a></li>
            <li><a href="#">Site entrance</a></li>
            <li><a href="#">Stores</a></li>
            <li><a href="#">Lay down area</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="sbdiv2" class="hidden">
      <div class="box">
        <h1>Tunnels</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv3" class="hidden">
      <div class="box">
        <h1>Welfare</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv4" class="hidden">
      <div class="box">
        <h1>Broadgate Ticket Hall</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv5" class="hidden">
      <div class="box">
        <h1>Moorhouse Shaft</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv6" class="hidden">
      <div class="box">
        <h1>Moorgate Shaft</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv7" class="hidden">
      <div class="box">
        <h1>Finsbury Shaft</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv8" class="hidden">
      <div class="box">
        <h1>Blomfield Box</h1>
        <p></p>
      </div>
    </div>

    <div id="wrapper" >
      <div id="Drop_down_wrapper">
        <ul>
          <li id="firstDropMenu"><a href="main.php" title="Home">HOME ></a></li>
          <li>PAGE <span class="pageNo">1</span> | 2 | 3 | 4
          </li>
        </ul>
        <div id="secondDropMenu">
          <ul>
            <li><div id="time">30/12/2013 19:01</div></li>
          </ul>
        </div>
      </div>

      <div id="button_Container_1">
        <div class="box1"><a href="#" title="Moorgate Ticket Hall" class="circle sb" data-id="1">Moorgate Ticket Hall</a></div>
        <div class="box2"><a href="#" title="Tunnels" class="circle sb" data-id="2">Tunnels</a></div>
        <div class="box3"><a href="#" title="Welfare" class="circle sb" data-id="3">Welfare</a></div>
        <div class="box4"><a href="#" title="Broadgate Ticket Hall" class="circle sb" data-id="4">Broadgate Ticket Hall</a></div>
        <span class="stretch"></span>
      </div>

      <div id="button_Container_2">
        <div class="box1"><a href="#" title="Moorhouse Shaft" class="circle sb" data-id="5">Moorhouse Shaft</a></div>
        <div class="box2"><a href="#" title="Moorgate Shaft" class="circle sb" data-id="6">Moorgate Shaft</a></div>
        <div class="box3"><a href="#" title="Finsbury Shaft" class="circle sb" data-id="7">Finsbury Shaft</a></div>
        <div class="box4"><a href="#" title="Blomfield Box" class="circle sb" data-id="8">Blomfield Box</a></div>
        <span class="stretch"></span>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/toggle.js"></script>
    <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
    <script>
      Shadowbox.init({
        skipSetup: true
      });

      $("a.sb").on("click", function(e){ 
        e.preventDefault();
        var contentContainer = "#sbdiv" + $(this).data("id"),
            content = $(contentContainer).html();

        Shadowbox.open({
          content: content,
          player: 'html',
          displayNav: false,
          height: 600,
          width: 700
        });
      });
    </script>
  </body>
</html>

I’m guessing that in each of the sbdivs you’ll be putting more content. If not you could even generate these programatically.

I think this is looking quite good now. What is the next step you would like to implement?

You mentioned something about the second level of options.

Also, if you haven’t done so already, could you take a moment to go and vote in the community awards for anyone you think has helped you out in the last year. The link is in my signature.

multichild · December 30, 2013, 7:47pm

Hi Pullo,

Will make sure I vote straight after finishing this reply for sure.

Thanks again for the help.

And yes basically its a three step process, the user first clicks one of the yellow circles to get the first shadowbox content, where they will get a set of options as you have seen and helped me with.

They need then to select one of those options to then recieve a new set of options, where they again select and move on to step 2.

Its in part set up for this, but what I couldnt figure out was how to close the open shadowbox to make way for a new shadowbox with the third set of options.

This is that process as I got it so far:



<div id="sbdiv1" class="hidden">
    <div class="box">
      <h1>Moorgate Ticket Hall</h1>
      <div class="navcontainer">
        <ul class="navlist">
          <li><a href="#" class="btnRoof">Roof level 118</a></li>
          <li><a href="#">Ground floor 114</a></li>
          <li><a href="#">Level 1 108.1</a></li>
          <li><a href="#">High walk escalator</a></li>
          <li><a href="#">Escalator ES5 (upper)</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="sbdivRoof" class="hidden">
    <div class="box">
      <h1>Roof Level</h1>
      <div class="navcontainer">
        <ul class="navlist">
          <li><a href="#">Delivery corridor</a></li>
          <li><a href="#">Site entrance</a></li>
          <li><a href="#">Stores</a></li>
          <li><a href="#">Lay down area</a></li>
        </ul>
      </div>
    </div>
  </div>

So the one above is - click Roof level 118 to then close that shadowbox to then open another shadowbox to show -



  <div id="sbdivRoof" class="hidden">
    <div class="box">
      <h1>Roof Level</h1>
      <div class="navcontainer">
        <ul class="navlist">
          <li><a href="#">Delivery corridor</a></li>
          <li><a href="#">Site entrance</a></li>
          <li><a href="#">Stores</a></li>
          <li><a href="#">Lay down area</a></li>
        </ul>
      </div>
    </div>
  </div>

This will then be the case for all the second level options.

In honesty I think it looks great, the layout is nice, and the code is very neat and works really well.

I will go back through and implement your changes.

Thanks Pullo

multichild · December 30, 2013, 7:59pm

To follow suit I changed the bits below to reflect your recent changes:


    <div id="sbdiv1" class="hidden">
      <div class="box">
        <h1>Moorgate Ticket Hall</h1>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="#" data-id="9">Roof level 118</a></li>
            <li><a href="#">Ground floor 114</a></li>
            <li><a href="#">Level 1 108.1</a></li>
            <li><a href="#">High walk escalator</a></li>
            <li><a href="#">Escalator ES5 (upper)</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="sbdiv9" class="hidden">
      <div class="box">
        <h1>Roof Level</h1>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="#">Delivery corridor</a></li>
            <li><a href="#">Site entrance</a></li>
            <li><a href="#">Stores</a></li>
            <li><a href="#">Lay down area</a></li>
          </ul>
        </div>
      </div>
    </div>

James_Hibbard · December 30, 2013, 8:56pm

I wouldn’t go opening and closing Shadowboxes all over the place, as this just looks confusing (I’m not even sure if it is possible).

Try this instead - it replaces the HTML of the current shadowbox and fades it in.
It only works for “Moorgate Ticket Hall > Roof Level 118”, but it’ll give you an idea of what it looks like:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href ="http://www.lorhnm.co.uk/liverpoolst/" />
    <meta name="viewport" content="width=600" />
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title>Page 1 - Drop downs</title>
    <link rel="stylesheet" href="css/global.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/adaptive_css.css" />
    <link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css" />
    <style>
      .hidden{ display: none; }
      .pageNo{ position:relative; border:#000000 solid 1px; height:20px; width:20px; background-color:#fffc00; padding:4px; }
      #secondDropMenu{ style="margin-left:-3px;" }
      a.highlighted{ background-color: yellow; color: black; }
    </style>
  </head>

  <body>
    <div id="sbdiv1" class="hidden">
      <div class="box">
        <h1>Moorgate Ticket Hall</h1>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="#" data-id="1a" class="subNav">Roof level 118</a></li>
            <li><a href="#">Ground floor 114</a></li>
            <li><a href="#">Level 1 108.1</a></li>
            <li><a href="#">High walk escalator</a></li>
            <li><a href="#">Escalator ES5 (upper)</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="sbdiv1a" class="hidden">
      <div class="box">
        <h1>Roof Level</h1>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="#">Delivery corridor</a></li>
            <li><a href="#">Site entrance</a></li>
            <li><a href="#">Stores</a></li>
            <li><a href="#">Lay down area</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="sbdiv2" class="hidden">
      <div class="box">
        <h1>Tunnels</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv3" class="hidden">
      <div class="box">
        <h1>Welfare</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv4" class="hidden">
      <div class="box">
        <h1>Broadgate Ticket Hall</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv5" class="hidden">
      <div class="box">
        <h1>Moorhouse Shaft</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv6" class="hidden">
      <div class="box">
        <h1>Moorgate Shaft</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv7" class="hidden">
      <div class="box">
        <h1>Finsbury Shaft</h1>
        <p></p>
      </div>
    </div>

    <div id="sbdiv8" class="hidden">
      <div class="box">
        <h1>Blomfield Box</h1>
        <p></p>
      </div>
    </div>

    <div id="wrapper" >
      <div id="Drop_down_wrapper">
        <ul>
          <li id="firstDropMenu"><a href="main.php" title="Home">HOME ></a></li>
          <li>PAGE <span class="pageNo">1</span> | 2 | 3 | 4
          </li>
        </ul>
        <div id="secondDropMenu">
          <ul>
            <li><div id="time">30/12/2013 19:01</div></li>
          </ul>
        </div>
      </div>

      <div id="button_Container_1">
        <div class="box1"><a href="#" title="Moorgate Ticket Hall" class="circle sb" data-id="1">Moorgate Ticket Hall</a></div>
        <div class="box2"><a href="#" title="Tunnels" class="circle sb" data-id="2">Tunnels</a></div>
        <div class="box3"><a href="#" title="Welfare" class="circle sb" data-id="3">Welfare</a></div>
        <div class="box4"><a href="#" title="Broadgate Ticket Hall" class="circle sb" data-id="4">Broadgate Ticket Hall</a></div>
        <span class="stretch"></span>
      </div>

      <div id="button_Container_2">
        <div class="box1"><a href="#" title="Moorhouse Shaft" class="circle sb" data-id="5">Moorhouse Shaft</a></div>
        <div class="box2"><a href="#" title="Moorgate Shaft" class="circle sb" data-id="6">Moorgate Shaft</a></div>
        <div class="box3"><a href="#" title="Finsbury Shaft" class="circle sb" data-id="7">Finsbury Shaft</a></div>
        <div class="box4"><a href="#" title="Blomfield Box" class="circle sb" data-id="8">Blomfield Box</a></div>
        <span class="stretch"></span>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/toggle.js"></script>
    <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
    <script>
      Shadowbox.init({
        skipSetup: true
      });

      $("a.sb").on("click", function(e){ 
        e.preventDefault();
        var contentContainer = "#sbdiv" + $(this).data("id"),
            content = $(contentContainer).html();

        Shadowbox.open({
          content: content,
          player: 'html',
          displayNav: false,
          height: 600,
          width: 700
        });
      });

      $("body").on("click", "#sb-container", function(e){
        var target = e.target;
        if(target.className === "subNav"){
          e.preventDefault();
          var nextContainer = "#sbdiv" + $(target).data("id"),
              nextContent = $(nextContainer).html();
          $("#sb-player").hide().html(nextContent).fadeIn(1500);
        }
      });
    </script>
  </body>
</html>

If you could imagine doing it this way, then let me know and we can make the function more generic.

multichild · December 30, 2013, 9:09pm

Oh Pullo,

Fair play you are something else, its even better than what I was trying to do, I love it, thank you.

I will complete the rest of the workings now and with pride show it off to my boss on Thursday when I get back to work.

This isnt necessary but lets say for example they pick the wrong option in the second options, on the third options page is there a way of adding a back button for them to return to make the selection again, I suppose it would live in the same line as the H1 title or maybe above it on the third option page.

IF its too much Pullo, dont worry about it, its just an obeservation.

Thank you very much.

multichild · December 30, 2013, 9:17pm

Sorry, one more.

You know this bit of code below:


        Shadowbox.open({
          content: content,
          player: 'html',
          displayNav: false,
          height: 600,
          width: 700

I have tried making the height and width a percentage but its not right, so wondered if there was a way of either getting around that so that the width and height are a percentage of the screen size, for different resolutions, or would I have to use a calculation, which again I looked into but not to sure on it.

James_Hibbard · December 30, 2013, 9:20pm

Hi there,

You’re welcome

Feel free to go ahead and get it working as you want - you have the nuts and bolts already, but please bear in mind that what I showed you in the previous post was just to demonstrate the concept and will need to be made more generic
Once your boss has signed off on it, maybe we could go back over it and refactor it a little.

Regarding the back button, I would save the previous level(s) of navigation as data attributes on a DOM element (the back button itself, for example).
Then, when a user clicks it, you can see where they were last, then load that div back into the shadow box.