craigsworks.com - Support Forum

Full Version: Tip will not work with IE
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I built a couple tips with a few modified values to dynamically get content and such and everything is working in Firefox. However in IE things are really broken.

Relevant codes:
JS Code
<ul id="pressroom">
  <li class="press" id="press1"><a href="press1.html">Xpand2 design NaturalServers.com</a></li>
  <li class="press" id="press2"><a href="press2.html">Brother Ali fansite in progress</a></li>
  <li class="press" id="press3"><a href="press3.html">Xpand2 makes XMann identity</a></li>
  <li class="press" id="press4"><a href="press4.html">Email newsletter for Savo AS</a></li>
  <li class="press" id="press5"><a href="press5.html">Human-Resource.no launched!</a></li>
</ul>


JS Code
$.fn.qtip.styles.xpand2 = {
   width: 400,
   padding: 0,
   color: '#5b5e6b',
   background: 'white',
   border: {
      width: 5,
      radius: 2,
      color: '#e2e2e2'
   },
   name: 'light',
   classes: { tooltip: 'qtip-xpand2' }
}
 
$('li.press').each(function() // Select all li elements with the "press" class
{
   $(this).qtip({
   content: {
   text: 'Loading...',
   url: $(this).find('a').attr('href'), // Retrieve the content of the attribute href of the elements' child a
   title: {
      text: $(this).find('a').text(), // Retrieve the content of the a element
      button: '<img o<strong></strong>nclick="return false;" src="img/close.png" alt="Close" />'
      }
   },
   show: { solo: true, when: { event: 'click' }, effect: { type: 'fade', length: 200 }, delay: 1 },
   hide: { when: { target: $(document.body).children().not( $(this) ), event: 'mousedown' }, effect: { type: 'fade', length: 200 } },
   position: {
      corner: {
         target: 'leftBottom',
    tooltip: 'rightTop'
    },
    adjust: { x: -2, y: -7 }
   },
   style: {
      tip: { corner: 'rightTop' },
   name: 'xpand2'
   }
   });
 
   $(this).find('a').click(function(event){
      event.preventDefault();         // Retrieve all "a" elements in li.press and prevent click
   });
 
   });


As you can see, I am getting the content from the href tag and placing it after url:. I also prevent the click from happening so I don't end up at press1.html when I click the link. None of these work in IE. I end up clicking the link like it's a normal link, and if I add onclick="return false;" to the link the tip still won't show up.

So, what can I do to make this stuff work in IE?

btw: I am no javascript coder. This has all been trial and error so there is probably many bugs in my code. I would really appreciate any help I could get. I am lost right now!
I have solved this problem at least partly. It seems that in IE I have to refer to the a element of the tip in question if it exists.

I was using:
$('li.press').qtip({

which IE did not accept, but it did accept:

$('li.press a').qtip({

which also meant that I could not use: $(this).find('a').attr('href')
but had to do: $(this).attr('href')

is there a bug that makes us unable to build a tip to another element than an 'a', if the 'a' element is inside the element in question Craig? Might be something to look into!
Reference URL's