Jump to content


Frank P

Member Since 16 Aug 2011
Offline Last Active Sep 09 2014 11:03 AM

Topics I've Started

Why does my unCheckRadios function recall other functions?

18 November 2013 - 04:49 AM

I have the weirdest thing with this code:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
button {
    height: 20px;
    display: none;
}
a {
    text-decoration: underline;
}
.click-text {
    color: darkorange;
}
.click-text:hover {
    color: blue;
    cursor: pointer;
}
.elucidation-row {
    display: none;
}
.score-cell, .uncheck-cell {
    width: 100px;
}
</style>
<script>
function showAllItems() {
    var elRows = document.getElementsByClassName('elucidation-row');
    for (var p=0; p<elRows.length; p++) {
        elRows[p].style.display = 'table-row';
    }
}


function highlightItem(itemId,buttonId) {
    document.getElementById(itemId).style.backgroundColor = 'yellow';
    document.getElementById(buttonId).style.display = 'inline';
}


function unCheckRadios(name) {
    var radios = document.getElementsByName(name);
    for (var n=0; n<radios.length; n++) {
        radios[n].checked = false;
     }
}
</script>
</head>

<body>
<form action=""><!-- older IEs do weird things with a table with colspan and a form inside -->
    <table>
        <tbody>
            <tr>
                <td class="divider-thin" colspan="7"><a class="click-text" id="toggle-all" onclick="showAllItems()">Show all items</a></td>
            </tr>
            <tr class="elucidation-row section-A" id="A1a-row">
                <td class="item-cell">Item</td>
                <td class="uncheck-cell"><button id="A1a-button" onclick="unCheckRadios('A1a')">De-check</button></td>
                <td class="score-cell"><input type="radio" name="A1a" value="1" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="2" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="3" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="4" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="5" onclick="highlightItem('A1a-row','A1a-button')"></td>
            </tr>
        </tbody>
    </table>
</form>
<p class="elucidation-row">Text line</p>
</body>
</html>

Open it, click 'Show all items', check a radio button, click the appearing 'De-check' button, and see that the whole table row is non-displayed again. It looks as if the unCheckRadios function recalls the executed showAllItems function. Why is that, and how do I solve it?


How to get this class variable in this tag?

21 March 2013 - 10:05 AM

Depending on a set value in the URL, the html element should get a class. In this way it works:

 

include-test.php:

<?php require("include-test-included.php"); ?>
<!DOCTYPE HTML>
<html class="<?php echo makeClass(); ?>">
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    html.normal {
        background: white;
    }
    html.touch {
        background: red;
    }
    </style>
</head>
    <body>
    </body>
</html>

include-test-included.php:

<?php
function makeClass() {
    if(!isset($_GET['type']))
        { $type = 'normal'; }
    elseif (isset($_GET['type']))
        { $type = $_GET['type']; }
    return $type;
}
?>

 

But I would very much like to be able to do it this way, because I have a number of pages, and the head section is already largely PHP-generated:

 

include-test.php:

<?php require("include-test-included.php"); ?>
<?php echo $part_1 ?>
    <title>Demo</title>
    <style>
    html.normal {
        background: white;
    }
    html.touch {
        background: red;
    }
    </style>
</head>
    <body>
    </body>
</html>

 

include-test-included.php:

<?php
function makeClass() {
    if(!isset($_GET['type']))
        { $type = 'normal'; }
    elseif (isset($_GET['type']))
        { $type = $_GET['type']; }
    return $type;
}

$part_1 =
'<!DOCTYPE HTML>
<html class="<?php echo $type; ?>">
<head>
    <meta charset="utf-8">
'
?>

 

However, this way I get an undefined-variable warning. Which makes sense, because it is outside the function. But how do I get this class variable in the html tag? I have been fiddling for a couple of hours already with backslashes, single/double quotes and echoing the function, but have not found the right way yet. 

 

Which is the right way?


Supersimple zoom script, but only big images will zoom out again. Why?

14 December 2011 - 10:52 PM

Hi,

I was not happy with the zoom scripts that I found on the net, so I wrote one myself, or one that simulates it. It has become an extremely simple one, and can be seen in action here (function toggleZoom). Click the images to zoom in and click to zoom out again.

However, only the images with an initial width of >= 100 pixels will zoom out again. The ones width an initial width of < 100 (nrs. 4, 5 and 7) won't. Why is that, and how do I solve it?

What is the difference between these two examples?

21 November 2011 - 04:39 AM

Hi,

I have two nested menu's, that should open & close by onclick. Could someone tell me why the first example works (Kid example) and the second one (Child example) does not?
<!DOCTYPE html>
<html>
<head>
<title>Kid example</title>
<style type="text/css">
#navMenuDiv #subLevel {
         display: none;
         }
</style>
<script type="text/javascript">
function toggleDisplay()
{
    var kid = document.getElementById('subLevel');
    if (kid.style.display == "block")
        {kid.style.display = "none";}
    else
        {kid.style.display = "block";}
}
</script>
</head>
<body>
  <div id="navMenuDiv">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Visie op Fitness</a></li>
      <li><a href="#" onclick="toggleDisplay()">Activiteiten &darr;</a>
        <ul id="subLevel">
            <li><a href="#">Bodybuilding</a></li>
            <li><a href="#">Bodyshaping</a></li>
            <li><a href="#">Conditietraining</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Child example</title>
<style type="text/css">
#menuDiv #subLevel {
    display: none;
    }
</style>
<script type="text/javascript">
function openSubLevel()
{
    var child = document.getElementById('subLevel');
        if (child.style.display == 'none')
            {child.style.display = 'block';}
        else
            {return;}
}

function closeSubLevel()
{
    var child = document.getElementById('subLevel');
        if (child.style.display == 'block')
            {child.style.display = 'none';}
        else
            {return;}
}
</script>
</head>
<body>
  <div id="menuDiv">
    <ul>
      <li><a href="#" onclick="closeSubLevel()">Home</a></li>
      <li><a href="#" onclick="closeSubLevel()">Visie op Fitness</a></li>
      <li><a href="#" onclick="openSubLevel()">Activiteiten &darr;</a>
        <ul id="subLevel">
            <li><a href="#">Bodybuilding</a></li>
            <li><a href="#">Bodyshaping</a></li>
            <li><a href="#">Conditietraining</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

Kid is a real toggle script (one link opens and closes), Child is a script with which clicking the parent link should open and clicking the other main menu items should close the nested menu. But only Kid works, while they are furthermore identical. Why would that be?

Signature yes/no per message

08 October 2011 - 12:33 AM

I think it would be a good idea to have the ability to withhold one's signature from certain messages. It would improve the readability of threads. A condition to make this work would be to put the checkbox prominently in sight, e.g. right above the message entry form (also above the Quick Reply form).

Even better, the signature could be withheld by default, and only put under a message if the author ticks the checkbox, which could then be placed under the form.