dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: function display DispWin styling dificulty please help

  1. #1
    Join Date
    Nov 2007
    Posts
    1

    function display DispWin styling dificulty please help

    I have been trying to apply styles to a to a pop-up window from (function display) and I succeeded styling part of the content but I am failing miserably applying a background color and a little image in the div named wrapp. Can any one look at my code and help me? Thanks a million.

    Goyo

    Here is the code I am working on let me know if you need to see the web site:

    <script language="JavaScript" type="text/javascript">

    function validate() {
    if (document.pizza.name.value.length < 1) {
    alert("Please enter your full name.");
    return false;
    }
    if (document.pizza.email.value.length < 1) {
    alert("We need a valid email to contact you.");
    return false;
    }
    if (document.pizza.address.value.length < 1) {
    alert("Please enter your address.");
    return false;
    }
    if (document.pizza.phone.value.length < 1) {
    alert("We may need to call you, please share your number with us.");
    return false;
    }

    if (document.pizza.city.value.length < 3) {
    alert("What city are you located?.");
    return false;
    }
    /* if (document.pizza.state.value.length < 3) {
    alert("Well...we can't gess your state, try again please.");
    return false;
    }*/
    if (document.pizza.zip.value.length < 2) {
    alert("Sorry...we did not get your zip code.");
    return false;
    }

    return true;
    }

    function display() {
    DispWin = window.open('','NewWin', 'toolbar=no, status=no, resizable=yes, width=400, height=450');
    DispWin.document.write("<head>");
    DispWin.document.write("<link rel='stylesheet' type='text/css' href='validate.css' \/>");
    DispWin.document.write("<\/head>");
    DispWin.document.write("<div id='wrapp'>");
    DispWin.document.write("<div id='message'>");
    DispWin.document.write("<h1>" + "Thank you " + document.pizza.name.value + "<\/h1>" + "We are delivering your pizzas to: " + "<br \/>" + "<h3>" + document.pizza.address.value + ", " + document.pizza.city.value + ", " + document.pizza.state.value + ", " + document.pizza.zip.value + "<\/h3>" + "at the speed of wings." + "<br \/>");
    DispWin.document.write("<h3>" + "If we need to contact you we will call: " + document.pizza.phone.value + ". " + "<\/h3>");
    DispWin.document.write("<\/div>");//ends message

    DispWin.document.write("<div id='order'>");
    check1();

    }

    function check1(){
    DispWin.document.write("Nice choices... You have ordered");
    if (document.pizza.order_size[0].checked==true)
    DispWin.document.write(" a" + "<em>" + " LARGE PIZZA" + "<\/em>" + " ...OK, large will be." + "<br \/>" + "<br \/>");
    if (document.pizza.order_size[1].checked==true)
    DispWin.document.write(" a <em>MEDIUM<\/em> pizza." + "<br \/>" + "<br \/>");
    if (document.pizza.order_size[2].checked==true)
    DispWin.document.write(" a <em>SMALL<\/em> pizza pie." + "<br \/>" + "<br \/>");
    DispWin.document.write(" Your yummy toppings include:" + "<br \/>");
    if (document.pizza.baconbits.checked==true)
    DispWin.document.write("<ul><li><em>Bacon Bits</em></li>");
    if (document.pizza.beef.checked==true)
    DispWin.document.write("<li><em>Beef</em></li>");
    if (document.pizza.bacon.checked==true)
    DispWin.document.write("<li><em>Bacon</em></li>");
    if (document.pizza.meatballs.checked==true)
    DispWin.document.write("<li><em>Meetballs</em></li>");
    if (document.pizza.pepperoni.checked==true)
    DispWin.document.write("<li><em>Pepperoni</em></li>");
    if (document.pizza.pork.checked==true)
    DispWin.document.write("<li><em>Pork</em></li>");
    if (document.pizza.salami.checked==true)
    DispWin.document.write("<li><em>Salami</em></li>");
    if (document.pizza.sausage.checked==true)
    DispWin.document.write("<li><em>Sausage</em></li>");
    if (document.pizza.green_peppers.checked==true)
    DispWin.document.write("<li><em>Green Peppers</em></li>");
    if (document.pizza.mushrooms.checked==true)
    DispWin.document.write("<li><em>Mushrooms</em></li>");
    if (document.pizza.anchovies.checked==true)
    DispWin.document.write("<li><em>Anchovies</em></li>");
    if (document.pizza.onions.checked==true)
    DispWin.document.write("<li><em>Onions</em></li>");
    if (document.pizza.pineapple.checked==true)
    DispWin.document.write("<li><em>Pineapple</em></li>");
    if (document.pizza.olives.checked==true)
    DispWin.document.write("<li><em>Olives</em></li>");
    if (document.pizza.garlick.checked==true)
    DispWin.document.write("<li><em>Garlick</em></li>");
    if (document.pizza.hot_peppers.checked==true)
    DispWin.document.write("<li><em>Hot Peppers</em></li></ul>");

    }
    DispWin.document.write("<\/div>");//ends order
    DispWin.document.write("<\/div>");//ends wrapp

    </script>


    And this is the external CSS code:

    <style type="text/css">

    #wrapp{
    position: relative;
    background-color: #3399FF;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0 auto;
    border: 2px solid blue;

    }

    #branding{
    background-image:url(assets/pizza_logo_small.png);
    position:absolute;
    top: 0px;
    left: 10px;
    }

    #message{
    position:absolute;
    width:auto;
    height: auto;
    text-align:center;
    top: 75px;
    left: 75px;
    }

    #order{
    position:absolute;
    width: 250px;
    height: auto;
    top: 230px;
    left: 90px;

    }

    h1{
    color: #0033FF;
    font-size: 1.3em;
    }

    h2{
    color:#993333;
    text-align: center;
    font-size: 1em;
    }

    h3{
    color:#993333;
    text-align:center;
    font-size: .8em;
    }
    </style>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Give a link

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