Web Design

Scotty · August 26, 2011, 01:53:01 AM

Alrighty! Now we're getting froggy. I'll tackle the hide/show table part first, as this one's gonna probably be a bit of a doozy. I'll put the code up first:

http://jicamadickables.dyndns.org/table.html

Code Select


<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8" /> 
  <title>trigger display</title> 
  <style> 
    #table {
      display: none;
      border 1px solid gray;
      border-collapse: collapse;
    }
    th {
      border: 1px solid gray;
    }
    td {
      border: 1px solid gray;
    }
  </style> 
</head> 
 
<body> 
  <button onClick="triggerTable()" >Click me to display/hide the table</button> 
  <table id="table"> 
    <tr> 
      <th>Title</th> 
      <th>Another Column</th> 
      <th>Yet another column</th> 
      <th>Another for giggles</th> 
    </tr> 
    <tr> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
    </tr> 
    <tr> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
    </tr> 
  </table> 
</body> 
  <script type="text/javascript"> 
    var myTable = document.getElementById("table");
 
    function triggerTable() {
      var myTableDisplay = myTable.style.display;
      if (myTableDisplay == 'block') {
        myTable.style.display = 'none';
      } else {
        myTable.style.display = 'block';
      }
    }
  </script> 
</html>

notice the <style> ... </style> at the top. I put all the css at the top using an id for the table (kinda like classes, but id's are supposed to be unique to just ONE object, not a bunch) for the table.
I put the Javascript at the bottom using the <script type="text/javascript"></script> at the bottom. I can get into it later as to why I put it at the bottom, that's a different subject all together. Quick and easy to say, the page will load faster.

Without getting too into the code (that's what w3schools is for), the CSS is telling the page NOT to display the table when the html file is loaded in your browser. by saying display:none for the table, the table will not show up on the page. Now the trick is to get the <button> to show the table when clicked. In order to do that, we need to use javascript. Towards the bottom, with the <script> object, I tell it to scan the page for the object that has id="myTable", once it finds it, it will be the table. when the button is clicked, if the table is hidden, it will display it, if it is displayed, clicking the button will hide it.

Something like this is probably won't help you much at this stage. Going through the javascript classes at w3schools will definitely help speed you along. You have my messenger info, so hit me up and I can try and walk you through it a bit more tomorrow.

sayers6 · August 26, 2011, 07:55:48 AM

Thanks again Scotty :)

Scotty · August 26, 2011, 07:54:48 PM

If you want to use <button> to make an image link (there's several different ways to link images, this is only one, and not the best), you could try either of the following two examples:

http://jicamadickables.dyndns.org/buttonlarge.html
http://jicamadickables.dyndns.org/buttonsmall.html

buttonlarge.html:

Code Select


<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" /> 
    <title>button styling</title> 
    <style> 
      #styled {
        width: 76px;
        height: 77px;
        background: #D8D8D8 url("Sword.png") center center no-repeat;
        border: 5px solid gray;
        cursor: pointer;
      }
      #notStyled {
        width: 76px;
        height: 77px;
        background: transparent url("Sword.png") center center no-repeat;
        border: 0;
        margin-top: 25px;
      }
    </style> 
  </head> 
 
  <body> 
    <button id="styled"></button> 
    <br> 
    <button id="notStyled"></button> 
  </body> 
 
  <script type="text/javascript"> 
    button = document.getElementById('styled');
    image  = document.getElementById('notStyled');
 
    button.addEventListener("click", link, false);
    image.addEventListener("click", link, false);
 
    function link() {
      window.location='http://www.stick-online.com';
    }
  </script> 
 
</html>

buttonsmall.html:

Code Select


<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" /> 
    <title>button styling</title> 
    <style> 
      #styled {
        width: 76px;
        height: 77px;
        background: #D8D8D8 url("Sword.png") center center no-repeat;
        border: 5px solid gray;
        cursor: pointer;
      }
      #notStyled {
        width: 76px;
        height: 77px;
        background: transparent url("Sword.png") center center no-repeat;
        border: 0;
        margin-top: 25px;
      }
    </style> 
  </head> 
 
  <body> 
    <button id="styled" onClick="window.location='table.html'"></button> 
    <br> 
    <button id="notStyled" onClick="window.location='table.html'"></button> 
  </body> 
