UI Framework - Focus On The "User Interface" Aspect
May 21, 2010
I am not trying to start a flame war again over the JavaScript frameworks. Instead I want to focus on the JavaScript "User Interface" aspect. I refer to those fanciful widgets and effects we see increasingly appearing all over the browsers nowadays. They are usually built using HTML, JavaScript and CSS. I also notice a lot of developers like to build their own widgets and effects based on the questions asked in this forum. I am more of a server side developer so I am more curious how I can get a fanciful widget/effect in real quick time and viola jQuery UI came to my rescue today.
Then I probe deeper and it seems for the UI portion, jQuery and YUI stand out. Prototype UI is still in infant stage from what I see. Both jQuery plug-in and YUI gallery provide lots of ready made widgets to be used readily. Then come my questions below. 1. YUI framework codes are "wordy". It is cleaner and clearer of cuz but from what I know, JavaScript are downloaded onto the user browser whenever user surf to a page with JavaScript enabled correct?
Hence wordy code pay a price isn't it ? The total number of bytes that need to be download to the browser has an impact. In this aspect jQuery is more compact and in theory the final code that uses jQuery will be smaller correct ?
2. jQuery has a weakness. It is preoccupied with DOM and mainly those UI related JS code. When there is a need to have non-UI JavaScript OOP code, it does not seem to shine so well.
So my decision is simple. I don't need a lot of non-UI JavaScript OOP code, I only want ready-built UI JavaScript code and jQuery serve me very well.
I welcome other developers comments. PS Btw jQuery and YUI are free anyway and unless there are no widgets out there to serve my needs, I won't venture to re-invent the wheel again. There sure are lot's of experienced UI JavaScript developers in those communities!
View 4 Replies
ADVERTISEMENT
Mar 7, 2006
I've got an interface with some panel that can be minimize/maximize with Javascript/CSS.
But, how can I save those information so when the user click on another page or sign out, next time he came back, the interface will look the same?
I guess I can do that with cookie but, is there others solution? Can I save that on server instead of client side?
View 8 Replies
View Related
Jan 3, 2012
I am building an application where more than one device can change settings on a webserver.Imagine using 2 smartphones. If a button on smartphone#1 is being pressed by a user, then on the webserver the status changes from 0 -> 1. I need both smartphone#1 and smartphone#2 to change from 0->1 and vice-versa so that the user knows the current value of the status.How can I accomplish this? Meaning, if I want to make a toggle switch.I read on the website:The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order.[code]My first guess is to create a function in the <head> in script, with one for the on and one for the off state.Depending on the current value I either load one of the two codes in the <body> section.The script in the <head> decides.
View 1 Replies
View Related
Sep 29, 2007
There are tons of lightbox apps out there, but none that I could find that use YUI. I'm sure there are lots of developers out there already using YUI and don't want to have to use another library such as jQuery to get lightbox functionality. I have two demos available from the link below and you can download a zip file of the complete application including the YUI files needed.
Supports 3 modes (LightBox, Overlay and Remote), but many many more configurations...
View 2 Replies
View Related
Oct 20, 2010
Does anyone know if it is possible to write a user interface in javascript for email?
View 6 Replies
View Related
Aug 14, 2011
AM FINDING IT DIFFICULT TO Design and develop, using Javascript, a graphic based user interface for Internet banking servicesHave created the 1st page which IS THE LOGIN PAGE AND THIS INCLUDES USERNAME AND PASSWORD BUT I NEED HELP IN LINKING THAT PAGE TO THE NEXT PAGE WHICH IS MEANT TO ASK FOR MEMORABLE INFORMATION IF THERE USERNAME AND PASSWORD IS CORRECT
View 3 Replies
View Related
Nov 17, 2011
In the following code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uilock.js"></script>
<script>
/* All you have to do is to call
* a uiLock() function
*/
$(document).ready(function() {
$('#submit').click(function(){
// To lock user interface interactions
// Optional: put html on top of the lock section,
// like animated loading gif
$.uiLock('Click Here <a href="#" onclick="$.uiUnlock();">unlock</a>');
});
// To unlock user interface interactions
//$.uiUnlock();
});
</script>
Where and how would I put a Animated loading gif?
View 1 Replies
View Related
Oct 12, 2009
I am using jQuery and blockUI to prevent the user from submitting a form twice by double clicking on the interface: This is in my global js file and is called on every pages
document.ready:
$('form').submit(function(){$.blockUI({message:'', overlayCSS:
{opacity:0.2}})});
This was working really well, but if I have validation on one of the form submits that returns false, I of course want to unblock the UI.
View 1 Replies
View Related
May 24, 2010
I have this code that unhides a select box when the user clicks in the parent li containing it. Now I just want the .focus to seem more natural to the user as if they had just clicked in a normal select. As it stands, you have to click on it again to make it active (view the selections..)
$(function(){
$('li.col1').click(function(){
$(this).find('select').removeClass('nodisplay').focus();
});
});
View 7 Replies
View Related
Mar 13, 2007
This slideshow works fine except that it keeps the aspect ratio of the original pic image. If original image is a portrate all photos are portrate size, even landscapes. If original is landscape, the same is true. The script works correctly when viewing in MS FrontPage. After FTP uploading problem appears. Code:
View 2 Replies
View Related
Jan 29, 2006
I am building a site in Dreamweaver for a client which uses templates
for a photogallery that uses simple Javascript to load images "OnClick"
into a named <img> tag. The <img> tag has no dimensions preset because
the loaded images vary in size and aspect ratio (the images
are all prepared so that they will fit easily within the rest of the page
layout, using their actual dimensions).
This all works just fine on Firefox (Apple), but on Safari and Mac IE
there is a problem. When image-2 replaces image-1 (using MM_swapimage),
if image-2 has the same height but a narrower width than image-1, then
image-2 appears with image-1's width. Both image-2 and image-1 have
the same height, so the display of image-2 now has the wrong aspect
ratio (everthing looks "fatter").
I haven't checked Windows browsers yet. I searched around and
haven't seen a similar issue. Anyone know about this, and a good workaround?
View 3 Replies
View Related
Mar 31, 2010
so im almost finished my first site! very excited. its for my dads business, hes a screening contractor.actually i doubt he will get any business out of it, even once we get our real domain name and everything because i don't even know how to get Google to like it. its OK though, its mainly just a practice site for me anyways before i make a resume site for myself. anyways, this mayt sound like a flash question but i asked on flash sites and they have no idea, and i think it has more to do with how i embedded the flash. yoy see, it consists of 3 divs, an html content area, and a flash banner and a flash menu, which stretch depending on the window size to keep their aspect ratio. its that streachyness that i believe is causing the problem. everything works exactly as planned in Firefox, chrome, and pure flash player. but in IE, safari and opera, the size and position of things are way messed up! (only really care about IE). the edges of dynamic text are slightly to the left or right and hanging behind things because of it, same with some movie clips and when i didn't want things to appear on the stage i set their x position to be the length of the stage,
i think that ie is calculating the size onresize incorrectly. heres the site, take a look at the the script file:[URL]..
View 1 Replies
View Related
May 21, 2004
Has anyone got any suggestions for keeping aspect ratio when scaling an image. I want to use it on my 'advert full details' on my website. This page displays an image the user has uploaded to my database, but sometimes I get really hugh images uploaded! When I scale them using % in Dreamweaver I lose the aspect ratio!
View 8 Replies
View Related
Dec 22, 2009
displaying images properly maintaining its aspect ratio?
My requirement:
===========
I have a table with single cell (means single row and column). I have to display image inside this cell. But when I do so using the below mentioned statement, the image expands and cover the entire cell area.
<table border=2 width= �600� height= �400�>
<tr>
<td> <img src= �MyPic.jpg�> </td>
</tr>
</table>
I will be loading different images inside the same cell, all having different height and width.
if you know how I can do it. I will be happier if you can paste the code here
View 22 Replies
View Related
Jul 8, 2010
Is there a way to create a div or some container in which there will be an image such that the image fills the container but retains its aspect ratio? So if the container is 100px x 100px and an image is 200px x 100px it will be resized to 100px x 50px. Conversely, if the image is 100px x 200px then it resizes to 50px x 100px. An image of 400px x 50px becomes 100px x 12.5px and so forth.
The issue is I have to dynamically build the container pulling images from an image folder. The images can come in all sizes. But I want to make sure they all fit in the same square 'box' without distorting the image.
There is text and a button below the image and I want them to stay in the same 'spot' on the screen without being moved around because the height or width of the image above it grows/shrinks to accommodate a change in either the height or width. These can change but not outside a controlled 'box'.
Maybe there's a way to get the actual size (through Javascript or something) then calculate a percentage to resize the image to?
View 4 Replies
View Related
Jan 18, 2010
I've been working at this one for a few days now, and I keep getting the same puzzling results on what should probably have been a simple issue.
My page has images I've loaded at the top and set to {display: none}. The eventual goal is to create thumbnails that will maintain the original images' proportions, but fit within 150x150 px (this is for an artist's gallery page, so it's pretty important to keep the thumbnails looking like the originals). Obviously, the first thing I need to do is get the images' heights and widths. I've tried to do this by iterating through the document.images array and just getting the widths and heights, but for some reason I always get 0 x 0 for the first image. I've tried fixing this by inserting another image before it and then starting the loop at 1 instead of 0 (so it excludes that first image), but I still get the same value. I even tried setting the script to "defer" so it wouldn't run until the page had loaded. Same results. It also doesn't seem to matter whether I ask for document.images[x].width or document.images[x].naturalWidth. The same thing happens either way. Does anyone know what's going on? There's got to be something I'm missing.
View 6 Replies
View Related
Apr 12, 2007
what is the best js framework for ajax ? first iam a beginner in ajax and js,
i found a lot of frameworks but i didn't know which is the best.
And i heared that some of thease frameworks are not updated any more. I read a book called professional ajax with php and the book author was using a class library called zXml you can find it here but i found that the XMLDOM does not support opera browser it supports only IE and FireFox .
And I heared a lot about prototype class library but i didn't found tutorials using it you can found it here so iam unable to deciding which is the best updated cross browsers js framework for ajax.
View 1 Replies
View Related
Jun 18, 2007
Iam planning to build a good 2.0 web application with minimal modules but each module should be feature rich.
so i would like to use AJAX to spice up my site.
(i will be using php and mysql for it)
so please suggest me, should i hand code everything or should i use an AJAX framework?
if so which is good ajax framework and why?
View 2 Replies
View Related
Jun 3, 2011
I get that this question is going to be one of those questions where everybody defends the app they like the most, but I am asking for the reasons why rather than just a one product name answer, so here goes with the question:
What is the best Javascript Framework to use for Javascript RIA development and why?
i.e. Qooxdoo, ExtJS, Echo3, etc?
Now I know everyone is probably going to jump in and say Jquery, but personally I see Jquery and the likes as more of a "make plain website nice by adding animations etc" rather than for web applications development.
View 1 Replies
View Related
Jul 20, 2005
One of the great annoyances I have with JavaScript is the lack of a good
consistent code library. Oh, there are a few code libraries scattered
around for doing various things. The problem is that each of them have
their own way of doing things. If we want to use more than one library
at a time, we often end up duplicating code and working with different
interfaces and practices that aren't necessarily compatible with each
other...
So... isn't it about time that we have a Common JavaScript Framework?
I'm thinking of a standardised code library, mostly (but not entirely)
built from the free code that is already out there. (I'm thinking of a
LGPL core with independantly licensed extensions.)
I know of a few very cool projects that aim to make JavaScript
development easier, more professional and to bridge the gap between
browsers and environments. (To name a few: DynAPI, DOMAPI, Sarissa,
13th parallels' library, netWindows, bindows, ActiveUI, f(m).) But I
don't know of any effort to bring all of these features into one common
framework. Can we do anything about this?
I'm not exactly proposing that we form a group to design and implement a
complete framework. I just think that, us, JavaScript developers should
talk to each other more and agree on a few things. Then, I imagine
being able to access this centralized, well designed library that is
ready for serious (and less serious) development and the dream goes on...
I have been working with JS (client and server) for some years now and
I'd like to bring more consistency to my code and spend less time
writing lower level code. So I may be writing this email more out of
wishful thinking than determined action. In any ways, I remain
interested to support any effort that would lead me to better, well
designed, programming.
View 2 Replies
View Related
Aug 7, 2007
I'm experienced with PHP and I'm familiar with JS syntax but still a beginner.
Now I want to learn AJAX And JS and I've looked at jQuery but it doesn't look like JS to me, I mean I'm sure it is but it looks to me like jQuery has a syntax of it's own and I want to learn not just a framework but also the underlying language.
So now my question is; what framework will be the best choice when that is my goal?
View 13 Replies
View Related
Aug 11, 2011
AjaxI need to know which is the most used framework and why.
I know that there are many websites on the web about it, but I can't use them only.
View 2 Replies
View Related
Oct 14, 2010
I never use jQuery, but i saw jQuery in zul pages from ZK framework. i'm ZK developer here.
So my question is just same with my subject,is that possible use jQuery in composer.java?
View 1 Replies
View Related
Oct 19, 2011
Where can i find the procedure for build my own website. It would be a great help if anyone give the information.
View 5 Replies
View Related
Jan 20, 2009
Been looking for a way to do:
[URL]
BUT, without needing a framework (jquery,mootools,scriptalicious,protoype,dojo,etc). I don't need all the extras that come with the framework and want to keep loading time down to a minimum.
Everywhere online seems to need a framework.
View 3 Replies
View Related
Jan 19, 2006
Modello is a lightweight framework that enables you to write JavaScript class like other class-based object-oriented programming language. It introduces class, class-based inheritance, multi-inheritance, private members, RTTI and more into JavaScript. Modello can help you write more readable, reusable and maintainable JavaScript code.
View 2 Replies
View Related
