SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simplify multiple versions of the same script

    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.

    Code:
    <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>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

    Code:
    $('.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.

    Code:
    <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.

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

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

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

    Code:
    <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>

    Quote Originally Posted by Pullo View Post
    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.

    Code:
    $('.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.

    Code:
    <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.

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

  4. #4
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Here's a jsbin: http://jsbin.com/okOmEFU/1/

    Pay close attention to the HTML I used.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by myty
    Code:
    <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:

    Code:
    <!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.

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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 – 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

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    A neat solution, but no two elements should have the same id on the same page.
    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.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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:

    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.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    That's looking better

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

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK think thats it Pullo

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

    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 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.

  15. #15
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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 -

    Code:
      <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

  16. #16
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To follow suit I changed the bits below to reflect your recent changes:

    Code:
        <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>

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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:

    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 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.

  18. #18
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, one more.

    You know this bit of code below:

    Code:
            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.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by multichild View Post
    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.
    I'm not a CSS expert, but I believe you can only make an element a percentage of the height of its parent, thus if the parent has no explicit height you can set the height of the shadow box to one billion percent and nothing will happen

    I would just calculate the dimensions in JavaScript (you can use jQuery's .height() & .width()) and pass them into the script as variables.

  22. #22
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that would be awesome...

    At this point it works perfectly, but I know what you mean by making it generic, but might need your help with this if you dont mind me coming back to you through this post maybe Friday or over the weekend.

    Will have a go at the back button and the width and height idea is great, thanks again.

    Cheers

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Yup, no problem.
    I'm subscribed to the thread, so just post back here and I'll see it.
    Good luck

  24. #24
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    All going well and have moved on now to make the whole system work, but for some reason and I just cant see it, the form on page 3 will just not submit.

    I have been through the code and tried to break it and all, but I just cant figure it out.

    To get there at the moment, use the top left yellow button, then the first options on each section after that to take you to the second page, i can fill in the form fine, click submit on that page and again all good.

    But on the next page, I fill in the two textareas, find an image, go to submit, and it just wont go, and i cant work it out.

    Code:
    <!doctype html>
    <?php
    include "config.php";
    //include "header2.php";
    session_start();
    $top_D = $_GET['top'];
    $middle_D = $_GET['middle'];
    $bottom_D = $_GET['bottom'];
    date_default_timezone_set('Europe/London');
    
    $_SESSION['name_A'] = $_POST["names"];
    $_SESSION['projects_A'] = $_POST["projects"];
    $_SESSION['companies_A'] = $_POST["companies"];
    $_SESSION['numbers_A'] = $_POST["numbers"];
    $_SESSION['top_A'] = $top_D;
    $_SESSION['middle_A'] = $middle_D;
    $_SESSION['bottom_A'] = $bottom_D;
    //And on the next page...
    //echo $_SESSION['name_A'];
    //echo $_SESSION['projects_A'];
    //echo $_SESSION['companies_A'];
    //echo $_SESSION['numbers_A'];
    //session_destroy(); // don't want the session anymore 
    ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=600" />
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title>Page 3 - Liverpool Street Station</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>
    .pageNo{ position:relative; border:#000000 solid 1px; height:20px; width:20px; background-color:#fffc00; padding:4px; }
    fieldset {overflow:visible;}
    legend {padding-left:10px; padding-right:10px;}
    .form-field {overflow: visible; width: 90%; float:left; margin-left: 20px;}
    .form-field label { display: block; }
    .form-field input, .form-field select .form-field textarea {display: block; width: 100%; font-size:22px;}
    input[type=button] {
        color:#08233e;
        font:2.4em Futura, 'Century Gothic', AppleGothic, sans-serif;
        font-size:110%;
        /* ... other rules ... */
        cursor:pointer;
     margin:20px;
    }
    input[type=button]:hover {
        background-color:rgba(255,204,0,0.8);
    }
    textarea{
    width: 96%;
    height: 100px; 
    }
    </style>
    </head>
    <body>
    <div id="wrapper3" >
     <div id="Drop_down_wrapper">
     <ul>
      <li id="firstDropMenu"><a href="main.php" title="Home">HOME</a></li>
      <li>PAGE 1 | 2 | <span class="pageNo">3</span> | 4</li>
     </ul>
     <div id="secondDropMenu">
     <ul>
      <li><div id="time">30/12/2013 19:01</div></li>
     </ul>
     </div>
     </div>
    <div id="main_Page2">
    <div id="breadCrumb">
    <p><?=$top_D?> <? if ($middle_D== "") {?> <? } else { ?> - <?=$middle_D?> <? } ?> <? if ($bottom_D== "") { ?> <? } else { ?> - <?=$bottom_D?> <? } ?></p>
    </div>
    <div id="page2_Form">
    <form name="form1" method="post" action="page4.php" style="position:relative; margin-top:5px;" autocomplete="on" enctype="multipart/form-data">
    <fieldset>
      <legend> Details of Hazard / Near Miss </legend>
      <div class="input-text form-field">
           <textarea name="comments" class="style"></textarea>
      </div>
    </fieldset>
    <fieldset>
      <legend> Action Taken? </legend>
      <div class="input-text form-field">
           <textarea name="feedback" class="style"></textarea>
      </div>
    </fieldset>
    <fieldset>
      <legend> Upload An Image </legend>
      <div class="input-text form-field">
           <input type="file" name="pic1" accept="image/*" capture="camera" />
      </div>
    </fieldset>
     <input type="button" name="Submit" value="Submit" title="Submit" />
    </form>
    </div>
    </div>
    </div>  <!-- end of wrapper div -->
    <script src="http://code.jquery.com/jquery.js"></script>
    </body>
    </html>
    Full code if needed.

    Cheers

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    On page 3, change this:

    Code:
    <input type="button" name="Submit" value="Submit" title="Submit" />
    to this:

    Code:
    <input type="submit" name="Submit" value="Submit" title="Submit" />
    and all will be well


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •