SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member Cyber Null's Avatar
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change image depending on input length

    I wanted to change my image depending on input length. For example, if for Username input length of text is greater then 4 , change image. For password it could be minimum 6 (so greater then 5). But a real problem comes to email. I want javascript to check if valid form of email is typed in like: example@mail.com . I don't know how to do any of this but I hope some of you can help me. Here is my kontakt.html page:
    Code:
    <!DOCTYPE HTML>
    <html>
    <title>Scientistic template</title>
    <link rel="icon" href="Slike/favicon.ico" />
    	<head>
    			<link rel="stylesheet" type="text/css" href="stil.css">
    		<meta name="author" content="Aleksandar Arsic" />
    		<meta name="description" content="Template Srpske IT edukacije" />
    		<meta name="keywords" content="Template,Srpska IT edukacija" />
    		<meta charset="UTF-8" />
    		<script type="text/javascript">
    		var textBox = document.getElementById("name");
    		var textLength = textBox.value.length;
    		</script>
    	</head>
    	<body>
    		<div id="header">
    			<img src="Slike/erlenmajer.png">
    			<p>Science<span>.org</span></p>
    			<ul id="nav">
    				<li><a href ="pocetna.html">Home</a></li>
    				<li><a href ="projekti.html">Projects</a></li>
    				<li><a href ="#">About us</a></li>
    				<li><a href ="#">Contact</a></li>
    			</ul>
    		</div>
    		<div id="contact">
    		<table>
    			<tr>
    				<td style="text-align:right !important;padding-right:20pt;"><p>Name:</p></td>
    				<td><input type="text" id="name"/><img src="Slike/checkmark-false.png" id="IME" style="vertical-align:middle;margin-left:10px;" width="24px" height="24px"></td>
    				
    			</tr>
    			<tr>
    				<td style="text-align:right !important;padding-right:20pt;"><p>Title:</p></td>
    				<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
    			</tr>
    			<tr>
    				<td style="text-align:right !important;padding-right:20pt;"><p>Email:</p></td>
    				<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
    			</tr>
    			<tr>
    				<td style="text-align:right !important;padding-right:20pt;"><p>Message:</p></td>
    				<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
    			</tr>
    		</table>
    		</div>
    		<div id="footer">
    		<table id="foot">
    		<tr>
    			<td>
    			<p>Social</p><br>
    			<a href="#"><img src="Slike/facebook.png" id="fb" title="Facebook" onmouseover="this.src='Slike/facebook-hover.png'" onmouseout="this.src='Slike/facebook.png'" /></a>
    			<a href="#"><img src="Slike/twitter.png" onmouseover="this.src='Slike/twitter-hover.png'" onmouseout="this.src='Slike/twitter.png'"/></a>
    			<a href="#"><img src="Slike/youtube.png" onmouseover="this.src='Slike/youtube-hover.png'" onmouseout="this.src='Slike/youtube.png'"/></a>
    			<a href="#"><img src="Slike/google+.png" onmouseover="this.src='Slike/google+-hover.png'" onmouseout="this.src='Slike/google+.png'"/></a>
    			<a href="#"><img src="Slike/linkedIn.png" onmouseover="this.src='Slike/linkedIn-hover.png'" onmouseout="this.src='Slike/linkedIn.png'"/></a>
    			<a href="#"><img src="Slike/mail.png" onmouseover="this.src='Slike/mail-hover.png'" onmouseout="this.src='Slike/mail.png'"/></a>
    			</td>
    			<td>
    			<p>Partneri</p><br>
    			<a href="#">Partner 1</a><br>
    			<a href="#">Partner 2</a><br>
    			<a href="#">Partner 3</a><br>
    			<a href="#">Partner 4</a><br>
    			<a href="#">Partner 5</a><br>
    			</td>
    			<td>
    			<p>Copyright &copy; www.srpskaitedukacija.org</p>
    			</td>
    		</tr>
    		</table>
    		</div>
    	</body>
    </html>
    And CSS:
    Code:
    		/*Stilizovanje stranice*/ 
    		
    		
    * {
    padding:0;
    margin:0;
    }
    @font-face {
    	font-family:Header;
    	src: url('Fonts/THEOREM.ttf');
    }
    body {
    background-color:#dfdfdf;
    }
    #header {
    position:relative;
    line-height:200pt;
    width:100%;
    height:200pt;
    background-color:#1a1a1a;
    clear:both;
    }
    #header img {
    margin-left:50pt;
    vertical-align:middle;
    }
    #header p {
    display:inline-block;
    font-family:Header;
    margin-left:10pt;
    font-size:20pt;
    color:#fff;
    }
    #header p span {
    color:#84a3e8;
    }
    #nav {
    margin-right:100pt;
    float:right;
    display:inline;
    }
    #nav li {
    list-style-type:none;
    display:inline-block;
    padding-right:10pt;
    padding-left:10pt;
    }
    #nav li a {
    color:#fff;
    font-family:Header;
    font-size;:15pt;
    text-decoration:none;
    }
    #nav li a:hover {
    color:#84a3e8;
    }
    #container {
    margin-top:50pt;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:50pt;
    }
    #container td {
    text-align:center;
    }
    #container td p {
    font-family:Header;
    font-size:14pt;
    color:#000;
    }
    #footer {
    width:100%;
    height:200pt;
    background-color:#fff;
    border-top:1px solid #b4b4b4;
    }
    #foot {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    }
    #foot td {
    height:200pt;
    text-align:center;
    vertical-align:middle;
    }
    #foot p {
    font-family:Header;
    font-size:12pt;
    color:#000;
    }
    #foot a {
    text-decoration:none;
    font-family:Header;
    color:#84a3e8;
    font-size:12pt;
    }
    #foot a:hover {
    color:#333333;
    }
    #news {
    width:100%;
    height:500pt;
    background-color:#e9e9e9;
    border-top:1px solid #424141;
    border-bottom:1px solid #c4c4c4;
    }
    #news table {
    width:80%;
    height:500pt;
    margin-left:auto;
    margin-right:auto;
    }
    #news table td {
    font-family:Header;
    font-size:12pt;
    }
    #text {
    text-align:left !important;
    text-indent:50px;
    }
    .container {
    width:500px;
    height:400px;
    background-color:#fff;
    border-bottom:15px solid #9c9c9c;
    border-left:1px solid #9c9c9c;
    border-top:1px solid #9c9c9c;
    border-right:1px solid #9c9c9c;
    }
    #img1 {
    opacity:0.7;
    background-image: url('Slike/stock1.jpg');
    background-repeat:no-repeat;
    }
    #img1:hover,#img2:hover {
    opacity:1;
    }
    #img2 {
    opacity:0.7;
    background-image: url('Slike/stock2.jpg');
    background-repeat:no-repeat;
    }
    #projects {
    width:100%;
    height:400pt;
    background-color:#e0e6f4;
    border-top:1px solid #424141;
    }
    #projects table {
    height:400pt;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    }
    #projects table td {
    padding:10pt;
    }
    .projekat {
    background-color:#fff;
    width:100%;
    height:100px;
    border-left:10px solid #cdd4e6;
    border-top:1px solid #cdd4e6;
    border-right:1px solid #cdd4e6;
    border-bottom:1px solid #cdd4e6;
    text-align:center;
    }
    .projekat a{
    font-family:Header;
    font-size:10pt;
    margin-top:5px;
    text-decoration:none;
    }
    progress[value] {
    -webkit-appearance: none;
    appearance: none;
    width:90%;
    height:60px;
    margin-top:10px;
    } 
    progress[value]::-webkit-progress-bar {
      background-color: #eee;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }
    progress[value]::-webkit-progress-value {
    background-color:#7f91c0;
    }
    progress[value]::-moz-progress-bar {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }
    progress[value]::-moz-progress-bar  {
    background-color:#7f91c0;
    }
    #contact {
    width:100%;
    height:400pt;
    background-color:#5f0504;
    border-top:1px solid #424141;
    border-bottom:1px solid #340302;
    }
    #contact table {
    height:400pt;
    margin-left:32%;
    }
    #contact table td {
    text-align:center;
    }
    #contact table td p {
    color:#fff;
    font-family:Header;
    font-size:12pt;
    }
    input {
    font-family:Helvetica;
    font-size:10pt;
    color:#fff;
    width:300px;
    height:40px;
    background-color:#1d1d1d;
    border:1px solid #6e0a0a;
    }
    input:focus {
    box-shadow: 0px 0px 15px #9c100e;
    outline: none
    }
    #contact table td +td{white-space:nowrap}
    For message field input it would be okay just not to less then 10 characters. If someone know how this can be achieved I would be really thankful.

  2. #2
    SitePoint Member Cyber Null's Avatar
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if bumping threads is allowed here, so I will bump it. If it's not allowed delete this post =)


Bookmarks

Posting Permissions

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