</html>

So what's the difference between the two? buttonlarge.html is an ideal construct for larger projects. It doesn't use inline javascript so the page loads better, is easier to read, maintain, debug, and if pushed out to an external file, under different circumstances could be cached while the dynamically rendered HTML document couldn't. In this small case example, it's overkill, but it shows you how little HTML you really need, and how a lot of it is CSS and javascript.
buttonsmall.html is more fitting for this small example. The javascript is minimized down to inline javascript, embedded on each button. Something this small doesn't require much maintenance or ease of reading, so we're fine using this in such a scenario.

Javascript and which is better aside, the way it works is you stylize the button to use a background-image. You could theoretically put text between <button ...></button> and it will overlay the picture, but I didn't want to get overly complicated. If you load the examples, the top one looks more like a button, with an exaggerated border thickness and background color of "gray" and even a cursor image similar to what you would see if you hovered your mouse over an <a> link. The bottom looks nothing at all like a button, vice a plain image. No cursor, background color, nothing. If you click both, they take you back here to stick-online.com. The way you'd link them is by using javascript, but you're using the onClick event listener inline with the button object. Without getting overly complicated, all you'd need to do is change the URL. If you want me to get into what window.location does, I'd be happy to, but unless you're familiar with Javascript and the DOM, it'll likely just confuse you.

I still plan to explain my previous hide/show example, I just have to take the time to break it out a bit more. You can likely expect something later this evening on that.

sayers6 · August 26, 2011, 11:13:41 PM

Why does buttonsmall open up a table? I see it in the html I mean, but I thought you were making them all link back to stick-online.com *confusion* Other than that, I'm finding it amazing how I can pick out what things are doing in the code, while before I was beyond clueless...It's a hell of alot easier than I thought.
EDIT: My only confusion is this

Code Select

<meta charset="utf-8" />
EDIT: EDIT:Also is there a way to host a web page cheaply, I would just like to see how the whole process works and be able to test it remotely.

igufed · August 27, 2011, 12:45:47 PM

Quote from: sayers6 on August 26, 2011, 11:13:41 PM
EDIT: EDIT:Also is there a way to host a web page cheaply, I would just like to see how the whole process works and be able to test it remotely.

My current web host has a 2 week free trial going on. Other than that, it is 8.95/mo. for virtually unlimited everything. Email addresses, domains (you still have to purchase the domain name, but, I'm pretty sure you get one free one included in your hosting plan), subdomains, mysql databases..

http://dreamhost.com

There are many web hosts out there, try a google search to find a good one that suits you. But, if you do sign up for Dreamhost, PM me for my info to say who referred you so we both benefit. ;)

Scotty · August 27, 2011, 01:05:10 PM

Quote from: igufed on August 27, 2011, 12:45:47 PM
Quote from: sayers6 on August 26, 2011, 11:13:41 PM
EDIT: EDIT:Also is there a way to host a web page cheaply, I would just like to see how the whole process works and be able to test it remotely.

My current web host has a 2 week free trial going on. Other than that, it is 8.95/mo. for virtually unlimited everything. Email addresses, domains (you still have to purchase the domain name, but, I'm pretty sure you get one free one included in your hosting plan), subdomains, mysql databases..

http://dreamhost.com

There are many web hosts out there, try a google search to find a good one that suits you. But, if you do sign up for Dreamhost, PM me for my info to say who referred you so we both benefit. ;)

I've been looking at dreamhost for a while now but never pulled the plug with them. They have a LOT to offer, with subversion, jabber services, python, and a LAMP stack, how satisfied have you been with them? How you had much in the way of outages or bad support?

igufed · August 27, 2011, 01:15:53 PM

