53284

Use javascript to hide element based on ALT TAG only?

Question:

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>

Answer1:

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: <a href="http://jsbin.com/ixitut/2/edit" rel="nofollow">http://jsbin.com/ixitut/2/edit</a>

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(/**/)

<a href="https://developer.mozilla.org/en/DOM/element.getElementsByTagName" rel="nofollow">https://developer.mozilla.org/en/DOM/element.getElementsByTagName</a>

Answer2:

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'; }

<a href="http://jsfiddle.net/heera/yGzhh/1/" rel="nofollow"><strong>DEMO</strong></a>.

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'; }

<a href="http://jsfiddle.net/heera/yGzhh/2/" rel="nofollow"><strong>DEMO</strong></a>.

<strong>Update:</strong>

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 }

Answer3:

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

Using <a href="https://developer.mozilla.org/en/DOM/element.getAttribute" rel="nofollow">.getAttribute()</a> 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"; } }

Recommend

  • MySQL multiple IN conditions to subquery with same table
  • Is it possible to get the word under the mouse cursor in a ``?
  • BeautifulSoup difference between findAll and findChildren
  • NHibernate manually control fetching
  • git add error : “fatal : malloc, out of memory”
  • cordova is not defined - cordova.js has already been loaded :: Ionic
  • jQuery: add elements until a particular height is reached
  • How to make JSON.NET deserialize to Microsoft Date Time?
  • Combining two different ActiveRecord collections into one
  • D3 get axis values on zoom event
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • Adjust width of select element according to selected option's width
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • How do I get HTML corresponding to current DOM tree?
  • How to use carriage return with multiple line?
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • Extracting HTML between tags
  • Change multiple background-images with jQuery
  • Recording logins for password protected directories
  • Splitting given String into two variables - php
  • javaw.exe and eclipse startup problems
  • HTML download movie download link
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Check if a string to interpolate provides expected placeholders
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • Web-crawler for facebook in python
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?