0

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?

| improve this question | | | | |
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

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.

| improve this answer | | | | |
  • I used all the solutions told in this link and this link. but none of them worked for passing variables to .js file – shekoufeh Jul 4 '15 at 11:09
  • Could you get the correct value of $set of titles in the block? – M a m a D Jul 4 '15 at 12:17
  • when I print it with php it is correct but when I want to show its value with alert in js it is not. I mean the alert is empty – shekoufeh Jul 5 '15 at 3:39
  • I updated my answer and let you know how to pass php variable to javascript – M a m a D Jul 5 '15 at 6:10
  • thanks. your answer was really helpful. I use your advises with a bit of changes and creativity and finally it worked. – shekoufeh Jul 5 '15 at 10:17
1

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>
| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.