0

I'm trying to add this ticker type to my site: http://cektkp.com/twittermarquee/.

I've created a new module to do so, and this is my module dir structure:

 module stocksTicker:
       1. stocksTicker.info
       2. js/
       3. images/
       4. stocksTicker.module

    js/:
       1. marqueeTicker.js

    images/:
       1.fade-trends2.png
       2.trendtip-pointer.gif

This is my stocksTicker.module file:

/**
 * Declare what blocks are provided
 * by this module.
 */
function stocksTicker_block_info() {
  $blocks['bseTicker'] = array(
    'info' => t('BSE'),
    'cache' => DRUPAL_NO_CACHE,
  );
  return $blocks;
}

/**
 * Return a rendered view of the block.
 */
function stocksTicker_block_view($delta) {
  $block = array();
  switch ($delta) {
    case 'bseTicker':
      $block = getBSETicker();
      break;
  }
  return $block;
}

/**
 * This function does the real work of getting
 * the stocks info and marking it up & produces
 * it in a renderable format.
 */
function getBSETicker() {
  $path = drupal_get_path('module', 'stocksTicker').'/js/marqueeTicker.js';
  $content = "<div id=\"header\"><div id=\"trends\"><div class=\"inner\"><ul class=\"trendscontent\"><li class=\"trend-label\">Trending topics</li>";
  $stockEntry = array("Stock1","Stock2","Stock3", "Stock4", "Stock5", "Stock6", "Stock7", "Stock8", "Stock9", "Stock10");
  foreach ($stockEntry as &$stock) {
       $content = $content . "<li><a href=\"search?q=". $stock. "\" class=\"search_link\" name=\"". $stock. "\" rel=\"nofollow\">" . $stock. "</a><em class=\"description\">This 
is description.</em></li>";
  }     

$content = $content . "</ul></div><span class=\"fade fade-left\">&nbsp;</span><span class=\"fade fade-right\">&nbsp;</span></div></div><div class=\"trendtip\"><div class=\"trendtip-content\"><div>Trending right now:</div><a class=\"trendtip-trend\"></a><div class=\"trendtip-why\">Why?<span class=\"trendtip-desc\"></span><span class=\"trendtip-source\">Source: <span>What the Trend?</span></span></div></div><div class=\"trendtip-pointer\">&nbsp;</div></div><script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">";

  $content = $content. "//<![CDATA[";
  $content = $content. "var page={};";
  $content = $content. "$(function() {";
  $content = $content. "new FrontPage().init();";
  $content = $content. "});";
  $content = $content. "//]]>";
  $content = $content. "</script>";
  $block['content'] = array('#markup' => $content,
                            '#attached' => array('js'  => array($path),),);'
  return $block;
}

When I try to view the changes, I do get the list and I do see the css working just fine but none of the jquery feature works (scrolling/ tooltip anything..) which is the main aim of this exercise. Please tell me how can I fix this.

I'm new to drupal so please excuse any silly mistake that I might have done.

2
  • One quick thing I noticed; you seen to be adding the JS file twice, once in the hook_block_view() implementation, and once again in the $content string below. It may be better, too, to add the JS to the block's '#attached' property. Jul 12, 2013 at 2:33
  • Updated it. But it's still not working. Jul 12, 2013 at 2:48

1 Answer 1

1

In your js file, you are depending on the $(document).ready(function () {} ); to initialize your jquery stuff, but your content is being added via ajax ( if I understand correctly ), so this code will never fire, as the document is already loaded at that point.

This is the reason behaviors have been implemented in drupal.

If you change this to initialize your code in a drupal attached behavior, like so:

(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.stockTicker = {
        attach: function( context, settings ) {
            page.trendDescriptions = {};
            loadTrendDescriptions();
        }
    }
})(jQuery, Drupal, this, this.document);

or something of the sort, that may fix your problem. You'll need to look into the once() function, to prevent the code from running every time any content is added to the page, but for now, try a behavior and see if you get js behavior

3
  • This has to be put in my .js file. correct? Jul 12, 2013 at 5:22
  • That's right. Your module's js should implement the behaviors.
    – Dom Day
    Jul 12, 2013 at 5:51
  • Ok, I fixed all the errors but it's still not working and is complaining: Uncaught TypeError: Object #<FrontPage> has no method 'init' investassure.co.in/:658 (anonymous function) investassure.co.in/:658 (anonymous function) jquery.min.js:19 n.extend.each jquery.min.js:12 n.extend.ready jquery.min.js:19 (anonymous function) Jul 12, 2013 at 23:10

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.