CODEWITHSUNDEEP
javascript
user1424232
user1424232

Reputation: 117

Use javascript to hide element based on ALT TAG only?

I have a wordpress site, and a plugin uses cufon text replacement. (I'm not entirely sure the actual way it does this, but it's not important).

I'd like to use a "display:none" on only a specific word or two. For example, on the mobile theme, I'd like to change "Contact Us" to only "Contact". The only way to hide this on the fly is by using the alt tag since there is no class or ID.

So can I use JavaScript to detect the alt tag "Us" and do a display:none? Sample code below.

<cufon class="cufon cufon-canvas" alt="Us" style="width: 20px; height: 14px; "><canvas width="32" height="17" style="width: 32px; height: 17px; top: -2px; left: -2px; "></canvas><cufontext>Us</cufontext></cufon>

Upvotes: 0

Views: 1962

Answers (3)

Michael Berkowski
Michael Berkowski

Reputation: 270609

We assume you are talking about images, since that's the only place alt attributes are relevant.

Using .getAttribute() on all the cufon tags, you can match the string Us:

var cufons = document.getElementsByTagName("cufon");
// Loop over and look for the attr
var num = cufons.length;
for (var i=0; i<num; i++) {
  // If it has an alt attr and matches Us inside word boundaries...
  if (cufons[i].getAttribute('alt') && /\bUs\b/.test(cufons[i].getAttribute('alt'))) {
    // set to display:none
    cufons[i].style.display = "none";
  }
}

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

I think you need to change the text of an <a href="...">Contact Us</a> tag to Contact and to identify that link you need to use a flag and in that case I think you can use rel attribute, i.e. 

​<a href="#" rel="us">Contact Us</a>

and javascript to change Contact Us to Contact you can use the following code

​var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++)
{
    var rel=links[i].getAttribute('rel');
    if(rel && rel.match(/^us$/i)) links[i].innerHTML='Contact';
}

DEMO.

Alternatively without using any attribute you can just check the innerHTML of the a tag and if it contains Contact US then change it to Contact as follows

<a href="#">Contact Us</a>

and javascript to change Contact Us to Contact you can use the following code

var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++)
{
    var rel=links[i].innerHTML;
    if(rel && rel.match(/^Contact Us$/i)) links[i].innerHTML='Contact';
}

DEMO.

Update:

I think by default you can keep your link text as Contact instead of Contact Us and check if not in any mobile device (when in a desktop browser) then change the Contact to Contact Us using javascript, i.e.

var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); // May be these are not enough but only an example
if(!ismobile){
    // one of above code snippets
}

Upvotes: 0

travis
travis

Reputation: 8595

If you know the tag of element your searching for (I assume you have this information) you can look up all those tags in the document and check the alt attribute value. When you find the particular element you're searching for you can do what ever you please with it. In this example I changed the textContent property.

(function () {
  var li = document.getElementsByTagName('li');

  for ( var i = 0, length = li.length; i < length; i++ )
  {
    if ( li[i].getAttribute('alt') === 'two' ) 
      li[i].textContent = 'New Text';
  }

}).call(this);

Live: http://jsbin.com/ixitut/2/edit

You can also narrow the scope of this search by instead changing document to be a more specific tag.

var searchWithin = document.getElementById(/**/)
var tags = searchWithin.getElementsByTagName(/**/)

https://developer.mozilla.org/en/DOM/element.getElementsByTagName

Upvotes: 2

Related Questions