Is JavaScript and jQuery are actually the same thing

The differences between the two programs are discussed on the internet in more than thousands articles but technology is full of confusing terms. A lot of fresh developer (also me) ask a question it’s possible the use JQuery only?, So the answer is simple “No”, first off - it's impossible to use jQuery only, all jQuery does is add a $ object to your global scope, with a bunch of methods in it. Even more manipulative libraries like prototype aren't an alternative to javascript, they're a tool belt to solve common problems.

What Is JavaScript And Why its value For Web?

The answer is simple for What is Javascript “ it’s is a programming language whereas jQuery is a framework to help make writing in javascript easier.
An HTML page is a static one without use of JavaScript. It’s could make a web page dynamic and also we can create special effects on web pages like rollover, roll out and many types of graphics that would leave an amazing impression. For example, for a flash content on a web page to be executed in a web browser the JavaScript must be enabled. It’s also necessary for validation contact forms and login forms etc.

The uses of JavaScript don’t stop there, It has also been used for server-side programming, network programming with frameworks such as Node.js, game development and the creation of desktop and mobile applications.  JavaScript was originally developed by Brendan Eich, while working for Netscape Communications Corporation.

What Is JQuery And Why it’s Important

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It’s free, open source software, licensed under the MIT License. Before JQuery, developers would create their own small frameworks (group of code) this would allow all the developers to work around all the bugs and give them more time to work on features, so the JavaScript frameworks were born.

On the other hand best way to know what is JQuery? it’s a fast and well performance (Group of JavaScript code) Library that simplifies WebPages and HTML documents traversing, Events, Animating and develop Ajax applications for a well performed web development. Used by over 80% of the 10,000 most visited websites. [Wiki]

The main advantages of jQuery :

1. Browser compatibility - doing something like .attr() is much easier than the native alternatives, and won't break across browsers.

2. Simplification of usually complicated operations - if you'd like to see a well written cross browser compatible version of an XHR method, take a look at the source for $.ajax - for this method alone it's almost worth the overhead of jQuery.

3. DOM selection - simple things like binding events & selecting DOM elements can be complicated and differ per-browser. Without a lot of knowledge, they can also be easily written poorly and slow down your page.

4. Access to future features - things like .index Of and .bind are native JavaScript, but not yet supported by many browsers. However, using the jQuery versions of these methods will allow you to support them cross browser.

I hope the above introduction enough to understand difference between two programming language, If I miss anything please let me know in the comment box below, I will try to improve my post according to your tips. Please feel free to post any query via comment box below, we will always well come you as a loyal reader. Happy Blogging..!!

Read More

Understanding The Nuts And Bolts Of JQuery Mobile

Web development using JavaScript frameworks has always proved befitting for developers who need to create rich, interactive and outstanding websites and web applications. One such JavaScript framework that has received appreciations from global web developers is jQuery Mobile. As a brand new framework specially designed for building mobile web apps, jQuery Mobile has been built on top of jQuery and is well equipped with a suite of excellent user interface elements that can be efficiently used in the mobile apps. If you're new to jQuery Mobile, then keep on reading this blog as I'll be making you familiar with all interesting aspects related to this awesome JavaScript framework.

A closer look at jQuery Mobile

Serving as an easiest means for building websites and applications, jQuery Mobile is a JavaScript framework that comes loaded with several touch-friendly UI widgets and a simple AJAX powered navigation system that supports animated page transitions. A huge number of developers contribute open source plug-ins for jQuery, and you can find a suitable plug-in for almost any application you might have. The wide range of plug-ins and the simple syntax make jQuery such a great library.

What all does jQuery Mobile do?

Quite unlike a variety of JavaScript frameworks available in the market, jQuery Mobile does a lot more for easing the process of developing user interfaces for mobile web apps. Here's a look at some of the best things that are done by jQuery:

• It renders several new custom events that allow you to detect mobile and touch specific activities including tapping, swiping, tapping and holding, rotating the device and many more.
• With a built-in markup-driven interface configuration, jQuery Mobile makes it convenient for you to create a basic app interface with the help of HTML. Plus, there's no need for you to write even a single piece of JavaScript code.
• It utilizes progressive enhancement for ascertaining that the app interface works brilliantly on any web-enabled device.
• It utilizes a series of themes that make it simple for you to customize the overall look of your application.

Unveiling the jQuery Mobile Page Structure

Well, a majority of pages in your jQuery Mobile web apps will include the following basic template:

 

 

 

 

 

 

   

Page Title

 

 

   

Page content goes here.

   

 

 

   

Page Footer

 

The three things that you need to include in your page for using jQuery Mobile are:

• jQuery Mobile CSS file(jquery.mobile-1.0a1.min.css)
• jQuery library(jquery-1.4.3.min.js)
• jQuery Mobile library(jquery.mobile-1.0a1.min.js)

One of the best things about the jQuery Mobile Page structure is that you can easily create multiple pages within a single HTML page, resulting into a smoother user experience.

Ajax navigation adds to the excellence of jQuery Mobile

Ajax works as the right tool for making mobile user experience as smooth as possible. In-line with this fact, jQuery Mobile uses Ajax for allowing the linked pages to get loaded by default. In simple words, instead of the browser following a specific link for opening a new page, jQuery Mobile simply intercepts the link, requests the focused page via Ajax, followed by incorporating the new page content into the focused page's DOM. And that's not all, Ajax also allows jQuery Mobile developers to use URL hashes for ensuring that each page receives its individual and 100% unique bookmark able URL.

