Switch information using jQuery - javascript

I am thinking of applying a new page to the admin section on my website and I wanted to make one page with three tabs ( picture should be included ) is this possible using jQuery.
Thanks a lot.

There are several jQuery tabs plugins out there:
jquery UI Tabs
jQuery Tools tabs
Yetii (more lightweight solution)
Create your own
If you don't need much functionality then just create your own with 3 links/elements and a set of <div> (or any other container) elements.

Yes, of course it's possible.
In fact, there are built in jQuery UI and enumerable plugins which do the job.

It sure is. But you don't even need jQuery to do this. CSS can do this quite simply.
See here for some examples.

Related

jQuery Easy UI within JSFiddle

Does anybody have any idea if it's possible to create a jsFiddle in which I can use the framework jQuery Easy UI? I cannot choose jQuery Easy UI in the list of the frameworks.
Please let me know if that's possible and how I can do it please.
How about something like this jsfidde link ?
You should select jQuery as your framework and the click the add resources button and add the desired js and css (you can look at this page to see what dependencies the demo has).
In your case, I think the resources are
http://www.jeasyui.com/easyui/jquery.easyui.min.js
and
http://www.jeasyui.com/easyui/themes/default/easyui.css
Here is the documentation for adding resources on jsFiddle: http://doc.jsfiddle.net/basic/introduction.html#add-resources

YUI: Is there any any script made by using YUI, for slider.?

I m developing an application in YUI. And need to implement a slider for 3 forms.
which will work exactly like this JQuery Plugin :
http://tympanus.net/Tutorials/FancySlidingForm/
I am very noob in YUI.
So can anyone provide me code snippet for this kind of slider..?
as mozillanerd suggests you can use the jquery Plugin in your page along with any YUI code you have, otherwise you might have to roll your own. If you do put it up on the gallery so others can use it.
I found a similar widget in YUi i.e. YUI 2.x Carousel widget
http://developer.yahoo.com/yui/examples/carousel/csl_imagentext_source.html
maybe this will fit in my scenario. I will try this and let u know guys..!!

What lightweight JS tab with good design are you using?

Right now I am usingjQuery UI Tab but it has a conflict in Drupal's fieldset accordion so I am thinking of using a lightweight javascript tab with a good design like rounded corners that is a javascript framework independent.
What javascript tabs are you using? Or do you know any javascript tabs that is working in drupal and doe's not break the fieldset accordion?
Here are the Javascript tabs I found so far:
- Coda-Slider
- dhtmlxTabbar
Thanks in advance.
Cheers,
Mark
I am using the same jQuery UI Tab and is one of the best. Perhaps it will be a good idea to post the problem and to try fixing the problem. It may or not be related with the plugin and it could happen as well that the problem will not be solved by changing the tab plugin.
I have used jQuery UI Tabs and jQuery Tools Tabs without any problems. Both are fairly lightweight and very usable.
I think that if it interferes with other parts of your site you should make sure that the selectors that you use are specific enough i.e. give the html elements you want to transform into tabs an id and then set your CSS and Javascript to only change that id.
It might be worth noting that currently jQuery Tools Tabs uses fixed tab widths and cannot grow arbitrarily long like jQuery UI Tabs.
I hope this helps.
Hope this helps. I was able to fix the fieldset issue with drupal 5 by using a variant of the patch in the link below. Basically, after installing jQuery Update, I had to go to /misc/collapse.js and change line 76 from:
.css({height: 'auto', display: 'inline'});
to
.css({height: 'auto', display: 'none'});
And that did the trick for me. Hope it helps you!
Source: http://drupal.org/node/156221
You can checkout dhtmlxTabbar.

JavaScript tabs - too many if functions that control it

I have several tabs that my site changes between using Javascript. When ever a tab is clicked I need to know which one it was and which one I am currently on.
I have done this through the use of if functions(lots!). I now want to add a new tab and I have to expand all my if functions etc.
Is there a different implementation I can use for this, so future adding of tabs is easy and I don't have to use so many if functions.
I hope I made sense and there is a solution.
The obligatory answer: Use jQuery, and then use jQuery Tabs. The Tabs plugin generates callbacks that pass to it both the tab being shown and the tab being hidden, which should work nicely for you.
If for some reason you are masochistic and enjoy writing plain Javascript for no apparent reason, then you need to post the code you are using so we can better help you.

How do jQuery modal box plugins compare?

There is a huge number of jQuery modal box plugins out there. Jitter lists 20 of them in this response (Modal windows plugin to rails).
Which one do you use and why? If you use different ones in different cases, how can they be broken down categorically by use-case?
I pick what I want based on its primary use. The fact that you can use a lightbox variant to show a dialog box, doesn't make it a good candidate in my mind.
Generally if I need to show photos or another iframed web page, I use a lightbox variant. Two that we have used at our studio and been happy with are:
Slimbox 2 (Just photos)
Colorbox (Pretty much any type of content)
For dialog type behavior, I highly recommend using jQuery UI's dialog. It is in active development, and is super customizable.
[rant] Whatever you do please don't use SimpleModal unless you need its special type of callbacks. Otherwise, when you try to hook into an onClose callback, you'll find yourself having to perform the actual closing of the box. Just my two cents on that one. :) I just know it has come up a few times here in SO, and it just feels awkward to use IMO [/rant]
I use Colorbox, it is because it is recommended alternative in non-maintained thickbox.
Basically it allows iframe, so image, flash etc are all okay. Also it is incentive for me to upgrade jQuery to 1.3.2 :-)
JQuery UI Dialog with a "plugin" to support iframes:
http://elijahmanor.com/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx
I use it because it's included in JQueryUI and uses the jquery ui theme you use, which makes for a consistent UI with little cost

Categories