[SOLVED] JavaScript and CSS - Changing layer order on click?

Cerys · March 1, 2009

I have a web page (http://dvelopphotography.com/lang/german/index.php).

On it are three different layers: one with an english word on it, one with a german word on it, and one with a "hint" on it.

What I'd really like is a code that, when someone clicks "hint", brings the hint layer (div id="card3") to the front. Ditto the "german" layer (div id="card2") when "answer" is clicked.

If you can help me out, I'd really appreciate it. Let me know if you need to see the complete codes I'm using.

Thank you!

jackpf · March 1, 2009

You could use javascript to hide/display each div:

function togglehint(element)
{
var element=document.getElementById(expand).style;
if (element.display == "none")
{ 
	element.display = "block";
}
else
{
	element.display = "none";
}
}

Then use <a href="Javascript: togglehint('card2')">hint</a>

Cerys · March 1, 2009

Thanks for that... I'm going to ask a really embarassing question now which is:

Where do I put that? And how?

:-[

jackpf · March 1, 2009

Lol. Put it in the <head> of your document, between <script type="text/javascript"> </script>

All this does is define the function.

Good luck.

Cerys · March 1, 2009

Ahh, thought so.

The only problem now is that it doesn't seem to work? (JavaScript is enabled, I checked)

Here's the code I'm using (including your JS). Please forgive the hideousness of it, I only started using php and js eleven hours ago (never do favours for your parents, it's never as easy as they tell you it will be...)

<html>
<head>
<title>Server test Page </title>
<link rel="stylesheet" type="text/css" href="css.css">

<style type="text/javascript">
function togglehint(element)
{
   var element=document.getElementById.style(expand);
   if (element.display == "none")
   {
      element.display = "block";
   }
   else
   {
      element.display = "none";
   }
}
</style>

</head>
<body>

<div class="card1" id="card1">
<?php 
/* Connecting to MySQL */
$link = mysql_connect("localhost", "admin4413", "christine") 

or die("Could not connect : " . mysql_error());

$DB = "dvelopphotography_com_lang";
mysql_select_db($DB) or die ("Database $DB not select.." . 

mysql_error());


$table = "german";
mysql_select_db($DB) or die ("Database $DB not select.." . 

mysql_error());


$result = mysql_query( "SELECT english FROM $table LIMIT 

1,1");
$total_rows = mysql_num_rows( $result );
print " \n";
while ( $pr_row = mysql_fetch_row( $result ) )
{
foreach ( $pr_row as $data )
print "\t $data";
}
mysql_close ( $link );

?> 
</div>

<div class="card2" id="card2">
<?php 
/* Connecting to MySQL */
$link = mysql_connect("localhost", "admin4413", "christine") 

or die("Could not connect : " . mysql_error());

$DB = "dvelopphotography_com_lang";
mysql_select_db($DB) or die ("Database $DB not select.." . 

mysql_error());


$table = "german";
mysql_select_db($DB) or die ("Database $DB not select.." . 

mysql_error());


$result = mysql_query( "SELECT german FROM $table LIMIT 1,1");
$total_rows = mysql_num_rows( $result );
while ( $pr_row = mysql_fetch_row( $result ) )
{
print "";
foreach ( $pr_row as $data )
print "\t $data";
print "\n";
}
print "\n";
mysql_close ( $link );

?> 
</div>
<div id="card3" class="card3">
<?php 
/* Connecting to MySQL */
$link = mysql_connect("localhost", "admin4413", "christine") 

or die("Could not connect : " . mysql_error());

$DB = "dvelopphotography_com_lang";
mysql_select_db($DB) or die ("Database $DB not select.." . 

mysql_error());


$table = "german";
mysql_select_db($DB) or die ("Database $DB not select.." . 

mysql_error());


$result = mysql_query( "SELECT hint FROM $table LIMIT 1,1");
$total_rows = mysql_num_rows( $result );
while ( $pr_row = mysql_fetch_row( $result ) )
{
print "";
foreach ( $pr_row as $data )
print "\t $data";
print "\n";
}
print "\n";
mysql_close ( $link );

?> 
</div>

<div class="link">
<a href="#">Move on</a>
<br>
<a href="JavaScript: togglehint('card3')">Hint</a>
<br>
<a href="JavaScript: togglehint('card2')">Answer</a>
</div>

</body>
</html>

jackpf · March 1, 2009

You have <style>, you should have <script>

Cerys · March 1, 2009

Changed that (thanks. I seriously can't believe I did that. gah), and still no joy

If it refuses to work, do you think there could be a way to do it with php?

jackpf · March 1, 2009

PHP is server side, so no.

Hmm...do you get any javascript errors?

Cerys · March 1, 2009

No, it's (apparently) working fine in ff and ie, which is what's confusing me. If the code was wrong it'd be turning up an error, but it's just that nothing's happening...

http://dvelopphotography.com/lang/german/index.php

darkfreaks · March 2, 2009

Fixed up some things in your function:

function togglehint()
{
   var element=document.getElementById.style(expand);
   if (element.display === "none")
   {
       element.display = "block";
   }
   else
   {
    var  element.display = "none";
   }
}

<a  href="" onclick=" togglehint('card2);">
<a  href="" onclick=" togglehint('card3');">

jackpf · March 2, 2009

Wait, this should work:

function togglehint(element)
{
   var element=document.getElementById(element).style;
   if (element.display == "none")
   {
      element.display = "block";
   }
   else
   {
      element.display = "none";
   }
}

darkfreaks · March 2, 2009

use onclick it works better than the JS call in the url

Cerys · March 2, 2009

So... I've tried both the JS codes, and changing the JS for an onclick url... And it still doesn't work with any combination.

I think I'm having PTSD flashbacks to when I first tried to learn JS

As much as it hurts, I might scrap the css and try and find a way to just replace it with the variable I want from my database. I have no idea if anything like that's even possible? I think this is going to kill me...

darkfreaks · March 2, 2009

Fixed again took the second var out:

function togglehint()
{
   var element=document.getElementById.style;
   if (element.display === "none")
   {
       element.display = "block";
   }
   else
   {
  element.display = "none";
   }
}

<a  href="" onclick=" togglehint('card2');">
<a  href="" onclick=" togglehint('card3');">

jackpf · March 2, 2009

Fixed again took the second var out:

function togglehint()
{
   var element=document.getElementById.style;
   if (element.display === "none")
   {
       element.display = "block";
   }
   else
   {
  element.display = "none";
   }
}

<a  href="" onclick=" togglehint('card2');">
<a  href="" onclick=" togglehint('card3');">

I don't see how that would work since you're not getting any element's id, nor have you declared it in the function.

The javascript I posted is what I use, and it works fine. (take a look here, on click on the help link in the top right. If you copy my code it should work)

However, you could use a get request instead. Something like <a href="?hint=on">hint</a>

And PHP-

if($_GET['hint'] == 'on')

{

echo 'this is a hint';

}

darkfreaks · March 2, 2009

Fixed again took the second var out:
function togglehint()
{
   var element=document.getElementById.style;
   if (element.display === "none")
   {
       element.display = "block";
   }
   else
   {
  element.display = "none";
   }
}
<a  href="" onclick=" togglehint('card2');">
<a  href="" onclick=" togglehint('card3');">
I don't see how that would work since you're not getting any element's id, nor have you declared it in the function.

The javascript I posted is what I use, and it works fine. (take a look here, on click on the help link in the top right. If you copy my code it should work)

However, you could use a get request instead. Something like <a href="?hint=on">hint</a>

And PHP-

if($_GET['hint'] == 'on')

{

echo 'this is a hint';

}

you dont have to define functions for them to work and i was error proofing your function it had alot of "eleement already defined" errors which i fixed.

Cerys · March 2, 2009

The javascript I posted is what I use, and it works fine. (take a look here, on click on the help link in the top right. If you copy my code it should work)

However, you could use a get request instead. Something like <a href="?hint=on">hint</a>

And PHP-

if($_GET['hint'] == 'on')

{

echo 'this is a hint';

}

The javascript should work, it just doesn't and I have no idea why.

That php works , next question: can I make it grab the value of the 'hint' column in my database and display it?

darkfreaks · March 2, 2009

im uncertain what you mean can you be more specific ???

Cerys · March 2, 2009

I can try... Please keep in mind that I've been learning this stuff for a grand total of about 13 hours now, so I have only a vague idea of what is/is not possible and the correct terms to express it in.

I have a MySql database ('dvelopphotography_com_lang'), which contains a table ('german'), which contains four columns ('english', 'german', 'hint', 'id').

What I want is for the page to display the first word in the 'english' column ('id' number 1), and then when you click "hint" for it to display the equivalent id # from the 'hint' column.

Same for 'answer'.

I'm trying to fist figure out if that's even possible, and second figure out how.

If you can help, that'd be brilliant!

darkfreaks · March 2, 2009

like this??:

<?php

if ($_GET['hint']=='on'){
$result = mysql_query( "SELECT hint FROM $table LIMIT 1,1");
$total_rows = mysql_num_rows( $result );
while ( $pr_row = mysql_fetch_row( $result ) )
{
print "";
foreach ( $pr_row as $data )
print "\t $data";
print "\n";
}
print "\n";
mysql_close ( $link );
}?>

Cerys · March 2, 2009

YES! That! Exactly!

THANK YOU!

darkfreaks · March 2, 2009

if this is done please mark as solved

Sign In

[SOLVED] JavaScript and CSS - Changing layer order on click?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information