Junal on the run

Archive for the ‘JavaScript’ Category

We always face css issues that work in FF/IE7 but not in IE6! That’s a common scenario. But Javascript? Well that’s too. Yesterday I faced this problem while I was working on an onclick event of JS.

To avoid the link execution I used href=”javascript:fx()” which worked fine in FF and IE7 but when I went to test with IE6 it all went wrong. Weird problem. Had no idea why it didn’t work and after goggling for sometimes I found the solution which was like instead of href=”javascript:fx()” I had to use href=”#” and my onclick was finished with “return false” to prevent the link from being executed. Nice trick! Google is the best!

Advertisements

I didn’t find any example of getChecked(), so I thought this example might help somebody who are looking for an example using this method.

Problem: You would like to allow your users to send their Facebook’s friends a message or whatever. Now there must be a check (if this is not invitations, because in invitation you don’t need to check whether friends are selected or not) to see if any friend is selected for the action.

Solution: We can solve it by FBJS using getChecked() method. Certainly, your friend’s list generated dynamically. So let’s see the solution…

<script>

function checkIfFriendsSelected()
{
var ok = false;
for(var i=0; i<totalFriends; i++)
{
var item = “m”+i;
if(document.getElementById(item).getChecked()==true) {
ok = true;
}
}
if(!ok)

{
new Dialog(Dialog.DIALOG_POP).showMessage(‘Select A Friend’, ‘You must select a friend to send a poke!’, button_confirm = “Okay”);
return false;
}
else
{
return true;
}

}

</script>

Your function is created, now you need to call this. note one thing that we can call this function when we click on a button but problem is if we do so, form will still be submitted because “form submit” doesn’t work for FBJS! So we better set this function on “onsubmit” in the form tag like this : onsubmit=”return checkIfFriendsSelected()”.

FBJS example with getChecked() Method

now, if your users dont select any friend then it will show a pop-up message like the above one …

caution : input type must be “checkbox” 🙂

I was thinking what should be the next JS framework/library for me to start after Scriptaculous? Well I started jQueary but suddenly I couldn’t continue after a while as I started using Prototype.js for my ongoing project. So I couldn’t know a lot about jQuery. I decided to find a next better JS framework in this Eid break. I guess I have found it! Telling you letter but first let me give you some ideas about these frameworks that I studied during this Eid break! First of all I read about mooTools(My Object Oriented javascript), because I was getting tired of reading all admiration about it from different forums. So I decided to study on it. A good thing about mooTools is you don’t have to download all libraries files from it. You can make your package lighter by choosing library files from the given list. If you want to use it all together yo have that option too. So lets find out some components of this framework.

  • Element
  • Window
  • Effect s
  • Drag
  • Remote
  • Plugins
  • Native

Example :

function say(msg){

alert($pick(msg, ‘no meessage supplied’));

}

Personally I think it’s not easy to use.

Now next one is YUI! (The Yahoo! User Interface)

 

YUI is the most complete and most namespaced library. But this one is very heavy , lets have a look at components.

  • Animation
  • Button
  • Autocomplete
  • Browser History manager
  • Color Picker
  • Container
  • DataSource
  • DataTable
  • Drag & Drop
  • Element
  • Event
  • TabView
  • TreeView

Any many more!

Example :

<div id=“test”></div>

<script>

var myAnim = new YAHOO.util.Anim(‘test’, {

width: { to: 400 }

}, 1, YAHOO.util.Easing.easeOut);

</script>

Ok, now come to Scriptaculous. Its cool but I don’t think it can be cooler. Although it is coming with some new features in their latest version 1.8 and 2.0 ! but still. Ok lets have a look at components:

  • Animation Framework
  • Drag & Drop
  • DOM utilities
  • Ajax Control
  • Unit Testing

You have a bonus for you if you use this JS library. It’s an add-on to the fantastic Prototype framework. Now prototype also has chaining [where you can call many functions on the same line] from 1.6 onwards

