How to animate set of titles of a View using JQuery

Question

There is a View of latest news title linked to the node page and I need to display them like this Effect.

I've trying to do it by creating a new template file for my views named:

views-view-list--latest-news--block.tpl.php

and this is the code I was trying to set to work:

<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
    <div class="type-wrap">
        <span id="typed" style="white-space:pre;"></span> //this is where it shoul be typed...
     </div>

  <?php print $list_type_suffix; ?>
<?php print $wrapper_suffix; ?>
<?php
$setOfTitles = "";
foreach($rows as $id=>$row) 
     $setoftitles.="'".$row."'".",";
$setoftitles = rtrim($setoftitles , ','); // to remove the last `,`
print_r ($setoftitles); // and it says I have all of you node titles
?>
<?php print_r($setOfTitles); ?>
    <script type="text/javascript">
    var stitles = "<?php $setoftitles;?>"; </script>
    <script type="text/javascript">
    alert(stitles); //but its alerts is empty (means variable is not passed to js) 
    $(function(){
        ;
        $("#typed").typed({
            strings: [stitles],
            typeSpeed: 30,
            backDelay: 500,
            loop: false,
            contentType: 'html', // or text
            // defaults to false for infinite loop
            loopCount: false,
            callback: function(){ foo(); },
            resetCallback: function() { newTyped(); }
        });

        $(".reset").click(function(){
            $("#typed").typed('reset');
        });

    });

    function newTyped(){ /* A new typed object */ }

    function foo(){ console.log("Callback"); }

    </script>

but it is not a true answer!! because my alert in js is empty and means I couldn't pass variable form php to js. Where is the problem? and how can I solve it? or is there a better way to do it?

Answer 1

Salam :). You need no new Views display type. Create a view of the latest news called it lnews and display it in a block, suppose it's machine name is block_0. select the titles as the Fields. You have to use PHP code inside that block (enable PHP Filter module). Use this code

 <div class="type-wrap">
        <span id="typed" style="white-space:pre;"></span>
</div>
<?php
$views = views_get_view("lnews");
$views->set_display('block_0');
$views->execute();

Now to get the titles use this code (to get the accurate code use kpr($views))

$setOfTitles = "";
foreach($views->result as $view) 
     $setOfTitles .= $view->node_title."*";
$setOfTitles = rtrim($setOfTitles , "*"); // to remove the last `*`

So far you created a string of all of the titles which they are separated by a * sign. There is one more step left, Send this variable to a .JS file that contains

$(function(){

    $("#typed").typed({
        strings: [HERE IS YOUR STRING],
        typeSpeed: 30,
        backDelay: 500,
        loop: false,
        contentType: "html", 
        loopCount: false,
        callback: function(){ foo(); },
        resetCallback: function() { newTyped(); }
    });

    $(".reset").click(function(){
        $("#typed").typed('reset');
    });
});

code, then explode the string to an array and send it to the strings object.

To send $setOfTitles variable from the above block to the JS file here is a few tutorials

• How to pass values from php to javascript properly?
• How to send variable from .php file to .js file in Drupal 7?
• How to pass a PHP variable to javascript in Drupal 7

Now I assume you have successfully sent the variable to .JS file, call it's name var titles. use split() function to convert the string in to an array. Now this code should work:

var array_of_titles= titles.split("*"); 
$(function(){
    $("#typed").typed({
        strings: [array_of_titles],
        typeSpeed: 30,
        backDelay: 500,
        loop: false,
        contentType: "html", 
        loopCount: false,
        callback: function(){ foo(); },
        resetCallback: function() { newTyped(); }
    });

    $(".reset").click(function(){
        $("#typed").typed('reset');
    });
});

This solution wont link the titles to the node page. The

foreach($views->result as $view){ 
     $setOfTitles .= $view->node_title."*";
     $setOFNIDs .= $view->nid."*";
}

creates list of node IDs. You can also pass the node IDs to the JS file and with some js processing link the titles to the /node/nid.

For example in the JS file instead of creating array of title create array of <a href="/node/nid">TITLE</a>

---

UPDATE:

Sounds you had problem with sending the $setOfTitles variable to the javascript file. Use the following method:

In the PHP code I gave you above add this code

drupal_add_js(array('variableName' => $setOfTitles), 'setting');
drupal_add_js(path_to_theme().'/js/js.js');

Create a file in /js directory of your theme folder and rename it to js.js and in the js.js use this code

(function($, Drupal){
  Drupal.behaviors.backgroundAnimation = {
    attach: function(context, settings) {
      alert(Drupal.settings.variableName);
      alert(Drupal.settings.basePath);
    }
  };
})(jQuery, Drupal);

I tested this solution and it successfully alerted the variableName and basePath. So just insert the rest of the Javascript code I gave you above in the (function($, Drupal) function.

Answer 2

thanks to @Drupalist helpes I could do it and it was the code I use to do it:

<?php
$views = views_get_view("latest_news");
$views->set_display('block_0');
$views->execute();
$setOfTitles = "";
foreach($views->result as $view) 
     $setOfTitles.= $view->node_title.",";
$setOfTitles = rtrim($setOfTitles , ","); // to remove the last `,`
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="sites/all/themes/mycorolla/scripts/typed.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var $stitles="<?php print $setOfTitles; ?>"; </script> 
<script type="text/javascript" language="javascript">

var $test=$stitles.split(","); 
$(function(){
    $("#typed").typed({
        strings: $test,
        typeSpeed: 30,
        backDelay: 500,
        loop: false,
        contentType: "html", 
        loopCount: false,
        callback: function(){ foo(); },
        resetCallback: function() { newTyped(); }
    });

    $(".reset").click(function(){
        $("#typed").typed('reset');
    });
});
 </script>
 <div class="type-wrap">
<span id="typed" style="white-space:pre;"></span>
</div>