DomainFunk.com » jQuery

Jquery Feedback Tab

DomainFunk.com — Sat, 20 Jun 2009 13:08:35 +0000

Every one must have visited, one of the many interactive websites, with a feedback tab on the side or on the top, this tab keeps following as you scroll. Ever wondered, gee, how do I get that ? No? Yes? Well I did and I found out there are companies out there charging a bomb for this service/product.

So I set out on a quest to get me one of my own feedback tab. Since I love Jquery, I started to hunt for a jquery feedback tab, and I built one, with the help of a nifty plugin. Want to know how to do it?

Here’s how..

jQuery Feedback Tab Requirements

To get started we need the latest Jquery release from here and a nifty jQuery based plugin, known as boxy.js from here. These two would give us the feedback effect you see on this site. Other than these two we require an image, or alternatively you can just have a div if you did like, for the side “Feedback” tab. You can download all of my jquery feedback tab files from here.

jQuery Feedback Tab Code

Here’s the code required in your page (File) which would be where you would require the jquery feedback tab. Alternatively, if you have a content management system, like wordpress or joomla, you could use the header or the index files, accordingly, if you need help, just drop us a comment or two

1:

2:

3:

The above three lines import the .css file required, that you can play around with and import/include the jquery.js file and the boxy.js plugin file. Make sure the “src” path is set up right, with the proper relative path for these scripts.

4: $(function() {

5: /* set global variable for boxy window */

6: var contactBoxy = null;

7: /* what to do when click on contact us link */


8:    $(’.contact_us’).click(function(){
9:        var boxy_content;
10:        boxy_content += “
”;
11:       boxy_content += “
Subject
Your name and/or email:
Comment:

>\” />”;
12:        boxy_content += “
”;
13:        contactBoxy = new Boxy(boxy_content, {
14:            title: “Send feedback”,
15:            draggable: false,
16:           modal:true,
17:            behaviours: function(c) {
18:                c.find(’#feedbacked’).submit(function() {
19:                    Boxy.get(this).setContent(”
Sending…
”);
20:                    // submit form by ajax using post and send 3 values: subject, your_email, comment
21:                    $.post(”http://tweetfeat.com/wp-content/themes/default/suggest.php”, { subject: c.find(”input[name='subject']“).val(), your_email: c.find(”input[name='your_email']“).val(), comment: c.find(”#comment”).val()},
22:                    function(data){
23:                      /*set boxy content to data from ajax call back*/
24:                        contactBoxy.setContent(”
”+data+”
”);
25:                    });
26:                    return false;
27:                });
28:            }
29:        });
30:        return false;
31:    });

32: });

The above code is responsible for creating the modal box, just like the ones we see with facebook.com. The code is very self explanatory, again if you have any questions feel free to ask in the comments. There are comments above that would be of help to some.

33: #feedback{

34: position:fixed;

35: width:50px;

36: height:150px;


37: top: 150px;
38: z-index:1;

39: }

The above is the CSS code for the tab, now the tab can be an image or div or both, like in our case we have both, a div with the background as a gradient and the foreground being the text “Feedback”.

40:

Place the above code just after the tag. Since the position of the div is fixed, it would be appearing outside the normal frame of the browser.

Conclusion:

I hope this post would save you the cost for the feedback being implemented, as a give away, our first five followers would get a “Free Jquery Feedback Tab” installation from us. All you have to do is subscribe and leave a comment!

Download Entire jQuery Feedback Tab Source Code, With Example. Click Here.

Resources

For more on boxy, I suggest visiting @ http://onehackoranother.com/projects/jquery/boxy/

Enjoyed it? Share it!:

Iframe and jQuery

DomainFunk.com — Wed, 18 Mar 2009 13:18:13 +0000

Most web masters have, or will, come across the “ol’ iframe resizing dilema”. I know, I have and How! I have tried any and everything from javascript ot PHP to resize the iFrame window according to the size of the page loaded within. And more often than not, failed miserably, because of the cross server scripting security instilled in every browser and platform.

