call14

I have some interactive flash content on the webpages. And javascript is used to hide or show i.e., obj.style.display = "block" or "none" based certain condition and controlled by move next or move previous buttons.

So, My problem is when flash interaction is made, and then if i move to another q [ie., hiding this] and then come back, it resets itself to initial position. I mean moving to another q with flash content half (or something) interacted and then come back to the same (showing again), the flash CONTENT DISPLAY IT IN DEFAULT START CONITION - in firefox. In IE, it shows where I left and I am able to continue further. I CANNOT use obj.style.visibility = "hidden" or "visible"; WHICH IF USED WORKS FINE!! - UNFORTUNATELY DUE TO OTHER ISSUES, WE HAVE TO USE style.display.

Any idea how i can fix? Thanks in adv.

karl

spinal007

Try this css:
position:absolute; left:-9999px;


That way you're not hiding the object, just accidentally moving it out of view and gives the same effect as display:none.

__________________
Diego - Web-Developer & London SEO Expert
jQuery Plugins: Multiple File Upload, Star Rating, FCKEditor | NEW: XML to JSON

call14

Thank you very much for your reply. However, using position:absolute; left:-9999px; had the side effect of generating vert & horiz scroll bar.

Actually this scrolbar appearance is the reason we could use obj.style.visibility in the earlier instance.

May be this additional piece of info might help you (& others) to understand more about my problem.

Basically, I will be presented with list of q&a - which I need to display one after another at the top when next button is clicked, whose position again veries between different templates. As you might have guess, using straight away obj.style.visibility will result in 2nd, 3rd and so q&a one below another, as if all questions are displayed. But adding position:absolute; with obj.style.visibility resulted in somewhat what we wanted, expect, it started creating scrolbars in all q&a - happens when if any 1 qxq is bigger than the browsing page. That apart, we had some other issues.... and so finally come back to obj.style.display.

So, may be you could advice some fix with this in mind? Tnx in adv.

spinal007

how about height:0px (and maybe add overflow:hidden)?

__________________
Diego - Web-Developer & London SEO Expert
jQuery Plugins: Multiple File Upload, Star Rating, FCKEditor | NEW: XML to JSON

call14

No, that is not possible, since if you go back to the same question (previous button), then it needs to be re-stated back to its default height, which is unknown and can vary between q's.

May be this extra info might be of use?

The output html looks something like (skeleton only)

<div class="qm_XX" id="1">
<div class="qm_QA_CONTENT">1st Q essay: <textarea class="qm_TEXT_essay" onClick="javascript:return scp_getCursorPosition(this);" value="" cols="70" rows="30" name="answer_ESSAY_2_1"></textarea></div>
</div>

<div class="qm_XX" id="2">
<div class="qm_QA_CONTENT">2nd Q Flash: <someflash/></div>
</div>

and then using javascript, user browse q's one by one in both direction (next or previous button). The button click is linked the following code

Question.prototype.show = function () {
this.getContent().style.display = "block";
//this.getContent().style.position = "absolute"; //yesterdays try
//this.getContent().style.left="20px";

if(hideSubmitButtonCondition == 1 && hideSubmitButton == true) {
checkAllQuestionVisited(this.seqNumber)
}
}
Question.prototype.hide = function () {
this.getContent().style.display = "none";
//this.getContent().style.position = "absolute";
//this.getContent().style.left="99990px";
}

which is been invoked thro like
aElements[iCurrentQuestion].show()
aElements[iCurrentQuestion].hide()

where all q <div>'s are stored in the aElements array. Tnx.

spinal007

I'm assuming this.getContent() refers to the qm_QA_CONTENT div inside each FAQ.

So far we know that the animation will reset if you 1. hide/show it and 2. resize it.
But this should not happen if you resize the div that contains the animation.

I've Google'd around but cannot find anyone with a similar problem (and solution).
Can you upload this somewhere so I can try to tweak it?

__________________
Diego - Web-Developer & London SEO Expert
jQuery Plugins: Multiple File Upload, Star Rating, FCKEditor | NEW: XML to JSON

call14

Sorry for my delayed resp - the site was down . Ok. I will workout a sample content, get permission and then update you with the link - possibly monday or tuesday, so that you can have a look.

If you want it to be emailed, pls let me know your id and do so.

Thanks in adv

AndrewFelix

What's the reason why you can't use "obj.style.visibility = "hidden" or "visible";"? Perhaps that problem is easier to resolve.

spinal007

The browser resets the animation if you hide/show it.

__________________
Diego - Web-Developer & London SEO Expert
jQuery Plugins: Multiple File Upload, Star Rating, FCKEditor | NEW: XML to JSON

call14

On > What's the reason why you can't use "obj.style.visibility = "hidden" or "visible";"? Perhaps that problem is easier to resolve."

