Using Javascript to hide single/multiple div tags with the same name Part 2

Recently I was asked by a comment from my previous post Using Javascript to hide single/multiple div tags with the same name on how to get multiple buttons to control multiple div tags. For example, 2 div classes need to be hidden or shown with 2 different buttons controlling them. Turns out this is fairly simple. Basically you can use some previous code and alter some variable names in the javascript, but to make things simple here is the code.

function getElementsByClass(searchClass, domNode, tagName) {
     if (domNode == null) domNode = document;
     if (tagName == null) tagName = '*';
     var el = new Array();
     var tags = domNode.getElementsByTagName(tagName);
     var tcl = " "+searchClass+" ";
     for(i=0,j=0; i<tags.length; i++) {
          var test = " " + tags[i].className + " ";
          if (test.indexOf(tcl) != -1)
               el[j++] = tags[i];
          }
     return el;
}
 
var hidden = false;
function toggle_hideme1() {
     hidden = !hidden;
     var newDisplay;
     if(hidden) {
          newDisplay = 'block';
     }
     else
     {
          newDisplay = 'none';
     }
     var showfirst = getElementsByClass("div_class_name", null, "div");
     for(var i = 0; i < showfirst.length; i++) {
          showfirst[i].style.display = newDisplay;
     }
}
 
var hiddenb = false;
function toggle_hideme2() {
     hiddenb = !hiddenb;
     var newDisplay;
     if(hiddenb)
     {
          newDisplay = 'block';
     }
     else
     {
          newDisplay = 'none';
     }
     var showsecond = getElementsByClass("div_class_name", null, "div");
     for(var k = 0; k < showsecond.length; k++) {
          showsecond[k].style.display = newDisplay;
     }
}

For the variables ’showfirst’ and ’showsecond’ you can call them what ever you want, just make sure they stay the same in only one function, not two. Be sure to change ‘div_class_name’ to a custom name for each field.

Also, these are setup to be hidden first, you can change that by swapping the ‘newDisplay = ‘ lines.

For the HTML code we are going to use check boxes. We need two boxes each with names that call the function.

<input type="checkbox" name="showone" id="showone" value="showone" onClick="toggle_hideme1('showone');"><br />
<input type="checkbox" name="showtwo" id="showtwo" value="showtwo" onClick="toggle_hideme2('showtwo');"><br />

If you want the boxes checked to start first swap the ‘newDisplay =’ lines, and use this.

<input type="checkbox" name="showone" id="showone" value="showone" onClick="toggle_hideme1('showone');" CHECKED><br />

As in my previous post you need to put what ever will be shown or hidden in a div class tag.

<div class="div_class_name" style="display: none;">

The style hides everything in the class until the box is checked.

That will start the boxed checked, when you un-check it the data in all div classes with that name will hide (remember the ‘div_class_name’? that’s what we are working with).

I wrote this up in just a couple minutes, so I truly help it makes scene. You can check out an example of how it works here.

Defcon 17 thoughts

First off, I want to say that Spyder wrote an excellent article that I’m kinda taking my ideas from. Check it out at spydersworld.com.

This was my 4th year attending Defcon (all in a row!) and was by far the best year. I’m going to try putting everything in chronological order, lets see how well I do.

It all started shortly after arriving at the Riviera Hotel and Casino in Las Vegas on Thursday, July 30th. We has just gotten to our room and started relaxing after the crappy plane ride when we realized that it was time to prepare for the Toxic BBQ. Having a good friend that lives in Vegas is very handy at times like these. After going to Walmart to pick up the items everyone forgets (Thanks again for paying for everything Spyder) like: Water, Ice, Napkins, Paper Plates, and Plastic Silverware, we arrived at Sunset Park. Everyone was very grateful to us for bringing ice and water. Many were dehydrated and were happy for cold clean water. We all had a great time, good food, good friends. We even ran into Winn and his daughter Ashley (maker of Hackers Are People Too). When it was time to go we piled back into the truck (with about 9 or so people in the back that needed a ride) and went back to the Riviera. It was pretty quiet after that. We all thought it would be a good idea to take it easy so we could get up early for the fun.

Friday morning was just like any other… except having to stand in line for a few hours to try and exchange our paper badges for real ones. A special thanks there goes to my buddie Mikey for getting in line early. I don’t want to go into too much detail on the days, mostly the events and special occasions.

This year I was fortunate enough to meet Johnny Long who was there to do a talk about his charity work in Uganda. If you don’t know about it goto johnny.ihackstuff.com and help out! The next day (after winning a little extra cash in the casino) I got a book called “Stealing the Network: The Complete Series Collector’s Edition” and got it signed my Johnny Long and Ryan Russell, but unfortunately Timothy Mullen wasn’t there. A special thanks goes to Ryan Russell, I can’t wait to read the book, and thank you Johnny Long for also signing my book.

