Dec 19, 2011

How To Show Latest Tweets Using PHP JQuery

Today I am sharing my newly PHP and JQuery coded snippet which is going to display your latest tweets in a fade in and fade out effect using Twitter timeline RSS feeds.



Here is the PHP function to get the tweets:

 
[php]
<?php
function latest_tweets(){
//global $post;
$doc = new DOMDocument();
$meta='webstutorial';
$feed = "http://twitter.com/statuses/user_timeline/$meta.rss";
$doc->load($feed);

$outer = '<ul id="tweets">';
$max_tweets = 15;
$i = 1;
foreach ($doc->getElementsByTagName('item') as $node) {
$tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;
//if you want to remove the userid before the tweets then uncomment the next line.
//$tweet = substr($tweet, stripos($tweet, ':') + 1);
$tweet = preg_replace('@(https?://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)@',
'<a href="$1">$1</a>', $tweet);
$tweet = preg_replace("/@([0-9a-zA-Z]+)/",
"<a href="http://twitter.com/$1">@$1</a>",
$tweet);

$outer .= "<li>". $tweet . "</li>n";


if($i++ >= $max_tweets) break;
}
$outer .= "</ul>n";
return "<div class='post'><p><b>Latest Tweets </b>".$outer."</div>";
}
echo latest_tweets();
?>
[/php]
 

In the above function we are fetching the RSS feed from the twitter timeline. Then we finally break it into segments and display it using the loop method.

Now we have to display the tweets with jquery effect.

So here is the jquery function to display the tweets in a fadeIn effect.

 
[js]
<script type="text/javascript">
function tweetRender( prospectID )
{
prospectID.delay() .fadeIn() .delay(2000).fadeOut(
function(){
if(prospectID.next().length > 0)
{tweetRender( prospectID.next() );}
else
{tweetRender( prospectID.siblings(':first'));}

}
);
}

$(function(){
$('#tweets li').hide();
tweetRender( $('#tweets li:first') );

});
</script>
[/js]
 

In this tutorial we are using basic PHP and JQuery to display the tweets. You can download it and check the Demo.

Dec 17, 2011

JQuery Page Loading Popup

In a website whenever a user clicks a link, that user has to wait for seconds to see the new loaded page. In today’s tutorial we will show an interesting popup after the click event occurs and after few seconds the page will load.

This is just an interactive way to load a page; it will take the same time to load as it was before.

The basic HTML Code:
[html]
<div style="display: none;" id="overlay"></div>
<div style="display: none;" id="popup">
<img src="loading.gif" />
</div>

<a href="www.webstutorial.com/jquery-page-loading-popup/jquery" id="link">Click Here</a>
[/html]

The JQuery code:

[js]
<script type="text/javascript">
$(document).ready(function(){
jQuery("#link").click(function(event) {
event.preventDefault(); //to stop the default loading
var a_href = $('#link').attr('href'); // getting the a href link
jQuery("#overlay").css('display','block'); // displaying the overlay
jQuery("#popup").css('display','block'); // displaying the popup
jQuery("#popup").fadeIn(500); // Displaying popup with fade in animation
setTimeout(function() {
jQuery("#popup").fadeIn(4000); //function to redirect the page after few seconds
window.location.replace("http://"+a_href); // the link
}, 3000);
});
});
</script>
[/js]


Try the Demo, and suggestions are always open.

Dec 14, 2011

Photoshop CS5 Menu for Websites

This tutorial helps you to make or design a horizontal navigation bar with your desired color combinations. In this tutorial I have used the color combination Blue background with Gray buttons as it provides a decent and good gradient effect to observe.

 Our Tutorials Begins From Here:

This is a preview of the result that we are going to get after completing the tutorial.

Result Preview

Step 1: At first we are going to create a new document and fill some colors in it.

  • Open Photoshop go to ‘File’ click ‘New’ add your desired name and size like I choose a size of 600 by 250 pixels.

  • After creating the document fill the background color with your desired color (which I have choose blue).

  • To fill the desired color, go to Edit > Fill > Use (or just press Shift+F5). Select a color from the use tab as I choose “Blue” and click it in the background area.


You would get result like this,

Result of Step 1 Result

Step 2: Now we are going to make the background for the navigation bar inside which the buttons or tabs are placed.

  • To create a new layer, go to Layer > New > Layer (or press Ctrl+ Shift+ N).

  • Select the layer and select the Rounded Rectangle Tool (or press U twice).

  • Adjust the size of the rectangle by selecting the “Fixed Size” from the Geometric Options’ button in the Rectangle Panel appeared under Menu Panel.

  • Select the size you desire, like I choose 500 by 60 pixels.

  • You can adjust the radius of the corners too in the same panel.

  • After setting the sizes click at the desired area you want to draw the navigation bar.