Actually it solves the problem that I mention (in conjuction with CSS to specify questions always appear on top), but we cannot use DUE to various other problems. Just to mention 2
- It affects few special javascript based question types (main reason)
- Also, even if any one question is big (exceeding page height), the the scroll bar will appear for all questions.

Note: I have worked out my trimmed html/js code. However, just waiting for permission to put relevant flash content. I will update shortly. Thanks anyway.

call14

Sorry for the delay. Pls find the the sample code herewith. PLS LET ME KNOW POSSIBLE SOLUTIONS.

Just to re-cap, the main issue is:
1. If you check Q2 (which is a flash content) & use 'pause' - go to another q and come back, the flash restarts from from the initial position in FIREFOX. But in IE, it retain the position and we want to retain that property.

2. We avaoid using style.visibility due to other issues and hence ideally tring to find solution using style.display

3. Another new one we found (not a problem) with this flash is that, in IE it start running when the page is loaded, while in Firefox, it runs only if you are in Q2 [and this is preferred], which i think in a way connected with point 1 behaviour.

The trimmed code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" ><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">



// Functions used for QxQ

var iNumQuestions = 0;
var iCurrentQuestion = 0;
var aQuestions = new Array();

// hide a question
function hideQuestion(qNumber) {
aQuestions[qNumber].style.display = "none";
}

// show a question
function showQuestion(qNumber) {
aQuestions[qNumber].style.display = "block";
}


// on page load,
function loadQXQ() {

var aDivs = document.getElementsByTagName("DIV");

for (iDiv = 0; iDiv < aDivs.length; iDiv++) {
if (aDivs.item(iDiv).className == "qm_QUESTION") {
aQuestions[iNumQuestions] = aDivs.item(iDiv);
if (iNumQuestions == 0) {
showQuestion(iNumQuestions);
} else {
hideQuestion(iNumQuestions);
}

iNumQuestions++;
}
}
}


function onNextButton() {
if (iCurrentQuestion < 2)
{
hideQuestion(iCurrentQuestion);
iCurrentQuestion++;
showQuestion(iCurrentQuestion);
}
}


function onPreviousButton() {
if (iCurrentQuestion > 0)
{
hideQuestion(iCurrentQuestion);
iCurrentQuestion--;
showQuestion(iCurrentQuestion);
}
}
</script>

</head>
<body id="qm_QUESTION" onload="loadQXQ();">
<form name="QUESTION" autocomplete="off">

<div class="qm_QXQPAGE" id="qm_QXQPAGE_ID">
<div class="qm_QUESTION" id="1">

1 of 3 - FIRST question: <input type="radio" qNum="1" name="LKS_1" value="1"> - Strongly Agree <br/>
</div>


<div class="qm_QUESTION" id="2">

<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,40,0"
WIDTH="700" HEIGHT="500" id="http://www.questionmark.com/us/Learn...n_overview.swf">
<PARAM NAME=movie VALUE="http://www.questionmark.com/us/Learn...n_overview.swf">
<PARAM NAME=quality VALUE=high>
<EMBED src="http://www.questionmark.com/us/Learn...n_overview.swf" quality=high WIDTH="700" HEIGHT="500"
NAME="http://www.questionmark.com/us/Learn...n_overview.swf" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

</div>

<div class="qm_QUESTION" id="3">
3 of 3 - LAST question: <input type="radio" value="1"> - Strongly Agree <br/>
</div>

</div>

<input type="button" class="qm_QXQBUTTON" id="qm_PREV" onClick="onPreviousButton();" value="&lt; Previous Question" alt="&lt; Previous Question" title="&lt; Previous Question"></div>
<input type="button" class="qm_QXQBUTTON" id="qm_NEXT" onClick="onNextButton();" value="Next Question &gt;" alt="Next Question &gt;" title="Next Question &gt;">

</form>
</body>
</html>

spinal007

Ok, got the code, setup a test page on my localhost and tried it out.
Sorry, I just can't make it work. I really don't see a solution for this so I I can say is that I think you should put the whole thing in flash, or re-think the design.

__________________
Diego - Web-Developer & London SEO Expert
jQuery Plugins: Multiple File Upload, Star Rating, FCKEditor | NEW: XML to JSON

AndrewFelix

I think Spinal's right. There doesn't seem to be any reason why the whole thing shouldn't be done in flash. If you want to retain bookmarking and back/foward functionality within flash, then you should look at using swfaddress: http://www.asual.com/swfaddress/
In case you're worried about scripting in flash, don't be. It's amost identical to JS.

Let me know if you need help with swfaddress.

call14

Thanks for the feedback. I think you both are right. We are changing out code - adding

if(IE) {

} else {

}

and tweaking few ohter bits. Thanks anyway for the help.