Jump to content

I need a little help with this script


Recommended Posts

I'm building this web site for a CS major career for a college. I'm working on the login part now, but I thought it would be really cool and efficient (I assume) if instead of redirecting the user to another html page to do all the login information, to just do like most websites do now, dim the background to a dark color and pop-up a form with the username and password.. I know that has something to do with ajax and some javascript.. But the problem is that I've been looking for resources or tutorials on how to do it, but I haven't found one yet. If someone has any tutorial link, or any information on how to do this I would be really grateful!

Link to post
Share on other sites

I've been looking for it, came across a few websites with some examples but I'm still not clear about it, I mean what should the javascript for it be? Is it like a prompt? I'm not sure, Any more help would be really appreciated!

Link to post
Share on other sites

Ok I found the exact name! The name is dialog(), which is a plugin from jquery used for those popups like the ones you have on this forum.. I'm trying to go through the code on this forum but I can't find the key parts that make the div with the login form actually be a dialog.. So i've been trying it on my page.. I'll post the code to see if you guys can help me find what I'm doing wrong..:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ICC-INICIO</title><link href="CSS3 SHEETS/General LAYOUT.css" rel="stylesheet" type="text/css"><link href="CSS3 SHEETS/jquery.ui.dialog.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="Scripts/Clock script.js"></script><script type="text/javascript" src="Scripts/FechaActual.js"> </script><script type="text/javascript" src="Scripts/jquery.ui.core.js"></script><script type="text/javascript" src="Scripts/jquery.ui.dialog.js"></script><script type="text/javascript" src="Scripts/jquery.ui.position.js"></script><script type="text/javascript" src="Scripts/jquery.ui.widget.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>  $(document).ready(function(){  $("#loginIcon").click(function() {    $( "#dialog" ).dialog({modal: true, autoOpen: false, closeOnEscape: true, });   });  });</script> </head><body onLoad="updateClock(); setInterval('updateClock()', 1000); date(); setInterval('date',1000); fadeEffect()">  <div id="franjaSuperior">  <div id="contenidoFranjaSuperior">  <div id="header">  <div id="menu">   <img src="Imagenes/icc letras 2.jpg" style="opacity: 1;" class="header" title="Menu-ICC"/>  </div>    <div id="searchBar">    <form name="search" id="searchbox"  action="">    <input id="searchbox" name="search" type="text" class="searchBar" placeholder="Search" maxlength="100" align="middle"><input id="searchbutton" name="searchbutton" type="image" src="Imagenes/search button bar.jpg" value="" class="submit">    </form>    </div>    <span id="loginIcon">	 <img src="Imagenes/Lock_icon.png" alt="Login ICC UNICAH SISTEMAS PROGRAMACION WEB" width="28" height="28" class="login" title="Click To Login" onselectstart="return false;"/>	 <h2 class="loginText" title="Click To Login" onselectstart="return false;">LOG IN</h2>    </span>    <div id="wrapAroundClock" class="clockWrapper">	   <span id="currentDate" class="fecha" onselectstart="return false;" title="La Fecha Actual"> </span>	   <span id="clock" class="fecha" title="la Hora Actual" onselectstart="return false;"> </span>    </div>   </div>  </div>  </div><div id="contenedorPrincipal">	  <p>Testing Testing More Testing </p>				  	  <div id="contenedorDinamico">	  </div>	  <div id="scrollableContainer">	   <div id="noticia_1">   </div>	   <div id="noticia_2">	   </div>	    <div id="noticia_3">	    </div>	  </div>	  </div>	  <div id="footer">  <div id="footer_1">		 <h3 class="footer_2Text">Compartelo en las Redes Sociales</h3>		    <ul>		  <li><a href="https://www.facebook.com/icc.unicah" ><img src="Imagenes/facebook (2).png" class="imagenesFooter" height="16" width="16" title="Facultad ICC en Facebook."/>Difundelo!</a></li>		  <li><a href="#"><img src="Imagenes/twitter (2).png" title="Siguenos en Twitter." height="16" width="16" class="imagenesFooter"/>Siguenos!</a></li>		  <li><a href="#"><img src="Imagenes/wordpress (2).png" title="Publicalo en tu Blog" height="16" width="16" class="imagenesFooter"/>Publicalo!</a></li>		  <li><a href="#"><img src="Imagenes/13399187032100953665.png" title="Compartelo en G+." height="16" width="16" class="imagenesFooter"/>Compartelo!</a></li>		 </ul>	    </div>	    <div id="footer_2">		 <h3 class="footer_2Text">Articulos Informativos</h3>		 <ul>			 <li><a href="#">Que es Ingenieria en Ciencias de la Computacion?</a></li>			    <li><p></p></li>			 <li><a href="#">Mision Vision y Politica de la Calidad de la Facultad</a></li>			 <li><p></p></li>			    <li><a href="#">Historia de la Facultad</a></li>			 <li><p></p></li>			    <li><a href="#">Actual Decano y Asociacion de Estudiantes</a></li>		 </ul>	    </div>	    <div id="footer_3">		 <h3 class="footer_2Text">Sobre Esta Pagina</h3>		  <ul>				 <li><a href="#">Desarrolladores</a></li>		   <li><p></p></li>		   <li><a href="#">Colaboradores</a></li>		   <li><p></p></li>		   <li><a href="#">Proyectos Futuros</a></li>		   <li><p></p></li>		   <li><a href="#">Contactanos</a></li>		  </ul>	    </div>	  </div>	  <div id="dialog">		 <h3>Ingresa la informacion para que puedas ingresar.</h3>		 <form name="login">		    <ul>			 <li><input type="text" placeholder="Nombre de Usuario"/></li>			    <li><input type="password" placeholder="ContraseƱa"/></li>			    <li><input type="checkbox"/>Recordarme.</li>			    <li><input type="button" value="LogIn"></li>		    </ul>		    </form>	  </div>    </div></body></html>

That's what I've seen around mostly.. the way to call the dialog.. Not sure what else to do.. I have attached 2 css files, the one from the jquery theme, and the other one which is proper from the page.Do you need me link One of the css ones? or both? Not sure if there is something wrong with the script which calls the function as well.

Link to post
Share on other sites

Sometime ago I made something you're referring to for experimenting reasons. I attached it so you can download it and open it in a browser. I recommend a updated browser like Chrome or Firefox. To check out the actual code, just open it in your favorite text editor.Appearance wasn't my objective so don't wonder about that. ;) I don't have the form going to anything, but if I did, it would be Ajax/PHP. Other than that, if you're wondering how to get the effect of dimming the background and the log-in popup box fades into view, hopefully this will give you an idea. It's not perfect, but you'll get the idea.(that's if, that's what you're looking for)popup.html

Link to post
Share on other sites

Wow congrats for that script! That is pretty awesome! I'll check it up tomorrow.. Yeah I'm working with html.. for appearance don't worry, I'll have a graphics designer to take care of that.. I'm a programmer not a GD ;) I'll try and see if I can add some visual effects with some jquery plugins as well! Thanks a lot for that!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...