I just need All Kinds of Help....

**aqutenolej** · 09-14-2010 08:48 AM

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";
	}
	}

**Fang** · 09-14-2010 08:54 AM

Code:

var joinButton=document.getElementsByTagName("a")[index];

**aqutenolej** · 09-14-2010 08:58 AM

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.

**Fang** · 09-14-2010 09:00 AM

joinButton references what?

**aqutenolej** · 09-14-2010 09:04 AM

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.

**Fang** · 09-14-2010 09:23 AM

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

**aqutenolej** · 09-14-2010 09:29 AM

Thank you so much... i feel so stupid... u are amazing... someone should give you an award. lol.

**Fang** · 09-14-2010 09:33 AM

Does that cure all the problems?
Post the new documents if further help is required.

**aqutenolej** · 09-14-2010 09:36 AM

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.

**aqutenolej** · 09-14-2010 09:49 AM

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>

**aqutenolej** · 09-14-2010 10:21 AM

nvm... i've fixed it... lol. im getting the hang of things... sry for the burdon.

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

Thread Tools

Display

I just need All Kinds of Help....

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions