WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: Availor on September 19, 2010, 05:21:36 PM

Title: Jquery WYSIWYG tabs module
Post by: Availor on September 19, 2010, 05:21:36 PM
Hello again,

I've tried implementing the module, Jquery WYSIWYG tabs, and since the link http://WebsiteBaker.wdsnet.de/wb/pages/de/jquery/jquery-einbinden.php does not work I've decided to post the question in here.

Can you please explain how to implement the module?
I'm using the latest JQuery Admin and I see the module is already implemented. The question is, how do I make it actually work from the WYSIWYG page after I create a new page?

Thanks
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on September 19, 2010, 05:33:43 PM
you need the plugin jquery-insert to load wysiwyg-tab-script.
look here: wysiwyg-tab (http://plugins.onkel-franky.de/cms-WebsiteBaker/tabs/)
download there the jquery-insert-plugin and the wysiwyg-tab-modul.
should work.

Title: Re: Jquery WYSIWYG tabs module
Post by: Availor on September 19, 2010, 10:28:13 PM
Thanks for the prompt reply.

I already downloaded and installed both modules, but I can't figure out how to actually make the tabs work from the WYSIWYG tabs module. The google translator for the German page didn't give any accurate translation so maybe I missed something. I though that making a title should create a tab?

http://cforum.co.il/demo/83 This is my demo playground.... I've installed both modules and created the WYSIWYG Tabs page. Maybe I missed something since the tutorials are in German - is there anything else I need to put in the template, and how do I alter the CSS/JS or whatever to actually create the tabs from within the page?

Sorry but there's no tutorial in English I could find...
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on September 19, 2010, 10:43:24 PM
ok, i'll try in english:

for every tab you want you must create a section of type wysiwyg-tab. not wysiwyg.
in every section the first entry must be a h-tag like <h2>your header</h2>

in jqueryadmin you create a preset e.g. mytabs
check the boxes for jquery-insert, widget and a theme .... save.
copy the droplet
Code: [Select]
[[jQueryInclude?preset=mytabs]] to one of your tab-sections.

try it.

Quote
I'm using the latest JQuery Admin
i can't see the jqueryadmin on your site. but jquery from jquery.com and google.com.
this is the wrong way. read the manual for the module jqueryadmin.
Title: Re: Jquery WYSIWYG tabs module
Post by: Availor on September 19, 2010, 11:26:32 PM
Quote
i can't see the jqueryadmin on your site. but jquery from jquery.com and google.com.
this is the wrong way. read the manual for the module jqueryadmin.

All there

Code: [Select]
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-ui-1.8/ui/jquery.ui.core.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script></script>
<script type="text/javascript" src="http://cforum.co.il/demo/templates/round/formToWizard.js"></script>
<script type="text/javascript" src="http://cforum.co.il/demo/clickheat/js/clickheat.js"></script>
<script src="http://cforum.co.il/demo/modules/droplets/js/mdcr.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-ui-1.8/ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-ui-1.8/ui/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cforum.co.il/demo/modules/jqueryadmin/plugins/jquery-insert/jquery-insert.js"></script>

Something is moving I will try work it out but it doesn't work yet.
Otherwise I can always use the old method of creating a similar template with tabs that pull out different sections. Maybe I'm just tired but I just can't seem to figure it out. The CSS is connected, JS is connected should work I guess...
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on September 20, 2010, 08:14:03 AM
oh my god  :-D

i give up.
Title: Re: Jquery WYSIWYG tabs module
Post by: BlackBird on September 20, 2010, 10:29:26 AM
First of all, you include jQuery Core 1.4.2 (from jQueryAdmin) AND 1.3.2 (from Google) AND jquery-latest (from jquery.com). THIS WON'T WORK! There can only be ONE jQuery Core!

<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-ui-1.8/ui/jquery.ui.core.min.js" type="text/javascript"></script>
REMOVE ---> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script></script>
<script type="text/javascript" src="http://cforum.co.il/demo/templates/round/formToWizard.js"></script>
<script type="text/javascript" src="http://cforum.co.il/demo/clickheat/js/clickheat.js"></script>
<script src="http://cforum.co.il/demo/modules/droplets/js/mdcr.js" type="text/javascript"></script>
REMOVE ---> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-ui-1.8/ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="http://cforum.co.il/demo/modules/jqueryadmin/jquery-ui-1.8/ui/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cforum.co.il/demo/modules/jqueryadmin/plugins/jquery-insert/jquery-insert.js"></script>

Please follow the instructions dbs has given. DO NOTHING ELSE.
Title: Re: Jquery WYSIWYG tabs module
Post by: Availor on September 21, 2010, 07:34:10 PM
Thanks for your help, I was a bit tired so couldn't grasp the thing before  :-D
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on September 21, 2010, 10:30:19 PM
here a little bit more instructions with pictures

klick (http://plugins.onkel-franky.de/cms-WebsiteBaker/tabs/)
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 03, 2010, 07:35:02 PM
Hello!

I have tried everything but I still cant get the wysiwyg_tabs to work. the template should have everything for the module to work but nothing.
I'we created the preset in jqadmin with all requirements and I tried too put the droplet in wysiwyg editor and in the template it self but nothing worked. I ran over all of the tutorial that I could find but still nothing.
I tried the link_preview and some other jquery plugins and all were working fine.

I have tried the template on some other server and the tabs were working fine.


is there something that I'm missing?

thanks in advance!
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 03, 2010, 07:37:48 PM
gimme a link
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 03, 2010, 07:56:03 PM
Hi
thans for the help.

Here is the same template in two diferent servers. (only test templates)

working tabs
http://www.feel-fun.com/wb/pages/slo/domov.php

the same template but non working tabs:
http://www.as-press.si/festival/pages/slo/tabers.php


thx
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 03, 2010, 08:04:34 PM
on both sites you load more than one jquery-core.
if you want use jqueryadmin than you don't need other jquery-calls. jqueryadmin is the one for all.

in the tutorial are some examples of not needed calls.
one of them is
register_frontend_m odfiles('jquery');  in the index.php of the template
comment it out or delete it.

you don't need any calls for jquery.
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 03, 2010, 08:32:57 PM
Hi

now I'we took out all the words incuding jquery but still doesent working.

but linkpreview is still working fine.

Any idea?
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 03, 2010, 08:39:20 PM
uncheck in your preset "tabs" an all the other not needed things. use the tutorial.
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 03, 2010, 08:49:43 PM
now it looks good with the calls.

but you have 2 problems with script from tiny.slider

comment it out and wysiwyg should work
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 03, 2010, 09:06:39 PM
Dis exactly as in tutorial I took I hope everything out as you'we said but still not working.
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 03, 2010, 09:19:03 PM
the wysiwyg-tab frontend.js is not loading... but i don't know why...

you have the module and the jquery-insert-plugin loading from tutorial website? i hope so.

if you look into the preset, is this a part of it?
Code: [Select]
<script type="text/javascript">
var WB_URL = "{WB_URL}";
var URL = "{WB_URL}";
</script>

Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 03, 2010, 09:24:46 PM
oooohhhh :-D

Thank you this was it!

I had the WYSIWYG_tab module from AMASP installed. And then I installed the one from the tutorial site and now its working!

Yuhey!   :wink:

Thank you for your time
you're the best ;)
Roych
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 03, 2010, 09:29:52 PM
Quote
I had the WYSIWYG_tab module from AMASP installed
no comment ...


:-)
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 04, 2010, 08:42:05 AM
Hello

Another question!

It seems to work fine in IE when you load the page for the first time, but when you press the menu lik the tabs are not showing.

any idea?

thank you
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 04, 2010, 09:28:57 AM
Hi

Its working now!

I had to put this line in:
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/javascript/jquery.js" ></script>

R.
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 04, 2010, 11:51:27 AM
that's wrong!
you have jqueryadmin. thats one for all.
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 04, 2010, 01:52:18 PM
so what should I do? somehow it doesent work right is IE! Im a beginner in jquery so I don't really understand it comletely yet.
In Chrome everything is working fine.


Thx!
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 04, 2010, 02:36:05 PM
it seems ... you are right ...

with reload it works. with menue-link it don't work. (IE8)

f... IE
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 04, 2010, 02:43:49 PM
Yes you're right, f.....IE    :wink:


Sorry I have changed the link now I tried to recreate everithing but nothing helped.


link:
http://www.as-press.si/festival/pages/slo/domov.php



any idea?
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 04, 2010, 03:13:22 PM
no ideas at the moment...
this problem is only with combination: jqueryadmin+jquery-insert+wysiwyg-tab(slider,query)

the other jquery-way on WebsiteBaker (in index.php) works fine.  

:-(

an idea is: without wysiwyg-tab

jqueryadmin with tab
but then you must write the right html-code for tabs, like:
Code: [Select]
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 04, 2010, 03:35:49 PM
I tried your way.
Still doing the same!

This is geting really anoying! ;)
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 04, 2010, 03:43:50 PM
in this way:
delete the preset for the site. make a new preset
check only: tabs, widget and theme

edit: tested, it works ;-)
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 04, 2010, 04:04:21 PM
fix is in work for module wysiwyg-tab.
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 05, 2010, 05:31:41 PM
Here is a update for the module Wysiwyg-Tab and the manual.
After update call the preset again and check the box next Tabs (over Widget).
Should now work in IE too.

RTM
Wysiwyg-Tab latest (http://plugins.onkel-franky.de/WebsiteBaker-download-plugins/)
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 05, 2010, 10:24:47 PM
Sorry for the deeeeeelay, again ;)

Yeeees now it is working fine!

Thank you very much, now I can continue with my work. ;)

R
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 06, 2010, 08:55:00 AM
Hi
one more question!

Is it possible to make smaller space between the header title and a tab. so I coul get more tabs in one row?
I tryed to look for the CSS file but there is no options for this.


Thx
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 06, 2010, 01:15:27 PM
anyone???
Title: Re: Jquery WYSIWYG tabs module
Post by: dbs on October 06, 2010, 01:52:53 PM
try this in your template css or wysiwyg-tab frontend.css:

Code: [Select]
.ui-tabs .ui-tabs-nav li a {
float:left;
padding:0.5em 0.5em;
text-decoration:none;
}


the original comes from:
/modules/jqueryadmin/jquery-ui/themes/"yourtheme"/jquery-ui.css
Title: Re: Jquery WYSIWYG tabs module
Post by: Roych on October 06, 2010, 06:43:47 PM
Great thx!
I had to change it in original folder because I use basic theme, its just right for me.

Thank you!