22nd March, 12:07
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:
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!
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!