Open Side Menu Go to the Top

05-28-2011 , 06:48 AM
They had white backgrounds before. I think that looked better, tbh.

That's the drop-down list. Whenever I printscreen, the cursor disappears. The cursor is over "subarticles by musician."

----------------------------------
Interesting discovery about IE: In order for the drop-down to work, the containing div has to be large enough to contain the menu. If not, the menu is interrupted.

--------------------------------------------





Eh, I guess I'll just work on getting more content up then worry about this later. Something brilliant will hit me eventually....

---------------------

I used that jsFiddle at first, but there was issues where the code degraded (very nice degradation, tym). I am also using multiple stylesheets. idk. I'm sure I can upload 18 styles if I wanted to, but I'm too tired to care right now.

Last edited by daveT; 05-28-2011 at 06:54 AM.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
HTML5/CSS3/advancedJavascript learning and programming logs
150% up to $2,000 Welcome Bonus on CoinPoker
Join the action now
Daily Rewards • Splash Pots • CoinRaces
HTML5/CSS3/advancedJavascript learning and programming logs
05-28-2011 , 07:30 AM
Quote:
Originally Posted by gaming_mouse
Dave you check out this site for pure css dropdown menus:

http://meyerweb.com/eric/css/edge/menus/demo.html

Great resource in general for css.
Yeah. I do like this site:

http://jsfiddle.net/davet/Ujr2k/
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-29-2011 , 05:40 PM
This is probably a little better:



I think I'll stick with that for a while.

But I am procrastinating. I have to begin working on the functional comment box now.

If I only knew where to start.....
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-30-2011 , 01:51 AM
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<link rel="stylesheet" href="menu2.css">

</head>

<body>

<!--
enctype specifies how form data is encoded;
action specifies the url where submitted data is handled;

example from WHATWG:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
      
      Ah... the mysterious cgi bin? 

--!>

<form method="post">
    <fieldset>
        <legend>Comments:</legend>
        <p>While I am a strong proponent of freedom of speach and expression, I am granted with the right to delete spam, troll posts, and rudeness. I will excersize that right when needed.</p>
        
        <p><label>Name:<br><input type="text" name="name"></label></p>
        <p><label>Comments:<br><textarea name="commentary"></textarea></label></p>
        
        <p><button id="submit">Hit me</button></p>
        
    </fieldset>
</form>

</body>
</html>
So, basically, my comments copy/pasted:

<!--
enctype specifies how form data is encoded;
action specifies the url where submitted data is handled;

example from WHATWG:

<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">

Ah... the mysterious cgi bin?

--!>

It appears that I have to create a separate web page, code it in PHP with the compliant code and connect that to the database.

Then take what is in the database, send it back to the PHP page, where it is sent to the comment section and posted via PHP? javaScript?

I think there has to be a different solution....
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-30-2011 , 02:50 AM
Yeah there's really no way around having to accept the POST, process it, and then serve up a response. A neat way to do it is to have your POST acceptor page accept the comment POST, process it, then send back a redirection to where the comment will now be displayed.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-31-2011 , 01:53 AM
Contact form: clearly, this is a lot of copy/pasting, but I think I have enough to reverse engineer a comment form, so I'll go ahead and do my darndest to create that one by hand.

The only problem with this one is that it doesn't send me an email.*

Code:
<?php
function spamcheck($field)
  {
  //filter_var() sanitizes the e-mail
  //address using FILTER_SANITIZE_EMAIL
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);

  //filter_var() validates the e-mail
  //address using FILTER_VALIDATE_EMAIL
  if(filter_var($field, FILTER_VALIDATE_EMAIL))
    {
    return TRUE;
    }
  else
    {
    return FALSE;
    }
  }

if (isset($_REQUEST['email']))
  {//if "email" is filled out, proceed

  //check if the email address is invalid
  $mailcheck = spamcheck($_REQUEST['email']);
  if ($mailcheck==FALSE)
    {
    echo "Invalid input";
    }
  else
    {//send email
    $email = $_REQUEST['email'] ;
    $subject = $_REQUEST['subject'] ;
    $message = $_REQUEST['message'] ;
    mail("[email protected]", "Subject: $subject",
    $message, "From: $email" );
    header("Location: http:vvvvvvvvvvvvv/thankyou.html");
    }
  }
else{
  header("Location: http:vvvvvvvvvvvvvvv/contact.html");
  }
?>
I did change the "else" portion of the code to send the user back to the html form, but that didn't work.

The real "else" code looked sort of like this:

Code:
else
  {//if "email" is not filled out, display the form
  echo "<form id='mailForm' method='post' action='mailform.php'>
  Email: <br> <input name='email' type='text' /><br />
  Subject: <br> <input name='subject' type='text' /><br />
  Message:<br>
  <textarea name='message' rows='15' cols='40'>
  </textarea><br />
  <input type='submit' id='submit' />
  <input type='reset' id='reset'/>
  </form>";
  }
?>
But what this did was go straight to the else portion and show a form on the php page, which I didn't want to happen.

If I send without the email input, then a screen shows up that says "invalid input." I also want to require the comment, so I'll have to add that in also.

Now the HTML portion (with some added reset functionality):

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<script> 

function resetForm(){
document.getElementById('mailForm').reset();
}

window.onload = function start(){
document.getElementById('reset').onclick = resetForm;
}

</script>

</head>

<form id="mailForm" method="POST" action="contact.php" enctype="utf-8">
<fieldset>
    <legend> Send an e-mail: </legend>

    <p><label>your email: <br> <input type="email" id="email" name="email"></label></p>
    <p><label>subject: <br> <input type="text" name="subject"></label></p>
    <p><label>message: <br> <textarea name="message"></textarea></label></p>

    <input type='submit' id='submit' />
    <input type='reset' id='reset'/>

</fieldset>

</form>

</body>
</html>
***
Update: I can't actually send it to my gmail account. However, when I send it to my web account, it shows up, but it tells me "message coudn't be delivered" but sends me the information anyways. Interesting.

I have to finish setting up that account later tonight I guess.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-31-2011 , 01:54 AM
alkidfnldnf

.reset()!!!!! of course, that works on the calculator too!

duh...
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-31-2011 , 07:19 AM
Wow. There is absolutely no way in heck I could have reverse-engineered a comment box. I bet people LOLLOLLOLEd when they read that one.

So... This is the disaster that I have right now:

Not going to post the SQL. It should be obvious there is an id, name, comment row.

I took it upon myself to break apart the code and separate things into different files.

The HTML:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<script type="text/javascript">

window.onload=function start(){
    var x=document.getElementById("frm1");
for (var i=0;i<x.length;i++)
  {
  document.write(x.elements[i].value);
  document.write("<br />");
  }
}
    

</script>

</head>

<body>

<form method="POST"
    action="comment.php">
    <fieldset>
        <legend>Comments:</legend>
        <p>While I am a strong proponent of freedom of speech and expression, I am granted with the right to delete spam, troll posts, and rudeness. I will exercise that right when needed.</p>
        
        <p><label>Name:<br><input type="text" name="name"></label></p>
        <p><label>Comments:<br><textarea name="commentary"></textarea></label></p>
        
        <p><button id="submit">Hit me</button></p>
        
    </fieldset>
</form>

<?php

$sequery=mysql_query('SELECT * FROM userOpinions ORDER BY id DESC');

while($rows=mysql_fetch_assoc($getquery)){
    $id=$rows['id'];
    $name=$rows['name'];
    $comment=$rows['comment'];

    echo $name. '<br>'. $comment. '<br>'. '<br>';
}
?>

</body>
</html>
So, not sure if I should have the javaScript in here or not. There are about 45 different ways to do this apparently. I want to pull the PHP out of the HTML, so I am assuming I use a "GET" method?

Now, the separate PHP file (comment.php):

Code:
<?php

