Wednesday, June 23, 2021

MySQL get missing IDs from table

Monday, October 24, 2011

7 Scroll to Top Jquery Solutions

Disappearing “Scroll to top” link with jQuery and CSS

Seen in many forms, such as “Back to top,” “Top of page,” or “Scroll to top,” these links provide a way for users to jump to the top of the page, back to navigation and other handy stuff.
This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery (a free javascript framework). You’ll need to download jQuery if you aren’t using it already.

Demo

You can either view the demo source if you’re an advanced developer, or read on and I’ll go through the CSS, jQuery, and HTML code separately below.

The HTML (inside the <body>)

<body>
<div id="top"></div>
<!-- put all of your normal <body> stuff here -->
<div id="message"><a href="top">Scroll to top</a></div>
</body>

The CSS

#message a
{
 /* display: block before hiding */
 display: block;
 display: none;
 
 /* link is above all other elements */
 z-index: 999; 
 
 /* link doesn't hide text behind it */
 opacity: .8;
 
 /* link stays at same place on page */
 position: fixed;
 
 /* link goes at the bottom of the page */
 top: 100%;
 margin-top: -80px; /* = height + preferred bottom margin */
 
 /* link is centered */
 left: 50%;
 margin-left: -160px; /* = half of width */
 
 /* round the corners (to your preference) */
 -moz-border-radius: 24px;
 -webkit-border-radius: 24px;
 
 /* make it big and easy to see (size, style to preferences) */
 width: 300px;
 line-height: 48px;
 height: 48px;
 padding: 10px;
 background-color: #000;
 font-size: 24px;
 text-align: center;
 color: #fff;
}

The jQuery

$(function () { // run this code on page load (AKA DOM load)
 
 /* set variables locally for increased performance */
 var scroll_timer;
 var displayed = false;
 var $message = $('#message a');
 var $window = $(window);
 var top = $(document.body).children(0).position().top;
 
 /* react to scroll event on window */
 $window.scroll(function () {
  window.clearTimeout(scroll_timer);
  scroll_timer = window.setTimeout(function () { // use a timer for performance
   if($window.scrollTop() <= top) // hide if at the top of the page
   {
    displayed = false;
    $message.fadeOut(500);
   }
   else if(displayed == false) // show if scrolling down
   {
    displayed = true;
    $message.stop(true, true).show().click(function () { $message.fadeOut(500); });
   }
  }, 100);
 });
});

Saturday, September 24, 2011

Automatically Updating Copyright Date-PHP Code Snippet

The New Year is right around the corner, which means that there are all sorts of things that you are probably doing to get ready for it. Well here’s one more thing: You will need to update the copyright date in the footer of your website

The typical approach to updating the date is to go in and manually change the date every year. And while this isn’t especially difficult or time consuming, it can be done more efficiently.
The code sample below, written in PHP, will update your Copyright date every year without requiring you to do anything to it ever again. So when you go in to update your website in a week, be sure to add this code snippet to the footers of your pages. (Note: This can only be added to PHP pages.)

&copy; Copyright <?php

 $then = 2007;

 $now = date('Y');

 if ($then == $now)

 echo $now;

 else

 echo "$then - $now"; ?>

Be sure to edit $then and set it to the year that your site was launched. And that’s all. As you can see the final year is automatically calculated using PHP’s date() function. For young sites, this code has a little bit of special functionality; It compares the two years and only outputs a range if the first year is different from the last year.
A simpler version of the code is shown below.

© Copyright 2007 - <?php echo date('Y'); ?>

What does it look like? Well, in 2009, this code would output something like this:
© Copyright 2007 – 2009.

MySQL Vertical Display in HTML Table

This morning, I was asked to rearrange a four column table of links so that they would be in alphabetical order vertically, rather than horizontally. It took a little creative thinking, but I came up with a fairly simple solution...
To display the results sorted horizontally is easy. You just make a new row every X cells as they're returned from your MySQL query:

<?php
$cols = 4; //number of columns
$result = mysql_query("SELECT * FROM states ORDER BY name");
$c = 1;
echo "<table>";
    echo "<tr>";
    while ($row = mysql_fetch_assoc($result)) {
        echo "<td>".stripslashes($row['name'])."</td>";
        if ($c == $cols) {
            echo "</tr><tr>";
            $c = 1;
        } else { $c++; }
    }
    echo "</tr>" ;
echo "</table>";
?>

That produced the following table:

