I am building some modules to teach intro coding concepts to some of my students
http://jsbin.com/pacaxoza/3/edit
When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).
In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.
The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.
Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?
Thanks
Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example
Related
A line graph is necessary for the purpose of my extension in an web game online.
I want to do something like this:
The intention is that this graph should be OUTSIDE of the DOM/browser, because if I put this inside the game document, they will know that this line has been put into the DOM with a simple call $("#rareLineGraph").length > 0 and they will detect it, and they should not know.
I tried it with frames, but are very uncomfortable (windows)
Some suggestions please ?. Thank you very much
You can in principle draw outside the browser with a separate program operated via Native Messaging, but that would be quite difficult and over-complicated. That is, however, the only approach that fully corresponds to your requirements.
As a suggestion, you can hide your graph from such a simple inspection by using a random ID, or even skipping using an ID and just keeping a reference to the created element in a variable. Also, inserting your node into random places in the document structure and using absolute positioning will obfuscate it further. It will be harder (but not impossible) to detect.
Other than that, I don't think there are many ideas that can help. Chrome renderer looks only at the DOM, and there's no API to create any kind of overlay. DOM can be hidden from the outer document with Shadow DOM techniques, but as far as I know the shadow root element will still be visible to the page.
I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
I'm looking for a jQuery tagging/autocomplete plugin where I tags can be inserted mid-order - and control over this is possible with the mouse.
I've gone through everything I can find, but am yet to find a plugin with all the requirements I'm looking for. I'm looking for a Facebook-esque tagging plugin, yet I'll be working with pre-defined phrases, and building them up into a paragraph, so I need to be able to control the order, and potentially insert a new tag in the middle of an existing selection.
The closest I've found to having this functionality is TextBoxList and the 'Facebook Theme' of JQuery TokenInput. Both of these however only allow you to move the cursor between tags with the arrow keys - and I'm looking to be able to mouseclick to control the cursor aswell.
Anyone know anything that's got what I need? A few other key essentials are free-text input (when no tag matches), remote source of data, and form submission, but I'd hope they'll be easier to retro-fit to something else!
An update for Googlers - I went with jQuery-tokeninput, and have spent the day modifying the library to work with mouse input. When I get time to tidy the code, and check how it works with other themes, I may put a pull request on GitHub, it seems like fairly useful functionality to me.
I'm looking at Rangy (http://code.google.com/p/rangy/) and it seems it has a bunch of DOM utilities but I don't understand them without examples. So I'm turning to SO with my ideas and hopefully you guys can show me how this can be done:
What I need to do with Rangy is use it to find the position and dimensions of the selection. I want to get the frame or Rect of the selection, whether relative to the document or parent element. Then I can position my callout accordingly.
I believe the demo that comes with Rangy already illustrates what you want. specifically http://rangy.googlecode.com/svn/trunk/demos/position.html inside showSelectionPosition function
Considering the fact that selection may be spread across multiple elements, it'd be best to use the coordinates of either startSelEl or endSelEl to anchor your callout to the beginning or end of a selection.
There is an embryonic, unreleased Rangy module I wrote for getting pixel coordinates of a selection or range. Unfortunately the difficulty of getting this working properly in all browsers and all situations has put me off completing it and I have essentially abandoned it. However, if you add a bit more detail about what you're trying to do I may be able to suggest something.
I am new to web design so I wanted to learn more by looking at other websites and using their techniques. Now I am currently using blogger platform and wanted to copy an entire gadget from another blog http://gmailblog.blogspot.com/. I am trying to copy the right floating sidebar gadget to by blog.
To do so, I think I will have to copy the CSS codes, html codes and javascript if it is used. Is there a simple way to find all those codes and copy those to mine? I did try using the inspect element function of google chrome but was unsuccessful.
Any help?
Inspection elements are probably your best way to go, but a decent grasp of CSS and HTML would be required to get you started on that. Toggling styles on and off to see what happens is a good way to start poking into existing solutions.
When it comes to JavaScript parts of a feature, the inspection tools will probably not get you all that far.
For deeper introspection, you could always save a local copy of the entire webpage, remove bits and pieces, and see at which points the feature breaks; keep the things that seem to be required, and continue until you seem to have stripped the site down to the bare minimum to keep your feature working. From there you can move on to see if you can understand what the different parts of the remaining code does.
For your specific gadget, some key aspects include:
#gadget-dock has the style position: fixed that keeps the element's position in place as the user scrolls up and down the page.
#gadget-dock has the style right: -40px which keeps the element all but out of sight, by default.
#gadget-dock:hover has the style right: 0 which overrides the aforementioned style and moves the element into sight when hovered.
#gadget-dock also have a lot of CSS3 transitions that define the sliding motions that appear when changing from one position to another (i.e. when the value for right is changed).