1

I have an problem to get my jQuery code working with D7. In HTML it works fine but with D7 it doesn't work at all...

the code:

(function ($) {

Drupal.behaviors.exampleModule = {
attach: function(context, settings) {                           

    var thumbstart = $("ul li img");        

    for (var i = 0, ii = thumbstart.length; i < ii; i++){
        if (thumbstart[i].title && thumbstart[i].title.length > 0)
        {           
            var imgtitle = thumbstart[i].title;     
            $(thumbstart[i]).wrap('<div class="wrapper" />').               
            after('<div class=\'inner\'><span class=\'caption\'>' + imgtitle + '</span></div>').
            removeAttr('title');

        }                   
    };
// At here the code works fine...
$('.wrapper').find('img').css({opacity: ".8"}); 
$('.teaser').find('.caption').css({top:"107px"}); 
$('.test2').find('.caption').css({top:"165px"}); 

$('.teaser').hover(
    function(){
        $(this).find('img').animate({opacity: "1.0"}, 300);     
        $(this).find('.caption').animate({top:"160px"}, 300);               
    }, 
    function(){
        $(this).find('img').animate({opacity: ".8"}, 300);  
        $(this).find('.caption').animate({top:"107px"}, 300);           
    }       
    );  


}
};

})(jQuery);

the problem is that the top of part is not working (begins at: var thumbstart...) is there anything that I can do? Does D7 need extra library/modules?

  • Does browser throws any script error ? like $ is undefined etc ? – niksmac May 30 '12 at 10:42
  • no errors from firebug...other jQuery extensions like "scroll to top" works...i am using the latest jQuery 1.7.2 – Jim May 30 '12 at 10:51
  • What method have you used to replace the jQuery version included with Drupal, with version 1.7.2? There are a lot of known problems with trying to use 1.7 in Drupal 7. – Clive May 30 '12 at 10:54
  • i write it in the themename.info the jQuery integration scripts[] = js/jquery-1.7.2.min.js scripts[] = js/effects.js i also test it with jquery-1.3.1 but the same :( – Jim May 30 '12 at 10:59
2

Far from needing extra libraries, Drupal needs less libraries then you're giving it.

Drupal 7 ships with jQuery 1.4, and can be updated to 1.5.2 with the jQuery Update module. Updating to v1.7 is not really feasible at the moment (see How do I update jQuery to the latest version I can download?, and search the site for 'latest jquery' for more information on that).

Even if the core/contrib Drupal JS worked well with v1.7, you can't just add it to the page and expect it to work, it will conflict with the core jQuery libraries added by Drupal (see jQuery.noConflict() for background).

That said, I can't see anything in your code that would necessitate using jQuery 1.7, so just remove the erroneous line from your .info file, clear the caches, and move on :)

To address the problems with your code now that the correct jQuery files are being included:

Your JS looks like this:

if (thumbstart[i].title && thumbstart[i].title.length > 0)

So the wrapper won't be added unless the <img> has a title. If you look at the source code of http://icon-guideline.fanlobby.net/ you'll see that the markup is as such:

<ul><li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/Android.png" /></a></li>
<li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/iPhone.png" /></a></li>
<li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/WindowsPhone.png" /></a></li>
<li>
    <a href="http://icon-guideline.fanlobby.net/design-kriterien"><img alt="" src="/sites/default/files/images/BlackBerry.png" /></a></li>

As you can see, there's no title on any of the images, so your JS condition will never resolve to true, and the wrapper will never be added.

| improve this answer | |
  • thanks for response. I removed the scripts[] = js/jquery-1.7.2...line from my .info file cleared all caches and installed the jQuery update module for 1.5.2 but even the same nothing has changed :( – Jim May 30 '12 at 11:47
  • if you have an drupal test installation test it and you will see :/ this is correct code what standard HTML makes...: <ul> <li><a href="#"><div class="wrapper"><img src="example.png" style="opacity: 0.8;"><div class="inner"><span class="caption" style="top: 107px;">Example</span></div></div></a></li> </ul> and this is what drupal makes...: <ul><li> <a href="#"><img src="example.png" alt="" style="opacity: 0.8;"></a></li> <li> – Jim May 30 '12 at 11:48
  • I'm afraid I haven't got time to set that up, are you able to share a link to the site in action? – Clive May 30 '12 at 11:52
  • yes...icon-guideline.fanlobby.net scroll down to "Guidelines" and click on any phone picture with firebug to see the incorrect code that drupal makes... – Jim May 30 '12 at 11:57
  • thanks. This happens if you looking 4-5 hours on your own code ;) I forgot to setup the title with the wysiwyg editor in drupal... – Jim May 30 '12 at 12:36

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.