www.webdeveloper.com
Results 1 to 12 of 12

Thread: Class project help?

  1. #1
    Join Date
    Mar 2014
    Posts
    15

    Question Class project help?

    Just keep in mind this is an entry level class and not one that has to make a website that is going to change the world. I want my header to have three images spread across the top in the header box. I have the three images but the problem is they are not split up across the top. I have tried everything I can think of that I have gone over in the class. The <div> tag seems to make it look the best so far and keep them on the same row. The other problem when the browser is fully open they are all on one row. Make the browser smaller then they all move instead of adjusting to the screen size. The code is below: I use Aptana to do the code
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>Cancuns</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #header-container {
    width: 100%;
    height: 400px;
    background-color: #990000;
    color: white;
    }
    </style>
    
    <script>
    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed){
    var elem = document.getElementById(el);
    if(navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Firefox")){
    elem.style.MozTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("MSIE")){
    elem.style.msTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Opera")){
    elem.style.OTransform = "rotate("+degrees+"deg)";
    } else {
    elem.style.transform = "rotate("+degrees+"deg)";
    }
    looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')' ,speed);
    degrees++;
    if(degrees > 359){
    degrees = 1;
    }
    document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
    }
    </script>
    </head>
    <body>
    
    <div id="header-container">
    <img id="img1" src="Tacotime.gif" alt="Taco" />
    <script> rotateAnimation("img1",20);</script>
    
    <img id="cancuns" src="cancuns.png" alt="Cancuns Logo" />
    
    <img id="img2" src="Tacotime.gif" alt="Taco" />
    <script> rotateAnimation("img2",20);</script>
    
    </div>
    
    </body>
    </html>
    Last edited by NogDog; 03-25-2014 at 11:03 AM. Reason: Added [html] tags

  2. #2
    Join Date
    Mar 2014
    Posts
    15
    I have updated the code and it works better but every now and then if the screen size is minimized smaller the right picture will overlap the middle if you stretch out the screen it fixes any clue on what is causing this issue?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Box Method</title>
    <style type="text/css">
    div {
    text-align:center
    }
    body{
    backgroound-size:100%;
    background-color: maroon;
    }
    #header {
    width: auto;
    overflow: auto;
    }

    </style>
    <script type="text/javascript">
    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed){
    var elem = document.getElementById(el);
    if(navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Firefox")){
    elem.style.MozTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("MSIE")){
    elem.style.msTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Opera")){
    elem.style.OTransform = "rotate("+degrees+"deg)";
    } else {
    elem.style.transform = "rotate("+degrees+"deg)";
    }
    looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')' ,speed);
    degrees++;
    if(degrees > 359){
    degrees = 1;
    }
    document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
    }
    function changeImage()
    {
    document.getElementById("img1").style.height="40%" ;
    document.getElementById("img1").style.width="40%";
    document.getElementById("cancuns").style.height="7 0%";
    document.getElementById("cancuns").style.width="70 %";
    document.getElementById("img2").style.height="40%" ;
    document.getElementById("img2").style.width="40%";
    return true;
    }
    </script>

    </head>

    <body onresize="changeImage()">
    <div id="header">
    <div style="background-color: black;">
    <div style="float:left; width:33.3%;">
    <img id="img1" src="Tacotime.gif" alt="Taco" />
    <script type="text/javascript"> rotateAnimation("img1",20);</script>
    </div>
    <div style="float:left; width:33.3%;">
    <img id="cancuns" src="cancuns.png" alt="Cancuns Logo" />
    </div>
    <div style="float:left; width:33.4%;overflow: hidden;">
    <img id="img2" src="Tacotime.gif" alt="Taco" />
    <script type="text/javascript"> rotateAnimation("img2",20);</script>
    </div>
    </div>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Mar 2014
    Location
    UAE
    Posts
    98
    Not use so many scripts it's waste your html in load time

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    966
    Because this is for a class project you really should understand why I've made the following changes below:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Box Method</title>
    	<style type="text/css">
    		html {
    			width: 100%;
    			height: 100%;
    			margin: 0;
    			padding: 0;
    		}
    		body {
    			background-size: 100%;
    			background-color: maroon;
    			width: 100%;
    			height: 100%;
    			margin: 0;
    			padding: 0;
    		}
    		#header {
    		  background: #000;
    			width: auto;
    			overflow: hidden;
    			text-align: center;
    		}
    		#header div {
    			float: left;
    			width: 33.3%;
    		}
    		#header div img { width: 100%; }
    	</style>
    </head>
    <body>
    
    	<div id="header">
    		<div>
    			<img id="img1" src="Tacotime.gif" alt="Taco" />
    		</div>
    		<div>
    			<img id="cancuns" src="cancuns.png" alt="Cancuns Logo" />
    		</div>
    		<div>
    			<img id="img2" src="Tacotime.gif" alt="Taco" />
    		</div>
    	</div>
    
    	<script type="text/javascript">
    		var looper;
    		var degrees = 0;
    		function rotateAnimation(el,speed) {
    			var elem = document.getElementById(el);
    			if(navigator.userAgent.match("Chrome")) {
    				elem.style.WebkitTransform = "rotate("+degrees+"deg)";
    			} else if(navigator.userAgent.match("Firefox")) {
    				elem.style.MozTransform = "rotate("+degrees+"deg)";
    			} else if(navigator.userAgent.match("MSIE")) {
    				elem.style.msTransform = "rotate("+degrees+"deg)";
    			} else if(navigator.userAgent.match("Opera")) {
    				elem.style.OTransform = "rotate("+degrees+"deg)";
    			} else {
    				elem.style.transform = "rotate("+degrees+"deg)";
    			}
    			looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')' ,speed);
    			degrees++;
    			if(degrees > 359) degrees = 1;
    			//document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
    		}
    		
    		rotateAnimation("img1",20);
    		rotateAnimation("img2",20);
    	</script>
    
    </body>
    </html>
    I'll start with some of the less related changes. Structure-wise, it's always better to place javascript at the bottom of a page as it allows the page to load faster. Next, I removed your changeImage() function as I feel it wasn't needed (and I also believe it was causing your problem). Anytime you want to alter the appearance of anything on your page you should be using CSS. On a similar note your rotation function isn't needed. You can use CSS animations to create the same effect: https://developer.mozilla.org/en-US/...CSS_animations

    I'll leave the CSS animations to you though. Next, you were close on what you were trying to achieve by setting the float and width of each element at the top of your page. I set the <html> and <body> elements to fill the screen (width and height) as removed any padding/margins added by browsers so that when applying widths that total 100% they actually had the full 100% of the screen to fill (by default the <body> has a margin which can prevent you from using 100% widths without going over).

    Lastly there were some slight structure changes I made to simplify things. You can refer to the CSS to see how I applied the styling for each sub-element in your #header rather than coding it directly into the style attribute. The <img> elements needed to have a width of 100% so they would properly scale with their containing <div>.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Mar 2014
    Posts
    15
    Thanks So much for what you have told me and for the link on the CSS animation. I think I learn more from others than all the books I have ever read in class. The next part of the page I am going to put a slogan and was thinking to just create it in Photoshop and then just ad to the website through an image tag. Is that the best way or do you suggest just text and use CSS to make it look how I want?

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    966
    Whether you use actual images or CSS for certain things on a page really depends on what you want the end result to be. CSS is capable of giving you a wide range of styles and effects, however you also have to consider browser compatibility. For instance, IE7/8 lack many newer CSS implementations. Images will look the same in any browser while CSS can sometimes differ. The other thing to take into consideration is complexity. If you are just applying some relatively basic effects to text then CSS is probably the option I would go with. CSS is all about appearance, but it's not a fully-fledged effects suite.

    tl;dr More than likely you should be good to just use CSS for a slogan line.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Mar 2014
    Posts
    15

    Updated code and made external css and javascript

    Ok Sup3rkirby I took a lot of what you did and changed with smaller pictures so they will look better and have external javascript and CSS page.
    The CSS code:
    body {
    margin:0px;
    background-color:#000000;
    font-family:arial, verdana, sans-serif;
    }
    #frame {
    margin-left:auto;
    margin-right:auto;
    width:1240px;
    padding:0px 10px 10px 10px;
    background-color:#ffffff;
    }
    #header {
    background-color:maroon;
    margin-left:auto;
    margin-right:auto;
    color: white;
    height:120px;
    padding:10px;
    }
    #header div {
    float: left;
    width: 24.9%;
    }
    #navigation {
    background-color:black;
    height:40px;
    padding:10px;
    }
    #main {
    background-color:maroon;
    height:800px;
    padding:10px;
    }
    #footer {
    background-color:#cccccc;
    height:40px;
    padding:10px;
    clear:both;
    }
    h1 {
    color: black;
    font-family:goudy stout;

    }

    JavaScript:
    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed) {
    var elem = document.getElementById(el);
    if(navigator.userAgent.match("Chrome")) {
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Firefox")) {
    elem.style.MozTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("MSIE")) {
    elem.style.msTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Opera")) {
    elem.style.OTransform = "rotate("+degrees+"deg)";
    } else {
    elem.style.transform = "rotate("+degrees+"deg)";
    }
    looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')' ,speed);
    degrees++;
    if(degrees > 359) degrees = 1;
    //document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
    }

    rotateAnimation("img1",20);
    rotateAnimation("img2",20);
    /**
    * @author pro2k_000
    */

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Cancuns Tacos</title>
    <link rel="stylesheet" type="text/css" href="cancuns css/cancuns.css">
    </head>

    <body>
    <div id="frame">
    <div id="page">
    <div id="header">
    <div><img id="img1" src="Tacotime.gif" alt="Taco"/></div>
    <div><h1><p>Cancun's Tacos</p></h1></div>
    <div><img id="img2" src="Tacotime.gif" alt="Taco"/></div>
    <div float:right;><p>1400 N Hwy 77<br />
    Waxahachie, TX 75165<br />
    972-921-9833<br />
    Everday 6AM - 9PM
    </p></div>
    </div>
    <div id="navigation">navigation</div>
    <div id="main"><img src="bestTacosEver.gif" alt="besttacos"</div>
    <div id="footer">footer</div>
    </div>
    </div>
    <script src="cancunsjs/cancunsScript.js"></script>
    </body>
    </html>


    I still have a lot to work on (nav,footer, and other pages) This will be the format and header for all pages. So once I have this ready I think everything else will be pretty easy "I hope". On the header the Taco Time logos are working and look great except the spacing across the header is not even I have tried all the different floats, and position things I have seen in the books. It will not let me attach my image on this site but the size is 100px X 100px circle logo on left that rotates, and then Cancuns Tacos 40px the another circle logo on right, then address on far right. There is at least 300px gap from logo one to name then only about 20px then next circle logo then 300px gap till address. When I try to change anything it sends things down below. Thanks for all the advice.

  8. #8
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    966
    Your spacing issues would be due to how you have the top area setup now. 3 <div> tags filling 24.9% of the page's width each. Your images (and logo text) do not actually fill up the entire width of the <div>, however the <div> still is set to take up that much space (thus giving you the extra spacing between the actual image and the text). And easy fix should just be to remove the width from the #header div part of the CSS, allowing each of these divs to take up only the space they need. However you probably want to make sure none of the <div> tags take up too much space in the event the browser window is small, so you'd want to add a max-width value in your CSS.

    And after explaining the what and why of those little things, in all honesty you are just going to add 'max-' in front of the width line in your #header div CSS.
    Code:
    #header div {
      float: left;
      max-width: 24.9%;
    }
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  9. #9
    Join Date
    Mar 2014
    Posts
    15
    Hello Sup3rkirby,

    My project is almost done I am on my last page and it looks pretty good for my first website. I am working on a ordering system and it looks fine and works but it adds too many decimal places for what the person would see ie: $21.95327 instead of just $21.95 the code is belowe I have tried using the to.fixed(2) but I either am not putting it in the right place or do not know how to use it. I had read about that code in a "Headfirst guide to JavaScript" any advice?

    <script language=javascript>
    function bill()
    {
    var v1= document.order.smallTaco.value;
    var v2= document.order.largeTaco.value;
    var v3= document.order.fivePSmall.value;
    var v4= document.order.fivePLarge.value;
    var v5= document.order.tenPSmall.value;
    var v6= document.order.tenPLarge.value;
    var v7= document.order.chipsSalsa.value;
    var v8= document.order.smallDrink.value;
    var v9= document.order.largeDrink.value;
    //These lines define the variables.

    v1= parseInt(v1);
    v2= parseInt(v2);
    v3= parseInt(v3);
    v4= parseInt(v4);
    v5= parseInt(v5);
    v6= parseInt(v6);
    v7= parseInt(v7);
    v8= parseInt(v8);
    v9= parseInt(v9);



    order.subtotalBox.value= (v1*1.49)+(v2*1.99)+(v3*5.99)+(v4*8.99)+(v5*10.99)+(v6*16.99)+(v7*1.99)+(v7*1.49)+(v8*1.99)


    document.order.taxBox.value= (document.order.subtotalBox.value)*0.07


    order.grandtotalBox.value= (order.subtotalBox.value*1.07 )

    }





    </script>
    </head>

    <body>
    <h1 align=center>Eat More Tacos!</h1>
    <br>
    <br>
    <form id=order name=order>
    <p align=center>
    <strong>Please fill out the form accordingly. Put the number of
    items you want in the box next to each.</strong>
    <br>
    <br>
    Small Taco $1.49 <input type="text" name="smallTaco" size="2" value="0"></br>
    Large Taco $1.99 <input type="text" name="largeTaco" size="2" value="0"></br>
    5 Pack Small Tacos $5.99 <input type="text" name="fivePSmall" size="2" value="0"></br>
    5 Pack Large Tacos $8.99 <input type="text" name="fivePLarge" size="2" value="0"></br>
    10 Pack Small Tacos $10.99 <input type="text" name="tenPSmall" size="2" value="0"></br>
    10 Pack Large Tacos $16.99 <input type="text" name="tenPLarge" size="2" value="0"></br>
    Chips and Salsa $1.99 <input type="text" name="chipsSalsa" size="2" value="0"></br>
    Small Drink $1.49 <input type="text" name="smallDrink" size="2" value="0"></br>
    Large Drink $1.99 <input type="text" name="largeDrink" size="2" value="0"></br>


    <br>
    <br>
    <strong>Please select types of meat:</strong><br>
    <input type="text" name="chicken"size="10" /> Chicken <br>
    <input type="text" name="beef"size="10" /> Beef <br>
    <input type="text" name="pork"size="10" /> Pork <br>
    <input type="text" name="eggBacon"size="10" /> Egg and Bacon <br>
    <input type="text" name="chorizo"size="10" /> Chorizo <br>
    <br>
    <br>
    <input type="button" name="calcBtn" value="Ring It UP" onclick="bill(document.order)" />
    <input type="reset" name="resetBtn" value="Clear Form" />
    <br>
    <br>
    SubTotal: $<input type="text" name="subtotalBox" size="6" value="0" /><br>
    Tax: $<input type="text" name="taxBox" size="6" value="0" /><br>
    Grand Total: $<input type="text" name="grandtotalBox" size="6" value="0" /><br>
    </p>

    Best Regards,
    James

  10. #10
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    966
    I'm not sure if this was a typo in your post or the solution to your problem but the method is
    Code:
    var $number = 123.456;
    var $fixedNumber = $number.toFixed(2);
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  11. #11
    Join Date
    Mar 2014
    Posts
    15
    So I need to add var $number = 123.456;
    var $fixedNumber = $number.toFixed(2); cause when I do this it removes all numbers in the boxes.

  12. #12
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    966
    No, I wasn't giving you exact code to copy and paste. In your post you said you tried to.fixed(2), which is incorrect. The correct usage is .toFixed(2). In the context of your code you should be using something like this
    Code:
    function bill() {
    	var v1= document.order.smallTaco.value;
    	var v2= document.order.largeTaco.value;
    	var v3= document.order.fivePSmall.value;
    	var v4= document.order.fivePLarge.value;
    	var v5= document.order.tenPSmall.value;
    	var v6= document.order.tenPLarge.value;
    	var v7= document.order.chipsSalsa.value;
    	var v8= document.order.smallDrink.value;
    	var v9= document.order.largeDrink.value;	
    	//These lines define the variables.
    
    	v1= parseInt(v1);
    	v2= parseInt(v2);
    	v3= parseInt(v3);
    	v4= parseInt(v4);
    	v5= parseInt(v5);
    	v6= parseInt(v6);
    	v7= parseInt(v7);
    	v8= parseInt(v8);
    	v9= parseInt(v9);
    
    	order.subtotalBox.value = ((v1*1.49)+(v2*1.99)+(v3*5.99)+(v4*8.99)+(v5*10.99)+(v6*16.99)+(v7*1.99)+(v7*1.49)+(v8*1.99)).toFixed(2);
    	document.order.taxBox.value = ((document.order.subtotalBox.value)*0.07).toFixed(2);
    	order.grandtotalBox.value = (order.subtotalBox.value*1.07).toFixed(2);
    }
    But again that's assuming it wasn't just a typo in your post.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

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