Strider64

I don't know how you have it set up, but I check my database to see how many images are in the directory, then just add 1 for the new image. I pretty sure you could count on how many image files are in the directory also. For example I do the following: $query = "SELECT * FROM pictures WHERE subDirectory=:subDirectory"; $stmt = $pdo->prepare($query); $stmt->execute(array(':subDirectory' => $name)); $result = $stmt->fetchAll(); $fileNumber = count($result) + 1; $result = null; if ($fileNumber < 10) { $this->uniqueFileName = $name . '-0' . $fileNumber; } else { $this->uniqueFileName = $name . '-' . $fileNumber; } Before anyone says I anything I know I could had done the count in the $query. This way it insures that I have a unique name and there is even a way to prevent duplicates doing it through PDO, but for my purposes I don't think a duplicate will happen and if I does I'll add the added code.

var params = { vehicle_plate: vp, vehicle_model: vm, vehicle_type: vt, date_acquired: da, assigned_driver: ad }; // Set parameters var dataString = jQuery.param( params ); // Set parameters to correct AJAX format $.ajax({ type:"post", url:"process.php", data: dataString, success:function(info){ $('#result').html(info); // Display the result back when saved: } });

Let me get put my psychic hat on.

I created a countdown timer using PHP, AJAX and JQuery, I'm sure you could modify it to your needs if you want. It's up to you. countDownTimer.zip

$con=mysqli_connect("localhost","root","your_password","demo"); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $sql ="CREATE TABLE IF NOT EXISTS `people` ( `id` int(11) NOT NULL AUTO_INCREMENT, `firstname` varchar(15) NOT NULL, `gender` char(15) NOT NULL, `date_added` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5" ; if (mysqli_query($con,$sql)) { echo "Database my_db created successfully"; } else { echo "Error creating database: " . mysqli_error($con); } Even threw in a timestamp.

Just a little side note, if you want to have the time look like a 24-hour clock the format would be: $tomorrow_date = date('Y-m-d g:i:s A', strtotime($date_and_time . ' + 1 day')); This just saves you from looking the formatting up.

I just wanted to add, you already have the $('.add_to) in your script, just add the inner part of the code to the script.

I'm only guessing but it might simple be fixed by doing this Change this <a href="#" id="<?php echo $productRow['id'];?>" class="add_to">ADD TO CART</a> to: <a href="" id="<?php echo $productRow['id'];?>" class="add_to">ADD TO CART</a> I think the href="#" is causing the page to go to the top or you can disable it in script (which probably is the better of the two options and probably won't cause any problems) : I'm assuming you're using jQuery: $(".add_to").on('click', function(e){ e.preventDefault(); $(this).removeAttr( "href" ); });

Just a suggestion, but this seems to me to be more suited for JavaScript (maybe even use a library such as jQuery?) than PHP.

Something tells me that djclewes will be back with further problems. Just a hunch....

.content-wrap { box-sizing: border-box; /* more code here... */ } Maybe doing something like this? Though looking at the problem again probably not.

Another approach would be to use Modernizr : http://modernizr.com/ which lends itself to support older browser versions. I also found out when dabbling with JavaScript to use a library (I know I'm going to get slammed by JavaScript purists) such as JQuery, that way what looks good in Firefox looks good in Chrome, etc...(Well, 99 percent of the time). Another thing I have learned over the last couple of years is even though I might be writing in HTML5, I still write as if I'm using a stricter mode of HTML (one of my first college instructors even taught that way). This lends to writing cleaner code in the long run and staying away from bad habits that HTML5 tends to lend itself to in my opinion.

if you want to pull a value out of the drop down using PHP then you need this: <select name="automaker"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> This would give the web page graceful degradation in my opinion with people disabling JavaScript.

