JQuery UI 1.8.16 (how do I use it??)
Permalink
So I looked hard and found some neat items developed by JQuery in what is called JQuery UI 1.8.16 (http://jqueryui.com/home). So heres my problem, I have the files for all the stuff but no idea how to put it all together so concrete5 understands what I am trying to do?
So I want to take some chunks of text and other information and organize them into tabs (http://jqueryui.com/demos/tabs/). Every time I write the code into the html, concrete5 doesn't recognize what I want and just makes the tabs into links and all the info sits as it was.
I am not planning to go so far as to buy the tab addon (don't need someone to tell me it exists) from the site when jquery offers a perfectly working example of what I am after. Either I have to type something specific for concrete5 that I don't realize or I some how have to install more of jquery into the site. Any ideas?
I am not planning to go so far as to buy the tab addon (don't need someone to tell me it exists) from the site when jquery offers a perfectly working example of what I am after. Either I have to type something specific for concrete5 that I don't realize or I some how have to install more of jquery into the site. Any ideas?
Well, there's a decent amount of things you need to do. This is why someone is charging money for their solution in the marketplace -- because it probably took them a decent amount of time to make work within Concrete5.
If you want to tackle it yourself, that's cool. But it's not as simple as pasting some code in. The first consideration is how will this content be edited? Ideally you want to pull in editable content blocks into the tabs, and not just hardcode a bunch of HTML (I am guessing this is where most of the work went into that addon in the marketplace -- making it so the content is editable by end-users without them having to touch HTML or javascript code).
If you're not a developer and you don't care about having the content be editable, then theoretically you should just be able to paste the proper code into an HTML block and make it work. But there are a few gotchas -- you don't want to include jquery yourself because C5 already does that, you may need to modify your html if you were given a complete page (you just want to insert one portion of the page), and you will need to include the necessary javascript files in the right way (your best bet in this situation is to just hardcode the entire url to that file on your server somewhere -- there are better ways to do it where the CMS loads the file for you, but that is not really possible from within the HTML block).
Good luck!
If you want to tackle it yourself, that's cool. But it's not as simple as pasting some code in. The first consideration is how will this content be edited? Ideally you want to pull in editable content blocks into the tabs, and not just hardcode a bunch of HTML (I am guessing this is where most of the work went into that addon in the marketplace -- making it so the content is editable by end-users without them having to touch HTML or javascript code).
If you're not a developer and you don't care about having the content be editable, then theoretically you should just be able to paste the proper code into an HTML block and make it work. But there are a few gotchas -- you don't want to include jquery yourself because C5 already does that, you may need to modify your html if you were given a complete page (you just want to insert one portion of the page), and you will need to include the necessary javascript files in the right way (your best bet in this situation is to just hardcode the entire url to that file on your server somewhere -- there are better ways to do it where the CMS loads the file for you, but that is not really possible from within the HTML block).
Good luck!
Might need to check the css and make sure you have the proper css for your tabs. I have found that for me css is by far the most difficult thing to get working properly.
I wrote a jquery plugin that useshttp://flowplayer.org/tools/
It works beautifully, but in order to make blocks into tabs, I had to write code that dynamically generates all the list html and all the wrapping html using javascript alone.
Like Jordan said, your best bet is to either use a premade block that allows you to make tabs, or write some custom javascript that does it for you. :-)
EDIT: Be sure concrete5's jquery ui is being included when you are not in edit mode. By default, it only loads when you are logged in and have the edit bar up (I think).
I wrote a jquery plugin that useshttp://flowplayer.org/tools/
It works beautifully, but in order to make blocks into tabs, I had to write code that dynamically generates all the list html and all the wrapping html using javascript alone.
Like Jordan said, your best bet is to either use a premade block that allows you to make tabs, or write some custom javascript that does it for you. :-)
EDIT: Be sure concrete5's jquery ui is being included when you are not in edit mode. By default, it only loads when you are logged in and have the edit bar up (I think).
Well folks, I did a lot of digging when I had time and have finally found a site that produces something close to what I am hunting for. I am still fixing it to work for my needs but for anyone wondering what it looks like, paste this code into an html block.
The only real problem right now is that it keeps aligning to the left when I want it centered on the page but that is only a mater of finding whats positioning it.
If anyone can think of ideas to build onto this I am all ears.
Oh, and I give credit tohttp://jqueryfordesigners.com/jquery-tabs/... for being the first site to actually give the full code.
update:
OK, I found the line causing me problems with the alignment.
remove <body id="page"> and </body> toward the bottom. To be honest a lot of the code listed is not needed with concrete 5 but this is the basic format for tabs is buried in here. Next step will be (and I imagine its going to be like pulling teeth to do) to move from text to whole blocks in each tab.
<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Tabs</title> <style type="text/css" media="screen"> <!-- BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; } H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;} DIV.container { margin: auto; width: 50%; margin-bottom: 10px;} TEXTAREA { width: 50%;} FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; } LEGEND { color: #ccc; font-size: 120%; } INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; } LABEL { display: block; margin-top: 10px; } IMG { margin: 5px; } UL.tabNavigation {
Viewing 15 lines of 96 lines. View entire code block.
The only real problem right now is that it keeps aligning to the left when I want it centered on the page but that is only a mater of finding whats positioning it.
If anyone can think of ideas to build onto this I am all ears.
Oh, and I give credit tohttp://jqueryfordesigners.com/jquery-tabs/... for being the first site to actually give the full code.
update:
OK, I found the line causing me problems with the alignment.
remove <body id="page"> and </body> toward the bottom. To be honest a lot of the code listed is not needed with concrete 5 but this is the basic format for tabs is buried in here. Next step will be (and I imagine its going to be like pulling teeth to do) to move from text to whole blocks in each tab.
Do you have HTML and javascript code already set up that utilizes the jQuery effects? Concrete5 already includes a lot of the jQuery UI things for its editing interface, so it's possible you don't even need to include them yourself.