Problem with jQuery tabs

Jesper Friis

Posted on 21/06/2011 11:31:00

Hi I using JQuery UI tabs
How do I set it up so the user can update both tabs?
Here's teh code i'm using rigth now but this way i can only update the first tab:

and the paragraph html page:

TEKST

-jesper

Replies

Nicolai Høeg Pedersen

Posted on 21/06/2011 13:57:58

Hi Jesper

I'm not sure if this is a DW question or a jQuery tabs question. Not sure I understand what you are trying to accomplish and what is not working. could you elaborate?

Jesper Friis

Posted on 22/06/2011 09:44:55

Hi Jesper

I'm not sure if this is a DW question or a jQuery tabs question. Not sure I understand what you are trying to accomplish and what is not working. could you elaborate?

Hi Nicolai

It is a DW question. I'm trying to figure out how to update both tabs inside DW. You can see an example of the page I've made here: http://www.nyholmcantrell.dk/ned-cv-tekst.html
and the one I've made when i'm implementing it in DW:
http://nyholmcantrell.net.dynamicweb-cms.com/da-DK/Tekst/Ned.aspx?Purge=True. There are no problems with the jQuery but I simply don't know how to set it up in DW. The code I've wrote only makes me able to update the "cv" tab but not the "tekst" tab.

If it is to complicated I could of course split the tabs into seperate menu items but it could be nice to make it work.
Hope youunderstand what I mean now.

Thanks Jesper

Nicolai Høeg Pedersen

Posted on 22/06/2011 10:12:41

You have to make a layout template for this.
You can either make a content container for each tab content, or make 2 paragraph templates - one for each tab, and place them in the same container.

You might also be able to accomplish this by making a html snippet for the editor:
http://www.dwfeatures.com/2011/06/21/code-snippet-for-creating-template-for-the-dynamicweb-paragraph-texteditor-mytemplates-xml/

Jesper Friis

Posted on 23/06/2011 09:26:59

Hi Nicolai
Finally I'ts working
Great and thanks

-Jesper

Per Søgaard

Posted on 04/07/2011 21:22:26

Would really like to see how you got it working - please?

Dmitrij Jazel

Posted on 20/01/2012 09:12:51

Hi everyone,

I have a similar problem as Jesper here,
In my case, I have a JQuery plugin, that needs to specify 2 different elements from same paragraph in two different places so to speak.
The code is quite similar to Jespers actually.

I was thinking if it could be possible to use Gallery module somehow to achieve this. So that the users could have a easy access to dedicated place. Where they could edit both texts, and a picture for example.

In gallery module you can choose and image folder, and you get a really nice way to construct a nice slider, easy to use (just copy paste pictures) but no possibility to add/edit text to it.

Does anyone could have any suggestion about this one?

-Dmitrij

Regin Madsen

Posted on 20/01/2012 09:38:02

Hi Dimitrij,

The way I usually do this is by creating the tab headers using a bit of Jquery, and a paragraph for tabs having class name "tab".

Like the following:

<ul id="tabs"></ul>
<div id="tabcontainer" class="dwcontent tab_container" title="Tabs"></div>
<script>
    $("#tabcontainer .tab").each(function(i){ //Run through each paragraph
        $("#tabs").append('<li ><a href="#" rel="#'+$(this).attr("id")+'">'+$(this).find(".head").text()+'</a></li>'); //Create the tab to click
	$(this).find(".head").remove(); //Remove the headline used in the tab from the paragraph
	if(i!=0){
	    $(this).hide(); //if not the first tab, then hide the content
	}
			
    });
			
</script>

It may not be the most perfect way to do it, but it works, and are really easy to maintain for the webmaster.

You have to change it in order to work with your jquery. Or you can mail me on rjm@e-kompagniet.dk then I shall send you my files.

/Regin Madsen

Dmitrij Jazel

Posted on 20/01/2012 12:46:57

Hi Regin,

I will mail you in a moment.
But still can there be any better solution via gallery module for example?

-Dmitrij

You must be logged in to post in the forum

Developer forum

Problem with jQuery tabs

Replies