Clark Kent/Superman Page Change Toggle, Trying to work with HTML and CSS to create an on click event. Options

[Martha]

Above is an example of the web layout I am trying to set up. I've begun to learn some simple css and have a way to add it into an HTML page as a bottom area, I also have an area for boot strapping that can be used if need be. I've never used boot strap before so that area is completely new and unknown.

The idea is to make the entire table area, text, picture, the individual cells of the table, anywhere on the page. I can change a block of text from black to red, or change the background from blue to pink, but that's a single attribute, and I haven't been able to set up a toggle event so that if it is clicked again it the change reverts back. The goal is to have the page, on click, change from Clark Kent to Superman, then if Superman is clicked it changes back to Clark Kent.

I also know how to set up a button that toggles, and "click me" that show or hide a paragraph or two, but when I put in aspects more complicated they break.

Thank you for help on this, I'm still working on bettering myself and want to learn more. CharlesEF really expanded my mind and hooked me on this, I want to learn more.

[CharlesEF]

i'm not sure but I don't think CSS can be used that way. I think you will need to use Javascript, which would be easy. So, you want a button to click and toggle the Clark Kent or Superman table? Do I understand you correctly?

[CharlesEF]

Here is a sample page that uses a button to toggle the view. I 'assumed' you would want to apply this method to more than 2 tables so I wrote a function. Just pass the 2 table id's as parameters. Also, you should learn to use CSS for all your style needs. The reason is, for example,

CODE

<table id="ClarkKent" align="center" width="80%">

the align and width attributes are not supported in HTML5. By using CSS you avoid problems if you ever change to an HTML5 doctype. And, you should learn to validate your HTML and CSS pages, to check for errors. By removing errors you can help ensure that your page looks the same regardless of the browser the user is using.

To validate HTML5 use this link. To validate all other HTML doctypes use this link. To validate CSS use this link.
 toggle.htm ( 2.08k ) Number of downloads: 526

[Martha]

I've begun to use notepad ++ to help with the writing of pages as it has a setting for the languages but I'll remember to validate them as well. *Bookmarks the links to use in the future*

Onto the function that was used there, yes that's the result I want where the page switches completely, but I am trying to find a way to do it where the whole page is the button so if someone clicks anywhere on the page it switches over. I want to avoid a button on the side.

I've seen instances where you click on a picture and it changes to another picture, and I've written a script that does a simple random sample so that each time the page loads you get a random picture from a set list. Hmm, if Javascript is something I would need to get this to work then I'll start digging in that direction.

I think I'll sign up for a college class on this when school next starts up.

[CharlesEF]

Does that mean you will only have 2 tables per page? If yes, then remove the HTML button code:

CODE

<div>
<button onclick="toggleView('ClarkKent', 'Superman')">Toggle</button>
</div>

and add this code to the Javascript section:

CODE

document.onclick = function()
{
toggleView('ClarkKent', 'Superman');
}

Now it should do what you want.

[Martha]

It should mean that I only have two tables per page, though the tables are complex. *edits the test file* lets see removing the div class mentioned and looking over the javascript section ... where would this go ...

Okay now then if I am reading this right
document.onclick = function sets the field so that when someone clicks the function is activated.
toggleView is the action that will be taken by the function. 'ClarkKent' 'Superman' then become id1 and id2 later on.
The end is the if/else aspect that you worked with me on before. This covers which item gets hidden and which is shown.

I don't quite see the full picture of this language yet, but I'm starting to understand more and more.

[CharlesEF]

The code you posted is correct and you have a good understanding of what's going on. The reason I asked about 2 tables per page is that the function call can't be changed for different table names. Also, any links or buttons you place on the page might not work, because of the document.onclick statement.

I used the variable names 'div1' and 'div2' but I could've used 'table1' and 'table2' instead. And yes, div1 and div2 become id1 and id2 in the actual function. If you plan on having other pages that require the same functionality as this page then you should break it up. Create an external JS file with the 'function toggleView(id1, id2)' code in it. Link the external JS file to each page that needs it using the <script> tag in the head section. Now, each page will still need this section of code, in the head section:

CODE

<script type="text/javascript">
document.onclick = function()
{
toggleView('ClarkKent', 'Superman');
}
</script>

Of course, you need to change the table names to match those on the page.

[Martha]

It's just a few separate profiles on a site that still only uses html 4, though they have started to add bootstrap and css. Each profile can be split into two tables and those would be the only two needed. It is nice to know that I can't add 3 or 4 into the rotation, but for that I think I might already have the beginning of an idea how to use it based on the clock code. If I make a function where n=0 is the start, then each time the page is clicked n=n+1 until the last number is reached (say 4) then if n=5 n=0 would reset it back to start. I don't have the full language written out and I want to try and do this on my own before I get any help. I can often learn more by making a few mistakes, then fixing them, than I can by having the answer handed to me.

[CharlesEF]

That's fine, if you need any help just post a new question.