You would get result like this,

  • Result of Step 2Select the navigation layer from the layers list and click on the button at the bottom which has a circle in a rectangular box showing “Add Mask Layer”.


This will divide the layer into mask objects so that you can fill a particular color into the navigation bar only without tempering the background layer.

  • Fill the navigation bar with a single color or add a gradient effect using linear effect with multiple colors.

  • Rasterizing the layer of the navigation layer you would get the single form layer to add other layer options to it.


After completing the above step you would get a result like this,

Result of Step 2 (Part 2)

Step 3: Now we are going to add some layer styles to the navigation bar on its background.

  • To open layer styles go to Layer > Layer Style (or select the layer, right click on it and select “Blending Options” in it) and select Outer Glow from it.

  • Make glowing changes accordingly to your desired design (or just follow the given below picture details).

  • To add some more layers select any options and add your desired changes to the navigation bar.


Result of Step 3

Result of Step 3 (Part 2)

Step 4: Now we are going to make buttons in the navigation bar.

  • Create a new layer by following Step 2.

  • Select the rounded rectangle tool and set your desired size like 150 by 50 pixels and draw maximum no. of buttons which can be drawn.

  • Use the ‘Add Mask Layer’ and select the first layer add you’re desired layer option from the list in blending options.

  • You can add changes in color and change gradient effects by clicking the gradient tab in the “Gradient Overlay” tool and get the below result.


Result of Step 4You will get the result as,

Result of Step 4 (Part 2)

Step 5: Now we are going to add text to the buttons.

  • To add text to the buttons create a new document for every new button, it helps in adjusting the position of the text in the button later.

  • Select the desired font, size and style from the text bar under the Menu bar.

  • Select the color from the color window on the right side of the desktop.

  • Write your text in the button like “Home” and then adjust the position of the text using ‘Move’ tool.


Your result should look similar to this,

Result of Step 5

Step 6: Now in the last we are going to highlight the button to shown it is in selection or the mouse is on it.

  • Select any button to highlight it, so that we a mouse comes on it or when it is in selection then the color of the button change to shown it is distinguished from other.

  • Select the color from the color window for the button and fill the color in the button with the Fill (or Paint Bucket) tool.

  • Add some outer glow from the Blending option form Step 3 and center the glow on the highlighted button. You can use the following setting in the picture,


Result of Step 6After applying the above changes your final result should look like this,

This is the final result you would get after completing this tutorial.

Dec 9, 2011

How to get your drupal questions answered in an IRC Channel

Would you like your drupal questions answered by community experts? Then read this post - it'll tell you the best way to get answers.

Firstly, if you really want good answers, learn how to ask good questions. I thought I knew how to ask good tech-related questions until I read this: http://bit.ly/s7o0mw Then I realised that I did know how to ask good questions, and now I knew how to ask much better questions. That's helped me on irc and on support forums. You basically want to ask your question like this:

"I'm trying to achieve [A]. I thought the best way to do this was to [B]. I read the documentation and it said to do [X]. I did it, I expected to see [Y] but actually saw [Z]. What am I doing wrong?"

Out there some drupal genius (like me! lol) reads this question. And immediately knows a few things:

The outcome that you're trying to achieve. Knowing this, we may have a better suggestion instead of [B] and thereby solve your problem.

You're already thinking - because of [B]. Whohoo! We know that you're someone who is thinking how to do something which will achieve your outcome. Tech geniuses would rather answer questions from people who are willing to do their own thinking.

You read documentation - double points. It means you're not asking someone else to do all the hard work. Plus you're learning new stuff. Both good pointers, and you're more likely to get helped.

When you did [X] you've told us what you expected to see when you tried [X]. That means you're thinking. Then you say that instead of [Y] you saw something else - [Z]. Awesome - that's valuable information.

Questions like, "Help, my website is broken!" or "Views isn't working" or "Taxonomy isn't linking properly" will get you ignored almost 100% of the time.

Read the documentation. Yes, RTFM applies - always. There's a reason documentation is written - and if it's out of date, update it yourself!

Maybe someone else has already asked your question. Search drupal.org via google (go to google.com and type "site:drupal.org terms related to your problem"). If nothing shows up, search the internet. If nothing shows up, time to ask your question!

Ask your question in the right channels, those would be the forums on drupal.org or the issue queue for the module you're having a problem with.

Or simply figure out how to join #drupal on IRC (for that you can use http://webchat.freenode.net its simple and easy too use and compatible with any browser, since I'm using it ;) ), you can also choose your preferable channel from here http://drupal.org/irc or http://drupal.org/node/679904.

Remember the BOT named 'Drupalicon' is there for you, if you wanna learn how to interrogate with 'Drupalicon' on IRC read this http://drupal.org/project/bot, if in case you're finding it difficult just type a message in the Drupal channel 'bot?' (without quotes) there will be a reply 'I'M UP! I'M UP!'.

Please don't ask your question in http://groups.drupal.org/india because this is for location-specific activities, and there may be other people on drupal.org who'd also like to know the answer to your question (plus, your question on the drupal forums is searchable, so in a month someone else may have the same problem you're having and also wants to know the solution - be kind and place your question somewhere they can find it!).

If you're going to post a question in the issue queue, first read the Troubleshooting FAQ. If you're having a problem with your Drupal site, you're almost certainly not alone. Your questions may already have been asked and answered many times. Save yourself some time and start with this list of Frequently Asked Questions (FAQs) before you post an issue in the queue.

Don't be a support leech. Play nicely! And learn how to be part of a community, particularly a self-organising one.

Lastly, read this post and follow all of this advice! It will transform you into the kind of person whom other people enjoy helping, and take you one step closer to being Certified to Rock! And if someone does something which violates any of these guidelines, gently point them to this post.

JQuery Popup | JQuery Slide Popup

Now a day’s JQuery’s are used almost in all websites. In today’s tutorial I am going to share a new way to show a pop up message. Everyone is getting bored with typical fade in fade out pop up messages. So let’s make it interesting with a pinch of jquery and css.

In this tutorial we are going to make two javascript functions which will be used to slide in and slide out a div.

[js]
function openOffersDialog() {
$('#overlay').fadeIn('fast', function() {
$('#boxpopup').css('display','block');
$('#boxpopup').animate({'left':'30%'},500);
});
}

function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
[/js]

In the first function we are making a call to a div to fadeIn and in that fade in function we are sliding our popup from right to left.

The next function is used to slide the function from center of the screen to the extreme left side so it appears us to be disappeared. In this function we also set the overlay div to fadeout.

So let’s construct with our HTML part.

[html]
<body onload="openOffersDialog();">
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
</div>
</div>
</div>
</body>
[/html]

This was a small tutorial on sliding a popup without using any JQuery UI and making it different from other popups.

UPDATE: CHECK THE NEW DEMO FOR LOAD THE POPUP ON CLICK. THIS WILL NOT LOAD THE POPUP ON LOAD OF PAGE



 

Dec 7, 2011

Is Drupal 7 slow?

There are some performance issues with Drupal 7 currently on some server/server configurations.

As a start, you could try the 7.x-dev snapshot to see if there are any improvements.

  • Is your server is a shared hosting or your own server or local development environment?
  • Did you already use Drupal 6 in the same environment?
  • Did you enable the basic performance settings, like aggregating CSS/JS?
  • To do anything more, you will actually need to figure out what exactly is slow, there is often a specific bottleneck that is slowing down the whole site. As a start, you could enable devel.module and the query logging to see if there are any slow queries on that page.
  • If this is your own server, I strongly suggest to install and enable APC.

Most probably, you are hitting Avoid re-scanning module directory when multiple modules are missing. It happens if you have some missing modules in your installation.

Try to check your system table:

[php]SELECT name, filename FROM system WHERE type = 'module' AND status = 1 ORDER BY filename[/php]

And clean-up any modules that are still enabled but missing from the filesystem.

Overall, Drupal 7 is way more resource friendly and scalable then Drupal 6, other then some unfortunate regressions like this one.

Drupal 7 is optimized out of the box for large website featuring advanced cache features, reverse proxy, load balancer. You would say that this would make drupal 6 too fly, but there is noticable difference between drupal 6 and drupal 7 performace with same high end server setup.

Drupal 7 may let you down initially, but given the proper hardware and software environment, you can do wonders with drupal in terms of speed.

Drupal 7 uses too many files and like D6, it uses also too many SQL queries (in comparison with other CMS). So the first hit could take time, especially when you have a slow disk and files are not in OS cache.

In a normal situation, when cache is available, everything should be ok. There are many layer of cache: OS cache to avoid reading PHP files, opcode cache (like APC, not enabled by default) to avoid re-parsing PHP files, MySQL cache to avoid re-execute queries multiple times.

Morally, most of the time its not drupal, its probably the server at fault. Its true over the time drupal has evolved to be a resource hungry. But its only till you precise it that way. The fact is that drupal 7 is infact very resource friendly, since when it is used on a VPS with MemCache, APC installed then it flew like anything.

Learn PHP | PHP Tutorials | PHP Lessons | Part 2

So welcome back to part 2 of the PHP tutorial. If you are new to PHP then I would recommend you to first check the Part 1


Variables




  • Within this lesson you will learn how to assign values to variables in PHP and use them in some expression.

  • The topics covered are :



  1. Understanding Variables.

  2. Data Types.


Let’s get started right away…..


Understanding Variables




  • Variables

    • Variables are containers in which values can be stored and later retrieved.

    • They are basically the building blocks of any programming language.




For eg :- you can have a variable called “$number” that holds the value the value  “5



[php]$number = 5;[/php]

OR


$name that holds the value “bruce



[php]$name = "bruce";[/php]

Note :-        In PHP a variable will always be prefixed with a “$” symbol. If you can remember that declaring variable will be SUPER-EASY….




  • Just take “=” symbol with variable name on the left and value you want on right.


Here take a look at the example : -



[php]$name = "bruce";
echo "Hello";
echo $name;[/php]

 









Output produced is : Hello bruce.


  • Above example uses the “echo” command to display the value stored in a variable, in the same way that you would display a fixed piece of text.



  • The more descriptive your variable names are the more easily you will remember what they are used for, when you come back to a script several months later.



  •  Good variable name tells exactly what kind of value you can expect to find and stored in them.

  • Also, Variable name can only contain letters, numbers and underscore character. And each must begin with a letter or a underscore.

  • When the variable is assigned, the value given doesn’t have to be a fixed value


For eg :-



[php]$sum = 16 + 30;[/php]

-      ’16 + 30’ can also be an expression. An expression is where two or more values are combined using an operator to produce a result.


Let’s take a look at this …..



[php]$sum = 16 + 30;
echo $sum;[/php]

-      As seen above the values ‘16’ and ‘30’ are combined using the ‘+’ symbol & result is returned using “echo” command.




  •  Text Strings

    • Text Strings always have to be enclosed in quotation mark(“”) mark, and most of the time it doesn’t make any difference whether you use single(‘’) or double(“”) quotes.

    • But when you are dealing with variables it does make a difference.




Let’s look at an example to be clearer on this.



[php]$name = "bruce";
echo "Hello, $name";[/php]

  • Here the value of the variable is included in the string.








Output produced is : Hello, bruce.

Now look at this example below.



[php]$name = 'bruce';
echo 'Hello, $name';[/php]

  • Here no substitution of any variable takes place and output thrown is








Output produced is : Hello, $name.


  • You can overcome this by using ( ) OR { }



  • So if you want to display weight value with a suffix, your statement might look like this


[php]echo "The total weight is { $weight } lb";[/php]

  • If the braces hadn’t being placed around this particular weight variable , PHP would find a value which doesn’t exist. Like this


[php]echo  "The total weight is $weight lb";[/php]

  • Not to be too confusing but you can also do the same thing by using concatenation operator “.” to join two or more strings together as shown here


[php]echo 'The total weight is ' . $weight . 'lb' ;[/php]

-      The three values here are two fixed string and a variable.


-      If you assign a value to variable i.e $weight = 99 . The statement would produce output like this.









Output produced is : The total weight is 99lb.

Data Types




  • Each variable that holds certain value has a data type that defines what kind of a value it is holding.


























Data-type



Description


BooleanA truth value can be TRUE or FALSE
IntegerA number value, can be a positive / negative whole number
Double (or float)A floating point value can be any decimal number
StringAny alphanumeric value, any ASCII character.


  • When you assign a value to a variable the data type is also set.

  • PHP determine the data type automatically, based on value you assign to the variable.

  • If you need to check what data-type PHP thinks the value is you can use the gettype() function.


[php]$value = 7.2 ;
echo gettype($value);[/php]

  • Running this function, the data-type of a decimal number is double.

  • The complimentary function of gettype() is settype(), which lets you overwrite the data-type of a variable.


For eg:-



[php]$value = "22 January 2010";
settype( $value, "integer");
echo $value;[/php]

  • In this case the string begins with number, but the whole string is not an integer. The conversion converts the first non-numeric character and discards the rest and the output produced is just the number 22.


 









Output produced is : 22


  • Sometimes PHP will perform an implicit data-type conversion if values are expected to be of a particular type which is known as Type Juggling.


     For eg:-



[php]echo 100 + "10 inches" ;[/php]

-      The addition (+) operator expects to sit between two numbers. String type values are converted to double or integer in this case “10 inches” is treated is “10” before the addition operation is performed so the result is “110









Output produced is : 110


  • The same thing happens when a string operator is used on numeric data.

  • If you perform a string operation on numeric data-type, the numeric value is converted to a string first. We saw this earlier when we used the concatenation “.” operator to display a numeric value.

  • It is possible to use the value stored in a variable as the name of another variable.


-      Again, I know this might sound a bit confusing so let’s look at an example.



[php]$my_age = 21 ;
$varname = "my_age";
echo "the value of $varname is ${ $varname }";[/php]

-      The output produced in this example is









Output produced is : The value of my_age is 21

-      Because the string “my_age” is enclosed in a double quotes the dollar($) sign indicated that a variables value should become a part of string.


-      The construct shown i.e $ { $ varname } indicates that the value of variable should become a part of the string which is known as Variable Variables.


-      The braces around the variable $ { $ varname } is to indicate that it should be referenced first.


-      The next example shows the same output as the last one except that it uses the concatenation operator.



[php]echo 'The value of ’ . $varname . 'is' . $$varname;[/php]






Output produced is : The value of my_age is 21

So here we end our part 2 and I recommend you to go through the entire tutorial once again, and replicate all the examples in your localhost and test it if you are prepared for the 3 part.

download

Dec 4, 2011

Simple JQuery Toggle Tutorial | CSS JQuery Slide Toggle

Today I am going to share a very common and easy jquery tutorial with you. A JQuery Slide Toggle function.

.slideToggle() function is used to hide or show matched elements in a sliding effect.

So the basic syntax is

[js]$("div").slideToggle("slow");[/js]

So this was the basic syntax on how to slide toggle a div, now lets start with some real working examples.

So first the basic html code:



[html]
<div id="toggle">
<ul>
<li>Youtube Video Scraping</li>
<div>
Always I wondered to display youtube videos below my posts or for some other purpose. But always had to use some plugins or some complicated scripts. So finally coded for you people a small function which will fetch or scrape...<a href="http://webstutorial.com/youtube-video-scraping-fetch-youtube-video-through-rss/programming/php">Continue reading</a>
</div>
<li>WordPress Multiple Category Search</li>
<div>
Since when I started wordpress, I had a question in my mind, why wordpress doesn’t give multiple search option? I googled a lot, but couldn’t find a plugin or code which exactly works. So finally decided to go more into...<a href="http://webstutorial.com/wordpress-multiple-category-search/content-management-system-cms/wordpress-cms">Continue reading</a>
</div>

<li>Youtube Video Scraping</li>
<div>
Always I wondered to display youtube videos below my posts or for some other purpose. But always had to use some plugins or some complicated scripts. So finally coded for you people a small function which will fetch or scrape...<a href="http://webstutorial.com/youtube-video-scraping-fetch-youtube-video-through-rss/programming/php">Continue reading</a>
</div>

<li>Ten WordPress Useful Functions And Snippets</li>
<div>
Some useful WordPress PHP funtions. Just copy and paste these functions in your themes functions.php file Change the WP Login Logo & URL Link Load JQuery From Google CDN How to remove the WordPress Version Information Remove Default WordPress Meta...<a href="http://webstutorial.com/ten-wordpress-useful-functions/content-management-system-cms/wordpress-cms">Continue reading</a>
</div>

<li>A Good PHP Developer Can Answer This | PHP Test</li>
<div>
PHP developers go through 3 stages in their life Beginner Good Best A beginner PHP coder is some one who just started making some PHP projects in CMS like WordPress, Joomla, Magento and other PHP based CMS. A good PHP... <a href="http://webstutorial.com/good-php-developer-answer-php-test/programming/php">Continue reading</a>
</div>

</ul>
</div>
[/html]


And finally our js


[js]
<script type="text/javascript">
$(document).ready(function() {
$("li").click(function(){
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});
</script>
[/js]

Explanation:

In our basic html layout, we have placed a div exactly next to our li. So we tell the jquery to slide exactly the next div of the current clicked li. If we directly write slideToggle then it will slide all the div's of the current page. In the above js code, we are also using a stop() function. This is essential to use, to avoid multiple clicks on a same li making it to slide for continuous multiple times of sliding.

Here's a working demo of the above code