Well, not until recently, with the help of jQuery I was able to resize the iFrame height even with the cross server security of all browsers and it was something that bought a smile to my face and simply because it did, I am in love with jQuery. Here’s how to…

The Problem statement.

The below code will guide you through the entire process of getting your iframe resized, even if the page loaded within the iframe is from a different server. I am still working on this code, to get the iframe resized exactly as the size of the page within the iframe, and as soon as I figure that one out, it will be out here.

The Idea.

For the resizing to work, we need a

to envelope the . And instead of resizing the iframe we resize the div to height and width we want…

The Code.

1.


2. 
3. <script type=“text/javascript” src=“jquery.js”>script>
4. 
7. 
8. 
9. 

10. Google.com
11. 

12.

13.

The Explanation for the code.

Line 3: We import the jQuery file, that we have downloaded from herefor the latest version of jQuery click here

Line 5: Is a script that is written using jQuery and it essentially increases the size of the div by 1000px. You can use any value you did like to here. using the $() we use the div nodes css property and change/adjust the height as we require it to be.

Line 8: We call the function writing(Line 5) on the onload event of the . This function can be called anytime.

And Thats about it!

Resources

jQuery@ http://jquery.com/

More jQuery Tutorials@ http://docs.jquery.com/Tutorials

Enjoyed it? Share it!:

Hello World with jQuery

DomainFunk.com — Tue, 16 Dec 2008 16:12:05 +0000

Writing a “hello world” script using jQuery is fairly simple. This article is just a very brief introduction on writing scripts using jQuery. This article also assumes basic knowledge of JavaScript and DOM (Document Object Model). We will not be covering any practical examples here. This would be more so of a copy-paste and try it yourself guide.

Setting up jQuery on your end

We would require a fresh copy of the jQuery library, which can be downloaded from here. After downloading the jQuery library, extract the contents into a folder. Within this folder we will be creating our html and jQuery example. Setting up jQuery is this simple!

Hello World using jQuery

Using a text or html editor of your choice, create a new html document with the following code. Make sure you save the document in the same folder where you extracted the contents of the jQuery library downloaded, as stated above.

1: 2: 3: 4: 6:Our jQuery Hello World 7: 8: 9: 10: 11:

If we open the above html page in a web browser. The web browser will only load the library and will not be doing anything further.

Before we move ahead, just a reminder to you guys. What ever we are going to do with jQuery, would only involve reading or manipulating the DOM. It would be sound logic, to do whatever we want to with jQuery after the DOM has loaded into the browser completely.

Here is how the above code is modified to our needs.

1: 2: 3: 4: 12:Our jQuery Hello World 13: 14: 15:Click Here 16: 17:

Provided the jQuery library (jQuery.js) and the html file you created are in the same directory; the above code would throw an alert when ever any anchor tags are clicked on.

Explanation of Hello World jQuery

Line 3: Include the jQuery Library, making sure the src path is correct.
Line 5-10: We first register a ready event for the document. Once the DOM is ready all anchor tags within the document when clicked will show an alert saying “hello world”. $(“a”) is jQuery selector tool or method, which selects all “a” or all anchor elements. ‘$’ is an abbreviation or a substitute for the jQuery “class”. $() would construct a new object of the jQuery class. The call to the click() function again using the jQuery object would bind all click events of all anchor tags and would execute the provided lines of code. Simple, isn’t it.
Line15: Since this line is an tag, all clicks would result in a hello world alert.

This is just one facet of jQuery. If we were trying to do the same using plain javascript, we would have manually specify the alert code in all anchor tags within the html document. With, maybe, 5 lines of code, we did that using jQuery. Makes Sense?

In our further articles we will be exploring further into jQuery. Do leave comments.

jQuery hello world Resource

jQuery Library@ http://docs.jquery.com/Downloading_jQuery
jQuery starterkit@ http://docs.jquery.com/images/c/c7/Jquery-starterkit.zip

