PDA

View Full Version : help with div's



onestopplay
12-22-2009, 08:34 PM
So here is a sample of my code:



<script language='javascript'>
function changeMenu(id) {
if(id == "a") {
document.getElementById('a').style.display = "block";
document.getElementById('b').style.display = "none";
document.getElementById('c').style.display = "none";
}
if(id == "b") {
document.getElementById('a').style.display = "none";
document.getElementById('b').style.display = "block";
document.getElementById('c').style.display = "none";
}
if(id == "c") {
document.getElementById('a').style.display = "none";
document.getElementById('b').style.display = "none";
document.getElementById('c').style.display = "block";
}
}
</script>
<a href='javascript:;' onClick="changeMenu('a');">A</a>&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onClick="changeMenu('b');">B</a>&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onClick="changeMenu('c');">C</a>&nbsp;&nbsp;&nbsp;

<div id='a' style='display:none;'>this text shows when you click on a</div>
<div id='b' style='display:none;'>this text shows when you click on a</div>
<div id='c' style='display:none;'>this text shows when you click on c</div>



It works....good news.
Anyway, the problem is, what if I want to link to a certain div.
For example, the link automatically take it so that it shows the div, without them having to click the A link on the webpage.
If you don't know what I am asking, please say so, so that I can clear it up.

Thanks!

Nile
12-22-2009, 08:46 PM
I don't know what your asking... :D