Alabama	Alaska	Arizona	Arkansas
California	Colorado	Connecticut	Delaware
Florida	Georgia	Hawaii	Idaho
Illinois	Indiana	Iowa	Kansas
Kentucky	Louisiana	Maine	Maryland
Massachusetts	Michigan	Minnesota	Mississippi
Missouri	Montana	Nebraska	Nevada
New Hampshire	New Jersey	New Mexico	New York
North Carolina	North Dakota	Ohio	Oklahoma
Oregon	Pennsylvania	Rhode Island	South Carolina
South Dakota	Tennessee	Texas	Utah
Vermont	Virginia	Washington	West Virginia
Wisconsin	Wyoming

But that's confusing to users because people are trained to expect lists to be sorted vertically and not horizontally. So, how to sort the data appropriately?
Because the HTML for the cells is read left to right and not top to bottom, I knew that I couldn't go straight from the MySQL result to the table – I'd have to set up an array for each of the columns and load the data into them first...

<?php
$cols = 4; //number of columns, you can set this to any positive integer
$values = array();
$result = mysql_query("SELECT * FROM states ORDER BY name");
$numrows = mysql_num_rows($result);
$rows_per_col = ceil($numrows / $cols);
for ($c=1;$c<=$cols;$c++) { $values['col_'.$c] = array(); }
$c = 1;
$r = 1;
while ($row = mysql_fetch_assoc($result)) {
    $values['col_'.$c][$r] = stripslashes($row['name']);
    if ($r == $rows_per_col) { $c++; $r = 1; } else { $r++; }
}
echo "<table>" ;
for ($r=1;$r<=$rows_per_col;$r++) {
    echo "<tr>" ;
    for ($c=1;$c<=$cols;$c++) { echo "<td>".$values['col_'.$c][$r]."</td>" ; }
    echo "</tr>" ;
}
echo "</table>" ;
unset($values);
?>

I realize there may be a more elegant way out there of accomplishing the same thing, but this worked for me. Hope it helps you too.

Alabama	Indiana	Nebraska	South Carolina
Alaska	Iowa	Nevada	South Dakota
Arizona	Kansas	New Hampshire	Tennessee
Arkansas	Kentucky	New Jersey	Texas
California	Louisiana	New Mexico	Utah
Colorado	Maine	New York	Vermont
Connecticut	Maryland	North Carolina	Virginia
Delaware	Massachusetts	North Dakota	Washington
Florida	Michigan	Ohio	West Virginia
Georgia	Minnesota	Oklahoma	Wisconsin
Hawaii	Mississippi	Oregon	Wyoming
Idaho	Missouri	Pennsylvania
Illinois	Montana	Rhode Island

How to Change Your Blogger Title Tags

Those of us using Google’s Blogger platform have previously been unable to change our title tags to optimize them for better rankings in search engine results. Until recently, our blog name appeared in the title before the actual name of our posts, like this

Blogger Generated Title

Luckily, the Blogger team have created a new template tag which generates title tags differently, allowing you to feature only the post name as your page title, like this:
Better title tags for SEO

This option is much better for those hoping to optimize their Blogger templates for better rankings in search engines. Google and other search engines will use the title tags of your post page to find the most suitable results for searches, so using this technique ensures keywords in your post titles are discovered more easily.
For those creating new blogs with Blogger, or those who change their template to one of Blogger’s default designs, these tags will already be included in the template’s HTML code.
However, for those already using Blogger (or who decide to use a customized template) you will need to make a small (and very easy) alteration to your template code for these new title tags to work.
Here is what you should do:

Go to Layout>Edit HTML in your Blogger dashboard.
Find this line of code:

<title><data:blog.pageTitle/></title>
And replace this entire line with the following section of code instead:

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/></title> </b:if>
Finally, save your template.

That’s all you need to do!
Now when you view your post pages, you won’t see your blog’s title appear before your post titles in the browser bar. Also, search engine spiders will discover keywords in your post titles more easily, which over time may result in an improvement in your rankings of search engine results (providing of course that you try to add keywords in your post titles which are relevant to the content of your articles!).

A quick note about this method:

Blogger announced this new title tag in their recent bug fixes post. The method described above will ensure your blog’s title appears on the home page, while the <data:blog.pageName/> tag will appear as the title on post pages.
Although the bug fixes post seems to suggest that the original <data:blog.pageTitle/> could be replaced with the new <data:blog.pageName/> tag, this simple replacement doesn’t (yet) generate the title of the home page.
So the method I have described here is a workaround which can be used to ensure the blog title does appear in the browser bar on the home page. Without this tag, searches for your blog name would not render the correct results!
I hope this post has been useful for you. Please let us know what you think about this technique (and any tips you may have too) by leaving your comments below.

Source By : bloggingtips.com

Automatically Updating Copyright Date-JavaScript Code Snippet

As promised, here is a JavaScript code snippet which adds an automatically updating copyright date to your pages. For the PHP version of this code, see the code snippet in our article from yesterday.
The good thing about this code snippet is that it will work in any web page in which it is placed, whereas the PHP code only works in PHP pages.
To make it work, simply add the following code to your page.

