Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,625 members, 7,955,298 topics. Date: Saturday, 21 September 2024 at 09:50 PM |
Nairaland Forum / Science/Technology / Webmasters / Practical Jquery Puzzles (1798 Views)
7 Practical Ways Through Which You Can Earn Massively In Blogging / Tutorial: Building A Facebook Chat With Jquery/php / Dhtml Datagrid Control :: Jquery Integration :: Cms Support (2) (3) (4)
Practical Jquery Puzzles by cdeveloper(m): 10:55pm On Nov 14, 2009 |
This is intended for all the Nigerian Javascript Developers that are using or want to start using the jQuery Javascript Framework. This Thread focuses on speeding up the usage or understanding of the Framework. Post your puzzles and find solutions from other jQuery veterans. |
Re: Practical Jquery Puzzles by Nobody: 9:43am On Nov 15, 2009 |
you are back again. welcome. |
Re: Practical Jquery Puzzles by Nobody: 11:31am On Nov 15, 2009 |
Jquery's fun quick to grasp and the best part i love bout it are the callback and chaining of codes.My favourite code so far.Animate. Try visual jquery makes understanding fast. |
Re: Practical Jquery Puzzles by cdeveloper(m): 2:35pm On Nov 15, 2009 |
I one of my project i was wondering how to build an auto grow textarea box. What i mean is a textarea control that automarically grows when you are typing in it much like what you have on FB, so i googled for a jQuery plugin and found one written by John (the author of JQuery) and one of his friend, so i thought since he is the author of the framework why won't the plugin work. Well to my surprise it was not efficient and kind of like freezes the browser intermittently. So i googled around further looking for a better option,when i was getting no positive result. i decided to think it through and implement it. What is the logic? simple, when the textarea in question gets a focus create a div element that has Exactly the same style as the textarea and insert it immediately after the textarea. When characters are typed into the textarea replicate it in the div you created and watch the height of the div. Whenever the div height changes it is time to change the height of the textarea by whatever amount the div's height changed.This could be a shrink or an expansion. Armed with this knowledge i set out to implement it. First i want the to target the onfocus event of the textarea and i want the code not to recreate the div whenever the textarea loses and regains focus, so i will need an object that instantiates itself whenever the textarea gets focus but checks if the div already exists or not. Secondly i want the code to be decoupled so that i can reuse it as many times i want and on as many textarea a can be found on the page. Since all the textarea i am using a style by a single class and they each have an id and a name. i create an instance of the autogrow object with the id of each textarea, Lastly i want to control the maximum number of characters that can be typed and i want it to be dynamic. With this requirements in mind below is the implementation:
That completes the code and it work with jQuery library in addition to the code you need to define a css class named"autogrow" and set the height propertity to auto; this will enable the clone div to automatically expand or shrink in addition to the css class of the textarea Also use css class to define the height and width of the textarea, Don't use rows and cols for eample if i want to use this code for a textarea that has the following rules: CSS: .test { width:300px; height:25px; overflow-y:hidden; font-size:12px; font-weight:normal; color:#333; } .autogrow { height:auto; } i will attach the code like this <textarea id='growthis' name='growthis' class='test' onfocus="(new CDeveloperGrow(this)).setFocus('test',300)"></textarea> This is just about the mystery of auto grow and you can test it, tweak it, use it for you next stunning project and enjoy it. if you have an issue hala back NOTE: jquery library must be loaded in other for this to work or better still you can re-factor the code and remove the jQuery thing |
Re: Practical Jquery Puzzles by Nobody: 4:15pm On Nov 15, 2009 |
That's some hard code nice one.I don't know if this alternative works.Theoretical maybe like declare all textarea a specific height like 10px then a function like onkey it should grow with some px like even the animate function could work with some nice fade effect.But i prefer yours since i can declare once and give all to textarea. |
Re: Practical Jquery Puzzles by Nobody: 4:15pm On Nov 15, 2009 |
That's some hard code nice one.I don't know if this alternative works.Theoretical maybe like declare all textarea a specific height like 10px then a function like onkey it should grow with some px like even the animate function could work with some nice fade effect.But i prefer yours since i can declare once and give all to textarea. |
Re: Practical Jquery Puzzles by yawatide(f): 12:30am On Nov 16, 2009 |
After reading up on YUI, jQuery and MooTools, I settled on jQuery because of its similarities with javascript. As they say, what you don't use, you lose - Fortunately or unfortunately, due to googling for one plug in or the other, all I do is install and use, without studying the jquery behind it, unless of course, I need to customize the script to meet my needs. Because of the above, I dare not jquery on my resume as I don't and probably won't know it down pat. |
(1) (Reply)
Answerscript V2.1 Question Answer Script / I Need Your Help Please / Thrashy Website Designs
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 26 |