It's a little tricky using just straight PHP, but it can be done function displayDir($pdo, $name) { try { // Fetch the images: $query = 'Select id, thumbnail, picName, subDirectory, user_name FROM pictures WHERE subDirectory=:subDirectory ORDER BY id ASC'; $result = $pdo->prepare($query); $result->execute(array(':subDirectory' => $name)); if ($result && $result->rowCount() > 0) { // Check that rows were returned: $result->setFetchMode(PDO::FETCH_CLASS, 'StoredPictures'); // Arm the image class by fetching it: } else { // Problem! throw new Exception('No content is available to be viewed at this time'); } } catch (Exception $e) { // Catch generic exceptions } return $result; } /* Display images & thumbnails when user selects directory */ if (isset($_POST['imageDir']) && $_POST['imageDir'] == 'selected') { $_SESSION['name'] = $_POST['childName']; // Assign category to path: $name = $_SESSION['name']; $resultDir = displayDir($pdo, $name); } <form class="selectDir" id="selectDir" action="imageGallery.php" method="post"> <input type="hidden" name="imageDir" value="selected"> <label class="mySelect" for="mySelection">Choose Directory</label> <select class="mySelection" id="mySelection" name="childName"> <?php echo '<option value="' . $name . '">' . ucfirst($name) . '</option>' ?> <option value="ava">Ava</option> <option value="cammi">Cammi</option> <option value="carter">Carter</option> <option value="grant">Grant</option> <option value="jayreed">JayReed</option> <option value="nolan">Nolan</option> </select> <input class="submitCat" type="submit" name="submitImages" value="Enter"> </form> <div class="container photogallery"> <div class="row bg-header-part3"></div> <ul class="row"> <?php $x = 1; if (isset($resultDir)) { while ($pictures = $resultDir->fetch()) { echo '<li><a class="links" href="' . htmlspecialchars($pictures->getPicName()) . '" ><img data-pic="' . $x . '" class="thumbnails" src="' . htmlspecialchars($pictures->getThumbnail()) . '" alt="Thumbnails"></a></li>'; $x += 1; } } ?> </ul> </div> Though I do use jquery and ajax for the rest, but this gives the web page Graceful Degradation for people who disable JavaScript. Getting back to the script, the main important thing I want to show you is the form itself, I don't propagate the whole form in php (you could though) I just do the part where it's needed. Maybe just looking over the form and maybe glancing over the first script might help you out?

You can always a header.inc.php of some kind and just include at the top of you web pages: For example: <?php require('lib/includes/utilities.inc.php'); include 'lib/includes/header.inc.php'; ?> You can also do something like this (although a little more elaborate in your case) inside the header.inc.php file: if (preg_match("/J.R. Pepp | Website Design/i", $pageTitle)) { $metaDesc = '<meta name="description" content="J.R. Pepp is a Website Design and Development Company based in Livonia, Michigan.">'; } That way all you meta tags (elements) will be on every page and appropriate depending on the page. An for the question what is a meta tag? "Meta elements are the HTML or XHTML <meta … > element used to provide structured metadata about a Web page. Multiple Meta elements with different attributes are often used on the same page. ..."

