I'm going through a pretty amazing ruby on rails course. Just a second ago I learned about flash hashes that show a message after some action has been performed.
Obviously, you can apply styling to it and what have you, but I wonder if there are ready-to-go javascript snippets out there that, in the case of flash hashes, would slide in for a second, and then disappear? (much like the stackoverflow message bar that appears up top)
I don't know if learning rudimentary javascript is something I'd want to do right now (maybe later, I need to stick with one thing) so I was wondering if there was some resource that is known for ready to go scripts like that?
Merci :)
This is not exactly what you asked for but the jQuery and jQuery UI libraries provide a fair number of animation effects that you might find useful.
jQuery UI effect() demos - you can also view the source to see how it's being done.
jQuery effects - in particular, you might be interested in fadeIn() and fadeOut(). Again, you can also view the source to see how to use these functions.
Related
I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!
I am looking for a correct method to create something very similar to this (just click Next on that page). I would love to receive any suggestions on how this has been made.
I believe that it's all about a DIV wrapping many ul's. When next is clicked, probably a jQuery code is showing an hidden DIV on the right, but wouldn't know how to position it. Everything clearly must be taken from a database.
Can anyone out there give me an advice? I hope this is not the kind of a thumbs-down question, as I tought this community would have been the best place to share this. Thanks a lot.
Take a look at some existing JavaScript MVC frameworks like Backbone.js, AngularJS, or Knockout, to understand some of the design patterns and philosophies behind these kinds of dynamic UIs.
They can be powerful for tools for a modern web app, especially when you have a lot of moving parts in your UI. They'll play well with your backend and datastore via AJAX, and you get nice features like "routing" which can help you do cool things with page flow, all the while keeping your JavaScript clean and concise.
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.
I am intrigued by IxEdit and its full-javascript approach that should allow to build nice web pages powered by JQuery effects.
I like also the opportunity to use it on many platforms.
But, is it worth a try ?
Is it complete ? Has it compatibility issues ? Are there better alternative tools ?
Don't rely on WYSIWYG editors--My guess is that this editor screws up performance like Frontpage, Dreamweaver -and the likes screws up HTML.
jQuery is pretty simple to understand, once you get hold of the concept of anonymous functions.. And with Stack Overflow at hand, you should be able to get where you want to go in no time.
Also: jQuery is the framework with the largest community and the framework with the largest plugin repository--need a gallery-thingie? No biggie, just browse the tons of plugins and find one that fits your needs.
Well, as JQuery isn't THAT complicated, I wouldn't pay for tools like that.
They also don't support any plugins I guess.
But it's free, so just try it...
I've just d/l IxEdit and am actually kind of excited about it.
It seems you do have to be careful about starting with a blank slate: I tried applying it to an existing page with a few jQ plugins and and it broke.
As for the WYSIWYG aspect of it, I think it would be great for beginners, as it generates the code on the fly, and you have to copy and paste the code into the page. This can give a noob the opportunity to see the code that's made and make sense of how it works.
My two cents.
I'd like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it's possible to:
Drag and drop
Arrange list items horizontally, and make them behave like menu items
Make things on page visible or invisible, depending on where the mouse is hovering
I admit this is a broad question, but that's what I'm looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).
Do you know of such a list or dictionary?
I'm especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).
Edit: people answered that I should look to see what functionality is implemented in various 'JavaScript UI toolkits'. FWIW, the following are my brief review/summary after looking at some of the suggestions.
http://demos.mootools.net/ -- implements a small (not wide) variety of UI features
http://ajaxian.com/by/topic/ui -- not an organized or coherent reference, more like a blog that reviews various things.
http://jqueryui.com/demos/ -- concise, organized introduction to a dozen interactions and/or widgets
http://plugins.jquery.com/ -- a library of a couple of thousand 'plug-ins' in 20 categories ... vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
http://www.dojotoolkit.org/ -- takes a bit of navigating ... the easiest introduction to all functionality might be http://dojocampus.org/explorer/
http://script.aculo.us/ -- not very big
http://extjs.com/ -- quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
http://mochikit.com/ -- this is another small library
http://developer.yahoo.com/yui/ -- includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having "Layout Manager" and "CSS Reset".
http://www.midorijs.com/ -- quite small and simple, no demos
To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:
http://extjs.com/deploy/dev/examples/samples.html
http://dojocampus.org/explorer/
http://developer.yahoo.com/yui/examples/
A very great many things can be done in JS.
Try any of these javascript libraries:
http://www.dojotoolkit.org/
http://mootools.net/
http://jquery.com/
http://script.aculo.us/
http://extjs.com/
http://mochikit.com/
http://developer.yahoo.com/yui/
http://www.midorijs.com/
If you accept the HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (requires Canvas support in your browser):
https://developer.mozilla.org/en/Canvas_tutorial
http://www.blobsallad.se/
http://www.benjoffe.com/code/demos/canvascape/ - 3rd person shooter
look at the documentation for things like mootools and jquery UI, there are plenty of examples of the crazy stuff that you can do in there.
Also check out ajaxians UI section
check out jquery UI http://jqueryui.com/ as well as plugins http://plugins.jquery.com/
this is just a simple example what you can achieve via Java Script
I think you could in principle do almost anything you can think of that involves the page changing how it looks in response to user action. I mean, js can do amazing visual effects, including pretty complex animation and vectors, and retrieve data from anywhere that allows it to using ajax, so put that way you can display anything you want how you want.
The question is how much resources these take client side. While pretty much anything is possible, not everything will necessarily be practical, and I doubt there's any reliable way to decide which things will be too resource-heavy to realistically implement on the client side.
Check out JQuery and JQueryUI