jQuery Mobile reflects a greater potential for mobile web app development

It is quite interesting to note that within 36 hours of the release of jQuery Mobile's beta version, an app was being built using the technology. John Resign, the creator of jQuery has displayed his confidence in jQuery Mobile and is keenly looking forward to making the JavaScript framework available for more and more mobile web app developers across the world. If you're an avid supporter of open web, then jQuery Mobile will serve as your best-fit launch. Backed by a rock-solid foundation for creation of impressive mobile apps, jQuery Mobile has opened doors to innovation in mobile web app design and development. With such a remarkable tool at their disposal, developers can deliver apps that look great and operate exceptionally.

Wrapping Up

The flexibility and easily theme able design of jQuery Mobile has made the framework stand out from the crowd of mobile web app development frameworks. So, get going and opt for utilizing the features of jQuery Mobile for delivering high-quality apps that run on varied platforms.

About Emily Heming

Emily Heming is an iPhone app developer and blogger and Currently working at Xicom Technologies. A Mobile apps development services provider which offers the reliable iPhone development services.

Read More

JQUERY: Automatic Timed & Self-Closing Facebook Popup Like Box For Blogger

How can you tell that a blog or a website is successful? Obviously, some would say that it depends on the traffic, but actually, traffic alone is not everything. Often the goal for a website is to generate sales, increase subscription rates, and develop loyal readership. Internet marketers are more familiar to this principle than any others are working online, and part of their success formula is the use of forceful and effective call to action, which is oftentimes contained in a pop-up box or lightbox.  Creating your own pop-ups for your website is not an easy task. You need to have knowledge of programming to be able to generate the codes that define your intended pop-up. Fortunately, for WordPress websites, there are many useful pop-up plugins available. Pop-ups actually are versatile, and can be used for many conversion related purposes.

So today i have write a tutorial on how to add popup like box with timer on blogger blog. You can set it for how long the widget/Plugin must display before disappearing automatically. It also includes a close option, we just trying to add some more features into code and update it as soon as possible. its a beta version please post your review below in the comment section. if you see any bug let us know we will try to fix that as soon as possible.

Live Preview

 

The plugin depends on jQuery, so be sure to include the library. Any recent jQuery version will do. We include plug-in file very similar to jQuery library file in the of the document.

1. Go to your blogger dashboard>> Template>> Edit Template

2. and add the following jquery link before closing or after opening tag.

 

 

 

Okay, we've completed adding JQuery now but we'll add a couple of styles to our Facebook Popup box.

 

3. again find the following code in your template.

 

]]>

4. and paste the below code before/above closing b:skin tag.

/*css for fbpopup*/

#fbpopupdata {
    background-color: none;
    position:absolute;
    z-index: 9999;
    display: none;
    padding: 0;
    border: 10px solid #446c95;
    -webkit-background-clip: padding-box;
/* for Safari */
    background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 420px;
    height: 300;
    overflow: auto;
    left:50% !important;
    margin-left:-220px;
    margin-top:auto;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

#fbpopupdata span {
    font-size: 12px !important;
    font-weight: normal !important;
}

#fbpopupdata h1 {
    background: #446c95 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EdoQs27ED3TSQhRkA4uswsF-ICja8jfJ-p9uW6s8DBEYHVIZb7F7btfi4vj41a_E7kij0ZJ1TADhyphenhyphen2tuyv3NeiIPchNIoDipnEJKoG_hGTmVba7JXfWZ3z7PQ4z8G2qVYM8OhHSYL14/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
    border: 0px solid #3b5998 !important;
    color: #FFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px !important;
    margin: 0 0 10px 0  !important;
    font-family: arial !important;
    overflow: hidden !important;
}

.fbpopupdatadata {
    font-size: 12px !important;
    font-weight: normal !important;
    height: 275px !important;
    padding: 1px !important;
    background: #fff !important;
    border-bottom: 0px solid #ddd;
    overflow: show !important;
}

#fbpopupdatafooter {
    text-align: right;
    font-size:12px;
    background: #F2F2F2 !important;
    height: auto !important;
    padding: 10px !important;
    overflow: hidden !important;
}

#fbpopupdatafooter p {
    text-align: right;
    font-size:12px;
}

#fbpopupdataclose {
    float: right;
    background-color: #446c95 !important;
    border: 0px solid #ccc !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 5px 35px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: arial !important;
    outline: none !important;
    font-size: 12px !important;
    margin: 0px !important;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}

5. and last and final step, just paste the below before closing your tag.

Join Us On Facebook >Get Widget

Please Wait 60 Seconds
Close X

      

Top Blogger widget 2014 ▼

       

       

       
• 1. Floating Sharing Bar

                   
• 2. Facebook Poput Like Box

                   

       

       

Top SEO Articles ▼

       

       

       
• 1. Search Engines That Respect Privacy

                   
• 2. The SEO Tools That Help Boost Your Sites Traffic

                   

     

       

Top Best Blogger Template ▼

       

            

       
• 1. Blogger Beginner

                   
• 2. Premium Blogger Template

                   
• 3. Sky Blue Blogger Template

                   

       

       

Top Blogger Resources & Tools ▼

       

            

       
• 1. HTML Econder

                   
• 2. HTML Editor

                   

       

   

Troubleshooting for setting up for your blog

In the above html code we have created 4 accordion menu.

• Replace Highlighted in yellow with the name of the dorp down title.
• Replace Highlighted in Green with your Link anchor text.
• Replace hash (#) sign with your article (page) link.

So now we sure you want to add another dropdown, So then just add the following code after