www.webdeveloper.com
Results 1 to 4 of 4

Thread: Noob... AS3 to javascrpt/jquery?

  1. #1
    Join Date
    Jan 2014
    Posts
    10

    Noob... AS3 to javascrpt/jquery?

    hello all,

    Noob here trying to teach himself some JavaScript and jquery...

    So have some Flash ActionScript3 experience, I had made this a while back and was wondering how to translate it over into JavaScript and jquery. I have started to try but I have no idea if I'm going about it right or not. Not to mention I am still learning the syntax for these two new languages. I'll post the actionscript than what I have in html, css, and what little I have of jquery. lo,l the jquery is quite sad. also if you want I can email you the .swf file so you can see what I am trying to accomplish. Thank you in advance for any help that is sent in my direction.

    ACTION SCRIPT 3:
    Code:
    stop();
    
    import flash.events.MouseEvent;
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    import flash.display.MovieClip;
    
    var photographyColor:ColorTransform = new ColorTransform();
    			photographyColor.color = 0xFF0082;
    var videoColor:ColorTransform = new ColorTransform();
    			videoColor.color = 0x0099FF;
    var webColor:ColorTransform = new ColorTransform();
    			webColor.color = 0x7051FC;
    var designColor:ColorTransform = new ColorTransform();
    			designColor.color = 0xF53C12;
    var connectColor:ColorTransform = new ColorTransform();
    			connectColor.color = 0xF0C20D;
    var theMindsColor:ColorTransform = new ColorTransform();
    			theMindsColor.color = 0x7EA55D;
    
    var baseColor:ColorTransform = new ColorTransform();
    			baseColor.color = 0x2A2A2A;
    			
    var photoNav_mc:MovieClip = new photo_nav();
    var videoNav_mc:MovieClip = new video_nav();
    			
    
    
    var clipArray:Array = [photo_btn, video_btn, web_btn, design_btn, connect_btn, minds_btn];
    var subNavArray:Array = [photo_nav, video_nav]
    
    for (var i:int = 0; i < clipArray.length; i++) {
    	clipArray[i].buttonMode = true;
    	clipArray[i].addEventListener(MouseEvent.CLICK, clicked);
    	clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over);
    }
    
    
    follower_mc.visible = false;
    
    function over (event:MouseEvent):void{
    	follower_mc.visible = true;
    	
    	event.currentTarget.buttonMode = true;
    	switch (event.currentTarget.name) {
    		case "photo_btn" :
    		var photoTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 113, 1, true)
    		var photoxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 237.75, .5, true)
    		follower_mc.transform.colorTransform = photographyColor;
    		trace("photography");
    		break;
    		
    		case "video_btn" :
    		var videoTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 52, 1, true)
    		var videoxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 363.05, .5, true)
    		follower_mc.transform.colorTransform = videoColor;
    		trace("video");
    		break;
    		
    		case "web_btn" :
    		var webTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 39.1, 1, true)
    		var webxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 430.9, .5, true)
    		follower_mc.transform.colorTransform = webColor;
    		trace("web");
    		break;
    		
    		case "design_btn" :
    		var designTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 63.2, 1, true)
    		var designxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 485.35, .5, true)
    		follower_mc.transform.colorTransform = designColor;
    		trace("design");
    		break;
    		
    		case "connect_btn" :
    		var wconnectTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 74.1, 1, true)
    		var connectxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 563.25, .5, true)
    		follower_mc.transform.colorTransform = connectColor;
    		trace("connect");
    		break;
    		
    		case "minds_btn" :
    		var mindsTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 92.3, 1, true)
    		var mindsxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 649.65, .5, true)
    		follower_mc.transform.colorTransform = theMindsColor;
    		trace("minds");
    		break;
    	}
    }
    
    
    var btnNumber = 0;
    
    function clicked (event:MouseEvent):void{
    	for (var i:int = 0; i < clipArray.length; i++) {
    		if (event.currentTarget == clipArray[i]) {
    			clipArray[i].mouseEnabled = false;
    			clipArray[i].alpha = 0.5;
    		} else {
    			clipArray[i].mouseEnabled = true;
    			clipArray[i].alpha = 1;
    		}
    	}
    	var clickedButton:String = (event.currentTarget.name);
    	trace(clickedButton);
    	var btnTweenout:Tween = new Tween(event.currentTarget, "alpha", Strong.easeInOut, 1, .5, .5, true);
    	
    	switch (event.currentTarget.name) {
    		case "photo_btn" :
    		addChild(photoNav_mc);
    		photoNav_mc.y = 250; 
    		photoNav_mc.x = 30;
    		btnNumber = 1;
    		var photoTweenin:Tween = new Tween(photoNav_mc, "alpha", Strong.easeInOut, 0, 1, 1, true)
    		trace("photography Clicked");
    			if (btnNumber == 1){
    				removeChild(videoNav_mc);
    				} else {
    					trace("not btn 2");
    				}
    		break;
    		
    		case "video_btn" :
    		addChild(videoNav_mc);
    		videoNav_mc.y = 250;
    		videoNav_mc.x = 30;
    		btnNumber = 2;
    		var videoTweenin:Tween = new Tween(videoNav_mc, "alpha", Strong.easeInOut, 0, 1, 1, true)
    		trace("video Clicked");
    			if (btnNumber == 2){
    			removeChild(photoNav_mc);
    			} else {
    				trace("not btn 1");
    			}
    		break;
    	}
    }
    MY NEW HTML:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Illusive Minds Media</title>
    
    <script src="js/jquery.js"></script><!-- jQuery Library -->
    
    
    <link rel="stylesheet" href="footer.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    <link rel="stylesheet" href="head.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    
    
    <!-- The following code targets IE6 only and enables mouse hover on non-anchor tags -->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="htc/ie6.css" />
    <![endif]-->
    
    </head>
    
    <body>
    
    	<div id="header"><!-- BEGIN HEADER -->
    
    		<div id="headerLogo">
    			<img  id="headerImage" class="center" src="img/headerLogo.png" alt="Illusive Minds Media"> 
    		</div>
    		
    		<nav id="navBar">
    			<a id="navPhoto" href="#">Photography</a>
    			<a id="navCinema" href="#">Cinematography</a>
    			<a id="navWeb" href="#">Web</a>
    			<a id="navDesign" href="#">Design</a>
    			<a id="navConnect" href="#">Connect</a>
    			<a id="navTheMinds" href="#">The Minds</a>
    		</nav>
    		
    		<div id="slider" class="center"></div>
    		
    	</div><!-- END HEADER -->
    	
    <!-- ________________-->
    
    
    
    <div id="footer"><!-- BEGIN FOOTER CONTAINER -->
    
    
        <ul id="footer_menu"><!-- Begin Footer Menu -->
        
        
            <li class="imgmenu"><a href="#"></a></li><!-- This Item is an Image -->
            
            
            <li><a href="#">My Account</a><!-- Begin Second Menu Item -->
            
                <ul class="dropup"><!-- Default Drop Up List -->
    				
    				<li><form id="login">
    					<h1>Log In</h1>
    						<fieldset id="inputs">
    							<input id="username" type="text" placeholder="Username" autofocus required>   
    							<input id="password" type="password" placeholder="Password" required>
    						</fieldset>
    						
    						<fieldset id="actions">
    							<input type="submit" id="submit" value="Log in">
    							<a href="">Forgot your password?</a><a href="">Register</a>
    						</fieldset>
    				</form></li>
    				
                </ul><!-- End Drop Up List -->
                
            </li><!-- End Second Menu Item -->
    
    
            <li class="right"><a href="#" class="drop">Logout</a><!-- Begin Right Aligned Item -->
                
            </li><!-- End Right Aligned  Item -->
    
    
        
        </ul><!-- End Footer Menu -->
    
    
    
        <!--<p><a href="#">StickyFooter</a> &copy; 2010 All Rights Reserved.</p> -->
    
    
    
        <ul id="social"><!-- Social Icons -->
        
        	<!-- The span is the text appearing on hover, use the tooltip class in the link -->
            <li><a href="#" class="tooltip"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/rss.png' alt="" /><span>RSS</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>
            
        </ul><!-- End Social Icons -->
    
    
    
    </div><!-- END FOOTER CONTAINER -->
    
    <form id="login">
        <h1>Log In</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="Username" autofocus required>   
            <input id="password" type="password" placeholder="Password" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="Log in">
            <a href="">Forgot your password?</a><a href="">Register</a>
        </fieldset>
    </form>
    
    
    <script src="js/nav.js"></script><!-- NavBar Animations -->
    
    
    </body>
    </html>

  2. #2
    Join Date
    Jan 2014
    Posts
    10
    Wow, i have no idea what happen there. here is all that is suppose to be up there...

    hello all,

    Noob here trying to teach himself some JavaScript and jquery...

    So have some Flash ActionScript3 experience, I had made this a while back and was wondering how to translate it over into JavaScript and jquery. I have started to try but I have no idea if I'm going about it right or not. Not to mention I am still learning the syntax for these two new languages. I'll post the actionscript than what I have in html, css, and what little I have of jquery. lo,l the jquery is quite sad. also if you want I can email you the .swf file so you can see what I am trying to accomplish. Thank you in advance for any help that is sent in my direction.

    ACTION SCRIPT 3:
    Code:
    stop();
    
    import flash.events.MouseEvent;
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    import flash.display.MovieClip;
    
    var photographyColor:ColorTransform = new ColorTransform();
    			photographyColor.color = 0xFF0082;
    var videoColor:ColorTransform = new ColorTransform();
    			videoColor.color = 0x0099FF;
    var webColor:ColorTransform = new ColorTransform();
    			webColor.color = 0x7051FC;
    var designColor:ColorTransform = new ColorTransform();
    			designColor.color = 0xF53C12;
    var connectColor:ColorTransform = new ColorTransform();
    			connectColor.color = 0xF0C20D;
    var theMindsColor:ColorTransform = new ColorTransform();
    			theMindsColor.color = 0x7EA55D;
    
    var baseColor:ColorTransform = new ColorTransform();
    			baseColor.color = 0x2A2A2A;
    			
    var photoNav_mc:MovieClip = new photo_nav();
    var videoNav_mc:MovieClip = new video_nav();
    			
    
    
    var clipArray:Array = [photo_btn, video_btn, web_btn, design_btn, connect_btn, minds_btn];
    var subNavArray:Array = [photo_nav, video_nav]
    
    for (var i:int = 0; i < clipArray.length; i++) {
    	clipArray[i].buttonMode = true;
    	clipArray[i].addEventListener(MouseEvent.CLICK, clicked);
    	clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over);
    }
    
    
    follower_mc.visible = false;
    
    function over (event:MouseEvent):void{
    	follower_mc.visible = true;
    	
    	event.currentTarget.buttonMode = true;
    	switch (event.currentTarget.name) {
    		case "photo_btn" :
    		var photoTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 113, 1, true)
    		var photoxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 237.75, .5, true)
    		follower_mc.transform.colorTransform = photographyColor;
    		trace("photography");
    		break;
    		
    		case "video_btn" :
    		var videoTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 52, 1, true)
    		var videoxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 363.05, .5, true)
    		follower_mc.transform.colorTransform = videoColor;
    		trace("video");
    		break;
    		
    		case "web_btn" :
    		var webTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 39.1, 1, true)
    		var webxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 430.9, .5, true)
    		follower_mc.transform.colorTransform = webColor;
    		trace("web");
    		break;
    		
    		case "design_btn" :
    		var designTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 63.2, 1, true)
    		var designxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 485.35, .5, true)
    		follower_mc.transform.colorTransform = designColor;
    		trace("design");
    		break;
    		
    		case "connect_btn" :
    		var wconnectTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 74.1, 1, true)
    		var connectxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 563.25, .5, true)
    		follower_mc.transform.colorTransform = connectColor;
    		trace("connect");
    		break;
    		
    		case "minds_btn" :
    		var mindsTween:Tween = new Tween(follower_mc, "width", Strong.easeOut, follower_mc.width , 92.3, 1, true)
    		var mindsxTween:Tween = new Tween(follower_mc, "x", Strong.easeInOut, follower_mc.x , 649.65, .5, true)
    		follower_mc.transform.colorTransform = theMindsColor;
    		trace("minds");
    		break;
    	}
    }
    
    
    var btnNumber = 0;
    
    function clicked (event:MouseEvent):void{
    	for (var i:int = 0; i < clipArray.length; i++) {
    		if (event.currentTarget == clipArray[i]) {
    			clipArray[i].mouseEnabled = false;
    			clipArray[i].alpha = 0.5;
    		} else {
    			clipArray[i].mouseEnabled = true;
    			clipArray[i].alpha = 1;
    		}
    	}
    	var clickedButton:String = (event.currentTarget.name);
    	trace(clickedButton);
    	var btnTweenout:Tween = new Tween(event.currentTarget, "alpha", Strong.easeInOut, 1, .5, .5, true);
    	
    	switch (event.currentTarget.name) {
    		case "photo_btn" :
    		addChild(photoNav_mc);
    		photoNav_mc.y = 250; 
    		photoNav_mc.x = 30;
    		btnNumber = 1;
    		var photoTweenin:Tween = new Tween(photoNav_mc, "alpha", Strong.easeInOut, 0, 1, 1, true)
    		trace("photography Clicked");
    			if (btnNumber == 1){
    				removeChild(videoNav_mc);
    				} else {
    					trace("not btn 2");
    				}
    		break;
    		
    		case "video_btn" :
    		addChild(videoNav_mc);
    		videoNav_mc.y = 250;
    		videoNav_mc.x = 30;
    		btnNumber = 2;
    		var videoTweenin:Tween = new Tween(videoNav_mc, "alpha", Strong.easeInOut, 0, 1, 1, true)
    		trace("video Clicked");
    			if (btnNumber == 2){
    			removeChild(photoNav_mc);
    			} else {
    				trace("not btn 1");
    			}
    		break;
    	}
    }
    MY NEW HTML:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Illusive Minds Media</title>
    
    <script src="js/jquery.js"></script><!-- jQuery Library -->
    
    
    <link rel="stylesheet" href="footer.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    <link rel="stylesheet" href="head.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    
    
    <!-- The following code targets IE6 only and enables mouse hover on non-anchor tags -->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="htc/ie6.css" />
    <![endif]-->
    
    </head>
    
    <body>
    
    	<div id="header"><!-- BEGIN HEADER -->
    
    		<div id="headerLogo">
    			<img  id="headerImage" class="center" src="img/headerLogo.png" alt="Illusive Minds Media"> 
    		</div>
    		
    		<nav id="navBar">
    			<a id="navPhoto" href="#">Photography</a>
    			<a id="navCinema" href="#">Cinematography</a>
    			<a id="navWeb" href="#">Web</a>
    			<a id="navDesign" href="#">Design</a>
    			<a id="navConnect" href="#">Connect</a>
    			<a id="navTheMinds" href="#">The Minds</a>
    		</nav>
    		
    		<div id="slider" class="center"></div>
    		
    	</div><!-- END HEADER -->
    	
    <!-- ________________-->
    
    
    
    <div id="footer"><!-- BEGIN FOOTER CONTAINER -->
    
    
        <ul id="footer_menu"><!-- Begin Footer Menu -->
        
        
            <li class="imgmenu"><a href="#"></a></li><!-- This Item is an Image -->
            
            
            <li><a href="#">My Account</a><!-- Begin Second Menu Item -->
            
                <ul class="dropup"><!-- Default Drop Up List -->
    				
    				<li><form id="login">
    					<h1>Log In</h1>
    						<fieldset id="inputs">
    							<input id="username" type="text" placeholder="Username" autofocus required>   
    							<input id="password" type="password" placeholder="Password" required>
    						</fieldset>
    						
    						<fieldset id="actions">
    							<input type="submit" id="submit" value="Log in">
    							<a href="">Forgot your password?</a><a href="">Register</a>
    						</fieldset>
    				</form></li>
    				
                </ul><!-- End Drop Up List -->
                
            </li><!-- End Second Menu Item -->
    
    
            <li class="right"><a href="#" class="drop">Logout</a><!-- Begin Right Aligned Item -->
                
            </li><!-- End Right Aligned  Item -->
    
    
        
        </ul><!-- End Footer Menu -->
    
    
    
        <!--<p><a href="#">StickyFooter</a> &copy; 2010 All Rights Reserved.</p> -->
    
    
    
        <ul id="social"><!-- Social Icons -->
        
        	<!-- The span is the text appearing on hover, use the tooltip class in the link -->
            <li><a href="#" class="tooltip"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/rss.png' alt="" /><span>RSS</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>
            
        </ul><!-- End Social Icons -->
    
    
    
    </div><!-- END FOOTER CONTAINER -->
    
    <form id="login">
        <h1>Log In</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="Username" autofocus required>   
            <input id="password" type="password" placeholder="Password" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="Log in">
            <a href="">Forgot your password?</a><a href="">Register</a>
        </fieldset>
    </form>
    
    
    <script src="js/nav.js"></script><!-- NavBar Animations -->
    
    
    </body>
    </html>

  3. #3
    Join Date
    Jan 2014
    Posts
    10
    the CSS:
    Code:
    
    
    
    #header{
    	position: fixed;
    	width: 100%;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	left: 0px;
    	height: 200px;
    	border-bottom: 1px solid #444444;
    	
    	background: -moz-linear-gradient(top, #222222, #111111);
    	background: -webkit-gradient(linear, 0% 0%, 50% 100%, from(#222222), to(#111111));
    	
    	background: -moz-linear-gradient(top, #222222, #111111);
    	background: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#222222), to(#111111));
    }
     #headerImage{
    	border: none;
    	margin-top: 99px;
     }
    .center{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0px;
    }
    
    
    
    nav {
    	display: block;
    	text-align: center;
    	margin-top: 7px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 2px;
    	
    }
    
    nav  a{
    	
    	top: 0px;
    	text-decoration: none;
    	color: #666666;
    	padding-left: 5px;
    	padding-right: 10px;
    	border-right: 1px solid #666666
    }
    
    
    nav  #navPhoto:hover {
    	color: #880076;
    }
    
    nav  #navCinema:hover {
    	color: #005791;
    }
    
    nav  #navWeb:hover {
    	color: #4f3aaf;
    }
    
    nav  #navDesign:hover {
    	color: #b43a1e;
    }
    
    nav  #navConnect:hover {
    	color: #bfb403;
    }
    
    nav  #navTheMinds:hover {
    	color: #7EA55D;
    }
    
    nav  #navTheMinds {
    	border-right: none;
    }
    
    
    #slider {
    	text-align: center;
    	position: fixed;
    	border: none;
    	background-color: #ffffff;
    	height: 5px;
    	width: 100px;
    }
    
     
       
    body{
    	background: radial-gradient(circle, #111111, #000000);
    	
    }
    
    
    
    #footer {
    	position: fixed;
    	bottom: 0px;
    	margin:0 auto;
    	width: 960px;
    	left:50%;
    	margin-left:-490px;
    	height: 40px;
    	background:#161616;
    	border-top: 1px solid #333333;
    	padding:0px 10px 0px 10px;
    	font-family:Arial, Helvetica, sans-serif;
    	text-shadow: 1px 1px 1px #000;
    	
    
    	-moz-box-shadow: 0px -1px 0px #161616;
    	-webkit-box-shadow:  0px -1px 0px #161616;
        box-shadow:  0px -1px 0px #161616;
    	
    
    	-moz-border-radius: 10px 10px 0px 0px;
    	-webkit-border-radius: 10px 10px 0px 0px;
    	border-radius: 10px 10px 0px 0px;
    	
    
    	background: -moz-linear-gradient(top, #222222, #111111);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222222), to(#111111));
    }
    
    
    
    #footer h2 {
    	font-size:24px;
    	line-height:24px;
    	color:#FF6600;
    	letter-spacing:-1px;
    	font-weight:400;
    	padding:0px 10px 0px 10px;
    	margin:12px 0;
    }
    #footer p {
    	color:#cccccc;
    	font-size:12px;
    	padding:0 10px 0 10px;
    	line-height:18px;
    	float:left;
    	margin:10px 0;
    }
    #footer img {
    	border:none;
    }
    #footer a {
    	color:#FF6600;
    	text-decoration:none;
    }
    #footer li ul {
    	list-style:none;
    	padding:0;
    	margin:0 0 12px 0;
    }
    
    #footer .strong { 
    	font-weight:bold;
    }
    #footer .italic { 
    	font-style:italic;
    }
    .clear { 
    	clear: both;
    	display: block;
    	overflow: hidden;
    	visibility: hidden;
    	width: 0;
    	height: 0;
    }
    
    
    
    #footer .imgshadow { 
    	background:#FFFFFE;
    	padding:4px; 
    	border:1px solid #333333;
    	margin-top:5px;
    	/* CSS3 shadow */
    	-moz-box-shadow:0px 0px 5px #000000;
    	-webkit-box-shadow:0px 0px 5px #000000;
    	box-shadow:0px 0px 5px #000000;
    }
    #footer .img_left { 
    	width:auto;
    	float:left;
    	margin:5px 15px 5px 0px;
    }
    #footer .img_right { 
    	width:auto;
    	float:right;
    	margin:5px 0px 5px 15px;
    }
    
    
    
    #footer .black_box {
    	background-color:#111111;
    	padding:4px 6px 4px 6px;
    	margin-bottom:6px;
    
    	
    	-moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    	
    	-webkit-box-shadow:inset 0 0 5px #000000;
    	-moz-box-shadow:inset 0 0 5px #000000;
    	box-shadow:inset 0 0 5px #000000;
    }
    
    /* Social Icons */
    
    #footer #social {
    	float:right; 
    	width:auto;
    	margin:5px 15px 0px;
    	padding:0px;
    	overflow:hidden;
    }
    #footer #social li {
    	margin-right:12px;
    	_margin-right:0px; /* IE6 only */
    	float:left;
    	width:24px;
    	padding:0px;
    	height:32px;
    	list-style:none;
    }
    #footer #social li:hover {
    	margin-top:-1px;
    }
    
    /* Tooltips for social icons */
    
    a.tooltip:hover {
    	text-decoration:none;
    }
    
    a.tooltip span {
    	display:none;
    	padding:5px;
    	bottom:44px;
    	position:relative;
    	width:55px;
    	text-align:center;
    	/* CSS3 Rounded Corners */
    	-moz-border-radius: 3px; 
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    a.tooltip:hover span {
    	display:block;
    	position:absolute;
    	border:1px solid #333333;
    	background:#181818;
    	color:#dddddd;
    	font-size:12px;
    	margin-left:-20px;
    }
    
    
    
    /*  _______________________________________
    
    	02 FOOTER - DROP DOWN MENU (DROP UP)
        _______________________________________  */
    
    
    
    #footer_menu {
    	margin: 0;
    	padding: 0;
    	width:auto;
    }
    #footer_menu li {
    	list-style: none;
    	float: left;
    	font-size:12px;
    	padding: 12px 14px 14px 14px;
    	border-right:1px solid #111111;
    	border-left:1px solid #444444;
    	background:#3E3E3E;
    	
    
    	background: -moz-linear-gradient(top, #3E3E3E, #313131);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3E3E3E), to(#313131));
    }
    #footer_menu li:hover {
    	background:#313131;
    	
    	background: -moz-linear-gradient(top, #313131, #3E3E3E);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#3E3E3E));
    }
    #footer_menu li a {
       display: block;
       color: #cccccc;
       text-decoration: none;
    }
    #footer_menu li a:hover {
       color: #ffffff;
    }
    #footer_menu .imgmenu {
        padding:5px 8px 0px 8px;
        border:none;
        background:none;
    }
    #footer_menu .imgmenu a {
        background:url("img/homeLogo.png") top left no-repeat;
        width:36px;
        height:30px;
    }
    #footer_menu li.imgmenu:hover {
        background:none;
    }
    #footer_menu li.imgmenu a:hover {
        background:url("img/homeLogoHover.png") top left no-repeat;
    }
    
    /* Drop Up */
       
    #footer_menu li ul.dropup {
       display: none; 
       width: 10em; /* Width for Opera */
    }
    #footer_menu li:hover ul.dropup  {
    	display: block;
    	position: absolute;
    	margin: 0 0 0 -16px;
    	bottom:46px; /* Distance to the bottom of the browser */
    	background-color:#222222;
    	border: 1px solid #111111;
    	border-bottom:none;
    
    
    	-moz-border-radius: 7px 7px 0px 0px;
    	-webkit-border-radius: 7px 7px 0px 0px;
    	border-radius: 7px 7px 0px 0px;
    }
    #footer_menu li:hover li {
    	float: none;
    	background:none;
    	border:none;
    	border-bottom:1px solid #161616;
    	padding:0px 0px 0px 0px;
    }
    #footer_menu li:hover a {
    	color: #aaaaaa;
    }
    #footer_menu li:hover a:hover {
    	color: #eeeeee;
    }
    #footer_menu li:hover p {
    	margin:6px 0;
    }
    
    /* Right Panel */
    
    #footer_menu .right {
    	float:right;
    	right:10px;
    }
    
    
    
    /*  _______________________________________
    
    	03 FOOTER - COLUMNS CONTENT
        _______________________________________  */
    
       
    #footer .dropdown_1column, 
    #footer .dropdown_2columns, 
    #footer .dropdown_3columns {
    	margin:4px auto;
    	position:absolute;
    	padding:10px 5px 10px 5px;
    	display:none;
    	text-align:left;
    }
    
    /* Drop Downs Sizes */
    
    #footer .dropdown_1column {width: 300px;}
    #footer .dropdown_2columns {width: 280px;}
    #footer .dropdown_3columns {width: 420px;}
    
    /* Showing Drop Down on Mouse Hover - Left aligned */
    
    #footer_menu li:hover .dropdown_1column, 
    #footer_menu li:hover .dropdown_2columns,
    #footer_menu li:hover .dropdown_3columns {
    	display: block;
    	position: absolute;
    	margin: 0 0 0 -16px;
    	bottom:40px;
    	background-color:#222222;
    	border: 1px solid #111111;
    
    	
    	-moz-border-radius: 7px 7px 0px 0px;
    	-webkit-border-radius: 7px 7px 0px 0px;
    	border-radius: 7px 7px 0px 0px;
    }
    
    /* Columns sizes, they have to be placed within a dropdown_columns DIV */
    
    #footer .col_1,
    #footer .col_2,
    #footer .col_3 {
    	display:inline;
    	float: left;
    	position: relative;
    	margin-left: 5px;
    	margin-right: 5px;
    }
    #footer .col_1 {width:300px;}
    #footer .col_2 {width:270px;}
    #footer .col_3 {width:410px;}
    
    /* Lists stylings */
    
    #footer_menu li ul.simple { /* Reset stylings for other lists inside columns */
    	margin-left:5px;
    }
    #footer_menu li ul.simple li {
    	border:none;
    	padding:0px;
    	width:120px;
    	line-height:24px;
    	margin-left:5px;
    }
    
    
    
    /*
    ________________________________________
    
    		Login Form
    ________________________________________
    */
    
    
    #login{
    	position: absolute;
    	top: -152px;
        border: solid;
    	border-width: 1px;
        position: absolute;
        z-index: 0;
    	font-family:Arial, Helvetica, sans-serif;
    	-moz-border-radius: 7px 7px 0px 0px;
    	-webkit-border-radius: 7px 7px 0px 0px;
    	border-radius: 7px 7px 0px 0px;
    	border-color: #000000;
    	
    	background: -moz-linear-gradient(top, #242424, #262626);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#242424), to(#262626));
    }
    
    #login:before{
        content: '';
        position: absolute;
        z-index: -1;
        border: none;
    	border-width:1px;
        left: 5px;
        right: 5px;
    }
    
    h1{
        text-align: center;
        color: #999999;
        margin: 0 0 5px 0;
        position: relative;
    }
    
    #inputs{
    	border:none;
    }
    
    #inputs input:focus{
    	outline-color: #7EA55D;
    	color: #7EA55D;
    }
    
    #username{
    	text-align: center;
    	color: #7EA55D;
    }
    
    #password{
    	text-align: center;
    	color: #7EA55D;
    }
    
    #actions{
    	border:none;
    }
    
    #actions a{
    	color: #7EA55D;
    	font-size: 10px;
    	text-decoration: none;
    	text-align: center;
    }
    
    #username{
    	width: 105px;
    	background: #222222;
    	border-style: solid;
    	border-width: 1px;
    	
    	-moz-border-radius: 5px 5px 5px 5px;
    	-webkit-border-radius: 5px 5px 5px 5px;
    	border-radius: 5px 5px 5px 5px;
    	
    	border-color: #999999
    }
    
    #password{
    	width: 105px;
    	background: #222222;
    	border-style: solid;
    	border-width: 1px;
    	
    	-moz-border-radius: 5px 5px 5px 5px;
    	-webkit-border-radius: 5px 5px 5px 5px;
    	border-radius: 5px 5px 5px 5px;
    	
    	border-color: #999999
    }
    
    
    
    #submit{
    	width: 105px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #7EA55D;
    	background: #444444;
    	border-style: solid;
    	border-width: 1px;
    	
    	-moz-border-radius: 3px 3px 3px 3px;
    	-webkit-border-radius: 3px 3px 3px 3px;
    	border-radius: 3px 3px 3px 3px;
    	
    	border-color: #555555
    }

    NOW MY SAD SAD JQUERY:

    Code:
    $(document).ready(function(){
    
    
    	$("#navPhoto").mouseenter(function(){
    		$("#slider").animate({
    		left:'250px'
    		});
    	});
    
    	$("nav a").click(function(){
    		$(this).animate({
    			opacity:'0.5'
    		});
    	});
      
    });

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    Try asking in the JQuery (frameworks) forum, this is forum is for JavaScript (as in non JQuery, et al) queries.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

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

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