Tips and Tricks

Showing posts with label Html Tips. Show all posts

Drop Down Menu With Pure CSS

Direct code:

HTML

<div id="navtre">
<ul class="levl-one">
<li><a href="/about/" title="about">about</a></li>
<li><a href="/contact/" title="contact">contact</a></li>
<li><a href="/feeds/latest/" title="subscribe">subscribe</a></li>
<li><a href="/Test1/" title="Test1page">Test1</a>
  <ul class="level-two">
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li>
  </ul>
</li>
<li><a href="/Test2/" title="Test2 page">Test2</a>
  <ul class="levl-two">
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>
</ul></li>

</ul>
</div>

CSS

levl-one {display: inline; position: relative; }

.levl-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }

.levl-one:hover .levl-two {display: block; }

0 comments

cookies

Starting with Netscape 3.0 in 1996, browsers began to offer support for cookie.The following is a quote from the Netscape cookie specification:
A server, when returning an HTTP object to a client, may also send a piece of state information which the client will store. Included in that state object is a description of the range of URLs for which that state is valid. Any future HTTP requests made by the client which fall in that range will include a transmittal of the current value of the state object from the client back to the server.The state object is called a cookie, for no compelling reason.
Cookies provide an invaluable tool for maintaining state between requests. More than just a way of conveying credentials and authorizations, cookies can be effectively used to pass large and arbitrary state information between requests—even after the browser has been shut down and restarted.
Cookies are the de facto standard for transparently passing information with HTTP requests.These are the major benefits of cookies over Basic Authentication:

Versatility—Cookies provide an excellent means for passing around arbitrary information between requests. Basic Authentication is, as its name says, basic.
Persistence—Cookies can be set to remain resident in a user’s browser between sessions. Many sites take advantage of this to enable transparent, or automatic, login based on the cookied information. Clearly this setup has security ramifications, but many sites make the security sacrifice to take advantage of the enhanced usability.
Of course users can set their cookie preferences to refuse cookies from your site. It’s up to you how much effort you want to apply to people who use extremely paranoid cookie policies.
Aesthetic—Basic Authentication is the method that causes a browser to pop up that little username/password window.That window is unbranded and unstyled, and this is unacceptable in many designs.When you use a homegrown method, you have greater flexibility.

The major drawback with using cookie-based authentication is that it does not allow you to easily protect non-PHP pages with them.To allow Apache to read and understand the information in cookies, you need to have an Apache module that can parse and read the cookies. If a Basic Authentication implementation in PHP employees any complex logic at all, you are stuck in a similar situation. So cookies aren’t so limiting after all.

Authentication Handlers Written in PHP
In PHP 5 there is an experimental SAPI called apache_hooks that allows you to author entire Apache modules in PHP. This means that you can implement an Apache-level authentication handler that can apply your authentication logic to all requests, not just PHP pages.
When this is stable, it provides an easy way to seamlessly implement arbitrarily complex authentication logic consistently across all objects on a site.

0 comments

Resetting wordpress password using FTP

There is lot of methods for resetting wordpress password. Normally you can reset password by clicking lost password link, which uses email to reset your password.
But if email is not working and other methods also not working or any 404 errors occur, you can reset your password via FTP.

Note: Use the methods at your own risk. I’m not responsible if any data loss.

Method 1: Edit functions.php

Login to your site’s FTP and navigate to the directory “/wp-content/themes/your active theme/”. Then download the file called functions.php
Edit the file, and find first <?php: and add the below code next to it.
wp_set_password('password',1);
Put your desired new password for the main admin user. “1″ denotes the user ID in the wp_users table.
once you’ve done upload the edited file back to the same directory of your site. Select overwrite if asks. Please make sure you have a backup.
Now you are able to login with the new password. Once you’ve logged change new password using admin pannel and delete the code on functions.php. Otherwise it will reset the password on every pageload.

Method 2: Emergency reset script

If the above method is not working you can use emergency password reset script.It is a PHP script.
Warnings:

You should know the admin user name
It will reset password and will send an email to admin’s email id. Even though you didn’t receive email, the password will be changed.
You don’t need to be logged in. If you could this method is not needed.
Put the script on the root directory of your website.
Make sure to delete the script once the password has been changed. (Important)

steps

Download emergency password reset script from here and place to your wordpress installation directory. File name should be emergency.php
Open ‘http://yourwebsitename.com/emergency.php
Follow the instructions. Enter admin username and new password. click update options. A message will be displayed to note the password change. An email will be send to the admin’s email.
Don’t forget to delete the emergency.php from your server. Because, anyone can use it to change the password.

