I'm trying to build an interactive user guide for an application. Basically when its the users first time using the application they will be offered a tour of the site. It'll be pretty much done with a series of modal pop up boxes and focusing on elements.
My problem is i can't find a way to get control of the cursor to move it to certain locations of the page, is there a way to achieve this with JS, Jquery or CSS? Or is there any plugins available?
You can have a look at Bootstrap Tour or Joyride Plugin
Related
This is my first time asking questions here and I have just started learning jQuery mobile so if it is not quite relevant or if it is just really obvious I apologize in advance.
What I am trying to do is build a mobile site for an online catalog for lots of books.
The original website has a very sophisticated way of filtering and sorting the search results based on the user's input and preference so unless it's absolutely necessary, I would really like to keep the original functionality of the website.
I was thinking maybe I can create a "mask" that looks like a mobile site to cover the real content; and whatever the user requests, I will go "underneath" the mask, do the search and when the data is loaded in the original website, I will then present them in a more mobile-friendly way.
So here is my question:
Is it possible to somehow include/embed a mobile site in the original html?
If so, could you please give me a few hints (books, articles, tutorials, anything) as to how I can approach this?
If not, could you please tell me how I should make the mobile site without having to re-create all the nice functionality that original website already has?
Thank you so much! :)
You could do this but you shouldn't. Mobile websites are optimized for mobile users. Not only as layout but also in loading weight. The direction you are heading you end up with a regular side (probably big in load) and add an overlay (extra load) to rebuild the layout (CPU heavy). So it's not the right way. A better solution is to create a optimized layout for mobile users only.
I'm making web-based quiz to help some people get some qualifications. After recently discovering the wonderful world of HTML5 (I've been previously programming in XHTML), I thought the ability to drag and drop a picture from a start box to an answer box would be a great addition to break up the monotony of lists, radio buttons, and textboxes.
I do not have access to PHP or JQUERY. (The site is meant to run on a box with no internet, nor do I have access to setup a web server to support PHP).
Is it possible, using JavaScript and four boxes/divs (one for the start position and three possible answer boxes), to determine which box/div the image is in?
Thank you very much!
You can download jQuery (http://jquery.com/download/) and jQuery UI (http://jqueryui.com/download/) and add them to your page as a script
then take a look at draggable and droppable on the jQuery UI docs : http://jqueryui.com/droppable/
Recently I'm working with jQuery UI Carousel (1.0.2) on my Drupal website. So far so good, everything is working without a problem but I'm looking for a way to add some external controls. You know, those little dots beneath the images where the user can navigate from and pinpoint a certain slide.
I took a look to the JS file (you can see it here), but didn't find any proof of such a controls.
Right now, I was only able to write some crappy code who didn't work at all... (so I'm not gonna post it to save you some laughs :))
Anyone with some experience regarding this subject?
Thanks in advance!
I don't have specific experience with the jQuery UI Carousel module, but if you are using Views to generate the content in the carousel, you could always use Views Slideshow. It allows you to add a pager (either numbers or thumbnail images) to your slideshow (carousel).
I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.