The secure CMS.

Welcome to Geeklog, Anonymous Sunday, December 22 2024 @ 01:49 am EST

Geeklog Forums

How to use jQuery in a static page

 New Topic  Post Reply
 06/15/11 04:53am (Read 2,467 times)  
Status: offline

::Ben

Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
Before geeklog 1.8.0 this code was working in a static page:
Text Formatted Code

<script type="text/javascript">
jQuery(function () {
    var tabContainers = jQuery('div.tabs > div');
   
    jQuery('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();
       
        jQuery('div.tabs ul.tabNavigation a').removeClass('selected');
        jQuery(this).addClass('selected');
       
        return false;
    }).filter(':first').click();
});
</script>

<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <!-- tab containers -->
  <div id="tab1">My content 1</div>
  <div id="tab2">My content 2</div>
  <div id="tab3">My content 3</div>
</div>
 

Now it doesn't. How can I solve this without php in my static page?

Ben
I'm available to customise your themes or plugins for your Geeklog CMS
 Quote
 06/15/11 05:37am  
Status: offline

Roccivic

Forum User
Moderator
Registered: 05/19/10
Posts: 136
JavaScript is now loaded in the footer, so your calls to jQuery fail because jQuery has not been included yet. The only way around this (that I know of) is to use the new $_SCRIPTS class from PHP to included your code.
 Quote
 06/15/11 08:01am  
Status: offline

::Ben

Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
ok so the code for this static page become:

Text Formatted Code
global $_SCRIPTS;

$js = "
jQuery(function () {
    var tabContainers = jQuery('div.tabs > div');
   
    jQuery('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();
       
        jQuery('div.tabs ul.tabNavigation a').removeClass('selected');
        jQuery(this).addClass('selected');
       
        return false;
    }).filter(':first').click();
});
";

$_SCRIPTS->setJavaScript($js, true);

$retval = '<div class="tabs">
  <ul class="tabNavigation">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1">My content 1</div>
  <div id="tab2">My content 2</div>
  <div id="tab3">My content 3</div>
</div>';

return $retval;


and you need to set PHP: execute php (return) for this static page.

Thanks,

Ben
I'm available to customise your themes or plugins for your Geeklog CMS
 Quote
 New Topic  Post Reply
All times are EST. The time is now 01:49 am.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content