Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Aug 2014
    Posts
    88
    Member #
    40011
    Liked
    2 times

    Need help with Impossible JavaScript website assignment to finish coding

    1. Make the entire contents of the web page fade in slowly once all of the files have been loaded into the browser.

    2. For the section with id sec3 change the text color

    3. Change the height of the spider images so that they are 80% of the middle of the column (section) if the user clicks anywhere section 3.

    [Section 3] .click (function () {} [spider image. [ jQuery function (data)

    4. Change the window onload so that you use the .ready() function of jQuery instead


    Source Code

    <!-- <!DOCTYPE HTML> -->
    <html>

    <head>
    <title>Combining all we have learned</title>
    <link rel="stylesheet" type="text/css" href="week6.css">
    <script src="jquery-1.11.1.min.js"></script><!--always JQ first-->
    <script type="text/javascript" src="utilities.js"></script>
    <script type="text/javascript" src="week6.js"></script>
    </head>


    <body>

    <div id="wrapper"> <!-- used to help center the page content -->
    <!-- Top of page header - not a section header-->
    <header>
    Combining Everyything We have Learned<br>
    <span id="forward"></span><br>
    <span id="backward"></span>
    </header>

    <!-- Section 1 to be used for the rollover -->
    <section id="sec1">
    <p>This image will be used for the rollover of the panda and polar bear images</p>
    <img id="img1" src="panda.jpg">
    </section>

    <!-- Section 2 to be used for the slide show-->
    <section id="sec2">
    <p>This image will be used for the slideshow of all the wonderfull spiders</p>
    <img id="img2" src="buick.jpg">
    </section>

    <!-- Section 3 to be used for the simulated form and data retrieval from client-->
    <section id="sec3">
    <p>This section will be used for the form events and manipulation</p>

    <table>
    <tr>
    <td><label for "firstName">Name:</label></td>
    <td><input type="text" value="Enter your first name here" id="firstName" name="firstName" size=30></td>
    </tr>
    <tr>
    <td><label for "lastName">Family Name:</label></td>
    <td><input type="text" value="Enter your last name here" id="lastName" name="lastName" size=30></td>
    </tr>
    <tr>
    <td><label for "sign">Horoscope Name:</label></td>
    <td><input type="text" value="Enter your horoscope sign here" id="sign" name="sign" size=30></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="button" name="submit" id="submit" value="submit"></td>
    </tr>
    </table>
    <img src="" id="img3">
    </section>

    <section id="1">
    <h2>Change Para</h2>
    <p id="text">My Stuff</p>
    </section>

    <!-- Footer to be used for student name and ID-->
    <footer>
    </footer>


    </div>
    </body>

    </html>



    CSS Code

    *{
    margin: 0px;
    padding: 0px;
    }

    body{
    width: 100%;
    height: 100%;
    background-color: lightBlue;
    }

    header{
    height: 10%;
    }

    section {
    float: left;
    width: 32.45%;
    height: 70%;
    min-height: 70%;
    padding: 5px;
    text-align: center;
    }

    footer{
    clear: both;
    height: 10%;
    }

    img{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }


    #wrapper{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }

    #sec1{
    background-color: yellow;
    }

    #sec2{
    background-color: orange;
    }

    #sec3{
    background-color: yellow;
    }

    #img3{
    display: none;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    }
    #text{
    position:absolute;
    top:757;
    left:327;
    }


    utilities.js Code



    function addEvent(obj, type, fname){
    //alert("addEvent");
    if (obj.addEventListener){
    obj.addEventListener(type, fname, false);
    }
    else if (obj.attachEvent){
    obj.attachEvent("on"+type, fname);
    }
    else {
    alert("your Browser is too old and does not support some of the features in this web site");
    }
    }

  2.  

  3. #2
    Member
    Join Date
    Aug 2014
    Posts
    88
    Member #
    40011
    Liked
    2 times
    JS Code


    // Create a global namespace object to be able to add more. Create a var in an object
    var g={};

    //Function for Ajax users
    function createXMLHttpObeject(){
    if(window.XMLHttpRequest){
    g.request = new XMLHttpRequest();
    }
    else{
    g.request = new ActiveXObject("MSXML2.XMLHTTP.3.0")

    }
    }

    /////////////

    function processData(){
    if(g.request.readystate==4){
    if(g.request.status==200){
    g.data=g.request.responseText;
    convertData();
    }
    }
    }

    /////////////

    function convertData(){
    //do the data conversion here
    }

    /////////////////////////////////////////////////////////////////////////////

    function moveParaWithLoop(){
    var start = g.para.offsetLeft;
    while(start<1000){
    start+=100;
    g.para.style.left = start+"px";
    }
    }

    function dropPara(){
    if(g.para.removeEventListener){
    document.removeEventListener("mousemove", movePara, false);
    }
    else{
    document.detachEvent("mousemove", movePara);
    }
    }

    function movePara(e){
    var evt = e ||window.event;
    g.x = evt.pageX || evt.clientX;
    g.y = evt.pageY || evt.clientY;
    g.para.style.left = g.x + g.diffX + "px";
    g.para.style.top = g.y + g.diffY + "px";

    }

    function animatePara(e){
    var evt = e ||window.event;
    //target
    g.objX = g.para.offsetLeft;
    g.objY = g.para.offsetTop;
    g.para.style.left = g.objX+"px";
    g.para.style.top = g.objY+"px";
    g.x = evt.pageX || evt.clientX;
    g.y = evt.pageY || evt.clientY;
    g.diffX = g.objX - g.x
    g.diffY = g.objY - g.y
    addEvent(document, "mousemove",movePara);
    addEvent(document, "mouseup",dropPara);

    }

    function changePara(){
    if(g.para.innerHTML=="My Stuff"){
    g.para.innerHTML="this is new text";
    g.para.style.backgroundColor="blue";
    g.para.style.color="pink";
    g.para.style.fontSize = "2em";
    }

    else{
    g.para.innerHTML="My Stuff";
    g.para.style.backgroundColor="blue";
    g.para.style.color="pink";
    g.para.style.fontSize = "2em";
    }



    }

    /*
    * This function will preload all the image files into the browser cache. Since
    * all of the filenames are stored in arrays they will be combined into one temporary
    * array that will be processed in a loop.
    */
    function preloadImages(){
    var pictures = g.bearImages.concat(g.spiderImages, g.signImages); // using the concat array method to merge the three arrays
    var tempImage = new Image(); // create a temporary image object
    for (var i=0; i<pictures.length; i++){
    tempImage.src = pictures[i]; // assign a new file name to the image objects src property
    }
    }

    /*
    * Task 1 (event driven) - Rollover for bear image (only requires 1 function) - string methods are used in the if as the image src
    * is stored as a path - here I am using slice in conjunction with lastIndexOf
    * so that I can find the last '/'' and get all the characters after it to compare
    * to the name stored in the bearImages array
    */
    function rollover(){
    if (img1.src.slice(img1.src.lastIndexOf("/")+1) == g.bearImages[0]){
    img1.src = g.bearImages[1];
    }
    else {
    img1.src = g.bearImages[0];
    }

    }

    /*
    * Task 2 (event driven) - Slideshow of spider images(better to have 2 functions, 1 to start
    * and stop, the other to change the slides) - first step is to verify if show
    * is already started or not - if our global g.slideShow has a value of
    * zero then the slide show is not on so we will set the interval to call
    * the function that will change the slide (changeSlide). If g.slideShow
    * has a value other than zero it means that the show has started and we need
    * to turn it off by clearing the interval
    */
    function slideShow(){
    if (g.slideShow){
    clearInterval(g.slideShow);
    g.slideShow = null;
    }
    else {
    g.slideShow = setInterval(changeSlide,3000);
    }
    }

    function changeSlide(){
    g.slideCtr++;
    if (g.slideCtr > g.spiderImages.length-1){
    g.slideCtr = 0;
    }
    img2.src = g.spiderImages[g.slideCtr];
    }


    /*
    * Task 3 (event driven)- validate user submitted data and then display the user
    * provided names forwards and backwards and the image of the specified
    * horoscope sign(best with 3 functions, 1 to validate the user data,
    * 1 to display the name, and the last to display the horoscope sign under
    * the input fields) - note there is no form to submit as there is no form tag
    */
    function validateName(){
    var firstName = document.getElementById("firstName");
    var lastName = document.getElementById("lastName");
    var sign = document.getElementById("sign");
    var errorchk = 0;

    //some data validation (check that data was actually entered or has correct value)

    // validate names
    if (firstName.value){ //check if there is a value
    if (firstName.value == "Enter your first name here"){ // access value property of input element
    firstName.style.color = "red"; //unlike css we must quote all strings when setting properties via JavaScript
    errorchk =1;
    }
    }
    else {
    firstName.value = "Enter your first name here"
    firstName.style.color = "lightBlue";
    errorchk=1;
    }
    if (lastName.value){
    if (lastName.value == "Enter your last name here"){ // access value property of input element
    lastName.style.color = "red";
    errorchk = 1;
    }
    }
    else {
    lastName.value = "Enter your last name here";
    lastName.style.color = "lightBlue";
    errorchk = 1;
    }

    //validate horoscope
    switch (sign.value.toLowerCase()){ //convert entered data to lower case
    case "aquarius": // if any correctly spelled sign is entered drop to virgo code block
    case "aaries":
    case "cancer":
    case "capricorn":
    case "gemini":
    case "leo":
    case "libra":
    case "pisces":
    case "sagittarius":
    case "scorpio":
    case "taurus":
    case "virgo":
    var signOut = sign.value + ".jpg";
    break;
    default: //if no valid sign set error condition
    sign.value = "Enter your horoscope sign here";
    sign.style.color = "red";
    errorchk = 1;
    }

    // test to see if an error occurred
    if (errorchk) { // if an error was found set focus to firstName field and reset error counter
    firstName.focus();
    errorchk = 0;
    }
    else { // if no error found reset field colors to black (in case errors changed the color) and then display data and image
    firstName.style.color = "black";
    lastName.style.color = "black";
    sign.style.color = "black";
    displayName(firstName.value, lastName.value);
    displaySign(signOut);
    }
    }

    function displayName(first, last){
    var header = document.getElementsByTagName("header")[0]
    var namesOut = document.getElementsByTagName("span");
    var fullName = first +" "+last;
    var reversed="";
    for (i = fullName.length-1; i >= 0; i--){
    reversed += fullName[i];
    }
    namesOut[0].innerHTML = fullName;
    namesOut[1].innerHTML = reversed;
    header.style.fontSize ="1.5em";
    header.style.textAlign = "center";
    }

    function displaySign(sign){
    var img3 = document.getElementById("img3");
    img3.style.display = "block";
    img3.src = sign;
    }

    /*
    * Task 4 - (no event trigger) - display your name and student id in the footer
    *
    */
    function displayCopyright(){
    var footer = document.getElementsByTagName("footer")[0]; //using getElementsByTagName means we get an array
    footer.innerHTML = Person.firstName+" "+Person.lastName+ " id# 73635473536464";
    footer.style.color = "blue" ;
    footer.style.textAlign = "right";
    footer.style.fontSize = ".75em";
    }

    /*
    * Init function will setup global variables, events and event listeners
    * and also run any functions that are used to prepare for events or do not
    * require events.
    */

    window.onload = function(){/*To have Anonymous Function that's why we deleted the Init from the buttom Like exemple 7*/

    // setup global variables in my global namespace
    g.bearImages = ["panda.jpg", "polarbear.jpg"];//0=panda1=polarbear because I starts with Panda
    g.spiderImages = ["buick.jpg", "green car.jpg", "lamborghini.jpg", "mazda rx8.jpg", "porsche.jpg" , "red car.jpg", "skyline.jpg"];
    g.signImages = ["aquarius.jpg", "aries", "cancer.jpg", "capricorn", "gemini.jpg", "leo.jpg", "libra.jpg", "pisces.jpg", "sagittarius.jpg", "scorpio.jpg", "taurus.jpg", "virgo.jpg"];
    g.img1 = document.getElementById("img1");
    g.img2 = document.getElementById("img2");
    g.slideShow = 0;
    g.slideCtr = 0;
    g.submit = document.getElementById("submit");
    g.para=document.getElementById("text");
    g.x = null;
    g.y = null;
    g.objX = null;
    g.objY = null;

    Person = {firstName:"JAMES", lastName:"BOND"};



    // run required initialisation functions
    preloadImages(); // used to cache the images for the rollover and the slideshow
    displayCopyright(); // display your name and student number (normally site ,aps and copyright info go here)
    moveParaWithLoop();
    $("body").css("background-color","pink");
    $("#sec1").css("background-color","green");
    $("#sec2").css("background-color","gray");
    $("#sec3").hide();
    $("#sec3").fadeIn(5000);


    // setup events for rollover and slideshow
    addEvent(g.para, "mousedown",animatePara);
    addEvent(g.para, "mouseover", changePara);
    addEvent(g.para, "mouseout", changePara);
    //addEvent(g.img1, "mouseover", rollover);
    // addEvent(g.img1, "mouseout", rollover);
    $("#img1").mouseover(rollover);
    $("#img1").mouseout(rollover);
    g.img2.onclick = slideShow; // using a property event instead of an event listener

    // setup events for form handling - Note that the form will not be submitted
    addEvent(g.submit, "click", validateName);

    //Below shoud be in init AJAX
    document.getElementById("btn").onclick = function(){
    g.request.open("GET", "data.txt", true);
    g.request.send (null);
    g.request.onreadystatechange = ProcessData;
    }
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

javascript website assignment

Click on a term to search for related topics.

Tags for this Thread

All times are GMT -6. The time now is 10:46 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com