Example:

  <script type="text/javascript" language="javascript">    //
      <![CDATA[Effect.Appear('element_id');    // ]]> 
 </script>

Easier to use eh? Well, I guess this one is easier to use than others so far I mentioned.

Ok let me tell you I asked hasin bhai about these JS libraries. You know which one he said was best? ya answer is jQuery. Because it’s lighter, EASY TO USE and FAST! Let me give you an example from their official site.

$(“p.surprise”).addClass(“ohmy”).show(“slow”);

The above code snippet looks for all paragraphs that have a class of ‘surprise’, adds the class ‘ohmy’ to them, then slowly reveals them. Click the ‘Run’ button to see it in action!

Some components of jQuery :

  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities

So Iguess you got your answer now. Well let me finish this post by telling you a funny thing. I was actually studying on this comparison since I started my Eid break. Was trying to be sure as much as i can. For that I asked Hasin bhai and Ahsan bhai. You know what happened with Ahsan bhai when i was asking him about all these libraries specially in his opinion which one was best so far?

Well read the bellow conversation…..my HEAD !!

Ahsan: but IMHO, JQuery is the best for the time being

Junal : IMHO? Haven’t heard the name ! same shit ?

Ahsan: in my humble opinion :p

Ahsan: hehehe

 Junal: lol:p

 

I have Spent a busy week following some different tasks. Had to do some family work and I had an official tour in sylhet. My assigned task was to train some people how to use the software that we sold to them and gather all bugs that are still in the software. Well, that was great experience indeed. By this time my “Google reader” was piled with lots of interesting topics and our damage sub-marine cable cost us 2 days!
Well, this topic that I m going to talk about is really important for those developers who are not aware of these facts that are slowing down our websites. I found this article is really helpful to improve the website speed. Lots of important factors that slow down your website are explained here. I’m picking some important points from the article to give you idea what factors are actually explained. But to get the whole idea and learn from it you must visit here http://www.roscripts.com/How_to_speed_up_your_website-175.html
Some important points from the article:


    • Reduce the number of colors in your graphics
    • Avoid using flash as much as possible
    • Remove the HTML comments from your pages
    • Use caching
    • Combine multiple files into one
    • Do not use images to display text
    • Use CSS to call images used for decoration
    • Use shorthand CSS properties
    • Use relative url’s
    • Remove unnecessary META content
    • Try to have less HTTP Requests
    • Use image maps to combine multiple images into a single image
    • Add an Expires Header
    • Multiple Servers:
    • Put CSS at the Top
    • Move Scripts to the Bottom
    • Avoid CSS Expressions
    • Make JavaScript and CSS External
    • Don’t use regular expressions where you don’t have to
    • Avoid Redirects
    • Remove Duplicate Scripts
    • Use CSS For Faster Pages
    • Use External Scriptsa
    • Avoid Nested Tables
    • Keep Your Code Clean
    • Faster Images? Reduce Their File Size
    • GIF vs JPG vs PNG

That’s it! You may not find any interest to see these points only, I’m sure you will enjoy reading their whole article with examples. So, take your time and read the full article. I am sure it will help you a lot.
Reference: http://www.roscripts.com/How_to_speed_up_your_website-175.html

Recently, i read this article from here.. http://cow.neondragon.net/xml.php Nice to see some cool JavaScript effects. specially Corner.js which can add rounded corners to your images, as well as shading and shadows around the image! cool eh ? you can try it now. very easy and simple process. this is how i used it ….

<script type=”text/javascript” src=”glossy/glossy.js”>
</script>
<div align=”center”>
<img src=”junal.jpg” class=”glossy” />
</div>

 

Junal with JS effect

well, there are several JavaScripts waiting for you. such as Glossy.js, Instant.js

im sure you will enjoy to use these effects. have a look here http://www.netzgesta.de/corner/

 

 

We used to get lots of programming projects in university. There were two groups of students for the project. One of them used to copy the project from other group and they were about 80%. Now, who where those 20% who used to do the project by themselves? Group of brilliant student who were really good at Physics and Mathematics? uhm…no I don’t think so. Rather they were dedicated guys who were willing to become a good developer. It’s not necessary that you must be a brilliant student to become a developer!! If you are, then you can understand the algorithm quick and apply them fast. If you are not, then all you have to do is hard work. Practice after practice. But hey, remember you must have basic ideas. Let me describe some points which I think very essentials for those who are willing to become a good developer.

Believe in yourself: whatever you are doing, first keep it in your mind that you can do it! Don’t make yourself narrow thinking that maybe you won’t be successful.

Set your mind: you really want to become a developer? Ask yourself. If you are confused then just forget it.

Don’t listen to them: you exactly know who you are! Don’t let anybody to judge you. Only you can say how far you can run. Don’t listen to those friends who think you are good for nothing. You better stay away from them. You gotta keep passion inside of you to prove them wrong!

Be dedicated: You must be dedicated. This is a field where your dedication brings the best output. Lose yourself in the programming. Forget when you have to sleep and when you have to eat! Forget when you have to watch “Indian Idol”, you will have more fun in developing. Nothing can be compare with developing. It’s really fun if you really dedicate your time in it.

Read before you write: well, before starting your code you should read about the things that you’re going to implement in your software. Read them in details if you can. By this way you will develop your reading practice which is very needy things for developers.

Understand your problem: Most important thing is you have to understand what you are doing!! Try to understand your problem first. Take time as long as you don’t understand what it is asking you to do. Then break down your all problems into pieces. Make them as small as you can. If you are doing it for the first time then don’t set any time line for those pieces. Take time.

Solve it: Again! Why you are scared when you hear that you have to solve a problem? Don’t be. Try is first!  Write down your problems why you couldn’t solve it. Work on it! Wait until you solve a problem. Once you solve a problem means you are ready to solve another problem. This is how day by day you will move to bigger problem! I can tell you it every time you solve a problem, it will increase your confident. You will smile at yourself when you see at last you solved the problem that you thought it was impossible for you! Don’t give up! This is the best way to learn programming. Don’t leave your chair until you finish it. This will bring out your all dedication if you have any.

Be updated: this world is changing so fast. Millions of developers are working so hard to improve the quality of developing. How to make software more users friendly. Remember you have to be in the race. Read forums, articles and books. Know what is going on in developing world. Keep yourself updated.

Take it positively: sometimes you will be criticized by your senior developers. Maybe they don’t actually mean it. Maybe they want you to be more serious. Remember sometimes criticism brings the best output. So don’t be upset.

Be who you are: always respects senior developers but you don’t have to bow them. When you dream, dream bigger. Think you can be better than all others. Give priority to your own ideas and thoughts. Maybe you want to follow your own convention in developing, then do it! Come up with your own ideas. Work on it! Forget those who think it’s just bullshit. Remember your uniqueness will make you hero one day!

Meet geeks: meet other developers. See what they are thinking and what you are thinking. Start discussion on the idea that came in your mind last night. Developers always like to discus about new ideas so you won’t be a loser.

Feel it: I can remember a quote of Dr.Lutfar Rahmam who said “write something every day, one day you will be amazed to see what you have done!” Keep it in mind that your hard work will never be a loser. You will win for sure. See the progress of your work. You gotta fee it….

number formatting is kinda hard with JavaScript. at least i found it was hard for me when i needed it for my front end page. its really easy with PHP because it has rich functions which will do the task for you (i.e number_format()). i found a cool javascript function which will help you to format your number with Javascript. i thought it would help you as well.

function formatNumber(num,dec,thou,pnt,curr1,curr2,n1,n2)

{
var x = Math.round(num * Math.pow(10,dec));
if (x >= 0) n1=n2=”;
var y = (”+Math.abs(x)).split(”);
var z = y.length – dec;
if (z<0) z–;
for(var i = z; i < 0; i++) y.unshift(‘0’);y.splice(z, 0, pnt); while (z > 3)
{z-=3; y.splice(z,0,thou);}
var r = curr1+n1+y.join(”)+n2+curr2;return r;
}

Now when you want a nicely formatted number you just call the format number function before displaying the number. For example, let’s say that we want to display the number with two decimal places using spaces for thousands separators (a common international standard) and a period for the decimal point. It isn’t a monetary value so we’ll leave the currency indicators blank. If the number is negative we’ll keep the – on the front.

this is how i called the function for my javascript onChange() …..

document.getElementById(‘adjustedPricePerDecimal’).innerHTML=’TK.’+ formatNumber(apd,0,’,’,”,”,”,’-‘,”);

Example : Input 3000, Output : 3,000


View Junal Rahman's profile on LinkedIn
Subscribe to me on FriendFeed

Follow Me on Twitter

Archives

My photos

Blog Stats

  • 423,629 hits