Skip to main content
T
tim cross
Inspiring
February 19, 2019
Answered

pop panel script - mucks up the jQuery tab bar

  • February 19, 2019
  • 1 reply
  • 1021 views

I wonder if anyone can help

I am using jQuery tabs bar from dreamweaver plugins I want to add a popup window

I saw a link that 'Nacy Oo Shea' uploaded which is prefect in the style I want but when I add the code it destroys the tab bar, not sure how to correct this to get the tab bar to work.

Also is there away to get the popup window to open when you click on the button and not auto  load up

Thanks

Tim

------

------

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>test2</title>

<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">

<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">

<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">

<script src="jQueryAssets/jquery-1.11.1.min.js"></script>

<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js"></script>

<!--popup start>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!--popup end>

</head>

  <!--popup panel start -->

<div class="row">

<!-- Button trigger modal -->

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">OPEN MODAL</button>

<!-- Modal window-->

<div class="modal fade left" id="myModal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

Modal Header

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

</div>

<div class="modal-body small" style="text-align:left">

<h3 class="center">Modal Body</h3>

<p>Some text</p>

<p>Some text</p>

<p>Some text</p>

</div>

<div class="modal-footer">

Modal Footer 

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

</div>

</div>

<!--popup panel end -->

<body>

<div id="Tabs1">

  <ul>

    <li><a href="#tabs-1">Tab 1</a></li>

    <li><a href="#tabs-2">Tab 2</a></li>

    <li><a href="#tabs-3">Tab 3</a></li>

  </ul>

  <div id="tabs-1">

    <p>Content 1</p>

  </div>

  <div id="tabs-2">

    <p>Content 2</p>

  </div>

  <div id="tabs-3">

    <p>Content 3</p>

  </div>

</div>

<script type="text/javascript">

$(function() {

  $( "#Tabs1" ).tabs();

});

<!--popup script Latest jQuery Core Library start-->

<script src="http://code.jquery.com/jquery-latest.min.js">

</script>

<!--Bootstrap-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!--popup script Latest jQuery Core Library end-->

</script>

</body>

</html>

--------

--------

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Thank you all for your advice. Will redo it using bootstrap.

    The jQuery tab was working fine until I tried to add the popup code and then it went all funny.

    Tim


    You don't need jQuery UI if you're using Bootstrap.

    Use Bootstrap's  Dynamic Tabs instead of jQuery Ui tabs.  

    Less code, fewer conflicts.

    <ul class="nav nav-tabs">

      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    </ul>

    <div class="tab-content">

      <div id="home" class="tab-pane fade in active">

        <h3>HOME</h3>

        <p>Some content.</p>

      </div>

      <div id="menu1" class="tab-pane fade">

        <h3>Menu 1</h3>

        <p>Some content in menu 1.</p>

      </div>

      <div id="menu2" class="tab-pane fade">

        <h3>Menu 2</h3>

        <p>Some content in menu 2.</p>

      </div>

    </div>

    In the future when you need to add components,  start with the ones in Bootstrap before going outside the framework.  And stay on top of your code errors.  You'll have way fewer problems that way.

    1 reply

    O
    osgood_
    Brainiac
    February 19, 2019

    By adding the modal code it looks like you corrupted the existing code. Add the closing </script> tag, shown in red below, to the end of your tabs function. See if that makes a difference.

    <script type="text/javascript">

    $(function() {

      $( "#Tabs1" ).tabs();

    });

    </script>

    You have also got a couple of -- dashes missing from your comment tag:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!--popup end -- >

    Although Im not sure why that comment is there as that is not where the modal code ends, so you might as well delete it.

    T
    tim crossAuthor
    Inspiring
    February 19, 2019

    HI, I corrected that error but sadly that has not correct it :-(

    ----

    ---

    <!doctype html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>test2</title>

    <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">

    <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">

    <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">

    <script src="jQueryAssets/jquery-1.11.1.min.js"></script>

    <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js"></script>

    <!--popup start>

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

    <!--Bootstrap-->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!--popup end>

    </head>

      <!--popup start -->

    <!-- Button trigger modal -->

    <button type="button" class="btn" data-toggle="modal" data-target="#myModal">OPEN MODAL</button>

    <!-- Modal window-->

    <div class="modal fade left" id="myModal">

    <div class="modal-dialog">

    <div class="modal-content">

    <div class="modal-header">

    Modal Header

    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    </div>

    <div class="modal-body small" style="text-align:left">

    <h3 class="center">Modal Body</h3>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    </div>

    <div class="modal-footer">

    Modal Footer  

    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

      <!--popup end -->

    <body>

    <div id="Tabs1">

      <ul>

        <li><a href="#tabs-1">Tab 1</a></li>

        <li><a href="#tabs-2">Tab 2</a></li>

        <li><a href="#tabs-3">Tab 3</a></li>

      </ul>

      <div id="tabs-1">

        <p>Content 1</p>

      </div>

      <div id="tabs-2">

        <p>Content 2</p>

      </div>

      <div id="tabs-3">

        <p>Content 3</p>

      </div>

    </div>

    <script type="text/javascript">

    $(function() {

      $( "#Tabs1" ).tabs();

    });

    </script>

    <!--popup script Latest jQuery Core Library start-->

    <script src="http://code.jquery.com/jquery-latest.min.js">

    </script>

    <!--Bootstrap-->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script>

    $('#myModal').modal('show');

    </script>

    </body>

    </html>

    <!--popup script Latest jQuery Core Library end-->

    </body>

    </html>

    -----

    -----

    BenPleysier
    BenPleysier
    Community Expert
    February 19, 2019

    There are too many errors in your markup. Also, I do not see a reason for using jQuery tabs when you are already using Bootstrap.

    May I suggest that you use Bootstrap 4 rather than Bootstrap 3 that you are using at the moment. If you agree with the above, please copy and paste the following code into a new document and view in a browser.

    <!doctype html>

    <html>

      <head>

        <meta charset="UTF-8">

        <title>Untitled Document</title>

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

      </head>

      <body>

        <div class="container">

          <div class="row">

            <div class="col">

              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

                Launch demo modal

              </button>

            </div>

          </div>

          <div class="row mt-4">

            <div class="col">

              <nav>

                <div class="nav nav-tabs" id="nav-tab" role="tablist">

                  <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

                  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>

                  <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>

                </div>

              </nav>

              <div class="tab-content" id="nav-tabContent">

                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home tab</div>

                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile tab</div>

                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact tab</div>

              </div>

            </div>

          </div>

        </div>

        <!-- Modal -->

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

          <div class="modal-dialog" role="document">

            <div class="modal-content">

              <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                  <span aria-hidden="true">&times;</span>

                </button>

              </div>

              <div class="modal-body">

                ...

              </div>

              <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary">Save changes</button>

              </div>

            </div>

          </div>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

      </body>

    </html>

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices