/    Sign up×
Community /Pin to ProfileBookmark

Array based css replace script failing

I’ve been running into some trouble with a script that just isn’t working, and since I’m not encountering any error messages and a similar script on the same page is working just fine, I’m really puzzled.
Anyways, here’s the code I’m having trouble with:

[code]
function ShowHide(Numb){
Ident1 = AdIDList[Numb]+”Tx”;
Ident2 = AdIDList[Numb]+”Lnk”;
if (AdLink[Numb] == “hidden”){
document.getElementById(Ident1).style.height = “355px”;
AdLink[Numb] = “visible”;
}
if (AdLink[Numb] ==”visible”){
document.getElementById(Ident1).style.height = “55px”;
AdLink[Numb] = “hidden”;
}
}[/code]

And here’s the page code calling it (The page is assembled via PHP from a database, but I’m grabbing the code from my browser)

[code] <a href=”#Good ShepherdLnk” id=”Good ShepherdLnk” onclick=”ShowHide(2);return false;” class=”AdLink”>Stories</a><br>[/code]

And, here’s a similar bit of code on the same page that is working just as it’s supposed to.

[code] function hideimage(){
for (Count=0; Count<AdTotal; Count ++){
if (VisPic[Count]==”visible”){
Ident = AdIDList[Count]+”AdB”;
document.getElementById(Ident).style.visibility = “hidden”;
VisPic[Count]=”hidden”;
}
}
}

function bigimage(Item){
hideimage();
Ident1 = AdIDList[Item]+”AdB”;
document.getElementById(Ident1).style.left=”35%”;
document.getElementById(Ident1).style.visibility = “visible”;
VisPic[Item] = “visible”;
}
[/code]

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@007JulienJan 26.2012 — They are not many var in your code or functions... Is the AdIDList[] array define ?
Copy linkTweet thisAlerts:
@B-NavigatorauthorJan 26.2012 — They are not many var in your code or functions... Is the AdIDList[] array define ?[/QUOTE]

Yes, it was in the database, and here's what PHP output:
[CODE]<script type="text/javascript">
var AdIDList = new Array("Saratoga National", "Adirondack Trust", "Good Shepherd", "Roohan", "Adirondack Tree");
var AdSize = new Array("5", "4", "4", "3", "3");
var AdWidth = new Array("10", "6", "10", "5", "5");
var AdHeight = new Array("6", "8", "6", "6", "5");
var AdTotal =5;
</script>[/CODE]
Copy linkTweet thisAlerts:
@007JulienJan 26.2012 — There are spaces in your AdIDList values and ids which is probably the snag...

An id : must begin with a letter A-Z or a-z, can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_") W3cScholls.com.

Besides It would be better (and more security) to declare your Ident1, Ident2, Count, Ident, Ident1 as local variables in your different functions
Copy linkTweet thisAlerts:
@B-NavigatorauthorJan 27.2012 — Ok, I've since decided to rewrite the function testing each iteration (After modifying the database to remove all spaces from any variables), and it turns out that the point where it falls apart is when I add the line to change the array value at that point:
[CODE] AdLink[Numb] = "visible";[/CODE]
I'm not getting any error messages, so any thoughs on what might be going on, and any possible alternate ways of approaching this problem?
Copy linkTweet thisAlerts:
@007JulienJan 27.2012 — Your code seems pointlessly complicated. Why to create new variables while it is enough to use the DOM !

AdLink and VisPic arrays are useless it's enough to tests the DOM elements ! Besides, they must have been initialized. Work rather directly with the DOM objects. Use obj.offsetHeight (readonly) to get the height and obj.style.height=55+'px' to set it.

[CODE]function ShowHide(Numb){
var objTx = document.getElementById(AdIDList[Numb]+"Tx");
var objLnk = document.getElementById(AdIDList[Numb]+"Lnk");
if (objLnk.style.visibilty=='hidden'){objTx.style.height = "355px";
else objTx='55px';
}[/CODE]
See to this page about the cross browser function getStyle to get the style even if it was initialized with the CSS rather than an attribute.
Copy linkTweet thisAlerts:
@B-NavigatorauthorJan 28.2012 — Your code seems pointlessly complicated. Why to create new variables while it is enough to use the DOM !

AdLink and VisPic arrays are useless it's enough to tests the DOM elements ! Besides, they must have been initialized. Work rather directly with the DOM objects. Use obj.offsetHeight (readonly) to get the height and obj.style.height=55+'px' to set it.

[CODE]function ShowHide(Numb){
var objTx = document.getElementById(AdIDList[Numb]+"Tx");
var objLnk = document.getElementById(AdIDList[Numb]+"Lnk");
if (objLnk.style.visibilty=='hidden'){objTx.style.height = "355px";
else objTx='55px';
}[/CODE]
See to this page about the cross browser function getStyle to get the style even if it was initialized with the CSS rather than an attribute.[/QUOTE]

Good advice thanks. Ran into a few other issues while fixing things up, but afterward it works prety good - except that at first the switch wouldn't work on the first click, until I switched the if and else statements.
Copy linkTweet thisAlerts:
@007JulienJan 28.2012 — Try this to avoid this first click failure

[CODE]// According to PPK http://www.quirksmode.org/dom/getstyles.html
function getStyle(el,styleProp){
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}

// Your code
function ShowHide(Numb){
var objTx = document.getElementById(AdIDList[Numb]+"Tx");
var objLnk = document.getElementById(AdIDList[Numb]+"Lnk");
if (getStyle(objLnk,'visibilty')=='hidden'){objTx.style.height = "355px";
else objTx='55px';
}


[/CODE]
×

Success!

Help @B-Navigator 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 5.6,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...