luke214
-
Posts
66 -
Joined
-
Last visited
luke214's Achievements
Newbie (1/7)
0
Reputation
-
INSIDE the window.onload!
-
Oh no, everything works perfectly, as shown in my screenshots all I want is for the "Welcome" text to appear with everything else at the same time
-
Well everything works apart from the timing on when it says welcome :/
-
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!
-
IT WORKS! Thank you so much Makes perfect sense to me now!
-
I actually did that javascript code in a seperate .js file, is that wrong? 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
-
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
-
Thank you for all the help Foxy!
-
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= "https://en.wikipedia.org/wiki/Rock_(geology)" target= "_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; }
-
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 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; }
-
Awesome! Well that's finally sorted out I can finish off my page and learn more about media queries Thanks!
-
Makes sense! I thought ems were used for font sizes, guess I was wrong I'll just use pixels then and pray whatever I make still looks good on a smaller screen haha
-
Plus I'd still like to know if using pixels for margins on a responsive website is the right way to go
-
It's not the final version haha. Hmm ok, how would I go about having some space between the elements even when they stack vertically?
-
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 Wasn't sure if using pixels would completely mess it up if it ended up on a smaller screen