Enjoyed it? Share it!:

A Date With jQuery.

DomainFunk.com — Tue, 11 Nov 2008 16:30:57 +0000

Ask any JavaScript guru, what keeps them occupied today? A synchronous and obvious answer would be Ajax or “asynchronous JavaScript and XML”. As time passes by, Ajax is maturing and getting more complex day by day. So much so that many web biggies, like Google, Yahoo and Microsoft have introduced their own JavaScript libraries.

JavaScript libraries are a collection of pre-written JavaScript controls and classes. JavaScript libraries make it easier for web developers to develop and deploy amazing, fantastically interactive websites and web applications in a fast and headache less way. Most JavaScript libraries today are built and provided around the sphere of Ajax, with Ajax being used widely and getting older and more complex everyday, these libraries offer a fast and almost “bug” less experience while developing and deploying websites. One such JavaScript library would be jQuery.

So, this brings us back to the question,

what is jQuery and Why jQuery over other libraries?

jQuery is a wonderful, power packed library that makes adding wonderful interactivity to your web pages and web sites easy and a childs play. With only a few lines of code, it would add div effects, roll over’s that are interactive and a lot more. jQuery, takes the mundane out of writing scripts using JavaScript and Ajax. If you are a Webmaster, you may have heard about moo tools, Google’s Ajax API, Yahoo’s Ajax base UI, and wonderful Scriptaculous and prototype and maybe even used these. All these, like jQuery are little powerhouses of dynamism for your websites, alternatively known as JavaScript Libraries.

jQuery was written and brought to us Wally’s by John Resig. For more on him you can visit http://ejohn.org.

So, if so many JavaScript libraries already exist

why jQuery?

Unlike most other JavaScript libraries, jQuery works in a different manner. What sets it apart is something known as “Chainablity”. This is somewhat related and like object oriented programming. For one, jQuery generated code is less heavier or smaller than prototypes. Unlike jQuery, which uses OO concepts, prototype – as a JavaScript library, only encourages them. Even if you have used other JavaScript libraries, I, as web developer would definitely suggest you guys at least trying out jQuery. Its simple, short and sweet and Its powerful, light and fun!

If you have been up and date on your reading skills as a Webmaster, you would know that jQuery, recently was adopted by Microsoft and Nokia as part of their official developmental platform. More about this @ http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/.

Not only that Google, Yahoo, Dell, Bank Of America, NBC, digg and other biggies also have adopted and used jQuery for developing and deploying their website or website based products.

Why should you use jQuery?

As mentioned above, jQuery is simple. Have a look at the tutorials here http://docs.jquery.com/Tutorials:How_jQuery_Works and you would know what I mean by simple! With jQuery, a Webmaster or web developer could accomplish a lot in three lines of code, that’s it! Above all, jQuery is more so graceful and smooth.

Here is a small e.g. from jquery.com

The concept of jQuery is different than others and arguably simpler and in some cases shorter.

When should you use jQuery?

You should use jQuery, when you need control over your DOM objects. This might translate to, when you want to use Ajax to spruce up and power your pages with almost no or effortless code, that is easier to debug and write and light to run, that is when you should use jQuery.

If you are looking for some heavy animation, you can couple jQuery with other libraries like prototype and scriptaculous.

Where can you get jQuery and other JavaScript libraries?

jQuery is free and is available at http://jquery.com/. Its small ~15kb and you can find a lot of tutorials and discussions too.

What about other JavaScript libraries?

You can get your hands on:
prototype @ www.prototypejs.org
scriptaculous @ www.script.aculo.us
mootools @ www.mootools.net

For a full list of other JavaScript libraries you can visit http://javascriptlibraries.com/ this site has an extensive and categorized list of JavaScript libraries.

This should keep you guys digging and busy Have a good one!
My jQuery motto: jQuery - Easier than getting laid on the first date!
I would add more resources if you guys want them.

Enjoyed it? Share it!: