2

Here: http://jsfiddle.net/sdleihssirhc/AYYQe/3/

There is a nice JavaScript code to ellipsize text when it’s too long. On hover, the text slide to the left, and show the hidden part. I’m struggling to make this script work in a view, to ellipsize and show hidden part from node titles. This is my View structure.

<div id="view">
<div class="thumb">[picture]<span class="thumb-overlay"></span></div>
<h2 id="tweet">[title]</h2>
</div></div>

this is the CSS I’m using:

#tweet, #tweet_js { border:1px solid red; width:25em; padding:.5em; }
#tweet_js { overflow:hidden; white-space:nowrap; }
.hiding { text-overflow:ellipsis; }

and this is the code:

var tweet = document.getElementById('tweet');
tweet.id = 'tweet_js';
tweet.className = 'hiding';

var slide_timer,
max = tweet.scrollWidth,
slide = function () {
    tweet.scrollLeft += 1;
    if (tweet.scrollLeft < max) {
        slide_timer = setTimeout(slide, 40);
    }
    };

tweet.onmouseover = tweet.onmouseout = function (e) {
e = e || window.event;
e = e.type === 'mouseover';
clearTimeout(slide_timer);
tweet.className = e ? '' : 'hiding';
if (e) {
    slide();
} else {
    tweet.scrollLeft = 0;
}
};

I added the JavaScript file in in the module's .info file using this :

scripts[] = script.js

but nothing is working, I have tested this JavaScript code in HTML page, and its working only when placed before the ending body tag.


(JavaScript and CSS are not mine, they were posted by sdleihssirhc as an answer to this question: https://stackoverflow.com/questions/4755593/css-jquery-powered-sideways-scrolling-text-on-hover )

1 Answer 1

1

There should be no direct errors if you got it working on a HTML page. I would suggest checking from the html source that your js file is actually loaded (if not clear the caches). Additionally try wrapping the javascript code inside

jQuery(document).ready(function() {
  //code here
});

or a possibly better option with Drupal 7:

Drupal.behaviors.exampleModule = {
  attach: function (context, settings) {
    // code here
  }
};

You might find additonal useful info about managing javaScript in Drupal 7 here.

2
  • Thank you Dooshta, It’s not that the file is not loaded, I can see it in the html source, but It seems that : 1- the slide effect doesn’t work in RTL. 2- In LEFT TO RIGHT mode. The effect is only working with one title. I have a View with more than 20 posts, all titles has the “tweet ID” but the (.hidden) class only apply to the first one.
    – Nizarnav
    Commented Feb 15, 2012 at 18:59
  • @Nizarnav The 'id' attribute must be unique on a given page so if you have 20 titles with the same 'id' on the same page it isn't working like you can see. You would have to use the 'class' attribute instead, but the script should then also be modified accordingly.
    – Madis
    Commented Feb 15, 2012 at 23:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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