Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

needlnerdz

macrumors regular
Original poster
Jun 10, 2006
174
0
switzerland
Soo.. I'm having fun rigging together crazy code for an online portfolio I'm building at the moment. One of those codes is a css/javascript hidden popupbox. That is working just fine.. within that box, I am using a random text-generator code, to display a series of messages for the viewers amusement. Well, I tested out placing hyperlinks into the text variables, and it worked!- only in safari... doh. For some reason the links do not work in firefox, of whom I should give a bit more concerned with, due to multiplatform use. Therefore- I'm curious if someone can figure out what I may be missing from the code, or what is set wrong, that safari can debug on the fly- but firefox gets hung up on.

The website is http://portfolio.pervertedvinyl.com (don't worry.. there are no google-ads or revenue devices)
- once there, it is the animated gif on the lower left. Click on it to review the bubble.. then clicking on the head a few times will rotate the quotes until you hit one that has a yellow colored link on it.

and the code is as follows:

function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = 'This is <br>pretty nifty, eh?';
Quotation[1] = 'Lets fill this with useful<br> information';
Quotation[2] = 'Useless knowledge<br> goes here';
Quotation[3] = 'You should check out<br>the <a href="p_sacklunch.html">print portfolio</a>';
Quotation[4] = '<a href="wow.html"> Care to buy a link? </a>';
Quotation[5] = 'Think of something <br>snappy...';
Quotation[6] = 'Did you know that...';

var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

setTimeout('rotateEvery('+click+')', sec*1000);
}

The actual use of the quote, is pulled from here: <br>(warning: I'm having this imported from an external javascript file, so its in document.writein format)

document.writeln('<a href="mailto:nomore@edited.com">');
document.writeln(' <div id="footer"><span class="foot">');
document.writeln(' copyright© 2007 ted davis | all rights reserved. </span>');
document.writeln(' </div></a>');
document.writeln(' <div id="animation">');
document.writeln(' <span style="position:relative;">');
document.writeln(' <a href="javascr'+'ipt:void(0);" onclick="HidePop(\'term1\');">');
document.writeln(' <span id="term1" class="popup">');
document.writeln(' <div id="textrotator"><!--Quotations will be displayed here--></div>');
document.writeln(' </span>');
document.writeln(' </a>');
document.writeln(' <a href="javascr'+'ipt:void(0);" onclick="ShowPop(\'term1\'); rotateEvery(1)">');
document.writeln(' <img src="images/face_ani_sm.gif"></a>');
document.writeln(' </div>');


Any help/advice would be most excellent.. I just can not figure out why firefox is snubbing me. Thanks in advance for anyones time!
 
i think you just need to use backslashes in front cause the docwrite sees the single quote and thinks its done? like so \'

i didn't try it tho.
 
Hmm.. I read something a few days ago (can not find it now) about using \ slashes in the javascript lang... I can not find that page anywhere.. I have tried placing the \ in various areas of the a href link.. where would you suggest I place it?
 
It's going to be a pain for me to download all your js, css and images to test, but giving it a guess, I would have to say it's your click event blocking off the <a href> tag. Try giving this a test.

change this part:
document.writeln(' <a href="javascr'+'ipt:void(0);" onclick="HidePop(\'term1\');">');
document.writeln(' <span id="term1" class="popup">');
document.writeln(' <div id="textrotator"><!--Quotations will be displayed here--></div>');
document.writeln(' </span>');
document.writeln(' </a>');

to

//document.writeln(' <a href="javascr'+'ipt:void(0);" onclick="HidePop(\'term1\');">');
document.writeln(' <span id="term1" class="popup">');
document.writeln(' <div id="textrotator"><!--Quotations will be displayed here--></div>');
document.writeln(' </span>');
//document.writeln(' </a>');

I'm just guessing, I would give it a test myself, but there's quite a few js/css/images to download.

Hmm.. I read something a few days ago (can not find it now) about using \ slashes in the javascript lang... I can not find that page anywhere.. I have tried placing the \ in various areas of the a href link.. where would you suggest I place it?
backslashes error will normally cause your script to halt and generate a runtime error. I don't think it's this problem
 
It's going to be a pain for me to download all your js, css and images to test, but giving it a guess...

BRAVO! That was a good guess without downloading my many source files to test it. At first, while testing locally.. there was an opposite effect! The links would not work in Safari, yet they would work in Firefox.. - I uploaded the files anyways to complain about that fact.. tested it out remotely in both browsers.. both worked! Thank you so much Angelneo.

I stared at the code for a minute or two trying to find what had been modified.. until finally noticing the // bars.

Cheers.
 
:) That's good to hear, unfortunately, commenting those tag out would mean that you lose the ability to close the balloon. You may want to try setting a timeout for hiding the balloon, or introduce an extra image append to your message to do that.
 
:) You may want to try setting a timeout for hiding the balloon, or introduce an extra image append to your message to do that.

That is an excellent idea, as I just tested the site on another persons computer, using Firefox, and the clicking of the bubble did not close the bubble.. argh. Therefore using a timeout feature would be awesome- and take away the need of having the little X on it.. hmm.. Now to research using a timeout feature in javascript. I'm sure I can find it via google.. but if you know of the right place to look off hand, do please let me know. Thanks.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.