I want to have multiple video icons at the top my website's front page. I will have about 20 or so which won't fit on one line (I want to keep the videos on one like) so I thought of having two button on the right of the group and on the left of the group where you click to scroll and view more videos. Do you know an easy way to do this? I can pass in the video links from the server in different Divs or anyway that will make it easy. I thought of using AJAX and pass it different set every time from the server with every click (I'm using Rails and it's fairly easy to do it) but that will be an extra load on the server which I'm trying to avoid. I'd rather send all the icons at once and let the JavaScript handle the scrolling.
I thought of using iFrame but I don't like the idea of scrollbar and wanted to be more like button
Any ideas?
Thanks,
Tam
Use a JavaScript library like jQuery. There is myriad of plugins that do exactly what you want. Here is one
Related
I've got a basic webpage that I built with HTML/CSS here.
However there's a few things I want to change in order to make it easier to update.
The first thing I want to do is to find a way to automate certain elements so that if I change them I don't have to go back and change it on every single page. For instance, if I add twitter to the nav on the left-column, I just want to change it once and have it universally applied across the site.
This also goes for the footer, and the share button JavaScript element that I have in the head section. (For the share buttons that appear on the left side.)
Would this be done with JavaScript? If so how?
I know how to link JavaScript files like a CSS file, but that's as far as my knowledge goes. (Besides knowing HTML, CSS and Java of course.)
I want to edit image in real-time with javascript only. Im new to Js, so this may be dumb question...
I have 3 images:
Background
Car one
Car two
I want to display one on each other in real time. It should look like this:
And the cars should be moving there and back (I must be able to edit their position without refreshing the page).
Im not asking for complete solution, just a few links or pages and some information where to start with. I know Javascript syntax, I just have never used it in any website. If it's not possible, or it would be too hard, I gonna use flash or Java aplet, Im okay to use jQuery or other Javascript libraries. Thank you for any clues!
You might want to check out jQuery animate and z-indexes. What you'll want to do is with z-index place one on top of the other, then animate with jQuery accordingly.
http://api.jquery.com/animate/
http://css-tricks.com/almanac/properties/z/z-index/
I'm working on a music editor/sequencer app that will be written in JavaScript+HTML5 and will make use of the canvas element and Chrome's Web Audio API (I already have a simple prototype working).
One of the things I'm not so sure about is how to implement the GUI for this. It will need to have many different views, and I'd like to perhaps have each view in a different clickable "tab", with one tab in the foreground at a given time and all the others hidden. I'm just not sure how to go about implementing all these tabs.
Would it be better to implement each tab as a different HTML layer and have buttons control which layer shows up on top? Would it be better instead to (re)generate HTML on the fly when the tab buttons are pressed?
Your advice is appreciated.
Would it be better to implement each tab as a different HTML layer and
have buttons control which layer shows up on top? Would it be better
instead to (re)generate HTML on the fly when the tab buttons are
pressed?
I would lean towards generating the content once and showing/hiding it on demand especially if the majority of work is done in the browser and there are no synchronous requests being made to a server when interacting with elements on the page.See footnote 1
When showing a tab's contents...
Assuming the content of each tab generates quickly, you can make your application more efficient by only creating the content for the tab when it is requested the first time. This way, if the tab is never accessed no resources are used.
When hiding a tab's contents...
When working with multimedia you may need to perform additional actions when you hide content. For example, a video won't stop playing just because you hide it. For your audio application you may need to stop playback of the current sequence.
There are many tab controls available such as jQuery UI tabs (free) and Sliding Tabs (licensed but inexpensive).
Other Scenarios
Tabs should be used for switching between major blocks of content like documents (e.g. browser tabs) and/or regularly used functionality (e.g. a personnel form which has a tab for contact information and another for employment history). Other scenarios may be better suited to a dialog (modal or non-modal).
Using the audio example, if you had a button labeled "tempo", I would expect it to open a small dialog window on top of my current view rather than taking me to a new tab. Roland's workstation keyboards use this paradigm. Major content replaces the current view, but settings/configuration windows usually popup atop the existing view.
jQuery UI also has a dialog plugin for this purpose. If you are JavaScript savvy and targeting newer browsers, it's not that hard to write your own simple dialog.
1 Generating content on the fly may still be perfectly acceptable with an interactive client-server relationship, but it introduces additional considerations, such as the synchronization of what is in the browser with the data model on the server (if any), the submission of unneeded form fields (increasing the size of the request), overall page size, etc.
I would suggest checking out the JQuery UI library. More specifically, the tabs functionality that it provides, http://jqueryui.com/demos/tabs/.
Simple rule of thumb for loading data into your tabs. Small and Simple, load it up front. Large and Complex, load it on demand. When in doubt, load it on demand.
if you're looking for a complex UI, I recommend you check out Dojo or Ext JS. They both provide you with a UI framework closer to Java's Swing framework.
However, if you're looking for tabs, and tabs only, jQuery UI is great.
If you're working on a canvas, do your GUI on your canvas. Seriously. Using divs in front of a canvas is just boring. I tried both, and I prefer using canvas.
The easiest way is to create a "button" class which will take an image and define a clickable zone on your canvas for this image (if you want pixel-detect there is a way which uses offscreen canvas and getpixel to check colors under the mouse and stuff, too long to explain here).
Then once you have your button or whatever gui class, you can put them on your canvas and you won't have to manage multiple html elements.
Also, some html elements in front of a canvas often have weird behaviours. That's why I prefer creating my gui directly on the canvas. Harder at the beginning but proper.
Of and please, make it possible to place multiple squares without having to reclick (just use a mouseDown variable)
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 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.