Jump to content

[solved]how to use Jquery and Script with module ContentBox/HtmlBox


Recommended Posts

Hello

 

I would like to have the possibility of tabbed content in the footer region of my site.

I found in the forum the free contentbox module and the HMTLbox module from Vekia.

 

Do you know already some module doing this or somebody be so kind to code a hybrid mod of contentbox and tabbed products info?

 

For a reasonable price I would like to pay via paypal. But free help is also very much welcome!

 

best regards Boris.

 

 

post-402975-0-75208800-1394041859_thumb.png

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

Dear Vekia,

 

could you please explain to me what you mean with that? I am sorry but I still do not know.

 

I found luckily this: http://www.prestashop.com/forums/topic/259417-solved-jquery-tabs-in-home-prestashop-15/

 

Ehm,

 

that is excatly I am looking for. But, honestly, I could not get it working until now :(

 

 

I found a source that seems to utilize a different approach without JS. However; I am still too unexperienced to to make use of it in the contentbox/htmlbox.

 

It does not work and my css isn't respected either:(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
	<link href="seotabs.css" rel="stylesheet" type="text/css" media="all" />
    

  <title></title>
  </head>
  <body>
    <div id="tabs-topical-text" class="tabs widget widget-content corner-all">
    <ul class="tabs-nav helper-reset helper-clearfix widget-header corner-all" role="tablist">
        <li class="state-default corner-top tabs-active state-active" role="tab" tabindex="0" aria-controls="tabstext-1" aria-labelledby="tab-id-1" aria-selected="true">
            <a id="tab-id-1" class="tabs-anchor" href="#tabstext-1" role="presentation" tabindex="-1">TAB1</a>
        </li>
        <li class="state-default corner-top" role="tab" tabindex="-1" aria-controls="tabstext-2" aria-labelledby="tab-id-2" aria-selected="false">
            <a id="tab-id-2" class="tabs-anchor" href="#tabstext-2" role="presentation" tabindex="-1">TAB2</a>
        </li>
        <li class="state-default corner-top" role="tab" tabindex="-1" aria-controls="tabstext-3" aria-labelledby="tab-id-3" aria-selected="false">
            <a id="tab-id-3" class="tabs-anchor" href="#tabstext-3" role="presentation" tabindex="-1">TAB3</a>
        </li>
        <li class="state-default corner-top" role="tab" tabindex="-1" aria-controls="tabstext-4" aria-labelledby="tab-id-4" aria-selected="false">
            <a id="tab-id-4" class="tabs-anchor" href="#tabstext-4" role="presentation" tabindex="-1">TAB4</a>
        </li>
    </ul>
    <div id="tabstext-1" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
        <p>
           1 BLAblabla
        </p>
    </div>
    <div id="tabstext-2" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-2" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
        <p>
           2 blablalalalalA
        </p>
    </div>
    <div id="tabstext-3" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-3" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
        <p>
           3 BLABLABVLA
        </p>
    </div>
    <div id="tabstext-4" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-4" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
        <p>
           4  MORE blablalaa.
        </p>
    </div>
</div>
  </body>
</html>

</body>
</html>

/* CSS Document */
.tabs{ position: relative; padding: .2em; }
.tabs .tabs-nav{ margin: 0; padding: .2em .2em 0; }
.tabs .tabs-nav
li{
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px
.2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.tabs .tabs-nav li
a{ float: left; padding: .5em 1em; text-decoration: none; }
.tabs .tabs-nav li.tabs-active{ margin-bottom: -1px; padding-bottom: 1px; }
.tabs .tabs-nav li.tabs-active a,
.tabs .tabs-nav li.state-disabled a,
.tabs .tabs-nav li.tabs-loading
a{ cursor: text; }
.tabs .tabs-nav li a,
.tabs-collapsible .tabs-nav li.tabs-active
a{ cursor: pointer; }
.tabs .tabs-panel{
	display: block;
	border-width: 0;
	padding: 1em
1.4em;
	background: none;
}

#tabstext{
	color: blue;
	padding: 0;
	margin: 0;
	margin-top: 20px;
	font-size: 0.875em;
	line-height: 1.4;
}
#tabstext
ul{ padding: 0; }
#tabstext ul
li{
	padding: 0;
	margin: 0;
	border: 1px
solid silver;
	background-color: silver;
}
#tabstext ul li
a{ padding: 5px
20px; }
#tabstext ul li.state-active{ padding: 0; background-color: orange; }
#tabstext .tabstext-content{
	background-color: orange;
	padding: 16px
20px;
	max-height: 1000000px;
}
#tabstext .tabstext-content
p{ margin: 0; }
#tabstext .tabstext-content
strong{ font-weight: 400; color: #264646; }
#tabs-topical-text{
	text-align: center;
	background-color: silver;
	margin-top: 40px;
	padding: 0;
	padding-top: 10px;
	padding-bottom: 20px;
	max-height: 1000000px;
}
#tabs-topical-text .block-title{
	margin: 0;
	padding: 0;
	font-weight: 300;
	border: 0;
	color: silver;
	font-size: 2.5em;
	line-height: 1.4;
}
#tabs-topical-text .block-subtitle{
	padding: 5px
