Jump to content

luke214

Members
 View Profile  See their activity

  • Posts

    66

  • Joined

  • Last visited

 Content Type 

Posts posted by luke214

    Basic prompt function not working

    in JavaScript

    Posted · Edited by luke214

    So now I have the same code;

     

    window.onload=function()
    {
    if (yourname ===""){
    document.getElementById("welcome").innerHTML = "Welcome!"
    alert("Please enter a name next time");
    }
    else if (yourname !=null){
    document.getElementById("welcome").innerHTML = "Welcome " + yourname + "!";
    } else {
    alert("Please enter a name next time"), document.getElementById("welcome").innerHTML = "Welcome!";
    }
    }
    It works perfectly, however when i load the page after not typing a name in or cancelling, you see this > http://pasteboard.co/27ipN990i.png
    Then after clicking "ok" it then turns to this > http://pasteboard.co/laZcf175X.png
    What I want to know is, how do I make the Welcome! text appear BEFORE clicking the Ok box, so it doesn't look like there's just nothing, then once clicking OK it appears..
    Thanks!

    Basic prompt function not working

    in JavaScript

    Posted · Edited by luke214

    I actually did that javascript code in a seperate .js file, is that wrong? :o

    There wasn't an error, it works if i don't type in a name, as it comes up with the "Please enter a name next time" message, but if i do put a name in, it doesn't show on my web page

    Basic prompt function not working

    in JavaScript

    Posted

    So I have some HTML which shows;

     

    <header>
    <h1 id="welcome"></h1>
    <p>Welcome to my website about Minerals and Rocks!<br>
    Hopefully you'll find some useful information to help you!</p>
    </header>
    What I want my prompt function to do is ask the user what their name is, then insert it in-between the h1 tags.
    Here's my javascript for it;
    var yourname = prompt("What is your name?")
    if(yourname !=null){
    document.getElementById("welcome").innerHTML = "Hello" + yourname;
    } else{
    alert("Please enter a name next time");
    }
    I don't see the problem, however nothing is inserted when I type a name into the prompt box, as shown in the screenshot in this link > http://pasteboard.co/kLpNXWcd0.jpg

     

    Any reason why once hovered over, my text moves down a bit as well?

    in CSS

    Posted

    I'm going to work on cleaning up my code tomorrow :)

     

    Here's my HTML if you want to take a look!

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <meta content="My website about Minerals and Rocks" name="description">
    <meta content="minerals,rocks,earth,gems" name="keywords">
    <meta content="index,follow" name="robots">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <link href="geode.ico" rel="icon">
    <title>Information about Minerals and Rocks</title>
    </head>
    <body>
    <div class="mainwrapper">
    <div id="navigation">
    <nav id="navmenu">
    <div id="textnav">
    <pre>
    </pre>
    Rocks
    </div>
    <pre>
    </pre>
    <div id="textnav1">
    Minerals
    </div>
    <pre>
    </pre>
    <div id="textnav2">
    Locations
    </div>
    <pre>
    </pre>
    <div id="textnav3">
    Identification
    </div>
    </nav>
    </div>
    <div id="wrapper">
    <noscript>Please enable Javascript</noscript>
    <header>
    <h1><ins>Welcome!</ins></h1>
    <p>Welcome to my website about Minerals and Rocks!<br>
    Hopefully you'll find 0some useful information to help you!</p>
    </header>
    <main id="content">
    <article id="firstfont">
    <h2>What is a Mineral</h2>
    <p>A mineral is a naturally occurring chemical compound. Most
    often, they are crystalline and abiogenic in origin.<br>
    A mineral is different from a rock, which can be an aggregate
    of minerals or non-minerals and does not have one<br>
    specific chemical composition, as a mineral does. The exact
    definition of a mineral is under debate, especially<br>
    with respect to the requirement that a valid species be
    abiogenic, and to a lesser extent with regard to it<br>
    having an ordered atomic structure. More information can be
    found <a href="https://en.wikipedia.org/wiki/Mineral" target=
    "_blank">here</a>!</p>
    <h2>What is a Rock?</h2>
    <p>In geology, rock or stone is a naturally occurring solid<br>
    aggregate of one or more minerals or mineraloids. For
    example,<br>
    the common rock granite is a combination of the quartz,
    feldspar<br>
    and biotite minerals. The Earth's outer solid layer, the
    lithosphere,<br>
    is made of rock.<br>
    Rocks have been used by mankind throughout history. From the
    Stone Age,<br>
    rocks have been used for tools. The minerals and metals found
    in rocks<br>
    have been essential to human civilization.<br>
    Three major groups of rocks are defined: igneous,
    sedimentary,<br>
    and metamorphic. The scientific study of rocks is called
    petrology,<br>
    which is an essential component of geology.<br>
    More information about rocks can be found <a href=
    "_blank">here!</a></p>
    </article>
    </main>
    </div>
    <div id="wrappertwo">
    <div id="example">
    <h1><ins>Examples of Geodes</ins></h1>
    <p>Below is a short video showing different types of Geodes.<br>
    Take a look to see the different types you can find, or hopefully
    buy!</p>
    </div>
    <img src="Arrow.png" id="Arrow" alt="Arrow">
    <div id="Geodevideo">
    <video controls="controls" poster=
    "picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser
    does not support the video tag.</video>
    </div>
    </div>
    </div>
    </body>
    </html>
    CSS
    a:visited { color: green; }
    a:hover { color: red; }
    * { font-family: "Arial Black"; }
    body {
    background: #526F35;
    font-size: 100%;
    }
    #wrapper{
    float: left;
    }
    #wrappertwo{
    float: left;
    }
    #navigation{
    float: right;
    }
    #wrapper{
    box-sizing: border-box;
    box-shadow: 0px 0px 50px black;
    font-size: 1.2em;
    border: 6px solid black;
    background: white;
    text-align: center;
    width: 60%;
    }
    #wrappertwo{
    box-sizing: border-box;
    font-size: 1.2em;
    width: 30%;
    text-align: center;
    }
    #navigation{
    box-sizing: border-box;
    border: 6px solid black;
    box-shadow: 0px 0px 50px black;
    font-size: 1.3em;
    text-align: center;
    background: #00CC33;
    width: 10%;
    height: 905px;
    }
    #Geodevideo{
    background: white;
    border: 6px solid black;
    box-shadow: 0px 0px 20px black inset;
    padding: 8px;
    }
    #Arrow{
    height: 200px;
    margin-top: 30px;
    margin-bottom: 33px;
    margin-right: 5px;
    }
    #example{
    background: white;
    border: 6px solid black;
    box-shadow: 0px 0px 50px black;
    }
    #Arrow:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition: .1s ease-in;
    }
    #textnav:hover {
    color: white;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: .3s ease-in;
    }
    #textnav1:hover {
    color: white;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: .3s ease-in;
    }
    #textnav2:hover {
    color: white;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: .3s ease-in;
    }
    #textnav3:hover {
    color: white;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: .3s ease-in;
    }

    Any reason why once hovered over, my text moves down a bit as well?

    in CSS

    Posted · Edited by luke214

    So when i hover over my Rocks text in the navigation menu, it does as I've stated, it grows in size and turns white.

    However, it also moves down the page slightly as well :o

    I have 3 other pieces of text, they all grow and turn white, but they DON'T move down, they just stay in place.

     

    Here's my HTML and CSS that refer to the element!

     

    <div id="navigation">
    <nav id="navmenu">
    <div id="textnav">
    <pre>
    </pre>
    Rocks
    </div>
    <pre>
    </pre>
    <div id="textnav1">
    Minerals
    </div>
    <pre>
    </pre>
    <div id="textnav2">
    Locations
    </div>
    <pre>
    </pre>
    <div id="textnav3">
    Identification
    </div>
    </nav>
    </div>




    CSS;
    #textnav:hover {
    color: white;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: .3s ease-in;
    }

    Quick question about size of website height and width

    in CSS

    Posted · Edited by luke214

    Basically where it is in this screenshot, but without using a margin http://pasteboard.co/k6JORoq3Z.png

    Here's what the CSS looks like;

     

    #Geodevideo{
    background: white;
    border: 6px solid black;
    box-shadow: 0px 0px 50px black;
    width: 90%;
    padding: 8px;
    margin-top: 30%;
    }
    The only reason I used a percentage was to make it responsive when resized :o
    Wasn't sure if using pixels would completely mess it up if it ended up on a smaller screen

    Quick question about size of website height and width

    in CSS

    Posted · Edited by luke214

    Oh right.

    I thought by just changing the vertical margin it would push my video down into place, and that's it.

    In what case would I use margins then, if it would just end up messing out my layout?

    And how should i position my elements without using it? :o

    If I can't use margins or positioning I'm starting to run out of ideas haha

    Quick question about size of website height and width

    in CSS

    Posted

    I can't believe i didn't notice I had it id'd TWICE...

    I feel so stupid haha.

    Well after removing that it looks great!

    It doesn't overflow anymore, even when removing the overflow element from my code.

    I guess that was the reason after all!

    One question, why is using say a high margin % to position an element bad, if it's already in a container?

    Because that parent container isn't moving, I don't understand how it would mess up the page layout :o

×
×
  • Create New...