...

View Full Version : my own accord script



Phil Jackson
09-28-2009, 07:29 PM
Howdy do. I have the following code which, all works apart from setting height when clicked on. error: object is indefined

anyonw know where im going wrong?



// JavaScript Document
// Created by ACT WEb Designs
// http://www.actwebdesigns.co.uk
//
//<div id="reportWrapper">
// <div class="dropDiv">
// <p><a class="open">open me</a></p>
// <p> blablabla blablabla</p>
// <p><a class="close">close me</a></p>
// </div>
// <div class="dropDiv">
// <p><a class="open">open me</a></p>
// <p> blablabla blablabla</p>
// <p><a class="close">close me</a></p>
// </div>
//</div>

function dropBox() {
function anchorReplace()
{
$("a[class=open]").each(function(i){
var anchorElement = $(this);
var newAnchorElement = $('<a href="#link' + i + '" class="' + anchorElement.attr('class') + '" name="#link' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
anchorElement.remove();
});
$("a[class=close]").each(function(i){
var anchorElement = $(this);
var newAnchorElement = $('<a href="#link2' + i + '" class="' + anchorElement.attr('class') + '" name="#link2' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
anchorElement.remove();
});
}
function giveDivName() //simply add name attribute to div element
{
$("div[class=dropDiv]").each(function(i){ //foreach div with class dropDiv
var divElement = $(this);
var newDivElement = $('<div class="dropDiv" name="div' + i + '">' + divElement.html() + '</div>').insertBefore(divElement);
divElement.remove();
});
}
function getOrigValues() //get the values before closing div
{
var boxInfo = []; //get original div height
$("div[class=dropDiv]").each(function(i){
var height = $(this).height(true);
var name = $(this).attr("name");
var obj = { boxHeight: height, boxName: name };
return boxInfo.push(obj);
});
$("div[class=dropDiv]").css("height", "27px"); //close all dropDiv's
}

anchorReplace();
giveDivName();
var boxInfo = getOrigValues();

$("#reportWrapper div").css("overflow", "hidden");
$("a[class=close]").bind("click", function(){
$(this).parents("div:eq(0)").animate({
height: '30px'
}, 1000);
});
$("a[class=open]").bind("click", function(){
var clicked = $(this);
$("a[class=open]").each(function(){
if( clicked.attr("name") !== $(this).attr("name") )
{
$(this).parents("div:eq(0)").animate({
height: '30px'
}, 1000);
}
else
{
var element = $(this);
function getNewHeight(element, boxInfo) // get the height for when clicked to open
{
var divName = element.parents("div:eq(0)").attr("name");
$.each(boxInfo,function(i,n) {
if( n.boxName == divName )
{
var newHeight = n.boxHeight;
}
});

}
getNewHeight(element, boxInfo);
clicked.parents("div:eq(0)").animate({
height: newHeight + 'px'
}, 1000);
}
});
});
}

Phil Jackson
09-28-2009, 08:20 PM
narrowed it down a bit:


var element = $(this);
var divName = element.parents("div:eq(0)").attr("name");
$.each(boxInfo,function(i,n) {
if( n.boxName == divName )
{
var newHeight = n.boxHeight;
}
});

clicked.parents("div:eq(0)").animate({
height: newHeight + 'px'
}, 1000);

Problem being "newHeight undefined". But if i do this:


var element = $(this);
var divName = element.parents("div:eq(0)").attr("name");
$.each(boxInfo,function(i,n) {
if( n.boxName == divName )
{
var newHeight = n.boxHeight;
alert(newHeight); // output being 230
}
});

clicked.parents("div:eq(0)").animate({
height: newHeight + 'px'
}, 1000);

it returns the height. How is it that 5 lines down the variable is undefined??

Phil Jackson
09-28-2009, 08:23 PM
sussed it



var element = $(this);
var divName = element.parents("div:eq(0)").attr("name");
$.each(boxInfo,function(i,n) {
if( n.boxName == divName )
{
var newHeight = n.boxHeight;
clicked.parents("div:eq(0)").animate({
height: newHeight + 'px'
}, 1000);
}
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum