Fixed div box while scrolling window using javascript and css

Have you used fixed div scroll ? I think many of you have shown div box which at time of load page, it scrolls when we scroll window, but later on after reach at some specified pixed, div box remains at fixed position. Am i right ?

Such type of windows are very useful in case of advertisement or highlight some contents. However mostly it is used for google ads in blogs. So now i am showing that how you can do it ? Its a very easy simple, you just need to download my sample files. I have used pure javascript and css property for it. There is not any extra file load. I have used google jquery CDN libray, about which you all are aware.

Javascript code :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”></script>
<script>
$(function () {

var msie6 = $.browser == ‘msie’ && $.browser.version < 7;

if (!msie6) {
var top = $(‘#comment’).offset().top – parseFloat($(‘#comment’).css(‘margin-top’).replace(/auto/, 0));

$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();

// whether that’s below the form
if (y >= top) {
// if so, ad the fixed class
$(‘#comment’).addClass(‘fixed’);
} else {
// otherwise remove it
$(‘#comment’).removeClass(‘fixed’);
}
});
}
});
</script>

You can see that code of fixed div scroll is very simple. At time of initial it detects given div offset and then changed top position as fixed when it reaches at specified pixel. As per given example when top position will touch our given div box then , its css property will change to fixed. In this way while scrolling windows, our div box will be fixed on top.

View DEMO

Download File

Lengths in CSS Property

As an developer, you may have query regarding which types of length i should use in css property. Am i right ? There are a few CSS properties by taking a length as value. Box model properties are most evident: width, height, margin, padding, border. But many others as well: the offset and the size of a box-shadow or the size and spacing of fonts. Lets see one bye one with an example. This will help to understand easily.

px (Absolute length)

.wrap {
width: 400px;
}

Pixels are always a canonical measure on the web but they are constantly manipulated, many other lengths correspond directly to the pixels, and JavaScript speaks pixels. Pixels are perhaps best considered “device pixels” that this length has nothing to do with the screen pixels literal screen you are watching. It is actually a measure angle. It is supposed to be a value that is standardized across devices and screens, but is increasingly no longer true.

.wrap {
width: 20cm;
}

centimeters are more familiar and useful as a physical measurement. We can map to pixels like this 1cm == 37.8px

.wrap {
width: 4in;
}

‘in’ map directly to pixels.This are not used widely

.wrap {
width: 100cm;
}

And an order of magnitude smaller== 37.8px

Em (Font-Relative Lengths)

.wrap {
width: 40em;
}

A relative unit. Although the length doesn’t change when you change font-family, it does change when you change the font-size.

% (Percentage)

.wrap {
width: 50%;
}

A length set in percentage is based on the length of same property of the parent element. This is widely used. As specially in responsive design this property helps more.

There are also more length options. About which we will discuss on next articles. However if you need to see more then just visit

Let me know if you have any query.

Zendframework 2 : how to define global custom functions easily

Hello Friends,

As we know that zendframework 2 is not very easy to learn or understand. Its true that its 100% pure OOPS. But for beginner it may create problem to understand it. It is not easy compare to ZF1 (Zendframework 1) initially. Zendframework 1 work was easy to understand, but now in zendframework2 it is completely different acrchitecture. Now load speed is minimized in zendframework 2. But problem for beginner is to implement code. I am also learning zendframework 2 and founded that it sometimes take more time to code. I

Custom functions

Suppose if you want to use your own custom functions then it is required to updated module.php and other files. But i have an other short cut using which you can use your own functions very easily. And also you will not required to write anything in module.php, controller or module file. Even you dont need to use namespace or dont need to use php function ‘Use’ .

Steps to create custom functions in zendframework 2

Step-1 : Just create one file say myfunctions.global.php in autoload directly. and write your function in normal way

Step -2: At last in this file, you just need to write blank array like following.

Example :

myfunctions.global.php

function plus($v1,$v2)
{

return $v1+$v2;

}

return array(); // dont forget to write this

That’s it.

Now you just use function name in your model, controller or module in simple way like you were used in core coding. I know that perhaps this is not write way. But to do some task, i think this is very short cut.

Am i right ?

which php framework is best

PHP FRAMEWORK

Hello Friends,

There are so many php developers that are working on core coding and want to shift or want to try php framwork. But problem is that which framework is best for php and how to choose it ?. I am also php web developer and i also faced same problem. I just give you my opinion and experience of php framework.

First of all , i would like to tell that i like my core coding because i can do what i want. In php framework you need to understand all things which are developed by framwork developer. No doubt, that if you work on php framework then your code will be in proper way. Because we have to follow its rules, class , model or function. You can use any php framework. Generally all php framwork are based on MVC (Model View Controller).

I have tried CODEIGNITOR, YII , CACKEPHP and ZEND FRAMEWORK2. I think if you want easy php framework then you should go for codignitor, yii or cackephp. While zend framework2 seems some complex compare to others. However zendframework1 was easy. But i would recommend to go for zend framework2 because it will suppose mobile application too. Zend framework 2 based on event manager. Initially you will feel hard but later on it will easy. At present i am still learning it but it becomes complex for me because i am lover of core coding and so. I have also developed my own MVC, which seems very useful and also think to develop it to use in my coming project. I have developed this MVC after review opencart shopping cart. I was so impress about its internal data flow and database structure.

So in general way you can follow any php framework which you like. In market there are following best php framework.

CodeIgnitor
CakePHP
Yii
CodeIgniter
Zend Framework-2
Symfony

How to Enable and Disable Comments in wordpress ?

Have you problem to enable or disable wordpress comments. No problem. I will show you that how you can eable/disable comments in wordpress. Its very easy to eanble and disable wordpress comments.

Open :
Settings -> Discussion screen.

Here you will find many options to set as per your requirement. If you want to edit in bulk edit, then follow following steps.

Bulk Edit Options :

Go to the Posts -> All Posts screen in your blog dashboard.
Select the posts you would like to modify or check the box next to “Title” column at the top to select all posts on that page.
Select Edit from the Bulk Actions drop down menu.
Click the Apply button.
Change the options for Comments and Pings to Allow or Do not allow.
Click the Update button.
Repeat with your Pages.

Theses are the basic steps and information regarding enable and disable comments in wordpress. I will also publish other post to get more idea regarding enable and disable comments in wordpress.

Responsive web design – HTML 5

What is responsive web design ?

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Elements of responsive web design :

It used css3 media query. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser

Now learn how to create responsive web design :

This shows the the most significant screen sizes, from the smallest to the largest.

Fashion phones:
128×220	Samsung F210
240×400	LG favorite. Prada and Viewty.
Handheld touchscreens of the iPhone variety:
240×440	Various Palm and HP
240×480	LG KF700
Typical Palm/Blackberry form factor. US enterprise with portrait or square displays:
240×240	Samsung F210
240×260	Blackberry Pearl 8100
320×240	Various
320×320	Palm and Samsung
Clamshell:
640×480	HTC X7500, Qtek 9000, etc.
800×352	Nokia E90 Communicator
800×400	Sony Ericsson Xperia X1

Example of responsive menu :

/* small screens */

@media screen and (max-width: 44em) {

body {

margin:1.5em 0;

}

nav[role="full-horizontal"] {

ul {

padding:0 .5em;

}

ul > li {

width:100%;

padding:.45em .25em;

margin:0 0 .55em 0;

&:after {

box-shadow:none;

}

}

}

}

Output :

Yahoo ties up with Google for using AdSense

Yahoo Inc on Wednesday announced an advertising alliance with Google, the company that dethroned the pioneering Internet firm in the world of Internet search. Yahoo gave the example of someone online shopping for boots being shown an ad for something completely unrelated because no advertisements for footwear were available in inventory.

Google will use its online ad targeting skills at some Yahoo! properties, stepping in to put relevant marketing messages in available spaces, according to Sunnyvale, California-based Yahoo!. It also raised the possibility of Yahoo turning to Google to power Internet searches at its website, once freed from its current deal to use Microsoft’s Bing service.
Yahoo has been trying to reinvent itself since the once-flowering Internet search service found itself withering in Google’s shadow.

Source

Wireless router – Micromax MMX 400R

The MMX 400R is both a wireless router and Wi – Fi hotspot. It manages multiple roles as effortlessly as it manages multiple devices. Since it’s independent of operating systems, it’s easy to use; just plug it in and you’re good to go! Portable and handy, it provides high speed internet with secured access to any Wi – Fi device within 10 meters. And its lithium ion battery provides working power for up to four hours, which means you’ll run out of sites to surf before it runs out of energy.

Features :

Network	:	3G
HSDPA	:	3GPP Release6, up to 7.2Mbps DL,category 7/8
HSUPA	:	3GPP Release6, up to 5.76Mbps UL,category 6
ROM	:	128MB
RAM	:	64MB
Dimensions	:	H:14mm, W:51mm, L:96mm
Weight	:	90 Grams
HSDPA (Downlink)	:	Up to 7.2Mbps
HSUPA (Uplink)	:	Up to 5.76Mbps
Frequency Band	:	850/900/1800/1900/2100 MHz
WLAN Band	:	2.4 GHz
Expandable Memory	:	16GB
SMS Feature	:	No
Phonebook Feature	:	No
Calling Facility	:	No
Battery Capacity	:	1500 mAh

Download manual

jquery ui datepicker

Jquery is one of the easiest way to implement datepicker for form’s input field. You can also set on focus event to fire date popup. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

Simple Source Code :

<html lang="en">

<head>

<meta charset="utf-8" />

<title>jQuery UI Datepicker - Default functionality</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css" />

<script>

$(function() {

$( "#datepicker" ).datepicker();

});

</script>

</head>

<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>

</html>

How to restrict or disable date in jquery date picker ?

Restrict date range: (Source code)

<html lang="en">

<head>

<meta charset="utf-8" />

<title>jQuery UI Datepicker - Restrict date range</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css" />

<script>

$(function() {

$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });

});

</script>

</head>

<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>

</html>

Do you want get more tutorial, then just visit source

How do i put google analytics in my wordpress

Have you question like “How do i put google analytics in my wordpress ?” like me. No problem. I will explain in short regarding how to do it directly from wordpress admin panel. Steps are very simple and easy to understand.

There are 3 ways to install Google analytics in WordPress. Direct paste, functions.php, and plugins.

Direct Paste Method :

Copy the code that you received from google analytics panel, and paste it in your theme’s footer.php right above the </body> tag.

To do this open

and then click on “footer.php” in right side.

Functions.php Method :

Add the following code in your theme’s functions.php file

Plugins Method :

There are tons of plugins available to add Google Analytics to your site. Paste the Google Analytics code in the plugin’s setting page.

Advertisement