Jump to content
Sal's RuneScape Forum
Sign in to follow this  
Saitek37

XHTML/CSS/Javascript

Recommended Posts

Howdy ho, Slammers! (Well, thats what we used to call ourselves... I think.)

I know that this section of the forum mentions grades being on the line and so on... but I have a lot of time to do this in, so unlike other topics I'd like to recieve all of your ideas!

 

My task is to create a series of web pages that will all pass the w3c HTML and CSS validators.

http://validator.w3.org/#validate_by_uri HTML

http://jigsaw.w3.org/css-validator/#validate_by_uri CSS

 

I am utterly, astonishingly bad at using CSS. For this I am not allowed to use a thing like dreamweaver, so I'll have to mark it all up using Notepad! I have myself a separate .css file, as well as my index.html to get started with, so far I have a fixed left side menu bar with links to both validators contained within. The background of the page is white and my menu is a dull grey.

 

So for my first bit, I'm going after some fancy looking navigation links to take me to my other pages, buttons that highlight when I roll over them with a font that isn't completely ugly to look at. I usually pick Arial size 12pt for main text with Century Gothic size 24pt for things like titles. I'm wondering if anyone on Sals realm has any idea how to make buttons using nothing but markup that still isn't really ugly? (I know it's possible.)

 

As a side mission, there's a lady I'd like to impress with this, I'll be busy making a clock ticker for now!

Share this post


Link to post
Share on other sites

549862fc29b3c5e84451eae0c46e040a.png?1364502915

 

They have a hover-over effect too, but this is an image of them. Obviously the styling is up to you to choose, but it's the functionality that's important!

 

<ul>
<li><a href="1">Button 1</a></li>
<li><a href="2">Button 2</a></li>
<li><a href="3">Button 3</a></li>
<li><a href="4">Button 4</a></li>
<li><a href="5">Button 5</a></li>
</ul>

 

ul
{
text-align:center;
margin-right:40px;
font-family:verdana;
}
li
{
display:inline;
text-align:center;
}
a:link, a:visited
{
background-color:#CDCDCD;
padding:5px;
margin:0px;
border-style:solid;
border-width:1px;
color:black;
text-decoration:none;
display:inline-block;
}
a:hover, a:active
{
background-color:#C4C4C4;
}

Edited by MFI

Share this post


Link to post
Share on other sites

I made up a quick little shoutbox that just echoes back what you type in. This is done using pure javascript, though can easily be done in jQuery as well and html. This will not be there if you refresh the page since you have no way of saving this data to the site unless you use another language server side like php or ruby. Since you didn't mention these I assume you don't want to use those for this assignment. Feel free to break it up and re-use it as need be and add the script into the header so w3c doesn't complain you have scripts in your body :P .

<!-- ADD THIS TO HEADER -->
<script type="text/javascript">
function addToDiv()
{
var text = document.getElementById('textBx');
document.getElementById('logBox').innerHTML += "<br>"+text.value;
text.value = "";
}
</script>
<!-- ADD THIS TO BODY -->
<div id="logBox">This is a chat Log...</div>
<textarea id='textBx' cols="25" rows="5" onkeydown="if (event.keyCode == 13) { addToDiv(); return false; }">Type in here
and press enter</textarea>

The onkeydown listener listens to if the "ENTER" key was hit, if so it adds the text and cancels the enter key press (return false) so an enter does not appear in the textbox. You can also replace onkeydown with a button that on click links to the function, it would give the same result :)

 

Good luck in your assignment. If you want to use jQuery there are a lot of cool things you can do style wise to make your site really stand out :)

 

As for style there are a lot of tutorials out there but something that I really like about css3 is the fact you can select elements inside others, for example you could do this;

<div id="Bob">
<p>This should be formatted!!!!!</p>
</div>
STYLE
#Bob > p {
padding-left: 5px;
}

the arrow means you are selecting any "p" tags inside any element (should be just 1 officially) that have "Bob" as their id. This format works for any class, id or tags, (#Bob > .leftPadding > p)

Select any p elements inside any leftPadding classed elements inside the element with Bob as an Id.

 

Enjoy :)

Edited by fmichael

Share this post


Link to post
Share on other sites

Alright, this is good and dandy, but two things now.

Can I have it so that the value entered remains between pages? (I remember bits about session ID's)

And can I destroy the text box after it's been used?

If I have my session variable, will the text box stay destroyed?

Share this post


Link to post
Share on other sites

all of those things are possible yes, in order to keep the values entered each time you would have start up a little table (SQL) on the backend that php enters the values into and then grabs and sends back to your main page every time it loads.

 

If you implement a session variable than you could start using usernames with this chatbox but I dunno how far you want to get with this little thing :P

 

I assume by destroyed you mean something like; after a user enters a message the box dissapears and could be replaced with a message "Thanks for giving your feedback!" or a more appropriate message.

 

The other option is to find online a free little shoutbox you can just stick in that does this on their servers though I'm not sure if you'd be allowed to do this :)

 

If you really want to; step one would be to find out if you have a database you can use for this project and that your uni allows you to use php for this assignment :)

Share this post


Link to post
Share on other sites

PHP Yes, but SQL no. All I really need is for the name to appear (it does).

With that, I'm only really after two things concerning the text box itself, one is having the text present within it disappear when the user clicks the mouse inside. And the second is making it disappear after the name has been printed.

Share this post


Link to post
Share on other sites

mk, just add an onclick="this.value=''" to your textbox, this will reset any text inside to blank whenever you click on it :)

 

as for removing the textbox after enter; just replace the line that blanks the textbox with; text.parentNode.removeChild(text);

this will call the textbox's parent element's remove child function which will remove the element from the screen.

Share this post


Link to post
Share on other sites

Works brilliantly, thankyou! I added the removeChild bit to the end of addtoDiv and that seems to get it, and blanking the textbox was easy peasy once I got my speech quotations sorted out!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site, you agree to our Guidelines and Privacy Policy.