<script type="text/javascript">

now=new Date();

year=1+now.getFullYear(); 

</script>&copy; Copyright 2007-<script type="text/javascript">

document.write(year);

</script>

Be sure to update the start date so that it accurately reflects your copyright.
What will it look like? Well, in 2009, the code would output something that looks like this:
© Copyright 2007-2011

Source By : velvetblues.com

Friday, July 8, 2011

Check if username already exists when creating a new user

<?
if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['name']) && isset($_POST['last_name']) && isset($_POST['company'])){

            if($username === '') {$errMsg = "Du skal udfylde brugernavn";}
            elseif
            ($password === '') {$errMsg = "Du skal udfylde password";}
            elseif
            ($name === ''){$errMsg = "Du skal udfylde navn";}
            elseif
            ($last_name === ''){$errMsg = "Du skal udfylde efternavn";}
            elseif
            ($company === ''){$errMsg = "Du skal udfylde firma";}

                $sql = ("SELECT * FROM members WHERE username ='$username'");
                $result = mysql_query($sql) or die('error');
                $row = mysql_fetch_assoc($result);
                    if(mysql_num_rows($result)) {
                            $errMsg = 'Brugernavn findes, vælg et andet.';
                } else {
                $sql = ("INSERT INTO members (username, password, name, last_name, company, salt)VALUES('$username', '$password', '$name', '$last_name', '$company', '$salt')")or die(mysql_error());

                if(mysql_query($sql))
                echo "Du er oprettet som profil.";
                }

            }//End whole if

?>

Monday, June 13, 2011

jQuery Drop Down Ajax Sign In Form

The Markup

First, we'll place the page content inside a container. This example checks an ASP session value to determine if the user has already logged in and shows the appropriate button. The 'href' value for the 'Sign In' button is used in case JavaScript is turned off in the user's browser. The form's 'action' value entered here is the URL where the Ajax request is sent. It's important that you change this to your own server side page containing your login routine.

<div id="container">

<div id="signbtn">
    <% If Session("loggedin") Then %>
        <a href="logout.asp" class="btnsignout">Sign Out</a>
    <% Else %>
        <a href="signin.asp" class="btnsignin">Sign In</a>
    <% End If %>
</div>

<div id="frmsignin">
    <form method="post" id="signin" action="test.asp">
    <p id="puser">
    <label for="username">Username</label><br />
    <input id="username" name="username" value="" title="username" tabindex="1" type="text" />
    </p>
    <p>
    <label for="password">Password</label><br />
    <input id="password" name="password" value="" title="password" tabindex="2" type="password" />
    </p>
    <p class="submit">
    <input id="submitbtn" value="Sign in" tabindex="3" type="submit" />
    <input id ="remember" name="remember" value="1" tabindex="4" type="checkbox" />
    <label for="remember">Remember me</label>
    </p>
    </form>
    <p id="msg"></p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem purus, volutpat nec faucibus vitae, elementum bibendum eros. Pellentesque auctor tristique justo, vel ornare nibh semper ac. Integer adipiscing leo in quam hendrerit faucibus. Vestibulum id rutrum ligula. Integer tristique ligula a diam facilisis vitae rutrum massa egestas. Pellentesque imperdiet, lectus pulvinar egestas pharetra, dolor mi condimentum dolor, ac pulvinar sapien eros nec massa.</p>

</div>

The CSS
Here are the styles for the container, signin button, and the form:
body{
    padding:20px;
    font:12px Verdana, Geneva, sans-serif;
    color:#333;
}
#container {
    width:700px;
    margin:0 auto;
    padding:13px 10px;
    border:1px solid #999;
}
a.btnsignin, a.btnsignout {
    background:#999;
    padding:5px 8px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
a.btnsignin:hover, a.btnsignout:hover {
    background:#666;
}
a.btnsigninon {
    background:#ccc!important;
    color:#666!important;
    outline:none;
}
#frmsignin {
    display:none;
    background-color:#ccc;
    position:absolute;
    top: 59px;
    width:215px;
    padding:12px;
    *margin-top: 5px;
    font-size:11px;
    -moz-border-radius:5px;
    -moz-border-radius-topleft:0;
    -webkit-border-radius:5px;
    -webkit-border-top-left-radius:0;
    border-radius:5px;
    border-top-left-radius:0;
    z-index:100;
}
#frmsignin input[type=text], #frmsignin input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #666;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#frmsignin p {
    margin:0;
}
#frmsignin label {
    font-weight:normal;
}
#submitbtn {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-color:#333;
    border:1px solid #fff;
    color:#fff;
    padding:5px 8px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#submitbtn:hover, #submitbtn:focus {
    border:1px solid #000;
    cursor:pointer;
}
.submit {
    padding-top:5px;
}
#msg {
    color:#F00;
}
#msg img {
    margin-bottom:-3px;
}
#msg p {
    margin:5px 0;
}
#msg p:last-child {
    margin-bottom:0px;
}
The JavsScript
jQuery and the jQuery Form Plugin are required. Add the following inside your <head> tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form-2.4.0.min.js"></script>
<script type="text/javascript" src="jqeasy.dropdown.js"></script>