0 20px;
	font-weight: 400;
	font-size: 0.875em;
	line-height: 1.4;
	color: #578787;
}
#tabs-topical-text
ul{ margin: 0; padding: 0; }
#tabs-topical-text ul
li{ display: inline; font-size: 1.25em; line-height: 1.4; }
#tabs-topical-text ul li:after{
	content: '\b7';
	margin-left: 0.5em;
	margin-right: 0.4em;
}
#tabs-topical-text ul li:last-child:after{ content: normal; margin: 0; }
Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

as code in tpl use only this:
 

 <div id="tabs-topical-text" class="tabs widget widget-content corner-all">
    <ul class="tabs-nav helper-reset helper-clearfix widget-header corner-all" role="tablist">
        <li class="state-default corner-top tabs-active state-active" role="tab" tabindex="0" aria-controls="tabstext-1" aria-labelledby="tab-id-1" aria-selected="true">
            <a id="tab-id-1" class="tabs-anchor" href="#tabstext-1" role="presentation" tabindex="-1">TAB1</a>
        </li>
        <li class="state-default corner-top" role="tab" tabindex="-1" aria-controls="tabstext-2" aria-labelledby="tab-id-2" aria-selected="false">
            <a id="tab-id-2" class="tabs-anchor" href="#tabstext-2" role="presentation" tabindex="-1">TAB2</a>
        </li>
        <li class="state-default corner-top" role="tab" tabindex="-1" aria-controls="tabstext-3" aria-labelledby="tab-id-3" aria-selected="false">
            <a id="tab-id-3" class="tabs-anchor" href="#tabstext-3" role="presentation" tabindex="-1">TAB3</a>
        </li>
        <li class="state-default corner-top" role="tab" tabindex="-1" aria-controls="tabstext-4" aria-labelledby="tab-id-4" aria-selected="false">
            <a id="tab-id-4" class="tabs-anchor" href="#tabstext-4" role="presentation" tabindex="-1">TAB4</a>
        </li>
    </ul>
    <div id="tabstext-1" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
        <p>
           1 BLAblabla
        </p>
    </div>
    <div id="tabstext-2" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-2" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
        <p>
           2 blablalalalalA
        </p>
    </div>
    <div id="tabstext-3" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-3" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
        <p>
           3 BLABLABVLA
        </p>
    </div>
    <div id="tabstext-4" class="tabstext-content tabs-panel widget-content corner-bottom" aria-labelledby="tab-id-4" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
        <p>
           4  MORE blablalaa.
        </p>
    </div>
</div>

rest of html code is not useful in this case.

 

then somewhere in global.css paste your css styles

Share this post


Link to post
Share on other sites

Thank you Vekia for looking in again!

 

I followed your tip and am a bit further now with my learning by doing.

 

I know now that this tab activating via mouse click and presenting of new content then is done in each case above

via  JS.

I will carry on with trying to follow tips I found here:

http://www.tutorials.de/javascript-ajax/394088-jquery-tab-funktion-die-vorgegebener-standard-css-formatierung-abaendern.html

 

for your information, I never dealt with java script before and I see now that these script bundles are the source for many cool things.

So, I have to load the proper script (header.tpl I suppose) and then, if lucky, I can put the code into contenbox/htmlbox.

 

cheers

Share this post


Link to post
Share on other sites

yes, you can put it into header.tpl,

but it will be launched after each page refresh, if you will have another #wrapper it can cause some kind of problems,

 

in this case you can also put js code into contentbox, and to htmlbox aswell

Share this post


Link to post
Share on other sites

Vekia

 

I am exhausted and feel ashamed. I cant get it working.

 