Quote from: Scotty on August 27, 2011, 01:05:10 PM
I've been looking at dreamhost for a while now but never pulled the plug with them. They have a LOT to offer, with subversion, jabber services, python, and a LAMP stack, how satisfied have you been with them? How you had much in the way of outages or bad support?

I started with them in 2006 and have noticed zero unplanned outages (can can really only think of 1, maybe 2 planned ones that lasted a couple minutes over the years). I've never had to contact support for anything. Everything has worked pretty damn flawlessly for me.

So, if you're wanting to switch to them from another hosting company or it is your first, I 100% recommend them.

Scotty · August 28, 2011, 02:18:31 AM

Quote from: sayers6 on August 26, 2011, 11:13:41 PM
EDIT: My only confusion is this
Code Select Expand
<meta charset="utf-8" />

That is a required <meta> tag for HTML(5). According to the W3C:

QuoteIt is very important that the character encoding of any XML or (X)HTML document is clearly labeled, so that clients can easily map these encodings to Unicode.

Read that as:

QuoteJust remember to paste this into your code, so that Chrome/Firefox/Internet Explorer/Safari/etc... can understand how to display it.

If you want to get down into the weeds on it, read more here:
http://www.w3.org/International/O-charset

Scotty · August 28, 2011, 10:42:37 PM

Code Select


<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8" /> 
  <title>trigger display</title> 
  <style> 
    #table {
      display: none;
      border 1px solid gray;
      border-collapse: collapse;
    }
    th {
      border: 1px solid gray;
    }
    td {
      border: 1px solid gray;
    }
  </style> 
</head> 
 
<body> 
  <button onClick="triggerTable()" >Click me to display/hide the table</button> 
  <table id="table"> 
    <tr> 
      <th>Title</th> 
      <th>Another Column</th> 
      <th>Yet another column</th> 
      <th>Another for giggles</th> 
    </tr> 
    <tr> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
    </tr> 
    <tr> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
      <td>value</td> 
    </tr> 
  </table> 
</body> 
  <script type="text/javascript"> 
    var myTable = document.getElementById("table");
 
    function triggerTable() {
      var myTableDisplay = myTable.style.display;
      if (myTableDisplay == 'block') {
        myTable.style.display = 'none';
      } else {
        myTable.style.display = 'block';
      }
    }
  </script> 
</html>

Alright, sorry for the double post, but I'm going to explain how to take this example of showing and hiding the table and plug it in elsewhere. To summarize into different groups so that you can understand it a bit better, imagine a dumbed down generic view of the syntax:

Code Select


<html>
  <head>
    <!-- all your header info, title, meta, links, etc.. -->
    <style>
      <!-- CSS goes here -->
    </style>
  </head>
  <body>
    <!-- Your table and other stuff to display as usual -->
  </body>
  <script type="text/javascript">
    <!-- All your javascript -->
  </script>
</html>

So I've essentially summarized the first code block with the second one. With that understanding, there's a few lines in the first code block I want to elaborate on. The first is <button onClick="triggerTable()" >Click me to display/hide the table</button> . What you see next to button, the onClick="..." is an "Event Trigger". Essentially, an event occurs (i.e. user clicking the mouse on it), trigger an action. The action that is taken is defined in the onClick="action". the value read is a custom name I've called it, triggerTable. triggerTable is a javascript function that is seen down below between the <script ...></script> tags. I'm not going to get into the javascript, as to jump straight into trying to explain the javascript is going to confuse you, especially since we are skipping straight to the DOM portion. Another key part is the line directly beneath that reads: <table id="table"> . You may have seen some CSS stuff done with object ID's, where you can style them in CSS (as I have also done in this example), Javascript also works with ID's as well, and the specific function I've created relies on finding a table that has id="table" set so that it knows what table to hide or show. Those are the two key things to remember.