magicyte
12-22-2009, 08:51 PM
You could always use PHP and a variable in the address (for example '?p=A') and then open that divider (it would be easy to link to - maybe you can't use PHP on your server or website)

Despite using PHP, you could also use JavaScript to read a web address and output the query strings to show the divider. Some people have JavaScript disabled in their browser, so you can't really rely on JavaScript that much.

onestopplay
12-22-2009, 09:25 PM
I want a link to go to show the div automatically.

I can use PHP, in fact I do use php on my server. But, how do I make it so that the link the div shows up automatically. If I have to use PHP, please specify how I would code it.

THANKS!!

Nile
12-22-2009, 09:29 PM
Php:


<script language='javascript'>
function changeMenu(id) {
if(id == "a") {
document.getElementById('a').style.display = "block";
document.getElementById('b').style.display = "none";
document.getElementById('c').style.display = "none";
}
if(id == "b") {
document.getElementById('a').style.display = "none";
document.getElementById('b').style.display = "block";
document.getElementById('c').style.display = "none";
}
if(id == "c") {
document.getElementById('a').style.display = "none";
document.getElementById('b').style.display = "none";
document.getElementById('c').style.display = "block";
}
}
</script>
<a href='javascript:;' onClick="changeMenu('a');">A</a>&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onClick="changeMenu('b');">B</a>&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onClick="changeMenu('c');">C</a>&nbsp;&nbsp;&nbsp;

<?php
switch($_GET['disp']){
case 'A':
echo "<div id='a' style='display:block;'>this text shows when you click on a</div>"
."<div id='b' style='display:none;'>this text shows when you click on a</div>"
."<div id='c' style='display:none;'>this text shows when you click on c</div>";
break;
case 'B':
echo "<div id='a' style='display:none;'>this text shows when you click on a</div>"
."<div id='b' style='display:block;'>this text shows when you click on a</div>"
."<div id='c' style='display:none;'>this text shows when you click on c</div>";
break;
case 'C':
echo "<div id='a' style='display:none;'>this text shows when you click on a</div>"
."<div id='b' style='display:none;'>this text shows when you click on a</div>"
."<div id='c' style='display:block;'>this text shows when you click on c</div>";
break;
default:
echo "<div id='a' style='display:none;'>this text shows when you click on a</div>"
."<div id='b' style='display:none;'>this text shows when you click on a</div>"
."<div id='c' style='display:none;'>this text shows when you click on c</div>";
break;
}
?>

Then to link:


<a href="page.php?disp=A">Display A</a>

onestopplay
12-22-2009, 11:37 PM
Thank you so much!!!!!!!!!

bluewalrus
12-23-2009, 12:19 AM
It seems like this could be done with a bit less code but I'm not exactley sure how. I'd think using an array with "this" and if the condition is met than the value of "this" is pulled out of the array and set to display. The array is then set to the other values of the array are set to none.

I don't know how to do this though but would like to see an example if it is possible. Any ideas?

bluewalrus
12-24-2009, 01:31 AM
I've gotten this far...

<script type="text/javascript">
function getID(theLink) {
alert(theLink.id);
var div = document.getElementById("getValues");
var is_it = div.getElementsByTagName("a");
var how_long = is_it.length;
var i = 0;
while (i < how_long) {
if (theLink.href != is_it[i]) {
alert(is_it[i]);
}
i++;
}
}
</script>
<div id="getValues">
<a id="a" href="#this" onclick="javascript:getID(this)">Test</a>
<a id="b" href="#that" onclick="javascript:getID(this)">Test</a>
<a id="c" href="#then" onclick="javascript:getID(this)">Test</a>
</div>

Need to switch div.getElementsByTagName("a"); though so it gets the ID's rathen than the links anyone know how to do that?

Nile
12-24-2009, 01:39 AM
You need to run through the array, then put the values in a new array.

bluewalrus
12-24-2009, 06:30 AM
The array has the wrong values though or I'm misunderstanding.

Nile
12-24-2009, 09:43 PM
Hmm... well this seems to work fine:


<script type="text/javascript">
function getID(theLink) {
var is_it = document.getElementsByTagName("a");
for(var i = 0; i <= is_it.length; i++){
alert(is_it[i].id);
}
}
</script>
<div id="getValues">
<a id="a" href="#this" onclick="javascript:getID(this)">Test</a>
<a id="b" href="#that" onclick="javascript:getID(this)">Test</a>
<a id="c" href="#then" onclick="javascript:getID(this)">Test</a>
</div>

bluewalrus
12-25-2009, 03:52 AM
Didn't even think of the .id there thanks. I've got it to here no but can't get the class value to pass any idea on that? Thanks.


<script type="text/javascript">
function getID(theLink) {
var is_it = document.getElementsByTagName("a");
for(var i = 0; i <= is_it.length; i++){
document.getElementByClass(is_it[i].id).style.display = "block";
if (is_it[i].id != theLink.id) {
document.getElementByClass(is_it[i].id).style.display = "none";
}
}
}
</script>
<div id="getValues">
<a id="a" href="#this" onclick="javascript:getID(this)">Test</a>
<a id="b" href="#that" onclick="javascript:getID(this)">Test</a>
<a id="c" href="#then" onclick="javascript:getID(this)">Test</a>
</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

Nile
12-28-2009, 02:44 PM
Its getElementsByClassName. Also, rather then using that function (which most browsers don't support) use .className

bluewalrus
12-28-2009, 10:35 PM
Doesn't seem to be working or maybe I'm misreading.


<script type="text/javascript">
function getID(theLink) {
var is_it = document.getElementsByTagName("a");
for(var i = 0; i <= is_it.length; i++) {
is_it[i].className.style.display = "block";
if (is_it[i].id != theLink.id) {
is_it[i].className.style.display = "none";
}
}
}
</script>
<div id="getValues">
<a id="a" href="#this" onclick="javascript:getID(this)">Test</a>
<a id="b" href="#that" onclick="javascript:getID(this)">Test</a>
<a id="c" href="#then" onclick="javascript:getID(this)">Test</a>
</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>


Firebug says:


is_it[i].className.style is undefined

onestopplay
12-31-2009, 10:01 PM
Back to method before,
What if I want to put each case in a while look.


<?php
//mysql query

while($row = mysql_fetch_array($result)) {
case ''.$letter.'':
echo "<div id=\"".$row['letter']."\" style=\"display:block;\">";
$info= $row['info'];
echo $info;
echo "</div>";
break;
}
default:
echo "<div id=\"defaultdiv\" style=\"display:none;\">";
echo "div"
echo "</div>";
break;
?>


I get an error when I try to do that.

Parse error: syntax error, unexpected T_WHILE, expecting T_CASE or T_DEFAULT or '}' in ADDRESS on line LINE

Thanks

bluewalrus
12-31-2009, 10:08 PM
Your default and ending to the case is outside of the while loop.


<?php
//mysql query

while($row = mysql_fetch_array($result)) {
case ''.$letter.'':
$info= $row['info'];
echo "<div id=\"".$row['letter']."\" style=\"display:block;\">$info</div>";
break;
default:
echo "<div id=\"defaultdiv\" style=\"display:none;\">div</div>";
break;
}
?>

You also probably want to be using class not id here, but maybe you only have one of each.

Nile
01-03-2010, 05:17 PM
@blue:
.className displays the class name of the element, you cannot edit its style.
I think your trying to do this:


<script type="text/javascript">


function getID(theLink) {
var is_it = document.getElementsByTagName("a");
for (var i = 0; i <= is_it.length; i++) {
if (is_it[i].className == theLink.id) {
is_it[i].style.display = "block";
} else {
is_it[i].style.display = "none";
}
}
}

</script>
<div id="getValues">
<a id="a" href="#this" onclick="javascript:getID(this)">Test</a>
<a id="b" href="#that" onclick="javascript:getID(this)">Test</a>
<a id="c" href="#then" onclick="javascript:getID(this)">Test</a>
</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

bluewalrus
01-03-2010, 05:30 PM
Doesn't seem to work, firebug gives me this error



is_it[i] is undefined
getID(a#c sql2.html#then)sql2.html (line 10)
onclick()sql2.html (line 1)
[Break on this error] if (is_it[i].className == theLink.id) {
sql2.html (line 10)

Nile
01-03-2010, 05:55 PM
Hmm, I just whipped this up, give it a try:


<script type="text/javascript">
function getID(me) {
var values = document.getElementById("getValues").getElementsByTagName("div");
for(var i = 0; i < values.length; i++){
if(values.getAttribute("class") == me.getAttribute("id")){
values[i].style.display = "block";
} [i]else {
values[i].style.display = "none";
}
}
}
</script>
<style type="text/css">
#getValues div {
display: none;
}
</style>
<a id="a" href="#this" onclick="javascript:getID(this)">A</a>
<a id="b" href="#that" onclick="javascript:getID(this)">B</a>
<a id="c" href="#then" onclick="javascript:getID(this)">C</a>
<div id="getValues">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>

I'm guessing it was because you got the elements with the tag name "a"

bluewalrus
01-03-2010, 06:25 PM
hMM i'm still getting errors, I'm in ff3.5.6 if that makes a difference.



syntax error
onclick()sql2.html (line 1)
[Break on this error] var values = document.getElementById("getValues").getElementsByTagName("div");
sql2.html (line 7)Still getting errors.


When a linked is clicked



getID is not defined
onclick()sql2.html (line 1)
[Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
sql2.html (line 1)


sql2.html is the name of my file.

Nile
01-03-2010, 07:12 PM
Weird, I'm using the same browser, and I'm not getting an error... Does it work?