Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Location
    NY
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    i'm new to scripting

    hi all,

    i'm almost done with my website but want to add a login modal for my clients.
    i followed a tutorial on how to design it and get it working in a new index.html with it's own stylesheet and it works great. the problem is when i try to add this to my website it doesn't work. i'm assuming it has to do with the fact that i already have a stylesheet in my current website. i'm very new to this so i'm sorry if this doesn't make sense. any help would be greatly appreciated!

    below is the login html i made, but when i add it to my site with the already existing style.css it doesn't work


    thanks!

    Code:
    <!doctype html>
    <html lang="en-US"><head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      <title>Modal Login Window Demo</title>
      <link rel="stylesheet" type="text/css" media="all" href="css/modal_style.css">
      <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
      <!-- jQuery plugin leanModal under MIT License http://leanmodal.finelysliced.com.au/ -->
    </head>
    
    <body>
    <div id="loginmodal" style="display:none;">
      <h1>FTP Login</h1>
        <form id="loginform" name="loginform" method="post" action="js/login/index.html">
          <label for="server">Server:</label>
          <input type="text" name="server" id="server" class="txtfield" tabindex="1">
           <label for="username">Username:</label>
          <input type="text" name="username" id="username" class="txtfield" tabindex="2">
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" class="txtfield" tabindex="3">
          
          <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
        </form>
      </div>
    <a href="#loginmodal"  id="modaltrigger">Clients</a>
    <script type="text/javascript">
    $(function(){
      $('#loginform').submit(function(e){
        return false;
      }); 
      $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
    });
    </script>
    </body>
    </html>
    Last edited by VIPStephan; 08-11-2013 at 05:02 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    What does “it doesn’t work” mean?
    Got a live version for us?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,306
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Why have a cryptic word " Clients" on a blank screen? And why load not one jquery library, but two for such a small HTML page? Your overhead is through the roof.
    Why not just show the login page if that's what needs to be done?
    Code:
    <!doctype html>
    <html lang="en-US"><head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      <title>Modal Login Window Demo</title>
      <link rel="stylesheet" type="text/css" media="all" href="css/modal_style.css">
    </head>
    
    <body>
    <div id="loginmodal" >
    <h1>FTP Login</h1>
    <form id="loginform" name="loginform" method="post" action="js/login/index.html">
    	<label for="server">Server:</label>
    	<input type="text" name="server" id="server" class="txtfield" tabindex="1"><br />
    	<label for="username">Username:</label>
    	<input type="text" name="username" id="username" class="txtfield" tabindex="2"><br />
    	<label for="password">Password:</label>
    	<input type="password" name="password" id="password" class="txtfield" tabindex="3"><br />
    	<input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3">
    </form>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Location
    NY
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for the feedback.

    i've now been able to merge some of the modal html code to my site but the problem is based off the tutorial i read it wants me to add this code
    <link rel="stylesheet" type="text/css" media="all" href="css/modal.css">
    but i already have a stylesheet for my main site. is there a way to tell it to use a 2nd stylesheet when someone clicks on the "client" button?

    below is the code and my site is www.lizberndt.com which is now live.


    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/grid.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="images/favicon2.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/gallery.js" type="text/javascript"></script>
    <script src="js/scripts.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>


    <!--[if lt IE 9]>
    <div class='alc' style=' clear: both; text-align:center; position: relative; z-index:9999;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
    <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
    </div>
    <![endif]-->
    <!--[if lt IE 9]><script src="js/html5.js" type="text/javascript"></script><![endif]-->
    <!--[if IE]><link href="css/ie_style.css" rel="stylesheet" type="text/css" /><![endif]-->
    <script type="text/javascript">
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    </script>
    </head>
    <body>
    <div id="pageLoader"></div>
    <div id="galleryHolder">
    <div id="imageHolder">
    <img src="images/background.jpg" alt="" />
    </div>
    </div>
    <div id="gspinner" class="spinner"></div>
    <div id="glob">
    <header>
    <blockquote>&nbsp;</blockquote>
    <h1><a href="#!/home"><img src="images/logo3.png" alt="" /></a></h1>
    <div class="soc"> <span class="fl">Social:</span>
    </div>
    </header>
    <nav class="splash">
    <ul>
    <li class="li1 home"> <a href="#!/home"><span>home</span></a></li>
    <li class="li2 about"> <a href="#!/about"><span>about</span></a></li>
    <div class="li3 none"> <img src="images/00_lizlogo.png" alt="" width="750" height="75" /></a> </div>
    <li class="li4 works"> <a href="#!/works"><span>work</span></a></li>
    <li class="li5 ontacts"> <a href="#!/contacts"><span>contact</span></a></li>
    </ul>
    </nav>
    <article id="content" class="container_12">
    <ul>
    </article>
    <footer>
    <div class="inner">
    <pre class="und nocolor privacy">lizberndt &copy; 2013 <a href="#!/privacy"></a><!-- {%FOOTER_LINK} --></pre>
    <nav>
    <ul>
    <li><a href="#!/home">Home</a></li>
    <li><a href="#!/about">About</a></li>
    <li><a href="#!/works">Work</a></li>
    <li><a href="#!/contacts">Contact</a></li>
    <li class="last"><a href="#loginmodal" id="modaltrigger">Clients</a>

    </ul>
    </nav>
    </div>
    </footer>
    </div>
    <script type="text/javascript">
    $(function(){
    $('#loginform').submit(function(e){
    return false;
    });
    $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".fancybox").fancybox();
    });
    $(function(){
    $('#loginform').submit(function(e){
    return false;
    });
    $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
    });
    </script>

    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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