shrink
shrink
Help with CSSTabs show or hide the contents
Help with CSSTabs show or hide the contents
Monday 16 July 2012 3:07:14 pm - 1 reply
regards
Sorry to bother this problem I have with the CSSTabs (http://css-tricks.com/examples/CSSTabs/#%20box-eight), create an extension based on a sample CSSTabs, everything works fine except when I click on the tabs, because I get this error:
View not found
The view required could not be found in module
Possible Reasons for this are:
The view name is misspelled, try changing the URL.
The view does not exist for the module.
This site uses access to the site in the URL and you did not. Try to access the site
Before the module name in the URL.
url is a problem, not how to fix.
The html is:
<ul class="tabs"> <li> <a href="#">{$node.name|wash()}</a> </li> </ul> <div class="tabbed-content"> <p>{$node.object.data_map.textbody.content.output.output_text}</p> </div> </div>
Work is based css, jquery not please any ideas.
Modified on Monday 16 July 2012 10:57:55 pm by Edixon Rivera
1 reply
Tuesday 17 July 2012 9:25:47 am
HI. Here are a few pointers:
-
Get your sample working without including ezPublish loops and variables. This way you can ensure that you have a working copy aof the javascript and an understanding of how the tabs work.
If this does not work, resolve the issue before introducing eZP code... (do not pass step one till it works)
- Only after you have static content working, try to duplicate the tabs on the page again with eZP code (loop and vars to build the above sample you *still* have one the page as a reference).
If you succeed with number 2, Yippie! if not:
- You can view the source and compare your (working) static tabs and your (nonworking) dynamic tabs from eZP and see what is different (perhaps a space in the url hashor something).
Final Note:
A cursory look at your sample code (even without running eZP generated code does not look like it would work. It appears that the tab system you are using expects each tab to have an href consisting of a hash which matches the class used in the content
In the example above, judging by the structure, I suggest that your href should match the class of the content and should look like this (href is a hash that matches the unique classname of the content div name):
<span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tabs"</span><span style="color: #000000; font-weight: bold;">></span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><li></span></a></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"#</span></span><span style="color: #009900;"><span style="color: #ff0000;">tabbed-content</span></span><span style="color: #009900;"><span style="color: #ff0000;">"</span><span style="color: #000000; font-weight: bold;">></span></span>{$node.name|wash()}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></li></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></ul></span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tabbed-content"</span><span style="color: #000000; font-weight: bold;">></span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><p></span></a></span>{$node.object.data_map.textbody.content.output.output_text}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span>
Note that the requirement for the hash and the class is most likely: NO SPACES. so, i would suggest yopu use something such as the node_id as a suffic to tabbed-content in the use in the classname as well as the hash.
<span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tabs"</span><span style="color: #000000; font-weight: bold;">></span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><li></span></a></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"#</span></span><span style="color: #009900;"><span style="color: #ff0000;">tabbed-content-{$node.id}</span></span><span style="color: #009900;"><span style="color: #ff0000;">"</span><span style="color: #000000; font-weight: bold;">></span></span>{$node.name|wash()}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></li></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></ul></span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tabbed-content</span></span><span style="color: #009900;"><span style="color: #ff0000;">-{$node.id}</span></span><span style="color: #009900;"><span style="color: #ff0000;">"</span><span style="color: #000000; font-weight: bold;">></span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html" target="ez_no_documentation"><span style="color: #000000; font-weight: bold;"><p></span></a></span>{$node.object.data_map.textbody.content.output.output_text}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div</span></span>
You must be logged in to post messages in this topic!