I tried now alot and as a single html file it works but there are some stones in the way making use of it with contentbox and header.tpl or how ever. I do not get the logic :(

 

Please have a last look or more if necessary since I got the feeling being near the solution!

 

When I got your last post right it is not bad idea to call the script(s) in the header.tpl as long I do not call the same functions/libraries twise or misuse the IDs or so.

 

I tried it now this way with header.tpl since pure html & JS in contentbox seem not to work either. At least I do sth wrong there:

 

part of header.tpl with theme's JS referenes and the new js tools:

{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
<script type="text/javascript" src="{$js_dir}imgSizer.js"></script>
<script type="text/javascript" src="{$js_dir}jQuery.equalHeights.js"></script>
<script type="text/javascript" src="{$js_dir}responsive.js"></script>



<!--  jquery tabbed content box -->
<!-- include the Tools -->
<script  src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
  $(function() {
  $("ul.skin2").tabs("div.skin2 > div");
  });
</script>
<link rel="stylesheet" type="text/css" href="minimalsetup4tabsalt.css">
<!-- /jquery tabbed content box -->
<!-- /include the Tools -->

		{$HOOK_HEADER}

And here is the html I put into contentbox/HtmlBox:

<ul class="css-tabs skin2">
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Second tab</a></li>
  <li><a href="#">A ultra long third tab</a></li>
</ul>

<div class="css-panes skin2">
  <div>
    <img src="eye192.png" alt="Flying screens"
         style="float:left;margin:0 30px 20px 0" />
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
      viverra, leo sit amet auctor fermentum, risus lorem posuere
      tortor, in accumsan purus magna imperdiet sem.
    </p>
    <p>
      Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
      facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
      nibh metus, faucibus quis, semper ut, dignissim id, diam.
    </p>
  </div>

  <div>
    <p>
      Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
      molestie sed, tristique sit amet, blandit eu, turpis. Mauris
      hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
      molestie dui quam vitae dui.
    </p>
    <p>
      Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
      tortor. Maecenas id augue. Vivamus interdum nulla ac
      dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
      eget dui volutpat molestie.
    </p>
  </div>

  <div>
    <p>
      Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
      imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
      nisl. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus.
    </p>

    <p>
      In sed dolor. Etiam eget quam ac nibh pharetra
      adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
      mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
      nisi. Vivamus at enim. Integer semper imperdiet
      massa. Vestibulum nulla massa, pretium quis, porta id,
      vestibulum vitae, velit.
    </p>
  </div>
</div>

You see further I added a gradient file, an image and a css file. All sit at the moment in the root dir since I could not manage put them in proper folders and adress them via {$tpl_dir} or {$css_dir}.

 

right now I use the contentmodule and I got the feeling that things work here different.

 

PS:

The module is hooked into the footer.

 

 

In the attached screenshot who see how it looks as 'normal' html file with its own head and body sections...

 

The 2nd screen shows content of /js/jsquery in the root of our prestashop site.

There is a jquery*min.js and a jquery*UI*.js . Mhhh, are those already the libraries I need for my 'project'`?

 

post-402975-0-73053500-1394144802_thumb.png

post-402975-0-37051200-1394145022_thumb.png

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

Ok, I am at the point of no improvement. Even good music does not help and sunshine...

 

Since I hat no success putting pure html/JS code into ContentBox's html editor I

edited header.tpl:

<!--  jquery tabbed content box -->
<!-- include the Tools -->
<script  type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
{literal}
<script type="text/javascript">
  $(function() {
  $("ul.skin2").tabs("div.skin2 > div");
  });
</script>
{/literal}

But

the html does not work with the js :(

 

Content of ContentBox (which should work the same as htmlbox, right?):

<ul class="css-tabs skin2">
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Second tab</a></li>
  <li><a href="#">A ultra long third tab</a></li>
</ul>

<div class="css-panes skin2">
  <div>
    <img src="eye192.png" alt="Flying screens"
         style="float:left;margin:0 30px 20px 0" />
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
      viverra, leo sit amet auctor fermentum, risus lorem posuere
      tortor, in accumsan purus magna imperdiet sem.
    </p>
    <p>
      Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
      facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
      nibh metus, faucibus quis, semper ut, dignissim id, diam.
    </p>
  </div>

  <div>
    <p>
      Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
      molestie sed, tristique sit amet, blandit eu, turpis. Mauris
      hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
      molestie dui quam vitae dui.
    </p>
    <p>
      Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
      tortor. Maecenas id augue. Vivamus interdum nulla ac
      dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
      eget dui volutpat molestie.
    </p>
  </div>

  <div>
    <p>
      Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
      imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
      nisl. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus.
    </p>

    <p>
      In sed dolor. Etiam eget quam ac nibh pharetra
      adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
      mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
      nisi. Vivamus at enim. Integer semper imperdiet
      massa. Vestibulum nulla massa, pretium quis, porta id,
      vestibulum vitae, velit.
    </p>
  </div>
</div>

If I enter the script into the box right under the html code (as the java tab tutorials say) it does not work either.

...
HTML..
{literal}
<script type="text/javascript">
  $(function() {
  $("ul.skin2").tabs("div.skin2 > div");
  });
</script>
{/literal}

Please, provide me the info to get this working.

 

thanks alot.

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

Yes, nothing more willing to do than that :)

 

Please have a look:

http://jquerytools.org/demos/tabs/index.html

 

There is the basic setup/skeleton: Minimal setup for tabs

And the more CSSyfied one: 4 different skins with CSS

 

PS:

I would be very happy if you could try with contentbox but if that does not work ofcourse your HTMLbox(pro) would be fine, too!

You helped so much and therefore buying a module would be the least!

 

best regards

Boris

Share this post


Link to post
Share on other sites

take a look: 

http://demo.mypresta.eu/en/

(bottom part of homepage)

 

i added this code (i used html box free)

<link rel="stylesheet" href="http://jquerytools.org/media/css/tabs.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="http://jquerytools.org/media/css/tabs-panes.css" type="text/css" media="screen" />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
<script type="text/javascript">
$(function() {
 $("ul.tabs").tabs("div.panes > div");
});
</script>

try on your own and let me know :)

  • Like 1

Share this post


Link to post
Share on other sites

I feel free to cite the public: "You are the man!" :)

 

I spent the last 2 hours to adapt my code but that did not work, however.

But yours works and so I am going to css that one. I hope I can get the tab length flexible since that

was a tiny issue.

 

I am so happy now and I have learned once again how important clean and proper code is.

Eg, there seems to be a difference in <script type="text/javascript"> & <script > ...

 

Thank you once again Vekia

 

PS:

I used your free HTMLbox in PS1.6x. It works! PS1.6 looks so great that I would like to migrate imediately!

PSS:

It seems there is an issue with the newest Htmlbox and PS1.6x and tinymceditor. At least I could not activate it...

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

im working on it, 

in fact i've got 1.4.9 version now (html box free) and it works there well, but im waiting for official release of 1.6 to test it once again

Share this post


Link to post
Share on other sites
  • 3 months later...

Puh,

 

sorry but I have to come back to this topic. I noticed that the given code above as all my derivations break the slider functionality (it's js part). This is the case in 1.5.6.2 and 1.6.0.6 vanilla slider. I am pretty sure it is related to conflicts of double loading javascript libs but I have absolutely no knowledge of this.

 

Vekia, could be please so patient to take another look?

 

 

 

I used your snipped with your great HTMLbox:

<link rel="stylesheet" href="http://jquerytools.org/media/css/tabs.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://jquerytools.org/media/css/tabs-panes.css" type="text/css" media="screen" />
<link rel="stylesheet" href="minimalsetup4tabs.css type=" text/css " media="screen ">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js " type="text/javascript "></script>

<ul class="tabs ">
  <li>
  <a href="# ">blabla1|blabla1blabla1</a>
  </li>
  <li>
  <a href="# ">blabla1</a>
  </li>
  <li>
  <a href="# ">blabla1 s blabla1</a>
  </li>
  <li>
  <a href="# ">blabla1</a>
  </li>
</ul>
<!-- <ul class="tabs "> <ul> <li><a href="#tabs-1 ">Bio-Spielzeug | Öko-Spielzeug</a> </li> <li><a href="#tabs-2 ">Gutes Spielzeug</a> </li> <li><a href="#tabs-3 ">Schadstofffreies Spielzeug</a> </li> <li><a href="#tabs-4 ">Waldorf-Spielzeug</a> </li> </ul> -->
<div class="panes">
  <div id="tabs-1">
    <p>tabs-1 ILorem ipsum aliquid harum ex deserunt amet, explicabo. Et quas est cupidatat necessitatibus animi, optio, quas reprehenderit recusandae. Enim et iure qui esse ea ex quo deleniti ipsa, et explicabo. Proident, sit laudantium, ut non sit, mollit temporibus dolores esse, ut est dolores blanditiis sed tempore, nihil eligendi molestiae voluptates eos eius fugit, voluptas repudiandae sit ut tenetur omnis eveniet.</p>
  </div>
  <div id="tabs-2">
    <p> tabs-2 Lorem ipsum aliquid harum ex deserunt amet, explicabo. Et quas est cupidatat necessitatibus animi, optio, quas reprehenderit recusandae. Enim et iure qui esse ea ex quo deleniti ipsa, et explicabo. Proident, sit laudantium, ut non sit, mollit temporibus dolores esse, ut est dolores blanditiis sed tempore, nihil eligendi molestiae voluptates eos eius fugit, voluptas repudiandae sit ut tenetur omnis eveniet.</p>
  </div>
  <div id="tabs-3">
    <p><p>tabs-3 Lorem ipsum aliquid harum ex deserunt amet, explicabo. Et quas est cupidatat necessitatibus animi, optio, quas reprehenderit recusandae. Enim et iure qui esse ea ex quo deleniti ipsa, et explicabo. Proident, sit laudantium, ut non sit, mollit temporibus dolores esse, ut est dolores blanditiis sed tempore, nihil eligendi molestiae voluptates eos eius fugit, voluptas repudiandae sit ut tenetur omnis eveniet.</p>
  </div>
  <div id="tabs-4">
    <p>tabs-4 Lorem ipsum aliquid harum ex deserunt amet, explicabo. Et quas est cupidatat necessitatibus animi, optio, quas reprehenderit recusandae. Enim et iure qui esse ea ex quo deleniti ipsa, et explicabo. Proident, sit laudantium, ut non sit, mollit temporibus dolores esse, ut est dolores blanditiis sed tempore, nihil eligendi molestiae voluptates eos eius fugit, voluptas repudiandae sit ut tenetur omnis eveniet.</p>
  </div>
</div>
<!-- end panes -->
<script type="text/javascript "> $(function() { $("ul.tabs ").tabs("div.panes>div"); });</script>
<!---
  <script type="text/javascript">

  $(document).ready(function(){

          $(function() {
              $("#tabs").tabs({
                  event: "mouseover"
              });
          });

  });
</script>
--->

PS:

In the header.tpl I got:

{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
<script type="text/javascript" src="{$js_dir}imgSizer.js"></script>
<script type="text/javascript" src="{$js_dir}jQuery.equalHeights.js"></script>
<script type="text/javascript" src="{$js_dir}responsive.js"></script>



		{$HOOK_HEADER}



</head>

I post this since I found hints on the sequence how to load JS partially or full.

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

can you check what's going on when you remove this line:

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js " type="text/javascript "></script>

Share this post


Link to post
Share on other sites

Hi Vekia

 

sorry for not responding timely.

 

Your tip did not improve things. Actually all panes disappeared.

 

Fact is when the tab-panes are working as should then the slider I have (I am usre it is original Presta's) in our shop 1.5.6.2 does not work anymore. So I went ahead since I have to update our shop until thursday to modify my theme for 1.6.0.6. But to make sure thinks work properly I installed locally a vanilla Presta 1.6.0.6. Only module installed by me is yours (HtmlBox). I enter the given code from above and: BANG the Slider goes :)

 

There is a crucial issue with the JQuery stuff. I have absolutely no clue but would bet it is related to the sequence libs are loaded or that they do also 'overlap'. If that is the case it could help to load in HtmlBox only those parts that are needed for the scripts. But that is far beyond my knowledge. Perhaps it would also be better to load the scripts in the header.tpl?

I know, some people might say: No

This way the libs would be loaded each time a site is called. But since I want to place the tab-planes-box on the start page I think in 95% of all site calls people comce via startpage and the libs are then cached. Moreover, if things are running I think I could call the scripts via Google CDN and there is a change they are chached anyway?

 

If you do get to a solution without spending to much time on it I would come back to this on the weekend since I have to carry on with the update. Hower, it would be so great if you could help since I could embedd this tab box already. And as always if it is too time consumeous please send me a pm and I pay you on an hourly charge. If that is ok.

 

thanks alot

Share this post


Link to post
Share on other sites

Perhaps sometimes it does :) Seems to depend on whether it is cached or called somewhere else?

 

It is driving me crazy cause I got two live test domains and some local ones and sometime the code itsself works -

the tab-panes work- sometime the same code doesnt. But the slider JS functionality breaks always. What a pity.

 

I hoped it would be easier and I could get rid of the editorial.module and enhance it with your cool HtmlBox.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More