Personally I would switch from using id to class that way you could do something like this: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> div { display: block; border-bottom: 4px solid #2e2e2e; background-color: orange; padding: 30px; } .container { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; width: 100%; max-width: 940px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .container:after { clear: both; } .container:before, .container:after { content: " "; display: table; } .row { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } .row:after { clear: both; } .row:before, .row:after { content: " "; display: table; } </style> </head> <body> <div class="container">Row 1</div> <div class="container row">Row 2</div> </body> </html>

I think I stick with my proven password hashing library from some egghead at MIT than trust an untested and probably vulnerable password script.

Using position:relative; should do the trick: #scontainer { position: relative; overflow:hidden; height:300px; border-style:solid; border-color:red; }

I highly recommend reading Larry Ullman's :PHP Advanced and Object-Oriented Programming" ---The latest edition, for it help me out a lot. Of course there are many different ways to do a user/members class. Here's how I invoke a Member class: <?php # Member class - Store user info and functions to access/controll the flow of data. class Member { // The member attributes containing required and optional information. // The attributes must correspond to the database table columns: private $id = NULL; private $userType = NULL; // Required (assigned enum) private $username = NULL; // Required private $email = NULL; // Required private $pass = NULL; // Required private $fullName = NULL; private $validation_code = NULL; private $address = NULL; private $city = NULL; private $state = NULL; private $zipCode = NULL; // Method returns the user ID: public function getId() { return $this->id; } // Grab the user's username: public function getUsername() { return $this->username; } // Grab the user's full name: public function getFullName() { return $this->fullName; } // Grab the password: public function getPass() { return $this->pass; } public function getUserType() { return $this->userType; } // Clear the password once user is logged in: public function clearPass() { $this->pass = NULL; } public function getEmail() { return $this->email; } // Method returns a Boolean if the user is an administrator: public function isAdmin() { return ($this->userType == 'admin'); } public function isSysop() { return ($this->userType == 'sysop'); } public function isNewUser() { return ($this->userType == 'public'); } // Method returns a Boolean indicating if the user is an administrator // or if the user is the original author of the provided page: public function canEditPage(Page $page) { return (($this->isAdmin() && ($this->id == $page->getCreatorId())) || $this->isSysop()); } // Method returns a Boolean indicating if the user is an administrator or an author: public function canCreatePage() { return ($this->isAdmin() || $this->isSysop()); } } Then calling it is as simple as this (a part of my login in page): // Check against the database: $query = 'SELECT id, userType, username, email, pass, fullName, address, city, state, zipCode FROM users WHERE username=:username'; $stmt = $pdo->prepare($query); $stmt->execute(array(':username' => $_POST['username'])); $stmt->setFetchMode(PDO::FETCH_CLASS, 'Member'); $stored_user_data = $stmt->fetch(); // Verify Stored Hashed Password against input: if ($stored_user_data) { $result = password_verify($_POST['pass'], $stored_user_data->getPass()); }

li { display: inline-block; list-style: none; width: auto; float: left; } Also works with straight inline li { display: inline; list-style: none; width: auto; float: left; }

I currently buiding a photo gallery for my website and I have a part of the code done that you might be interested in. I take the information from the alt attribute and put the text in a p tag. The other thing I do differently is I have the transparency done in css rather than jquery. You can do this for the title tag of the img tag as well. Here's the HTML CODE: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Photo Gallery Version 01.10.2014.01</title> <link rel="stylesheet" href="css/photogallery.css"> </head> <body> <div class="container"> <ul class="photogallery"> <li class="birds"> <a class="links" href="images/img-great-egret-large.jpg"> <!-- The Alt Attribute Text is pulled in the jQuery Script --> <img class="thumbnails" src="images/thumb-great-egret.jpg" alt="Great Egret (Ardea alba)"> </a> </li> <li class="birds"> <a class="links" href="images/img-limpkin-large.jpg"> <img class="thumbnails" src="images/thumb-limpkin.jpg" alt="Limpkin (Aramus guarauna)"> </a> </li> <li class="birds"> <a class="links" href="images/img-roseate-spoonbill-large.jpg"> <img class="thumbnails" src="images/thumb-roseate-spoonbill.jpg" alt="Roseate Spoonbill (Ajaja ajaja)"> </a> </li> <li class="birds"> <a class="links" href="images/img-white-ibis-large.jpg"> <img class="thumbnails" src="images/thumb-white-ibis.jpg" alt="White Ibis (Eudocimus albus)"> </a> </li> </ul> </div> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/photogallery.01.10.2014.01.js"></script> </body> </html> The CSS portition: body { font-size: 100%; padding: 0; margin: 0; } img { width: 100%; } .container { width: 1100px; margin: 0 auto; } /* Transparency portion of Caption */ .pic-caption { background-color: rgba(0, 0, 0, 0.7); position: relative; bottom: 60px; color: #fff; text-align: center; line-height: 40px; font-size: 1.2rem; z-index: 100; } .photogallery { list-style: none; } li { float: left; width: 450px; height: 301px; border: 3px solid lightblue; padding: 15px 10px; margin: 5px; } li:hover { background-color: lightblue; } .links { box-sizing: border-box; -moz-box-sizing: border-box; text-decoration: none; } and the jQuery (JavaScript) script: $(function() { var $caption = $('.links'); /* Append the P tag with pic-caption class to anchor tag */ $caption.append('<p class="pic-caption" />'); $('.pic-caption').each(function() { /* Grab text from the alt attribute */ var titleText = $(this).siblings('img').attr('alt'); $(this).text(titleText); // Insert text in p tag: $(this).hide(); // Hide the pic-caption class: }); $caption.hover(function() { /* Show the pic-caption class on hover in */ $(this).find('.pic-caption').show(); }, function() { /* Hide the pic-caption class on hover out */ $(this).find('.pic-caption').hide(); }); }); // End of Doc Ready: As you can see the jQuery is rather simple. Hope this helps - John

You could use a fluid grid system (just google css fluid grid design to learn more about it) and do something like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3 Column Layout</title> <style> body { color: #fff; padding: 0; margin: 0; } @viewport { zoom: 1.0; width: extend-to-zoom; } @-ms-viewport { width: extend-to-zoom; zoom: 1.0; } .container { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; } .container:after { clear: both; } .container:before, .container:after { content: " "; display: table; } [class^="m-span"] { padding: 10px 0; margin-left: 3.125%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ } [class^="m-span"]:first-child { margin-left: 0; } .m-span4 { width: 31.25%; } .header, .footer{ box-sizing: border-box; -moz-box-sizing: border-box; height: 50px; background-color: orange; margin-bottom: 10px } .left, .center, .right { background-color: steelblue; border: black 3px solid; height: 500px; padding: 30px; } /* You can stylize the individual columns seperately */ /* Just as long as the below the main styling */ .left { background-color: grey; } .footer{ background-color: black; margin-top: 10px; } </style> </head> <body> <header class="header">HEADER</header> <section class="container"> <div class="m-span4 left">LEFT COLUMN</div> <div class="m-span4 center">CENTER COLUMN</div> <div class="m-span4 right">RIGHT COLUMN</div> </section> <footer class="footer">FOOTER</footer> </body> </html>

Please Disregard I already gotten an answer for my question.

I hope I put this in the right folder, but if not it can be moved. After spending about two days on the following code I finally have it working. Here's the code (I commented the best that I could): $(document).ready(function() { var d = new Date(), $id = $('#cmsId'), $title = $('#cmsTitle'), $content = $('#cmsContent'), saveBtn = $("#save"); $.ajax({ // Start of ajax: url: 'data.php?='+d.getTime(), timeout: 5000, // Timeout * delay * cache: false, // Make sure it doesn't go to cache: dataType: "json", // Format type: success: function(info) { // Grab the data from php and then display it: // Variables * Self-Explanatory * var id = info.id, title = info.title, content = info.content; /* Display Editable Info in Form */ $id.val(id); $title.val(title); $content.append(content); //console.log('ID', $id, 'Title', $title, 'Content', $content); }, error: function(request, status, error) { alert(status + ", " + error); } }); // End of ajax call: saveBtn.click(saveFCN); // Save to database: function saveFCN(evt) { evt.preventDefault(); // prevent button from firing: /* Encode a set of form elements as a string for submission */ /* For more information goto: http://api.jquery.com/serialize/ */ var data = $('#sendCMS :input').serialize(); /* Save Function by grabbing & sending to location save_data.php */ $.post($('#sendCMS').attr('action'), data , function(info) { $('#debug_message').html(info); // Display the result back when saved: }); // End of Save: } // End of Save Function: }); // End of Doc Ready: and here's the HTML <form id="sendCMS" action="save_data.php" method="post"> <input type="hidden" name="id" id="cmsId"> <label for="cmsTitle" class="cmsLabel">Title</label> <input type="text" data-id="1" class="cmsTitle" name="title" id="cmsTitle"><br><br> <label for="cmsContent" class="cmsLabel">Content</label><br> <textarea class="cmsContent" id="cmsContent" name="content"></textarea> <button id="save">SAVE</button><br><br> </form> <div id="debug_message"></div> </article> Finally here's my question (Sorry it took this long to get to the point)....I am pretty sure that it's pretty secured for it basically keeps the javascript and php separate. However, I just want to make sure from any security experts that might know different? Here's a small snippet of my php file $id = htmlspecialchars($_POST['id']); $title = htmlspecialchars(strip_tags($_POST['title'])); $content = htmlspecialchars($_POST['content']); // Update the edited text: $query = 'UPDATE pages SET title=:title, content=:content, dateUpdated=NOW() WHERE id=:id'; // Prepare the Statement: $stmt = $pdo->prepare($query); // execute the statement: $result = $stmt->execute(array('title' => $title, ':content' => $content, ':id' => $id)); if ($result) { echo 'Data Successfully Inserted'; } else { echo 'Insertion Failed!'; } As you can see I do you use prepared statments and I like I said the php and jquery (javascript) is separated as much as I could, but I just want to make sure. Thanks in Advanced, John

First of all make sure you have this in your HTML file <!-- IMPORTANT THAT THE FOLLOWING IS INCLUDED --> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> Second this is how I go about tackling different screen sizes (media devices): /* MOBILE NAVIGATION --------------------------------------------------- */ @media only screen and (max-width: 480px) { } /* TABLET NAVIGATION --------------------------------------------------- */ @media only screen and (min-width: 481px) and (max-width: 768px) { } /* SCREEN NAVIGATION --------------------------------------------------- */ @media only screen and (min-width: 769px) { }