require('connect.php');
$name = $_POST['name'];
$comment = $_POST['commentary'];
$submit = $_POST['submit'];

if($submt){
    if($name&&$comment){
        $insert=mysqlQuery("INSERT INTO userOpinions (name, comment) VALUES ('$name','$comment')"); 
    }else{
        echo "Please fill out all fields";
    }
}

?>
This page seems to work just fine. Not going to post the connect.php of course.

Took about 30 attempts to get the connect.php file to work. By "work" I mean that when I was pressing the submit button, the comment.php page popped up and showed me three lines of errors.

Now, when I press submit, comment.php pops up, which I obviously don't want to happen in this case.

There was some interesting solutions on SO:

Code:
<h1>Comment's:</h1>
<?php 
$i  = addslashes($_POST['a']);
$ip = addslashes($_POST['b']);
$a  = addslashes($_POST['c']);
$b  = addslashes($_POST['d']);
if(isset($i) & isset($ip) & isset($a) & isset($b))
{
    $r = mysql_query("SELECT COUNT(*) FROM $db.ban WHERE ip=$ip"); //Check if banned
    $r = mysql_fetch_array($r);
    if(!$r[0]) //Phew, not banned
    {
        if(mysql_query("INSERT INTO $db.com VALUES ($a, $b, $ip, $i)"))
        {
            ?>
            <script type="text/javascript">
                window.location="/index.php?id=".<?php echo $i; ?>;
            </script>
            <?php
        }
        else echo "Error, in mysql query";  
    }
    else echo "Error, You are banned.";
}
$x = mysql_query("SELECT * FROM $db.com WHERE i=$i");
while($r = mysql_fetch_object($x) echo '<div class="c">'.$r->a.'<p>'.$row->b.'</p> </div>';

?>  
<h1>Leave a comment, pl0x:</h1>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <input type="hidden" name="a" value="<?php $echo $_GET['id']; ?>" />
    <input type="hidden" name="b" value="<?php $echo $_SERVER['REMOTE_ADDR']; ?>" />
    <input type="text" name="c" value="Name"/></br>
    <textarea name="d">
    </textarea>
    <input type="submit" />
</form>
But that is of course only one page.

There was another interesting solution as well.

http://stackoverflow.com/questions/1...n-your-website

I guess I'll look at this one tomorrow:

http://hubpages.com/hub/How-to-inser...n-any-web-page

I feel like a total bumb copy/pasting/guessing.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
05-31-2011 , 07:36 AM
Quick tip, never use SELECT * FROM... I would ALWAYS specify the fields, even if it's a small table that you don't think you will expand later. This will yield significant performance gains, especially if your dealing with repeating data such as comments.

Also if you are posting to the same page, you don't need to specify an action on the form tag, just remove it and it defaults to the current page.

I'm guessing REMOTE_ADDR is the PHP server variable to fetch IP address, I wouldn't put this as a form field, (dont forget, any form field can be manipulated by the client). I would remove this field and capture the value on the fly when you need it.

I know you probably know this as well, but your code is very vulnerable to SQL injections, I know you are probably going to amend this afterwards but just something to be aware of!

You seem to be coming on well though! Enjoying this thread. Sorry if this post comes off overly negative, I don't mean it that way!
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-01-2011 , 02:33 AM
Quote:
Originally Posted by Gullanian
Quick tip, never use SELECT * FROM... I would ALWAYS specify the fields, even if it's a small table that you don't think you will expand later. This will yield significant performance gains, especially if your dealing with repeating data such as comments.
okay.

Quote:

Also if you are posting to the same page, you don't need to specify an action on the form tag, just remove it and it defaults to the current page.
This is pretty significant to read. The action specification is to an external file on the server. Are you saying that I should place my php on the same page as the comment box?

Quote:
I'm guessing REMOTE_ADDR is the PHP server variable to fetch IP address, I wouldn't put this as a form field, (dont forget, any form field can be manipulated by the client). I would remove this field and capture the value on the fly when you need it.
Uh.... Not sure where you saw this, but good to know. Probably in the SO code I haven't really looked over yet.

Quote:
I know you probably know this as well, but your code is very vulnerable to SQL injections, I know you are probably going to amend this afterwards but just something to be aware of!
I used a youtube tutorial (they used tables for the forms!!!!), and one of the comments is: "You know dude, all someone has to do is use a method() function to destroy your database, right?"

I guess that means that any random script kitty could destroy my site on a whim.

Quote:

You seem to be coming on well though! Enjoying this thread. Sorry if this post comes off overly negative, I don't mean it that way!
Glad someone is enjoying this thread.

Like you ASP.NET thread, though I think using that would be a bad idea for now.

next solution: python!!!!

lol. This is supposed to be a javaScript thread, not a PHP/SQL thread. Oh well, sometimes you never know where it goes.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-01-2011 , 12:54 PM
All you need to do to protect against SQL injection is wrap every variable with mysql_real_escape_string(). Well, this works in almost all cases. But anyway...

"INSERT INTO userOpinions (name, comment) VALUES ('$name','$comment')")