So say you want to plug this in elsewhere... How do you do it? It isn't as hard as it may seem. Create any standard table, however you want it. Style it, give it as much values as you want, just remember to give it an id of table using id="table". The hiding and showing of the table relies on it having an id of "table". DO NOT use id="table" more than once in your file. If you have a need to do more than one hiding/showing, let me know and I'll see you through that. Also, whatever it is you want to have trigger the hiding and showing of the table, it can be a button, it could be an anchor, hell, it could be a paragraph, or <p> if you want. You just need to make sure that in the tag, like I did with button, that you use the onClick="triggerTable()" event trigger. Heck, you could theoretically have 30 different things on your page that could trigger hiding or showing the table, as you can move the onClick around as you see fit.

So to summarize, to get this to work elsewhere, paste everything (including the script tags) between <script type="text/javascript"> and </script> between </body> and </html> in your next html file. Then make sure the table that you want to have hide or disappear has an id of "table", with id="table". Also, make sure your button has onClick="triggerTable()" in it, and boom. Your all set.
Also, if you want to have the table not appear when the page loads, you want to make sure you set the CSS to not display it by setting display: none;. You can do this at the top in the <style> tags as I have, or you can put it right after the onClick in the table. So it would read <table id="table" style="display: none;">... </table>

sayers6 · August 28, 2011, 11:38:42 PM

Quote from: Scotty on August 28, 2011, 10:42:37 PM
So say you want to plug this in elsewhere... How do you do it? It isn't as hard as it may seem. Create any standard table, however you want it. Style it, give it as much values as you want, just remember to give it an id of table using id="table". The hiding and showing of the table relies on it having an id of "table".[/font]

I think I understand most of it, and also, by "Isn't as hard as it may seem", it literally took me less than a minute to implement it, I'm loving web design, I think I could actually do something with this. I have a very good memory, and that's what a lot of this needs. I never was really interested in web design, but some of the simple stuff I've seen done on here, like the PVP league, and my web class, has really got me liking this stuff. At first I tried to jump in with books, that just confused me, the single example at a time and asking questions with people works a hell of a lot better, my other question is, what do I need to do first? Learn just HTML, or HTML and CSS, or JS too? I'm afraid of trying to tackle so many things at once, and not learning the good coding habits from the start, and making it harder to fix pages in the future. Thanks everyone for the help. :)

Scotty · August 29, 2011, 11:12:11 AM

Quote from: sayers6 on August 28, 2011, 11:38:42 PM
Quote from: Scotty on August 28, 2011, 10:42:37 PM
So say you want to plug this in elsewhere... How do you do it? It isn't as hard as it may seem. Create any standard table, however you want it. Style it, give it as much values as you want, just remember to give it an id of table using id="table". The hiding and showing of the table relies on it having an id of "table".[/font]
I think I understand most of it, and also, by "Isn't as hard as it may seem", it literally took me less than a minute to implement it, I'm loving web design, I think I could actually do something with this. I have a very good memory, and that's what a lot of this needs. I never was really interested in web design, but some of the simple stuff I've seen done on here, like the PVP league, and my web class, has really got me liking this stuff. At first I tried to jump in with books, that just confused me, the single example at a time and asking questions with people works a hell of a lot better, my other question is, what do I need to do first? Learn just HTML, or HTML and CSS, or JS too? I'm afraid of trying to tackle so many things at once, and not learning the good coding habits from the start, and making it harder to fix pages in the future. Thanks everyone for the help. :)

Learning isn't nearly as strenuous as you may think. To learn Javascript, there's less than a week's worth of books and tutorials to learn the basic constructs, past that, learning best occurs case-by-case with a couple of reminders of best practice in-between. CSS is even easier as it is often instant as to whether or not it works. You want to accomplish x, do y. Later on, you'll learn through other cases that y should be done like z.
The biggest headache you're going to run into is reading a lot of "Firefox/Chrome/Safari do this. Internet Explorer 6 do this. Internet Explorer 7 & 8 do this. 9 do this." The cross-browser compatibility is definitely going to induce headaches, and my best advice is to write everything down for reference somewhere. If you encounter something in javascript or CSS that only works on certain browsers, instead of having to re-investigate how to do it every time, if you have a running list of things you've done to overcome certain scenarios, it'll easily cut off hours off development. That and stackoverflow.com is a God-send for developers.

