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?

4
  • Does browser throws any script error ? like $ is undefined etc ?
    – niksmac
    May 30, 2012 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, 2012 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, 2012 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, 2012 at 10:59

1 Answer 1

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.

6
  • 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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 12:36

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.