jQuery UI tabs

Marianne Bertelsen

Posted on 01/06/2011 14:44:03

Hi

I'm trying to use jQuery UI Tabs on a Dynamicweb page, but I'm having a problem:

Here's an example of the code:

<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
    </ul>

    <div id="tab-1">
        test
    </div>        

    ...
</div>

jQuery UI Tabs utilises anchor links (or whatever they're called) to set the content of each tab. Dynamicweb parses the "#tab-x" links and inserts the absolute URL for the link (for SEO reasons, as I understand). This makes the entire page pop into the "tab-x" div, complete with top menu and all.

Question 1. Is there any way of preventing Dynamicweb from parsing and manipulating my links?
Question 2. Is there any way of ridding a page of its template, i.e. to get only the content without stuff like menus and the like? I guess this is necessary when switching between tabs that are placed on separate pages in Dynamicweb.

Thanks,
Marianne

Replies

Morten Bengtson

Posted on 01/06/2011 15:02:36

Go to Management Center > System > Solution settings and make sure you have checked Disable href="#name" parsing
You can use the LayoutTemplate parameter to use a template without any navigation etc. like this: /Pagename.aspx?LayoutTemplate=Designs/My/NoNavigationLayout.html

/Morten

Marianne Bertelsen

Posted on 01/06/2011 15:48:52

Hi Morten

Thanks for your prompt answers.

Unfortunatly I don't have access to that setting since the solution is shared by multiple sites and I'm only an administrator on our site -- at least I'm guessing that's why I don't see that option in my Management Center. I only see System-information and Action log.

I can't seem to make the LayoutTemplate parameter work, i.e. it doesn't seem to make a difference on my page -- it looks the same with or without the parameter.

Has anyone been able to successfully integrate jQuery UI tabs on their Dynamicweb site?

/Marianne

Sten Hougaard

Posted on 07/06/2011 08:44:17

Hi Marianne,
Sometimes you have to do frontend fixes, this situation could be one of those situations... Here is how you could use jQuery to remove the absolute part of the tab links.

<div id="tabs">
<ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1">tab 1</div>
<div id="tab-2">tab 2</div>
<div id="tab-3">tab 3</div>
</div>
<script type="text/javascript">
jQuery(function() {
 jQuery('#tabs ul li a').each(function() {
   var $this = jQuery(this);
   var sHref = $this.attr('href');
   var iLen = sHref.length;
   var hash = sHref.indexOf('#');
   $this.attr('href', sHref.substr(hash, iLen-hash));
  });
  // Do your jQuery UI tabs
})
</script>

/Sten

Marianne Bertelsen

Posted on 08/06/2011 16:29:33

Sten: Good suggestion about the jQuery. My colleague and I had considered that one too -- and now I can just copy-paste your code ;-)

Morten: Can you specify more precisely where to place the NoLayout.html file, i.e. what is the root path when specifying the path of the layout template? Is it e.g. /Files/Templates or perhaps /Files/?

Thanks,
Marianne

Marianne Bertelsen

Posted on 09/06/2011 11:19:22

Sten: Good suggestion about the jQuery. My colleague and I had considered that one too -- and now I can just copy-paste your code ;-)

Morten: Can you specify more precisely where to place the NoLayout.html file, i.e. what is the root path when specifying the path of the layout template? Is it e.g. /Files/Templates or perhaps /Files/?

Thanks,
Marianne

Never mind. Turns out I had an ancient version of Dynamicweb on my local computer (from before Designs and Layouts were introduced). It works now that I've updated Dynamicweb :-)

I created a file ..\Templates\Designs\MyDesign\Blank.html, so now I can type http://localhost/MyPage.aspx?LayoutTemplate=Designs/MyDesign/Blank.html and have it use the blank template rather than the default template.

You must be logged in to post in the forum

Developer forum

jQuery UI tabs

Replies