[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I make the alt tag go away with my jQuery plug in with IE 6, 7, and 8 (compatibility view)?

Posted on 2010-01-05
4
Medium Priority
?
607 Views
Last Modified: 2012-05-08
I am having one minor issue with my image map that I have used a jQuery plugin called qTip to create.  Whenever I hover on a area in the map they appear fine in FF3.5, Chrome, Safari, and IE8.  However when in IE 6,7, and compatibility view in 8 the alt tags want to appear by themselves along with the jQuery qtip.  The alt tags contain the content for the qTip plugin for each area on the map.  I have tried using:

$(element).qtip().removeAttr('title'); .. as I found in another post on their forum but with title replaced with alt but no dice.  I may be placing it in the wrong spot within the script though.  

The map can be found at map.waterwaycovenc.com

Thanks in advance,
Chase


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="light/fancybox/jquery.fancybox-1.2.6.js"></script> 
<link rel="stylesheet" href="light/fancybox/jquery.fancybox-1.2.6.css" type="text/css" media="screen">


......... LOTS OF HTML FOR IMAGE MAP

<script type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
    $('area').qtip({
        api: {
            onShow: function() {
                $("a").fancybox(); 
            }
        },
        content: $(this).attr('alt'),
        position: {
            corner: {
            target: 'mouse'            
            },
         adjust: {
            mouse: true,
            screen: true
         }
        },

        // Use the ALT attribute of the area map
        style: {
            name: 'light', 
            border: {width: 0, radius: 4, color:'#464d0b'},
            textAlign: 'center',
            width: 380
        },
        hide: {
            when: 'mouseout',
            fixed: true,
            delay: 500
        }
    });

});
</script>
</div>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>

Open in new window

0
Comment
Question by:jdroger2
  • 2
4 Comments
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26183455
Rather than
$(element).qtip().removeAttr('alt');, try
$(element).removeAttr('alt')

Never used qtip before, so if this doesn't work, I have no idea.
0
 
LVL 2

Expert Comment

by:HaloWebProjects
ID: 26279145
or inside the options setting are of your qtip code change this

content: $(this).attr('alt'),

to

content: $(this).attr('rel'),


and instead of alt tag use rel, this will remove the alt tag alltogether and will make qtip use the rel attribute content instead....
0
 
LVL 1

Author Comment

by:jdroger2
ID: 26283870
@HaloWebProjects .. using the 'rel' tag does not render properly.  I do not believe rel is capable of taking normal character data and being able to reproduce it.  

I am successfully removing the 'alt' tag at this point using the new code shown below ..

However the 'alt' tag does not go away until after the qtip is rendered which really doesn't solve my issues.  Is there a way to render all of the qtips and then remove the alt tags before my image map is shown?
$('area').qtip({
        api: {
          onRender: function(){
               this.elements.target.removeAttr('alt');
            },
            onShow: function() {
                $("a").fancybox(); 
            }
        },
        content: $(this).attr('alt'),
        position: {
            corner: {
            target: 'mouse'            
            },
         adjust: {
            mouse: true,
            screen: true
         }
        },
      show: { when: 'click'},
        hide: {
            when: 'mouseout',
            fixed: true,
            delay: 500
        },
        // Use the ALT attribute of the area map
        style: {
            name: 'light', 
            border: {width: 0, radius: 4, color:'#464d0b'},
            textAlign: 'center',
            width: 380
        }
    });

Open in new window

0
 
LVL 1

Accepted Solution

by:
jdroger2 earned 0 total points
ID: 26303441
Solved ... see code below.


$('area').each(function(){
   $(this).qtip({
        api: {
            onShow: function() {
                $("a").fancybox(); 
            }
        },
        content: $(this).attr('alt'),
        position: {
            corner: {
            target: 'mouse'            
            },
         adjust: {
            mouse: true,
            screen: true
         }
        },
      show: { when: 'click'},
        hide: {
            when: 'mouseout',
            fixed: true,
            delay: 500
        },
        // Use the ALT attribute of the area map
        style: {
            name: 'light', 
            border: {width: 0, radius: 4, color:'#464d0b'},
            textAlign: 'center',
            width: 380
        }
    })
    .removeAttr('alt');
});

Open in new window

0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question