Jump to content

I need a little help with this script

yisera

By yisera
in JavaScript

 Share

Recommended Posts

yisera Newbie

yisera

Posted
Posted

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 comment
Share on other sites
yisera Newbie

yisera

Posted
  • Author
Posted

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 comment
Share on other sites
yisera Newbie

yisera

Posted
  • Author
Posted

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 comment
Share on other sites
Don E Invested Member

Don E

Posted
Posted

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 comment
Share on other sites
yisera Newbie

yisera

Posted
  • Author
Posted

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...