Also, before you make the mistake, make sure you at least have a fundamental understanding of javascript before jumping into using libraries like JQuery or Prototype. Although it may seem nice and easy to implement by the naive, if you don't have a basic understanding of how to do things in Javascript, and go straight to using a shortcut like JQuery, there will come a time when you find yourself in a rut because you don't know how the basics work. I say this because I am a victim of my own warnings. Don't read this as "don't use JQuery", as that would be blasphemous. Google uses it, Facebook (I think) uses it, it's definitely worthy of your attention, just not your immediate attention.

sayers6 · August 29, 2011, 10:57:44 PM

Any book you would recommend? I don't have a mobile internet device yet, so I can't have w3schools with me wherever I go. :/ But I would be interested in a JS book, I love learning If-Then and things :)

Scotty · August 30, 2011, 12:05:39 AM

Quote from: sayers6 on August 29, 2011, 10:57:44 PM
Any book you would recommend? I don't have a mobile internet device yet, so I can't have w3schools with me wherever I go. :/ But I would be interested in a JS book, I love learning If-Then and things :)

For CSS2 (pretty much the universal version): http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_1? (I've recommended this to others, have yet to hear from one person it wasn't the best CSS book they've bought).
CSS3 (only modern browsers support it... sorta): http://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863/ref=sr_1_1?s=books&ie=UTF8&qid=1314676876&sr=1-1 (Co-worker was contacted by the publisher to read it and review it for them, he loves it)
Javascript - there's a couple. For the exhaustive all-encompassing version: http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_1?s=books&ie=UTF8&qid=1314676950&sr=1-1
For a few more advanced Javascript books, try: http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_2?s=books&ie=UTF8&qid=1314676950&sr=1-2 and http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/ref=sr_1_4?s=books&ie=UTF8&qid=1314676950&sr=1-4

Once you get a good understanding of javascript, if you want to get into more server side scripting like Active Server Pages, .NET, Java or PHP, they will definitely come easier to you.

sayers6 · August 30, 2011, 10:44:22 PM

I plan on buying that JavaScript one, but Borders was going out of business so I bought A CSS3 book that also covered CSS2. And I love how you said "a week's work of books", then linked to a 1098 page book. I'd hate to see your heavy reading. Anyways, I know there is a way to do some of this, and I'm nowhere near it, but how exact could you be about what a computer sees when one has Firefox 6.0, and a different one with IE6, and yet another with 7? Could you completely change what the webpage shows just off of a minor browser difference? I've seen huge differences with Firefox/IE/Chrome, but I just wonder if you could change it to where there is a difference between someone viewing with Firefox 6.0.1.01 and 6.0.1.02? Just wondering. And it is possible to have several versions of each browser without a lot of work? I'd like to see the subtle differences of each one. Also, is it a good idea to have code "layered" (I think that's what it's called anyways) or does it really not matter? Where the code is moved to the right the more tags it has around it? My teacher never seems to do it, but videos I've seen always show it, so I try to do it. Also for a beginner would you recommend using The comment lines a lot to mark what things are all the time, or just learn how to pull out what is what by looking at it? And how are the various labels done on the forums, like in the left corner where it says "Stick Online Forums" over to the right and down where it is shaded differently than the rest of the page? and so on and so forth, like how the area around the text box I'm typing into is bubbled out from the white page and stuff like that...I hope you understand this, or I may take a screen shot and highlight what I'm meaning...Cause its hard to explain...In fact I will do that. I'll post it in a bit lol.

Uploaded with ImageShack.us

igufed · August 31, 2011, 12:00:10 AM

I THINK what you're asking is how does it format/style certain areas different than the others? If that is correct, it's how you position your divs and giving each one different styling for how you want it to look.

This is my example of how I interpreted what you're asking: http://igufed.com/this

I took it as how do you style this text different than that text. Along with how does this area look different/stand out from that area.

Have you done anything with the <div> tag, yet? Either way, take a look at the source and see if you understand or need more info.

If I'm completely wrong on what you're asking, I'm sure Scotty will come in and answer it properly. ;)

News:

Web Design