www.webdeveloper.com
Results 1 to 11 of 11

Thread: I just need All Kinds of Help....

  1. #1
    Join Date
    Aug 2010
    Posts
    24

    Post I just need All Kinds of Help....

    so, I'm designing my webpage and i need some of the dynamic parts to work before i can move on with the design. however, everytime i try to make new functions or anything, they never work. and i know this isnt the section for this question, but my css3 only works in google chrome, none of the animations are working in any other browser. is there something i'm missing. I'll make the parts that i'm talking about bold in the code. All i'm trying to do is make the join button slide down when click without firing a link and slide back up if its clicked again. the other div expands to show the rest of the subscription form. I've tried so many methods trying to figure this out... if anyone can help me, i'd appreciate it. ask me any question to clarify.


    This is the Html and Css. They were actually in two seperate files, but i combined them just to show you.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    
    <style type="text/css">
    @font-face {
      font-family: 'Carbon Block';
      src: url('font/carbonbl.eot');  /* IE6+ */
      src: local('Carbon Block'), 
            url('font/CarbonBl.ttf') format('truetype');  /* Saf3+,Chrome,FF3.5,Opera10+ */
    }
    
    .carbon {
    	font-family:"Carbon Block"
    	color:#fff;
    }
    
    #Wrapper{
    	width:1900px;
    	height:1200px;
    	position:absolute;
    	overflow:hidden;
    	left:auto;
    	background:url(Login_Bkgds/Background_1.jpg);
    	-moz-background-size:cover;
    	background-size:cover;
    	background-repeat:no-repeat;
    	
    }
    
    #contentArea {
    	height:700px;
    	width:1700px;
    	position:absolute;
    	top:270px;
    	left:-30px;
    	overflow:hidden;
    	border-width: .3em;
    	border-style:solid;
    	border-color: #000;
    	-webkit-box-shadow:0px 0px 80px white;
    	-moz-box-shadow:0px 0px 80px white;
    	-o-box-shadow:0px 0px 80px white;
    	box-shadow:0px 0px 80px white;
    }
    
    #loginPane {
    	height:720px;
    	width:2000px;
    	background:url(Login_Bkgds/Login_pane/Background_1.jpg);
    	position:absolute;
    	left:-100px;
    	top:-10px;
    	-moz-border-radius:60px;
    	-webkit-border-radius:60px;
    	border-radius:60px;
    	-webkit-transition-property:all;
    	-o-transition-property:all;
    	-moz-transition-property:all
    	transition-property:all;
    	-webkit-transition-duration:.1s;
    	-o-transition-duration:.9s;
    	-moz-transition-duration:.9s;
    	transition-duration:.9s;
    }
    
    #dateClip {
    	height:170px;
    	width:786px;
    	position:absolute;
    	top:100px;
    	left:891px;
    	background-color:rgba(0,0,0,.4);
    	overflow:hidden
    }
    
    #dateContent {
    	font-family:"Carbon Block";
    	font-size:300px;
    	color:#FFF;
    	width:12000px;
    	height:900px;
    	top:-65px;
    	left:-15px;
    	position:absolute;
    	opacity:.4;
    }
    
    #timeContent {
    	font-family:"Carbon Block";
    	font-size:150px;
    	color:#fff;
    	position:absolute;
    	top:50px;
    	left:170px;
    }
    
    #loginDiv {
    	height:600px;
    	width:400px;
    	margin-left:1200px;
    	margin-top:80px;
    	background-color:rgb(7,213,201);
    	-webkit-border-radius:30px;
    	-moz-border-radius:30px;
    	border-radius:30px;
    	-webkit-box-shadow:10px 10px 40px black;
    	-moz-box-shadow:10px 10px 40px black;
    	-o-box-shadow:10px 10px 40px black;
    	box-shadow:10px 10px 40px black;
    }
    
    #loginSignUp {
    	height:185px;
    	width:350px;
    	position:absolute;
    	margin-top:55px;
    	margin-left:25px;
    	font-family:"Carbon Block";
    	font-size:36px;
    	color:#fff;	
    	overflow:hidden;
    	-webkit-transition-property:all;
    	-o-transition-property:all;
    	-moz-transition-property:all
    	transition-property:all;
    	-webkit-transition-duration:1s;
    	-o-transition-duration:1s;
    	-moz-transition-duration:1s;
    	transition-duration:1s;
    	transition-timing-function:ease-in-out;
    	-webkit-transition-timing-function:ease-in-out;
    	-o-transition-timing-function:ease-in-out;
    	-moz-transition-timing-function:ease-in-out
    }
    
    #joinButton {
    	
    	font-family:"Carbon Block";
    	font-size:36px;
    	color:#fff;
    	position:absolute;	
    	margin-top:240px;
    	margin-left:150px;
    	-webkit-transition-property:all;
    	-o-transition-property:all;
    	-moz-transition-property:all
    	transition-property:all;
    	-webkit-transition-duration:1s;
    	-o-transition-duration:1s;
    	-moz-transition-duration:1s;
    	transition-duration:1s;
    }
    
    a {
    	-webkit-transition-property:all;
    	-o-transition-property:all;
    	-moz-transition-property:all
    	transition-property:all;
    	-webkit-transition-duration:.1s;
    	-o-transition-duration:.1s;
    	-moz-transition-duration:.1s;
    	transition-duration:.1s;
    }
    a:link {
    	color: #FFF;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    font-size:50px;
    }
    a:active {
    	text-decoration: none;
    }
    </style>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    <div id='Wrapper'>
    	<div id="dateClip">
        	<div id='dateContent'>Aug<font size="5px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  		
            </font>12<font size="5px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  </font>10
            </div>
    		
          <div id='timeContent'>XX:XX:XX:XX</div>
    	</div>
    	
       
        <div id="contentArea">
    		<div id="loginPane" class='carbon'>
           	  <div id="loginDiv">
       	  		<div id='loginSignUp'>
                   <p><form>
                   Alias_
                   <br><input type="text" size="53" /><br>
                   Passcode_
                   <br><input type="password" size="53" /><br>
                       <input type="password" size="53" /><br>
                   Email_
                   <br><input type="text" size="53" /><br>
                   Zipcode_&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dob_
                   <br><input type="text" size="19"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="19.5" /><br>
                   Name_
                   <br><input type="text" size="53">
                   </form>
                </div>
                <div id="joinButton"><a href="javascript:joinUs(document.getElementById('loginSignUp'))" onclick="joinUs('document.getElementById("loginSignUp")')">Join</a></div>
              </div>			
            </div>
    	</div>
    </div>
    
    <script type="text/javascript" src="Login.js"></script>
    </body>
    </html>

    and here is the Java Script.
    Code:
    window.onload=init(document.getElementsByTagName("div")[2], document.getElementsByTagName("div")[3]);
    var joinButton=document.getElementByTagName("a");
    var joinDiv=document.getElementById('joinButton');
    var loginDiv=document.getElementById(loginDiv).style.backgroundColor
    
    
    function init(obj, obj2) {
    	
    
    	var d_colors = new Array("rgb(81,50,123)", "rgb(230,198,20)", 		
    	"rgb(222,44,44)", "rgb(7,213,201)", "rgb(7,51,213)", 
    	"rgb(137,15,2)", "rgb(38,96,23)");
    
    	var m_names = new Array("Jan", "Feb", "Mar", 
    		"Apr", "May", "Jun", "Jul", "Aug", "Sep", 
    		"Oct", "Nov", "Dec");
    
    	var d = new Date();
    	var curr_day = d.getDay();
    	loginDiv.innerHTML
    		
    	var curr_date = d.getDate();
    
    	var curr_month = d.getMonth();
    	var curr_year = d.getFullYear();
    
    	obj.innerText=curr_date + " " + m_names[curr_month] + " " + 			
    		curr_year;
    
    	var curr_hour = d.getHours();
    
    		if (curr_hour > -1)
       			{
       			curr_hour = 24 - curr_hour;
       			}
    		curr_hour = curr_hour + "";
    
    		if (curr_hour.length == 1)
       			{
       			curr_hour = "0" + curr_hour;
       			}
    			
    	var curr_min = d.getMinutes();
    
    		curr_min = curr_min + "";
    
    		if (curr_min.length == 1)
       			{
       			curr_min = "0" + curr_min;
       			}
    	
    	var curr_sec = d.getSeconds();
    		curr_sec = curr_sec + "";
    
    		if (curr_sec.length == 1)
       			{
       			curr_sec = "0" + curr_sec;
       			}
    		if (curr_sec > -1)
       			{
       			curr_sec = 60 - curr_sec;
       			}
    	var curr_msec = d.getMilliseconds();
    	obj2.innerText=curr_hour + ":" + curr_min + ":" 
    + curr_sec + ":" + curr_msec ;
    
    
    
    
    setTimeout('init(document.getElementsByTagName("div")[2], document.getElementsByTagName("div")[3])', 1000);
    }
    
    	function joinUs (obj) {
    	var open="240px";
    	if ('joinButton.style.marginTop==="240px"'){
    	joinButton.style.marginTop="550px";
    	obj.style.height="500px";
    	
    	}
    	else {
    	joinButton.style.marginTop="240px";
    	obj.style.height="185px";
    	}
    	}

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    var joinButton=document.getElementsByTagName("a")[index];

  3. #3
    Join Date
    Aug 2010
    Posts
    24
    i've done that.... when i change that to getElementsByTagName nothing happens at all... thats the only reason i kept it out. it was acutally a typo at first but when i found out the code doesnt work without it.... it stuck. im just so lost.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    joinButton references what?

  5. #5
    Join Date
    Aug 2010
    Posts
    24
    i highlited a div.

    Code:
     <div id="joinButton"><a href="javascript:joinUs(document.getElementById('loginSignUp'))" onclick="joinUs('document.getElementById("loginSignUp")')">Join</a></div>
    this link....

    i wanted to just reference the div, but when i try to use getElementById it doesnt grab the div. nor does any event handlers i use on the div ever work. javascript is so frustrating.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    IE propriety code, use innerHTML
    Code:
    obj2.innerText=
    Remove single quotes
    Code:
    if ('joinButton.style.marginTop==="240px"'){
    Pointless duplication and incorrect referencing
    Code:
    <div id="joinButton"><a href="javascript:joinUs(document.getElementById('loginSignUp'))" onclick="joinUs('document.getElementById("loginSignUp")')">Join</a></div>
    // change to
    <div id="joinButton"><a href="#" onclick="joinUs(document.getElementById('loginSignUp')); return false">Join</a></div>
    3 missing semi-colons in css, in declarations prior to transition-property:all;

    <font> is depreciated; use css instead.

    Mixing xhtml with html
    Code:
    <input type="text" size="19.5" /><br>
    Validate html5, css, JavaScript

  7. #7
    Join Date
    Aug 2010
    Posts
    24
    Thank you so much... i feel so stupid... u are amazing... someone should give you an award. lol.

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Does that cure all the problems?
    Post the new documents if further help is required.

  9. #9
    Join Date
    Aug 2010
    Posts
    24
    yes... it honestly fixes everything. lol. your the man. you always hear about the people the make the websites, but never the people that help. thanks dude. ur awesome.

  10. #10
    Join Date
    Aug 2010
    Posts
    24
    ok... i have run into one problem.... when i took out the extra javascript link the onclick didnt work... so i took out the onclick, and it works... but why wont it work with an onclick?? event handlers never work for me.

    Code:
    <div id="joinButton"><a href="javascript:joinUs(document.getElementById('loginSignUp'))" >Join</a></div>

  11. #11
    Join Date
    Aug 2010
    Posts
    24
    nvm... i've fixed it... lol. im getting the hang of things... sry for the burdon.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles