Probleme to apply my new theme on drupal

Question

I tried to apply my new template in drupal but I can't do this with the animate content part.

First, I have created my template in a functional index.html and css... it works perfectly:

Example of menu:

<ul id="menu">
<li><a href="#page_2">about us</a></li>
<li><a href="#page_3">Products</a></li>
</ul>

When I click on one of these two links, content between article element displays:

<article id="page_X">

<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, ad<p>

</article>

through this Jquery animation:

    $(function(){$('#content').find('article').hide().css({width:'0',marginLeft:'0%',left:'50%'});

var act='#page_1';$('#page_1').show();$('a').click(function(){page=$(this).attr('href');

if(page.substr(page.indexOf('#'),6)=='#page_'){

$('#menu a, footer a').parent().removeClass('active');

$(this).parent().addClass('active');

$(act).animate({width:'0',marginLeft:'0%',left:'50%'},600,'easeInCirc',function(){

$('#content').find('article').css({display:'none'})

$(page).css({display:'block'}).animate({width:'100%',marginLeft:'0%',left:'0%'},600,'easeOutCirc',function(){act=page;});});return false;}})})

It works perfectly with a static content, but my problem is how can I do this with drupal dynamic content in page.tpl.php , using:

<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'menu'), 'heading' => t(''))); ?>

and

 <?php print render($page['content']); ?>

Please tell me if you need more details.

Thank you a lot!

Note: in bootstrap popup modal, we can do this with data-target, exemple :

<li><a class="" data-toggle="modal" **href="exemple."** **data-target="#page_2"**>Contact</a>

Answer 1

that's not much to go on, but basically, Drupal uses a "behaviors" system to attach jquery actions to content. This provides a framework to allow scripts to run when content is added after the $(document).ready would normally have fired ( after the initial page load )

This is so that scripts can be applied in a consistent fashion regardless of the source and timing of the addition of objects to the page ( AJAX and the like ).

You need to look into two things:

The first is JavaScript closures, and the second is attaching Drupal behaviors. an overview of these can be found here at https://drupal.org/node/171213

I'd suggest you first write a "hello world" Drupal behavior, and get it working, then work on your menu logic, as there is a significant learning curve when it comes to doing things "the drupal way"

To start you off, you can create a js file that runs something like this:

(function ($, Drupal, window, document, undefined) {

    Drupal.behaviors.helloWorldHandlers = {

        attach: function( context, settings ) {
            $("ul#menu").once("hello-world-handler", function() {
                $(this).click( function () { alert("hello world"); } )
            }
        }
    }

})(jQuery, Drupal, this, this.document);

( I think I got that right )

Adding the file to your theme .info file is an easy way to get it in and running. a line to your theme's info file that runs something like this should do it:

scripts[] = js/helloworld_behavior.js

your theme's .info file is located in the root of your theme's folder structure, with a name like mythemename.info

Once you've got that working, you can worry about the rest. I'm sure you'll develop a normal love/hate relationship with your new cms.