I was to talk a little bit about Hacker Jeopardy. As usual Winn was awesome, and Gmark did a great job this year. As Spyder said in his post, Bansee is no longer Vynl Vanna. She always did a great job, she will be missed. The questions this year were kinda lame, Spyder and I talked to Winn about it and gave a few suggestions (they were all Spyder’s ideas), lets see if they use them next year.

Moxie’s talk about SSL was a real eye opener. Spyder has been blogging about it for quite some time, but seeing it in the presentation was a real eye opener. It’s true, security is an illusion. Scary thought, but it’s true, I have seen it with my own eyes.

Adam Savage from Mythbusters did a talk, I missed it. I wanted to see it. After the talk he was signing autographs. I found out from defcon’s twitter feed. The instant it was posted I got it on my phone and rushed to the War Room. I got there a few minutes late and a Goon kept me out of the line. If I had a beer for him he probably would have let me in, but I don’t drink beer so I was out of luck.

I was fortunate enough (also thanks to Spyder) to meet Keven (DJ Shadowvex) and talk with him for a bit. I enjoy his music and always look forward to next year’s disk. I also meet up with a few of his friends, but I’m bad with names. Sorry guys!

Over all this year was a great year and I look forward to going back next year. I think I have started to get myself known to some of the best people at Defcon and I know they will recognize me next year and I can’t wait to see them again. Special thanks to Spyder. If it wasn’t for you I’m not sure I would have made it since I couldn’t afford a room by myself. Special thanks to Mikey. You are an awesome friend. I couldn’t ask for a better one. You know how to get around town and even help me win a few extra bucks on the video poker machine. Thank you for picking us up and dropping us off at the airport, and for the ride to and from the Toxic BBQ. Thanks for everything! I feel very fortunate that I have good friends and good times. By the end I didn’t want to leave Vegas since I was having such a great time, but all good things must some to and end. So I went home and took a nap.

What was your Defcon 17 experience like? Did you meet me? Who did you meet? What fun things did you do? I was to hear all about it.

Using SSH as a secure proxy

Recently I started school (which is why I haven’t done much of anything on my sites) where they have a wifi connection just like at a coffee shop. The problem with these open networks is that people (like myself) can run a packet catcher like WireShark and get user names and password for various sites such as yahoo, facebook, and myspace. Since when you log in to those you are doing so without https (encryption). Also my school logs every site to visit and when I’m bored in class I don’t want them to know I’m researching hacking sites.

To solve this I setup a Linux box on my network and point port 22 to it. 22 is the default SSH port in case you didn’t know. Then I create a secure tunnel from my laptop to my home box (my laptop also running Linux).

SSH -D 1080 username@ip

This creates what is essentially a SOCKS v5 proxy on port 1080. Anything and everything you do remotely can be routed through 1080 (any port works, I just like that number).

Now I don’t know how to setup my Linux machine so that I don’t need to configure every program I use to work with the proxy and currently have to setup everything manually. Here is how to do it with FireFox.

Open FireFox, goto Edit –> Preferences –> Advanced –> Network –> Connection –> Settings
pic1
Click “Manual proxy configuration:”, then under SOCKS Host put “localhost” port “1080″ and make sure that SOCKS v5 is clicked.
Where it says “No Proxy For” you can leave localhost in, I’m not really sure, never tried. I just cleared it out and everything went smoothly.
pic2
Close the window and start surfing!

As long as you keep the SSH connection alive this will work. If you SSH connection does die you will know right away when you can’t surf. You will also need to revert your connection settings back when you are no longer using the SSH proxy. Also keep in mind that even tho you are routing via an encrypted tunnel to your remote machine, traffic will still be unencrypted after that point. Surfing may take longer than you would like. This is due to the fact that ALL traffic will be routed first to your remote machine then to you via the tunnel.

Lastly, I’m told that not every SSHd configuration allows SSH proxies. Mine does. I’m not sure why, I haven’t bothered to look into that yet. You may need to check your /etc/sshd_config file as there may be an option there. If you need help you know where to ask for it. Enjoy!

Use Battery Widget to fix possible battery issues after installing CupCake

Like so many out there my battery started acting funky after I installed cupcake. Mine was an automatic update and after it downloaded my battery was at about 70%. This was apparently a bad thing. It seems everyone who installed cupcake with a low battery has tried to charge it but it never seems to reach 100%. Some say to just pull the battery, some say use the phone until it dies then charge. I did both with no success.

Before I continue with how I solved the problem let me first give some information about how this all came to be. My battery would stop charging (or so I thought) at about 87%. While using the phone throughout the day I noticed that the battery level didn’t drop below 87% for quite some time. This told me that there is nothing actually wrong with my battery and must be related to the phone (I wish I realized that before getting a replacement battery from HTC, whom by the way has excellent customer service!).

So here is what I did to solve the problem. Granted I did this only a couple of days ago. The first day of charging 100%, the next, about 97%, the third, 100% (that’s today). I will keep track of the battery level throughout the next week or so and update this post. First, open your Market and search for “Battery Widget”, for me it was the third in the list. Make sure you get “Battery Widget” and nothing else. Install, then place it on your desktop. You will get an icon that looks like this.
icon
The program does add a couple nifty features. Just click on it and you get:
screen
The top and bottom option will load into new windows (these same things are found in your Settings menu.)
sound & display   Security & location
If you hit wifi, it will just turn your wifi on, it doesn’t take you to your settings menu.

Did Battery Widget fix your phone’s battery issue? Hit the comments and let us know!

UPDATE! Well it seems this really didn’t solve anything for me. Damn, I was very hopeful it would. Guess I need to either get that giant extended life battery or manually reinstall cupcake.

UPDATE! … again… Here’s the thing. If you tried pulling the battery, draining it, or running Battery Widget and none of those worked try to reinstall cupcake. I have even tried that and it didn’t work for me. Apparently I need to install an older version then to cupcake again. For me it’s not a big enough of a deal to bother going through that headache.

Check out Android Central on instructions and links. Please keep in mind that before you can install you must turn the phone off then back on using the home + power button! That will not restart it! Turn the power off then home + power for it to start properly! I wish everyone the best of luck in this matter. I just hope when my 220mAh battery arrives I won’t have any problems… and it did! I would highly recommend the battery, the case makes the back speaker quieter, but I’m sure I can fit that with a plastic tube inside the case… that is, if I ever get around to it.

Dynamically add form fields using javascript and DOM with dynamic post method

Lets say you need to add some extra text fields but you don’t want to write a bunch of code. I not only have how to quickly and easily add the input fields, but also how to take the data and put in into a MySQL DB!

I start with creating the DB. Lets call the table ‘phone’. We need 3 rows. ‘idx’ int(10) with Auto Increment and primary key. ‘name’ varchar(30), and ‘numb’ varchar(20). You can setup the db how ever you choose. I create the idx so that I have a key field.

Now we need some javascript.

var counter = 0;
Start a counter. Yes, at 0
function add_phone() {
    counter++;
// I find it easier to start the incrementing of the counter here.
    var newFields = document.getElementById('add_phone').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
                newField[i].name = theName + counter;
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
        }
        var insertHere = document.getElementById('add_phone');
// Inside the getElementById brackets is the name of the div class you will use.
        insertHere.parentNode.insertBefore(newFields,insertHere);
}

Now I like to put that in a seperate .js file, but you can add it to your HTML HEAD tag.

Next we need to build the form.

<form name="add_a_phone" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="phone">
    <input type="text" name="phone_0" value="" />
    <input type="text" name="phone_num_0" value="" /><br>
</div>
<div id="add_phone" style="display: none;">
    <input type="text" name="phone_" value="" />
    <input type="text" name="phone_num_" value="" /><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</fieldset>
</form>

Notice how in the input button field that the ‘id’ and ‘onclick’ are the same. That’s important, and yes you do need the brackets for some reason.
Also note that the form name can NOT be the same as any div id!!! I keep making that mistake.
You will need some way of checking how many fields were added when you get to your ‘if(isset($_POST[’submit’))’ statement. This gets a little messy.
Because I like my forms to go back to this page and check if submit was clicked we need to put some php code at the very top.

<?php
    if(isset($_POST['submit']))
    {
        echo "You clicked submit!<br>";
        echo "Here is your data<br>";
        echo "<br>";
        if ($_POST['phone_num_0'])
        {
                $continue = FALSE;
                $i = 0;
                while ($continue == FALSE)
                {
                    if (isset($_POST['phone_'.$i]))
                    {
                    echo $_POST['phone_'.$i] . " = " . $_POST['phone_num_'.$i] . "<br>";
                    $phone = $_POST['phone_'.$i];
                    $phone_num = $_POST['phone_num_'.$i];
                    $query = "INSERT INTO phone (idx, name, numb) VALUES ('NULL', '$phone', '$phone_num')";
                    $result = mysql_query($query);
                }
                else
                {
                    $continue = TRUE;
                }
                $i++;
            }
        }
    }
?>

Obviously I left out some information. Like connecting to your DB. I’m assuming you already know how to do that.

I first wrote this on my main page. This post is almost a copy/paste from the main page. I like adding it to the blog since it gets better indexing from search engines and hopefully the information will be useful to you. On the main page there is also a working example so you can see how it all ties in. Check it out Here

Questions?