I have a list of entries, for each entry I have to create a tooltip in javascript, what do you think is better to do considering the performance?
1) create a div for the popup and another hidden div for each entry that contains the content of the popup, and each time a tooltip is created copy the content of the corresponding div into the one for the popup and display it.
2) create a div for each entry, when it have to display the tooltip do an Ajax call to retrieve the content of the popup and put into the div (if it isn't done before) and display the tooltip
EDIT:
the tooltip should display a complex HTML, the clients could be mobile or computer the list is small because is paginated
The choice strongly depends on how many elements and how much content is stored inside the tooltip.
An ajax call is expensive if you think people will tends to open tooltips many times, but if they may contain images, videos, facebook likes, tons of text and/or other expensive resources it could be a good idea with some kind of cache strategy so you have no more than one ajax call for every tooltip (e.g using the localstorage on modern browser)
if tooltips contain instead no more than a couple of paragraphs is quite useless to add complexity to your application with ajax calls, server-side security issues and extra javascript. Just insert them statically
I would actually create a JavaSrript array or object with all of the loaded tooltip values and then replace the text in the tooltip DIV when showing it. Creating a bunch of DIVs will not help performance.
Don't reinvent the wheel, use a jQuery plugin such as qTip or tipsy.
Related
I am porting quite a huge piece of software to an ExtJS Grid. Lots of data (and I mean lots of data) is loaded on-demand into spans that are placed inside grid's cells.
Imagine grid cells having <span id="foo_bar'></span> as content, and special ajax handlers are polling the backend for updated information and once available the spans are filled with it.
Now, in case I collapse some part of the grid and then re-exand them again I loose all automatically filled cell content, and am left with empty spans (which I started from in the first place).
I know the correct way is to setup a store and push all data into the store. But as I've mentioned above: I am porting quite a huge piece of legacy software to ExtJS, and I do not really have much choice here.
Is there a way to automagically push grid cell values to the store?
Update:
A grid is loaded with, suppose, 2000 cells (this can vary tremendously). Every cell contains various grades of HTML, mostly this is , but this can be pretty much anything (including several spans or divs in one cell). In the background there is a comet process pushing new data to the HTML page almost in real time. This data is populated to the corresponding SPANS and DIVs either based on their IDs or class or both.
What I want to achieve is that either:
a) the model for the grid is atomagically updated with the new html content of the cells (how can I achieve this)?
b) when collapsing/expanding tree's nodes the model data is NOT reloaded afresh.
Is either a or b possible? if so — how?
Just update your store when the 'special ajax handlers' successfully return values. In staid of manually messing with the dom.
so in the success callback do something like -> loadData()
Edit:
Seems like you are working with very bad legacy code :) If adding a simple line of code to the ajax handler is a tremendous effort.. You can however attach dom listeners, but it's very bad practice. Here are some events to listen to
Edit:
Here is an example of the use of how you could listen to dom events, it's rather a pure js solution but, meh.. it works..
I'm developing an iPad app using PhoneGap and jQuery Mobile and I'd like to create a preview pane in a carousel. The preview pane would include a smaller version of each of the other panes, scaled so they fit inside the single pane. The panes are not static and can be updated at any time using WebSockets, and the preview should be updated simultaneously. There can also be any number of panes (although to keep things simple, assume an upper limit of 9). For performance purposes, assume each pane can have upwards of 200 DOM objects attached to it. To make it slightly more complicated, the carousel can exist on more than one different page.
I've been contemplating the best way to go about implementing this preview pane, and, before inventing a pair of Complicator's Gloves, would like to hear back from the community on any possible better strategies.
A couple methods I have been considering include:
Cloning each pane and then using a CSS transform to scale it to an appropriate size, based on how many panes there are, and then attaching the clones to the preview pane.
Store each pane as a jQuery object in a variable and draw each pane and the preview pane using that object (possibly necessitating redrawing the entire carousel every time there is an update, depending on how much effort I want to make identifying and updating deltas).
Repositioning all the panes so that they exist inside the preview pane when the preview pane is active (this might break the carousel, or at least make it look slightly bizarre as a user swipes a pane over but hasn't actually moved on to that pane yet).
Is there anything I'm missing? It would be nice if there was an easy way to "link" two elements together to make one mirror the other, but apply different CSS to one or the other (for zooming). I suppose it might be possible to do this by creating an event that would fire and then adding a listener to its clone, which would then copy the html of the updated element to itself (probably wouldn't be too terribly to difficult to write a jquery plugin to manage this).
Any better suggestions?
I am not sure what phonegap allows for as far as rendering options go, but my first instinct would be to take a screen shot of the relevant pane. Perhaps phonegap has this built in?
Another option is a javascript library which will clone the DOM and create an HTML5 canvas element. You can either then display the canvas natively, or convert the canvas data in to image data.
Here is one such library: http://html2canvas.hertzen.com/
Given the large number of elements needed, I would hesitate to clone those over and over again. However, if live previews are a necessity, that might be more efficient than using image files or the canvas. You could fire off the canvas draw function after major changes, but probably wouldn't want to do it after the end of every frame of animation.
I need to load a very large text into a dialog box using YUI or jQuery and I'd like to know the best way to do it. I have an Oracle CLOB column which I need to show if the user needs to know what was stored there. Since CLOB data are huge, it is impossible to load everything. Any ideas?
Use multiple divs and load each one with what's left of your clob content when your user drops cursor in it : you can do this either using connection manager for YUI 2 or nodeList if you are using YUI3 (here's an example of how to use it)
Put it in a fixed-size DIV and add: overflow-y:auto.
I need some help regarding tabs.
We are building a intranet portal for our clients, where they will be able to create business cards and more. But we've come to a halt because of problems with tabs.
We need to have a approx 1-4 steps process in tabs. 1 step is to select a business card template. When the template is chosen the next step would be to fill it out.
However each template has different kinds of input fields making the height of the step 2 tab variable.
We've tried using the tabs from Jquery UI, but only the first step is working, since the next step on some templates will be cut off, because of the height.
What is the best way around this problem?
I've used JQuery tabs a lot, and never seen this problem. AFAIK, there is nothing about the tabs themselves that restricts the content that can be put inside them. I would try removing all the logic, html, additional js etc from your tabs, and making the content simple (a series of divs with a fixed height for example). I think you will see that the tabs simply open up to the full height of their contents. Then start adding your code back in until you find whatever it is that restricts the height of your tabs. BTW, I don't think it makes any difference whether they tabs are statically created or loaded via ajax either ...
Can't u also write some code like height() to fix the jquery ui thing? I think jquery ui is the best choice.
I have some HTML documents that are converted to PDF, using software that renders using QtWebkit (not sure which version).
Currently, the documents have specific tags to split into columns and pages - so whenever the wording changes, it is a manual time-consuming process to move these tags so that the columns and pages fit.
Can anyone provide a way to have text auto-wrapped into the next column/page (as appropriate) when it reaches the bottom of the current container?
Any HTML, CSS or JS supported by QtWebkit is ok (assuming it works in the PDF converter).
(I have tested the webkit-column-* in CSS3 and it appears QtWebkit does not support this.)
To make things more exciting, it also needs to:
- put a header at the top of each page, with page X of Y numbering;
- if an odd number of pages, add a blank page at the end (with no header);
- have the ability to say "don't break inside this block" or "don't break after this header"
I have put some quick example initial markup and target markup to help explain what I'm trying to do.
(The actual documents are far more complicated than that, but I need a simple proof-of-concept before I attack the real ones.)
Any suggestions?
Update:
I've got a partially working solution using Aaron's "filling up" suggestion - I'll post more details in a bit.
Create a document with a single page and all the text in a single column. Use JavaScript to cut the text into parts.
Use pixel coordinates to locate the paragraph/element that doesn't fit anymore. Move it and everything below to the next col. If a "page" already has two "col" divs, start a new page.
After all pages have been created, count and number the pages. Fix even/odd stuff, etc.
Will take some time but it's automatic.
Another approach would be to add all the content to a "source" div and move items to the col div until it's full and repeat with the next col.
Have a look at Prototype or jQuery; they should give you lots of tools to move stuff around in the document.
[EDIT] Instead of only relying on jQuery functions, I suggest to create one or two objects which keep track of the current page and the current column, etc. These give you stable foundations to stand on from which you can fire the helper methods.