0

What is wrong with this jQuery code and why can it not hide the span attribute?

jQuery(document).ready(function($){
    $('span.fieldset-legend').hide();
});

Heck, just trying to hide the entire span and it still does not work!

jQuery(document).ready(function($){
    $('span').hide();
});

If it helps, I am trying to hide a horizontal item in a horizontal group. enter image description here

I can confirm that my jQuery is generally working. For example, the below works fine

alert('test');

This also works fine

jQuery(document).ready(function($){
    $('p').hide();
});
Improve this question
  • Accidentally pressed downvote and now I can't change the vote until the question has been edited :( – Beebee Apr 19 '13 at 8:13
1

Just a wild guess but

jQuery(document).ready(function($){
  $('span.fieldset-legend').hide();
  console.log('Hidden the spans');
});

Try the above code and see if "Hidden the spans" gets output on your javascript console. If it does, then the module you're using (Horizontal Groups? or whatever) is tampering with the spans and perhaps showing them after your code has run and hidden them.

Improve this answer
  • I think you might be onto something with the Fieldgroups module getting priority and "locking" my other jquery modifcations. I am still struggling with this and I am afraid I might need to hack the JS file in the module to get what I want it to do, unless you know of a way to override the Fieldgroup's module's JS? – user785179 Apr 18 '13 at 23:28
  • Now I see that the Fieldgroups module is definitely blocking the modifications I want to make to it. So, I have just went ahead and modified the Fieldgroups horizontal-tabs.js file. I hate "hacking" the module's source file, but this is what I need to do to get the job done. :( – user785179 Apr 18 '13 at 23:44
  • You can create a patch file, it's perfectly acceptable as long as you remember to update the patch/reapply after you update the module. Or you can try modifying the weight of your javascript file so that it runs after the fieldgroups js. – Beebee Apr 19 '13 at 8:14
0

I have tried your code on my Drupal 7 website and it hides all my spans perfectly (display:none). Did you add the spans using jQuery? For example with wrapInner()? If you did check wheter the code is executed before you hide() it. You can also try trouble shooting your selector with a function that always works: addClass('foo'). If the spans receive the classes you can rule out a wrong jQuery selector...

Improve this answer
  • The span tags were added by Drupal itself. jQuery is having no problems hiding id or class attributes. Problem is that Drupal is not smart enough to give the span tags an id or class attribute. Any other ideas? – user785179 Oct 9 '12 at 18:00
0

You can give every SPAN-element a unique ID with jQuery and adress them individually with CSS:

$(document).ready(function(){      
    var nth = 0;
    $('body span').each(function(){
        nth = nth + 1;
        $(this).attr('id','span-'+nth);
    });        
});
Improve this answer
  • This line in your code is not working: $(this).attr('id','span-'+nth). It is not adding the 'id' attribute and setting it. Any ideas why it is not working? I can confirm that jQuery is finding all the $('body span'). – user785179 Oct 10 '12 at 23:42
  • Remove the first and last line if you paste this code into jQuery. I've checked again and it works for any element. Simply replace span with p, a, div, ... It numbers all elements. – Jan Werkhoven Oct 11 '12 at 18:36
  • I removed the first and last line, as you suggested, but it still is not working. It recognizes all the 'a' and 'span' tags, but is unable to add the attribute. My page is not adding the "id" attribute and giving it unique values like span-1, span-2, etc... Are you directly testing in Drupal 7, or just straight out HTML? – user785179 Oct 11 '12 at 20:45
  • I have tested this code in the script.js file of a subtheme of Zen in Drupal 7. The code works on blank HTML websites aswell. Could you troubleshoot by adding the line "console.log('-span-'+nth);" right below "nth = 0" and another right below "nth = nth +1". Then open the console (CTRL+SHIFT+J in Chrome) to see the output. If you are not getting "span-1, span-2, span-3, ..." then your jQuery is not working properly... Let me know. – Jan Werkhoven Oct 12 '12 at 22:16
  • 2
    instead of nth you can simply use the counter provided by $.each(): $('body span').each(function(i){ $(this).attr('id','span-'+i); });. If you're getting $ errors then you can use jQuery instead of $, or use one of the no-conflict methods, simplest is to use jQuery(function($){}); instead of $(document).ready(function(){}); – Beebee Feb 8 '13 at 10:15

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.