The secure CMS.

Welcome to Geeklog, Anonymous Saturday, May 04 2024 @ 05:54 am EDT

Geeklog Forums

How to use jQuery in a static page

 New Topic  Post Reply
 06/15/11 04:53am (Read 2,375 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 EDT. The time is now 05:54 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