method

0 comments

HTML email newsletter coding rules

Are you getting irritated when your email newsletter looks different in browsers and inbox? follow the rules explained here to make better email newsletter.

Use table for everything. Don’t try to use Div. Enclose the hole newsletter in a table.
You have to use inline CSS only. External CSS won’t work in newsletter. And CSS should be inside body tag. Don’t use CSS inside Head tag.
Don’t use any shorthand in CSS. Use abbreviated styles. For example: Use color:#ffeedd instead of color:#fed
Avoid using Divs and Spans. Try to use tables for everything
Padding won’t work in newsletter. So use margin only. specify the margin like margin-left, margin-right, margin-bottom
Don’t use header (h1, h2, h3, h4, h5, h6)>. Because some mail providers has their own design for this tags.
If you want right alignment for image, put it in a table and give cellpadding=’0′ and cellspacing=’0′
Store images on web server and use them. Don’t delete the stored image.
Avoid Line-height in CSS

0 comments

5 Star Rating System

In this tutorial, you’ll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we’ll also leverage the power of PHP so that you don’t even need a database!

Step 1. Building the HTML

We’re going to create a simple page that lists two movies, and allows you to rate them. This means we need the stars to show the current rating, and to allow voting. We also want an area to show the total votes cast, and the current rating down to one decimal place.

Let’s take a look at the HTML/CSS

view plain copy to clipboard print ?

<div class='movie_choice'>
Rate: Raiders of the Lost Ark
<div id="r1" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
<div class='movie_choice'>
Rate: The Hunt for Red October
<div id="r2" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>

Notice how there are no graphics in this HTML? They’ll be added with CSS. We’re just using the HTML to create the framework that the widget works from. Now it’s time to start adding CSS.

view plain copy to clipboard print ?

.rate_widget {
border: 1px solid #CCC;
overflow: visible;
padding: 10px;
position: relative;
width: 180px;
height: 32px;
}
.ratings_stars {
background: url('star_empty.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
.ratings_vote {
background: url('star_full.png') no-repeat;
}
.ratings_over {
background: url('star_highlight.png') no-repeat;
}

This first part of the CSS accomplishes a few things:

Gives the default ‘empty’ start to each star location
Sets up classes for filled in stars, and highlighted stars
Defines and styles the stars’ container.

You can either use the graphics provided in the download, or make your own. There needs to be a graphic for each of the three states: empty, full, and highlighted.
Next we add a little more CSS to position the total votes box, and center the widgets so the page matches the graphic at the start of this section.

.total_votes {
background: #eaeaea;
top: 58px;
left: 0;
padding: 5px;
position: absolute;
}
.movie_choice {
font: 10px verdana, sans-serif;
margin: 0 auto 40px auto;
width: 180px;
}

Step 2. Adding the UI Interactivity

At this point, we have a very plain looking bunch of empty stars, but they don’t do a whole lot at this point. This is where jQuery comes to the rescue.

Our first step is to add mouseover and mouseout handlers for the stars. We need to highlight the star the mouse is over, and all the preceding stars.

view plain copy to clipboard print ?

$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
set_votes($(this).parent());
}
);

We’re taking advantage of jQuery’s powerful .prevAll() and .nextAll() methods to get the stars preceding and following the currently moused over star.
The code above then adds and removes the classes to make the stars under the mouse and before ‘highlighted’, and the stars after ‘not highlighted’.

What about set_votes() ?

This is a function that checks which stars should be in the ‘full’ state, and ties in closely with the next step, where we grab remote data from the server.

Step 3. Retrieving Data from the Server

Our stars highlight when you move the mouse over them, and that’s a great start. But what about the red stars showing the current vote? To reach this step, we need to both get the information from the server, and write some JavaScript to handle that data.

view plain copy to clipboard print ?

$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post(
'ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});

This code block – actually all the JavaScript – goes in a document.ready block. This particular code executes right away. It queries the server and gets some information on every vote widget on the page.
First we set up an object, out_data, to contain the information we’re sending to the server. Our PHP script expects to see ‘fetch’ when just grabbing data, so we include it here. We also include the ID of the widget, which lets the server-side script know what data we’re after. When the call back function fires, it contains a JavaScript object that looks like this:

view plain copy to clipboard print ?

{
"widget_id" : "r1",
"number_votes" : 129,
"total_points" : 344,
"dec_avg" : 2.7,
"whole_avg" : 3
}

The .data() method is a bit of jQuery magic that allows you to associate arbitrary data with a DOM
object.

If you look closely at the code, you’ll see we’re taking that object (stored in the variable INFO) and
doing something with it via the .data() method.
The .data() method is a bit of jQuery magic that allows you to associate arbitrary data with a DOM
object. In this case, we’re storing the data in the widget div. It can be accessed later like this:

view plain copy to clipboard print ?

$('#one_of_your_widgets).data('fsr').widget_id;

set_votes(), Finally.

After the data has been returned from the server, its handed off indirectly to set_votes().

view plain copy to clipboard print ?

function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}

The first three lines are for readability, as those variable names are pretty long. So let’s take a look at what’s happening here.
Line 7: ‘avg’ is a whole number, representing the rounded vote average of this widget. Because it’s
a number 1-5, we can use it to find the proper star in the widget, and turn it, and the
preceding ones to our ‘filled’ graphic. Notice the use of .andSelf() to include the star that
we’ve selected.
Line 8: This is quite similar to line seven, but we’re removing the filled graphic from later stars. This
is necessary in case the average for this widget has gone down since the last vote.
Line 9: Here we’re updating the grey box underneath the widget, which shows a more precise rating,
and lets a visitor know how many votes have been cast.

Step 4. Let the Voting Begin

The final step for the UI is to enable voting. We’re going to add a click handler to each of the stars. This click handler will be responsible for sending the vote data to the server.

1 comments

Create a simple CSS dropdown menu

Learn to create a very simple CSS dropdown menu with solely HTML and CSS. This is a very useful and small dropdown menu without the use of javascript

UPDATE! I have updated the Dropdown code click here.

ul {

font-family: Arial, Verdana;

font-size: 14px;

margin: 0;

padding: 0;

list-style: none;

}

ul li {

display: block;

position: relative;

float: left;

}

li ul {

display: none;

}

ul li a {

display: block;

text-decoration: none;

color: #ffffff;

border-top: 1px solid #ffffff;

padding: 5px 15px 5px 15px;

background: #1e7c9a;

margin-left: 1px;

white-space: nowrap;

}

ul li a:hover {

background: #3b3b3b;

}

li:hover ul {

display: block;

position: absolute;

}

li:hover li {

float: none;

font-size: 11px;

}

li:hover a { background: #3b3b3b; }

li:hover li a:hover {

background: #1e7c9a;

}

Next is the HTML code. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.

<li><a href="#">About Us</a>

<ul>

<li><a href="#">History</a></li>

<li><a href="#">Vision</a></li>

</ul>

</li>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Cozy Couch</a></li>

<li><a href="#">Great Table</a></li>

<li><a href="#">Small Chair</a></li>

<li><a href="#">Shiny Shelf</a></li>

<li><a href="#">Invisible Nothing</a></li>

</ul>

</li>

<li><a href="#">Contact</a>

<ul>

<li><a href="#">Online</a></li>

<li><a href="#">Right Here</a></li>

<li><a href="#">Somewhere Else</a></li>

</ul>

</li>

</ul>

That is it, very simple and easy to customize! Click below for a live demo…

You can see a LIVE PREVIEW here

0 comments

HTML Unordered Lists

An unordered list starts with the

tag.

The list items are marked with bullets (typically small black circles).

Coffee

Milk

How the HTML code above looks in a browser:

Coffee
Milk

HTML Ordered Lists

An ordered list starts with the

tag.

The list items are marked with numbers.

Coffee

Milk

How the HTML code above looks in a browser:

Coffee
Milk

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The

tag defines a definition list.

The

(defines the item in the list) and: (describes the item in the list):

Coffee: - black hot drink
Milk: - white cold drink

How the HTML code above looks in a browser:

Coffee: - black hot drink
Milk: - white cold drink

Base Tag

<BASEHREF=url
TARGET=window>

Specifies the document's URL.

HREF=url

Specifies the document's full URL in case the document gets read out of context and the reader wants to refer to the original.

TARGET=window

Specifies to load all the links on the page into the targeted window. This can be overridden by specifying a different target attribute for a specific link. Thewindow can be one of these values:

window	Specifies to load the link into the targeted window. The window must begin with an alphanumeric character to be valid, except for the following four target windows:
_blank	Load the link into a new blank window. This window is not named.
_parent	Load the link into the immediate parent of the document the link is in.
_self	Load the link into the same window the link was clicked in.
_top	Load the link into the full body of the window.

Examples

Tips and Tricks

Drop Down Menu With Pure CSS

Cookies Explanation for Beginners

cookies

Authentication Handlers Written in PHP

Easyway to resetting wordpress password using FTP