Solved

Best, lightweight and multiple-browser-compatible way to do fancy Javascript dialog boxes (pop-up window replacement)

Posted on 2008-10-19
6
547 Views
Last Modified: 2013-11-11
Hello,

I'd like to implement (at first), two separate things:

- a 'button' that would always be available at a fixed place (even for pages spanning multiple screens) that would call the second thing:
- a 'window' (in fact a superimposed <div>) that would contain two or three text entries and a form. Ideally, this 'window' should be resizable and movable.

I can more or less see how to program it by myself, but if I do so, I believe that I'll have cross-browser problems and that it will be a 'reinventing the wheel' kind of exercise.

I know there are JS libraries (that is why I ask this question in the Jquery subsection also) for doing this kind of things. Are they the best answer to my simple needs? Or does simple 20-lines, rather optimized code to do so, exist?

What matters the most to me is that the library (or snippet of code) is non-bloated, easy to understand and implement (if it is a library, it needs a good documentation), quick to load and, before all, work on all browsers, from IE 5.5 to the latest incarnations of Firefox, Safari and Opera.

If it works well, I'll probably write a complete (although modest) web application using these 'widgets', so it is OK and even desirable that the solution can do a little more than what I asked.

Thanks,
Stéphane
0
Comment
Question by:CPL593H
  • 3
  • 2
6 Comments
 
LVL 10

Expert Comment

by:GeoffSutton
ID: 22753686
Quite simply the easiest approach would be to build this using ASP.NET and the Ajax Control Toolkit.  All you would have to do is worry about making the server side code function correctly, and the client side controls appear as you want them.  The client side scripting is already taken care of for you, and has been tested in multiple implementations on multiple browser types and versions.

You can download the Microsoft Visual Web Developer Express from http://www.microsoft.com/express/vwd/

Geoff
0
 
LVL 10

Expert Comment

by:GeoffSutton
ID: 22753688
oops... And you can get the Ajax Control toolkit through www.asp.net/ajax

Geoff
0
 

Author Comment

by:CPL593H
ID: 22774808
I work with PHP and design on a Mac so asp.net solutions are not an option for this project. Jquery probably looks like a better bet, but I'd rather have information based on first-hand knowledge.

Cheers,
Stéphane
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 10

Expert Comment

by:GeoffSutton
ID: 22777040
Unfortunately I know nothing of JQuery.  My apologies.

Geoff
0
 
LVL 16

Accepted Solution

by:
sh0e earned 250 total points
ID: 22801618
I would highly recommend jQuery.  It has a strong userbase/supporters, very well documented, is compact and fast, liberal license, designed for compatibility, and is even being bundled by Microsoft.
It allows you to write compact code quickly, and is based on selecting elements to do what you want.  It won't protect you from all cross-browser problems, but it'll make your life easier.

There are also people who prefer Prototype/Scriptaculous, MooTools, Yahoo UI, Dojo, ExtJS.  Yahoo UI and Dojo will be a bit heavier, but they are complete frameworks.  Yahoo UI and Dojo are a bit heavier, but it's not much of a overhead.  You load pieces of it when you need it.  Yahoo UI and Dojo are designed with large scale websites in mind.
As many other people will say, you can't go wrong adopting any of these.  Most of them have liberal licenses, and make your life easier.

I find that JQuery is extremely easy to work with.  I literally learned (part of) it overnight.  And, I have never found a problem modifying it not to conflict with other things.
0
 

Author Closing Comment

by:CPL593H
ID: 31507563
Your advice confirms my preliminary tests. Now I'm sure I'm in the right direction. Thanks
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question