Would look like:

"INSERT INTO userOpinions (name, comment) VALUES ('" . mysql_real_escape_string($name) . "','" . mysql_real_escape_string($comment) . "')")

The periods and extra quotes concatenate the strings together.

xkcd shows why:

HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-01-2011 , 01:05 PM
This is why I <3 ASP.net so much, you don't need to worry about SQL injections at all if you use LINQ
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-01-2011 , 01:15 PM
The same is true about PHP if you use a query builder (of which there are many) or an ORM. But is it that much to wrap variables in mysql_real_escape_string(), especially when you go down the line and just recursively apply the function to each variable?
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-01-2011 , 10:44 PM
Oh, wow. Thanks a lot.

I found this one on php.com:

echo htmlspecialchars($_POST['name']);

but I guess that one goes only for echo?

I sort or procrastinated again. Last night, I decided I didn't like the architecture of my site, so I erased the top tier, moved all the subdomains to the top level, created a master stylesheet, and created individual stylesheets for the similar-but-different pages.

There are two little things I want to experiment with tonight before I get back to the comment form.

Seriously, would you post comment forms on a site that isn't ready yet?

Okay fine: I'm deathly afraid of the comment form.

---------------

Yeah, that cartoon made me laugh.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-02-2011 , 12:51 AM
No, they both work. They're just for different things.

php.net has all the answers you seek.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-02-2011 , 03:35 AM
The last thing I am attempting to work out is the @font rule.

The idea is pretty straight-forward, but apparently, the converter/download didn't work.

The search will probably end at finding a good convertor, but then again, I may be messing up the upload part.

Code:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot') format("opentype"); /* IE */
}
I know that this one is probably a "who cares" thing, but I do, so I want to figure it out.

Great thing is that it works on all browsers, so it's no big deal to use it within reason.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 05:39 AM
Anyone have any ideas why this one isn't working?

Code:
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="utf-8" />

<script src="clickBack.js" type="text/javascript"></script>

</head>
<body>

<div>
     <p id="clickBack">Click here to return to the page you were viewing</p>
     <p>or continue browsing other stuff:</p>
</div>

</body>
</html>
the javascript:

Code:
function history(){
    window.history.back();
}

window.onload = function start(){
    document.getElementById('clickBack').onclick = history;
}
The alternative is:

Code:
function history(){
    window.history.go(-n);
}

window.onload = function start(){
    document.getElementById('clickBack').onclick = history;
}
changing the <p> to <button> don't change a darn thing.

Yes, also going to toss my computer out the window since I can't seem to get this comment box to work.

Well. I think I know what ~part~ of the problem is. I'll report back when I slog through this one. Prolly have to contact hostgator on this one.

I'm having problem connecting to the database. I don't get any errors, but the database isn't retrieving anything:

Code:
<?php

mysql_connect("localhost","panelUserId_DBuser","password");
mysql_select_db("UserId_dataBase");

?>
That's modified a bit. I am assuming that I have to enter the port number somewhere. I have to look up that one tonight.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 05:47 AM
Was placing the php into an external file a good idea or a bad idea?
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:05 AM
Code:
window.onload = function start(){
    document.getElementById('clickBack').onclick = function(){
        history.go(-1);alert("ok");
    };
}
http://jsfiddle.net/AGdE8/

This works. For some reason calling it from a function assigned on onload doesn't work, no idea why not.

Also I wouldn't contact hostgator about client side issues, it's nothing to do with them really (although if they answer these sort of questions then wp but I wouldn't expect them to).
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:10 AM
Quote:
I'm having problem connecting to the database. I don't get any errors, but the database isn't retrieving anything:
You have a funny username, is panelUserId_DBuser your database username? And the database is called UserId_dataBase?

Try this code to throw an error if it didn't connect properly:

Code:
mysql_connect("localhost","panelUserId_DBuser","password") or die(mysql_error());
echo "Connected to MySQL<br />";
mysql_select_db("UserId_dataBase") or die(mysql_error());
echo "Connected to Database";
What are you expecting it to return exactly?
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:26 AM
I changed the labels to generic username, database, password, etc.

LOL.

I mean, I'm not really going to make it too easy for people to crack my site by posting my real user name and stuff. jeez.

I was expecting that when I go to the database, the information is sitting in the database. That's all I wanted to accomplish right now.

I'll try that different javascript and report back.

So this is the contact page. Hopefully, I'm not veering into "I has webpage, drubba drubba" territory.

HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:34 AM
Quote:
Originally Posted by daveT
I changed the labels to generic username, database, password, etc.

LOL.

I mean, I'm not really going to make it too easy for people to crack my site by posting my real user name and stuff. jeez.
Ok! Was just checking you weren't confusing string literals with form control ID's or anything like that is all.

Quote:
Originally Posted by daveT
I was expecting that when I go to the database, the information is sitting in the database. That's all I wanted to accomplish right now.
This doesn't really make much sense. The code you posted will establish a connection to a database, but it wont be returning (for all intents and purposes) any data. If there is data in the database, and you want to retrieve it you will need to run a query to return a record set. I don't really do PHP but the 'die' method looks like it will let you know if you have actually established the connection, then you can just run a simple select query to see if it's all working ok.

Select_db seems to return true or false if it the database exists:

http://php.net/manual/en/function.mysql-select-db.php

But it's function is purely to 'Sets the current active database on the server that's associated with the specified link identifier.' which means it's not fetching or storing any data.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:35 AM
Excellent. That variant works perfectly.

Not sure why that would happen either. For reference sake, place history.go(-2) to go back to the page the user was reading before the contact form.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:42 AM
Quote:
Originally Posted by Gullanian
Ok! Was just checking you weren't confusing string literals with form control ID's or anything like that is all.
Not quite that disastrous yet. Trying not to have a melt-down a'la calculator again.


Quote:
This doesn't really make much sense. The code you posted will establish a connection to a database, but it wont be returning (for all intents and purposes) any data. If there is data in the database, and you want to retrieve it you will need to run a query to return a record set. I don't really do PHP but the 'die' method looks like it will let you know if you have actually established the connection, then you can just run a simple select query to see if it's all working ok.
The return (and entry) code is somewhere else for now. Just thinking that I have to put a port number somewhere for it to actually connect to the database in order to import the data.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
06-03-2011 , 06:47 AM
Actually, I'm going to backtrack a few steps before I go further. I'm going to create a comment.php file and place all the PHP and HTML on the same page and see if that works first. I don't see why separating the files is a problem, but I figure to simplify this first.
HTML5/CSS3/advancedJavascript learning and programming logs Quote
HTML5/CSS3/advancedJavascript learning and programming logs
150% up to $2,000 Welcome Bonus on CoinPoker
Join the action now
Daily Rewards • Splash Pots • CoinRaces
HTML5/CSS3/advancedJavascript learning and programming logs

      
m