Saturday, June 4, 2011

How to automatically check/uncheck multiple checkboxes

Demo- Automatically check uncheck checkboxes using JavaScript.

Select at least one programming language
Java	C++	Python	Pearl
PHP	VB.net	C#	Ruby

Check/Uncheck using checkbox			Check All
Check/Uncheck using link			Check All	UnCheck All
Check/Uncheck using button

------------------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript"> function checkThemAll(chk){var formName="formMultipleCheckBox";var checkBoxName="checkBoxesProgrammingLanguages[]";var form=document.forms[formName];var noOfCheckBoxes=form[checkBoxName].length;for(var x=0;x<noOfCheckBoxes;x++){if(chk.checked==true){if(form[checkBoxName][x].checked==false){form[checkBoxName][x].checked=true;}}else{if(form[checkBoxName][x].checked==true){form[checkBoxName][x].checked=false;}}}}function checkUsingLink(checked){var formName="formMultipleCheckBox";var checkBoxName="checkBoxesProgrammingLanguages[]";var form=document.forms[formName];var noOfCheckBoxes=form[checkBoxName].length;for(var x=0;x<noOfCheckBoxes;x++){if(checked==1){if(form[checkBoxName][x].checked==false){form[checkBoxName][x].checked=true;}}else{if(form[checkBoxName][x].checked==true){form[checkBoxName][x].checked=false;}}}return false;}function checkUsingButton(){var formName="formMultipleCheckBox";var checkBoxName="checkBoxesProgrammingLanguages[]";var form=document.forms[formName];var noOfCheckBoxes=form[checkBoxName].length;var checked=document.getElementById("checked_or_unchecked").value;for(var x=0;x<noOfCheckBoxes;x++){if(checked==1){if(form[checkBoxName][x].checked==false){form[checkBoxName][x].checked=true;}}else{if(form[checkBoxName][x].checked==true){form[checkBoxName][x].checked=false;}}}if(checked==true){document.getElementById("checked_or_unchecked").value=0;document.getElementById("btn_check").value="Uncheck All";}else{document.getElementById("checked_or_unchecked").value=1;document.getElementById("btn_check").value="Check All";}return false;} </script> Demo- Automatically check uncheck checkboxes using JavaScript. <table align="center" border="0" cellpadding="2" cellspacing="0" class="table_blue_border"> <tbody> <tr> <td align="right" class="table_blue_td1" colspan="2"><form action="" id="formMultipleCheckBox" method="post"> <table align="left" border="0"> <tbody> <tr> <td colspan="9">Select at least one programming language </td> </tr> <tr> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]" type="checkbox" value="1" /> Java</label></td> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="2" /> C++</label></td> <td></td> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="3" /> Python</label></td> <td></td> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="4" /> Pearl</label></td> <td></td> <td></td> <td rowspan="6"></td> </tr> <tr> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="5" /> PHP </label></td> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="6" /> VB.net</label></td> <td></td> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="7" /> C#</label></td> <td></td> <td><label> <input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="8" /> Ruby</label></td> <td></td> <td></td> </tr> <tr> <td align="left" colspan="2" id="display_status"></td> <td align="left"><label></label></td> <td align="center" colspan="2"></td> <td align="center"></td> <td></td> <td></td> </tr> <tr> <td align="left" colspan="5" id="display_status">Check/Uncheck using checkbox </td> <td>  <input id="checkAll" name="checkAll" onClick="javascript:checkThemAll(this);" type="checkbox" value="1" /> Check All </td> <td></td> <td></td> </tr> <tr> <td align="left" colspan="5" id="display_status">Check/Uncheck using link </td> <td><a href="javascript:void(0);" onClick="javascript:checkUsingLink(1);"> Check All</a></td> <td><a href="javascript:void(0);" onClick="javascript:checkUsingLink(0);">UnCheck All</a></td> <td></td> </tr> <tr> <td align="left" colspan="5" id="display_status">Check/Uncheck using button </td> <td align="left" colspan="2">  <input id="btn_check" name="btn_check" onClick="javascript:checkUsingButton();" type="button" value="Check All" /> </td> <td><input id="checked_or_unchecked" name="checked_or_unchecked" type="hidden" value="1" /></td> </tr> </tbody> </table> </form></td> </tr> </tbody> </table>