Ad

Can't Get JQuery To Work Properly

- 1 answer

I have a code that I uploaded here that works properly http://codepen.io/David17k7/pen/EPXbMP but when I upload it to my website, it won't work. https://www.hostcactus.com

HTML:

<script src="templates/{$template}/js/whmcs.js"></script>
<link target="_blank" rel="nofollow noreferrer" href="templates/{$template}/css/bootstrap2.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="templates/{$template}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="templates/{$template}/js/jquery.leanModal.min.js"></script>
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="templates/{$template}/css/loginbox.css" />
<!-- Custom Theme files -->
<link target="_blank" rel="nofollow noreferrer" href="templates/{$template}/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<!-- webfonts -->
<link href='//fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<!-- webfonts -->
<!-- dropdown -->
<script src="templates/{$template}/js/jquery.easydropdown.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script src="templates/{$template}/js/jquery.magnific-popup.js" type="text/javascript"></script>
<link target="_blank" rel="nofollow noreferrer" href="templates/{$template}/css/popup.css" rel="stylesheet" type="text/css">
    {$headoutput}

  </head>

  <body>
{$headeroutput}
<div class="header">
    <div class="container">
      <div class="header_bottom"> 
       <div class="col-xs-3 logo">
         <a target="_blank" rel="nofollow noreferrer" href="index.php"><img src="templates/{$template}/img/logo.png" alt=""/></a>
       </div>
       <div class="col-xs-9 header_nav">
           <div class="col-xs-9 menu">
                    <a class="toggleMenu" target="_blank" rel="nofollow noreferrer" href="#"><img src="templates/{$template}/img/nav_icon.png" alt="" /> </a>
                    <ul class="nav" id="nav">
                      <li class="current"><a target="_blank" rel="nofollow noreferrer" href="https://www.hostcactus.com/">Home</a></li>
                      <li><a target="_blank" rel="nofollow noreferrer" href="about.html">About Us</a></li>
                      <li><a target="_blank" rel="nofollow noreferrer" href="services.html">Services</a></li>
                      <li><a target="_blank" rel="nofollow noreferrer" href="404.html">Feedback</a></li>
                      <li><a target="_blank" rel="nofollow noreferrer" href="support.html">Support</a></li>
                      {if $logged_in} {else}
                      <li><a target="_blank" rel="nofollow noreferrer" href="register.php">Register</a></li>
                      {/if}                             
                    </ul>
                    <script type="text/javascript" src="templates/{$template}/js/responsive-nav.js"></script>
          </div>
          <div class="col-xs-3 header_but">
              <menu class="cl-effect-8" id="cl-effect-8">


<div class="container">
  <h1>Popup Login & Signup with jQuery</h1>
  <a id="modal_trigger" target="_blank" rel="nofollow noreferrer" href="#modal" class="btn">Click here to Login or register</a>

  <div id="modal" class="popupContainer" style="display:none;">
    <header class="popupHeader">
      <span class="header_title">Login</span>
      <span class="modal_close"><i class="fa fa-times"></i></span>
    </header>

    <section class="popupBody">
      <!-- Social Login -->
      <div class="social_login">
        <div class="">
          <a target="_blank" rel="nofollow noreferrer" href="#" class="social_box fb">
            <span class="icon"><i class="fa fa-facebook"></i></span>
            <span class="icon_title">Connect with Facebook</span>

          </a>

          <a target="_blank" rel="nofollow noreferrer" href="#" class="social_box google">
            <span class="icon"><i class="fa fa-google-plus"></i></span>
            <span class="icon_title">Connect with Google</span>
          </a>
        </div>

        <div class="centeredText">
          <span>Or use your Email address</span>
        </div>

        <div class="action_btns">
          <div class="one_half"><a target="_blank" rel="nofollow noreferrer" href="#" id="login_form" class="btn">Login</a></div>
          <div class="one_half last"><a target="_blank" rel="nofollow noreferrer" href="#" id="register_form" class="btn">Sign up</a></div>
        </div>
      </div>

      <!-- Username & Password Login form -->
      <div class="user_login">
        <form>
          <label>Email / Username</label>
          <input type="text" />
          <br />

          <label>Password</label>
          <input type="password" />
          <br />

          <div class="checkbox">
            <input id="remember" type="checkbox" />
            <label for="remember">Remember me on this computer</label>
          </div>

          <div class="action_btns">
            <div class="one_half"><a target="_blank" rel="nofollow noreferrer" href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
            <div class="one_half last"><a target="_blank" rel="nofollow noreferrer" href="#" class="btn btn_red">Login</a></div>
          </div>
        </form>

        <a target="_blank" rel="nofollow noreferrer" href="#" class="forgot_password">Forgot password?</a>
      </div>

      <!-- Register Form -->
      <div class="user_register">
        <form>
          <label>Full Name</label>
          <input type="text" />
          <br />

          <label>Email Address</label>
          <input type="email" />
          <br />

          <label>Password</label>
          <input type="password" />
          <br />

          <div class="checkbox">
            <input id="send_updates" type="checkbox" />
            <label for="send_updates">Send me occasional email updates</label>
          </div>

          <div class="action_btns">
            <div class="one_half"><a target="_blank" rel="nofollow noreferrer" href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
            <div class="one_half last"><a target="_blank" rel="nofollow noreferrer" href="#" class="btn btn_red">Register</a></div>
          </div>
        </form>
      </div>
    </section>
  </div>
</div>
              </menu>   
          </div>
          <div class="clearfix"></div>      
      </div>
      <div class="clearfix"></div>
      </div>
   </div>

And I can't figure out what is wrong with it. Any help with this would be much appreciated, as I always sucked at Javascript and JQuery. Thanks!

Ad

Answer

I can't say I know exactly what you're trying to accomplish, but my guess is that nothing was working at all because of incomplete source file paths.

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.leanmodal/1.1/jquery.leanmodal.min.js"></script>

With correct file paths I was able to see a modal that asked me to register.

Ad
source: stackoverflow.com
Ad