I have a java script code that works fine when run through a browser, is there a way i can use that code in flash without much editing, i want the to get the input from user through flash and have the code do the computing and display the result in flash, any clues?
Well, ActionScript 1 is essentially javascript, and 2 is just some syntactical sugar on top of it. If you're creating a Flash 8 or earlier movie then you should be able to use the javascript code without much tweaking (preferably switching to use classes instead of prototype). Moving it to ActionScript 3 (for Flash 9 or later) would be a little more work as it's more strict about types and such, but still probably not too difficult.
As others have mentioned, the UI-related stuff is quite different in Flash than Javascript, as there is no DOM. I assumed the methods you were talking about are for doing calculations and not really related to the UI at all. If your javascript methods are actually doing UI stuff then moving them to Flash would be much more involved.
Another possibility, if you want to keep your code in javascript (perhaps so you can reuse it with other javascript stuff) then you could create a Flash movie that takes the input, passes it to javascript, and then have javascript report the results back to Flash. Take a look at the Flash ExternalInterface documentation (see also here).
Check out ExternalInterface, which lets you call javascript functions from actionscript, and vice versa. We use it without a problem at my work.
The syntax is much the same, but there is no DOM. You have object references instead. It's a bit more like you do in something like VB. Variable scoping works differently too.
Instead of showing or hiding DIVS, or going to pages, you're moving to a different place in the timeline where different objects are shown or hidden. It take a bit of effort to wrap your head around it if you're a traditional programmer, but it still feels very much like JavaScript on the inside.
You can probably take a lot of your logic and recycle it, but the UI hooks will need to change a bit.
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!
So I've been looking around and am a bit lost on this topic. People have said that there's alternatives to iframes, but I don't see any that fit the bill for what I'm trying to do. I essentially created a small game that uses videos and plays particular ones based on corret button input from the keyboard.
All of that is in a seperate html file, and I want to display it on a different html file to be in an iframe like state on a different webpage. But I can't seem to figure out the best approach to this.
The iframe is just too slow, the game itself runs fine, but when I put it in an iframe it lags like crazy half the time, or stuff doesn't render because it's going so slowly.
Any ideas of where to start?
There is one alternative to <iframe> and that's the <object> tag. It can display content from different sources as well. The pro is it being conform to the xhtml-standards and encouraged to use but there's not such a broad / usable support in older browsers (you have to mess with it to get it right in IE). It's used as followed:
<object data="page.html" width="400" height="300" type="text/html">
Alternative Content
</object>
That being the direct answer to you question I don't think it will give you any speed advantage. Already for the reason that the <iframe>-element is much more used and so more tested and cared for than <object>.
I for myself never saw an <iframe> being the cause for a slowdown, but that still might be possible. If that is an option, you should definitely try what ocanal said before in the comments: Let your script work on an wrapper container-div instead of the body-element and so embed it directly on the mainpage.
For the browser it shouldn't be much more than some overhead from handling a second document, so you could guess that it's just that little more to make your pc run slow. So it might be a good idea to optimize the code in general:
Look if you can find the bottleneck causing the slowdown. Possible causes could be
altering the DOM a lot - which is always slow
acting a lot on things not even visible on screen
getting attributes from objects. For every additional period you use it means more work for your cpu:
// instead of using this over and over again
house.roof.window.handle.open();
house.roof.window.handle.close();
// save it to a var and use that instead
var handle = house.roof.window.handle;
handle.open();
handle.close();
Updating the game in short equal intervals by window.setTimeout() may also be too fast and waste cpu power unnecessarily (or too slow and won't look fine then, but never really right) - so you can use the new window.requestAnimationFrame. The vendor-prefixed variants are implemented in the current versions of all important browsers and it's easy to provide a fallback to the old method.
As a last thought: Maybe it even helps in some meta-magical way to include the script file itself on the mainpage and not in the embeded document
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.
I have a question about Javascript widgets. The widget I am working on simply embeds content on a page instead of using iframes. So far it looks good. But there are cases where some users layouts are messing up the widget. For example, the widget might require a width of 300px to appear. But the parent div is set to 250px and hence the right part of the widget is cut off.
I was wondering what sort of precautions should be taken to prevent this? I was talking to the product manager who mentioned he wanted me to check the parent div elements and get the size and then show an alternate message if their size is not accurate. But again, since this is Javascript and the widget is supported in many diff browsers(including IE6), I am wondering how fail-safe this method would be? What if I need to iterate the DOM all the way up before getting a valid size? I am also worried about performance here. This extra checks would slow down the delivery of my widget content to "good users" since I am adding a layer of complexity to all users. I don't want to penalize good users just because of the few errant ones.
I am not using any sort of JS library here, so any solution should not suggest the use of one. Also, the reason for not using a library was simply not to add extra weight to the page load to deliver a widget. I understand that "jquery" for example is small, but in my case, even 24k compressed seems like an overkill for a widget delivery that contains no core code for the widget.
Has anyone dealt with such issues before? What are your solutions to these?
There are reliable ways of determining the size of an element using JavaScript. You're quite right that you may need to iterate up the tree in some cases, but the answer you get will ultimately be quite valid.
Although you don't want to directly include any library code in this project, you may consider looking at how the major libraries implement their "what's the width of this element" functions to drive your own implementation.
Beware of quirks mode too.
I'd check to see of the page has Jquery, if not load it into the page using no-conflict mode. Then use jQuery to examine the page.
See: How to embed Javascript widget that depends on jQuery into an unknown environment
We have a nav that expands on rollover (based on this code: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm).
First, should we have a no-javascript version of the nav?
If yes, what is the best way to do so?
Yes you should always have a non-javascript version of your navigation.
The best way to do this is to apply any styles that hide sub-menus with javascript - so if the javascript isn't run the whole menu will be visible.
The HTML for the menu you've linked to looks fine - <ul>s and <a>s - nice and easy for a spider or non-javascript user to read.
It's always a good idea to have a no-Javascript version of everything.
Search engine robots usually do not interpret Javascript, so your pages might not be indexed if they can't be reached without Javascript.
A sitemap page that simply has a link to every static page on your site is the easiest way to make sure everyone can get to anywhere.
You may want to use unobtrusive javascript, which basically means have no javascript in your html page, just load the javascript files.
Now, if you start with a menu on the left, for navigation, using <li> and anchor tags then you can have some navigation without javascript.
So, if your javascript runs, the first thing it should do, when the dom tree is ready, is to set display: none on the navigation div and put in the new, more interactive navigation bar.
This way you can see how it works without any javascript.
Or, you can have a message telling them that javascript is required and do nothing else, but this would also be hidden as above.
I prefer to have things work, even if it has less functionality, without javascript, when possible.
Don't get me wrong: It's a good idea to support browsers that don't have JavaScript turned on, especially for something as simple as a menu.
However, when a project doesn't have it in the budget, or the application that you're writing is deeply dependent on JavaScript, it just doesn't make sense to support it.
Statistic from w3c and the counter indicate that 93% to 95% of users have JavaScript enabled. Now, mind you that this is a global demographic. To really determine if it's worth your time and money, it would behoove you to do your own statistics to determine what percentage of your traffic/demographic has JavaScript enabled.
As a side note: for reasons similar to why people are moving away from supporting IE 6, my company is also moving away from noscript support. Especially in large scale RIA's, it's just not practical to write the same thing twice. Maintaining two code bases for one project is not my idea of a good time. But of course, this is always based on the client and the target demographic.