/    Sign up×
Community /Pin to ProfileBookmark

Sliding Layers effect gone dead in Firefox

Copy linkTweet thisAlerts:
Dec 30.2009

Hello,

I was really hoping someone might be able to help me with this please??? Ive been staring at it for ages, so I think I am just missing something stupid… Basically I have a sliding layer effect, which is supposed to slide downwards to reveal more content, it works fine in Internet Explorer, however its stopped working in Firefox, it still slides down, however it cuts off most of the content thats hidden under it… I would be really grateful if anyone could take a look and help me with it please? I think I have missed something silly because I have been working on it for a while, it was working when I was using tables, however I switched to layers as they lined up better and it stopped working after that…

The script is from [url]http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide[/url]

and an example of a page im using it on is
[url]http://www.findmethatphone.co.uk/SONY_ERICSSON/T-MOBILE/W595.html[/url]

Its supposed to work on the “Show all 25 Sony Ericsson W595 – Gold Pay Monthly Offers from ThePhoneSpot” it works ok on the smaller one “Show all 2 Sony Ericsson W595- Gold Pay Monthly Offers from CPW”

I really hope someone could take a look for me please??? I dont know if it might have too many layers within the hidden layer part and it doesnt know the offsetheight to increase it to??? but it does work on IE

Thank you ?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@LetmeinauthorJan 01.2010 — This is the Javascript for the for Sliding effect

[CODE]
var dhtmlgoodies_slideSpeed = 120; // Higher value = faster
var dhtmlgoodies_timer = 5; // Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + "";
var numericId = inputId.replace(/[^0-9]/g,"");
var answerDiv = document.getElementById("dhtmlgoodies_a" + numericId);

objectIdToSlideDown = false;

if(!answerDiv.style.display || answerDiv.style.display=="none"){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{

answerDiv.style.display="block";
answerDiv.style.visibility = "visible";

slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}

function slideContent(inputId,direction)
{
var obj =document.getElementById("dhtmlgoodies_a" + inputId);
var contentObj = document.getElementById("dhtmlgoodies_ac" + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + "px";
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + "px";
if(rerunFunction){
setTimeout("slideContent(" + inputId + "," + direction + ")",dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display="none";
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById("dhtmlgoodies_a" + objectIdToSlideDown).style.display="block";
document.getElementById("dhtmlgoodies_a" + objectIdToSlideDown).style.visibility="visible";
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}



function initShowHideDivs()
{
var divs = document.getElementsByTagName("DIV");
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=="dhtmlgoodies_question"){
divs[no].onclick = showHideContent;
divs[no].id = "dhtmlgoodies_q"+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!="DIV"){
answer = answer.nextSibling;
}
answer.id = "dhtmlgoodies_a"+divCounter;
contentDiv = answer.getElementsByTagName("DIV")[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + "px";
contentDiv.className="dhtmlgoodies_answer_content";
contentDiv.id = "dhtmlgoodies_ac" + divCounter;
answer.style.display="none";
answer.style.height="1px";
divCounter++;
}
}
}
window.onload = initShowHideDivs;

[/CODE]

and this is an example of some of the content... There are quite a lot of other divs within the answer div, which I think is causing the problem, im not too sure, the other problem it seems to be having is, after the display of one offer, adding a <br> or even a hundred <br>'s doesnt do anything in Firefox, however it does in IE...

Happy new year everyone ?
Copy linkTweet thisAlerts:
@LetmeinauthorJan 02.2010 — I fixed it, ?

It wouldnt work whilst there where divs containing float:left; within the answer div, if I removed those it worked however the layers wouldnt line up properly, so inserted the divs into a table and left the float: left; in and it worked ?

Thank you
×

Success!

Help @Letmein spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...