CSS/Javascript/Html Help

M

Malikman

[H]ard|Gawd
Joined
Sep 1, 2004
Messages
1,045
Hello,
I know my title isn't very descriptive but have one webpage that you click table data's that have words in them and they switch what is in the main screen (instead of having links for 5-10 differnt pages (overexageration on the pages). Well Doing this i have a lot of getelementbyid's changing visibility and hidden's I was wondering if i can take these getelementybyid's and use them in a external CSS so that way i don't have a bunch of them in my main html. For Example:
-------------------------------------------------------------------------
<td width="12%"
onclick= "document.getElementById('home').style.visibility='visible';
document.getElementById('login').style.visibility='hidden';
document.getElementById('register').style.visibility='hidden';
document.getElementById('booklist').style.visibility='hidden';
document.getElementById('deletebook').style.visibility='hidden';
document.getElementById('displaybooks').style.visibility='hidden';">Home</td>
-------------------------------------------------------------------------------------------
I was wondering if i could make a table.showhome CSS class and put these in them in my external CSS file... or if there was a way to do this, to get rid of the clutter from my main html file.
I have them goign invisible and visible becuase there all positioned at the same spot so if i did nto they would be overlapping each other and would make NO sense. I have been looking online and have not found anything as of yet. I tried just copying them in, but becuase they are javascript functions (or at least as far as i understand) they can not be put in a CSS (as far as i understand). Any help would be appreciated :), each element btw is just a id that points to visbility = hidden or true in a CSS external file, as well as some positioning information.

Thanks for your help :),
Kamron

P.S. - also login is a obviously lgoin page where someone would put in there username and password, if they put it in wrong is there a way to have the form go back to the immediate page with the specific ID information visible so it doesnt' go to the home page automatically with a message that says "Wrong username or password, please register if you are not logged in" or something, or will i just have to have the page regenerated in php everytime i need to submit a form.
 
You are correct, you can't put any logic into a CSS file. As for your code, move all those scripts to a function in your head, then call to it in your html:

<head>
<script type="text/javascript">
function showhome() {
document.getElementById('home').style.visibility='visib le';
document.getElementById('login').style.visibility='hidden';
document.getElementById('register').style.visibility='hidden ';
document.getElementById('booklist').style.visibility='hidden ';
document.getElementById('deletebook').style.visibility='hidd en';
document.getElementById('displaybooks').style.visibility='hi dden';
}
</script>
</head>
...
<body>
<td width="12%" onclick="showhome()">...</td>
</body>
 
Well, i hadn't thought of that, but someone else i know suggested that. But the problem with that is ... although it would work for that one, i have 5 different other "links" that have a different section visible... and although i could do a function for each i think that would not really cut down on readability although it might becasue the functions woul be in the header making the body easier to read. I'm probably going to do it that way for now, unless i find a different way to do it. I was just trying to figure out if there was something i was missing so that way i could make the html file easier to read when i start adding the PHP and everything to it. (it's a project for school, where i have to make a book listing site basically, where you can buy and sell books, with the lists of users and books in a database).
 
so, you basically have a website full of different groupings of content, and you want to be able to show and hide them dynamically. Correct?

Have you thought of using jquery, mootools, or some other javascript framework? All of these have built in functions that work really well for what you're trying to achieve, and they take out all the messy / bussy work necessary.
 
One possible solution is to take in the name of the link as a paramter to the function

Code: 
<script type="text/javascript">
var links = new Array("home", "login", "register", "booklist", "deletebook", "displaybooks");

function showlink(linkname) {
    //set all to hidden first
    for (var i=0; i < links.length; i++) {
         document.getElementById(links[i]).style.visibility='hidden';
    }

    //show the one you need
    document.getElementById(linkname).style.visibility='visible';
}
</script>

<td width="12%" onclick="showlink('home')">Home</td>
<td width="12%" onclick="showlink('login')">Login</td>
.....

There are lots of javascripts frameworks out there that make this process easier. If you are going to be doing lots of javascript, definitely look into one of them.
 
I could do that, but since it is a project (and the final one at that) i'm not trying to go overboard with crazy things. As well this is just to make it less messy and easier to read when i start passing action's to PHP so i can read my variables and read the site better... It's not a necessity just something i had wanted to try.

I will check into thse things though i am sure they will be helpful :)
 
if it's a final project, wouldn't you want to go overboard?
 
You must log in or register to reply here.
Back
Top