There is also a firebug issue that pops up with parsing size, no line is
mentioned, so I don't know where to point you, all I know is that the
size issue is somewhere in my php script? Could be an issue, could be
a non-issue I really can't tell you, if you want I can spit out the error
codes from the other two browsers I'm testing with which are Chrome
and Opera.
Here is the full JS of it so you can peruse it.
Code:
var isExtended = 0;
var width = 200;
var height = 480;
var slideDuration = 1000;
var opacityDuration = 1500;
function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');
}
}
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
$("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
$("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, { 'queue': false, 'duration': slideDuration }, "linear" );
}
function sideBarOpacity(from, to){
$("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear" );
}
$(function(){
// Document is ready
$('#sideBarTab').hover( function() { extendContract(); return false; });
});
And here is the full page it is being implemented in just incase....
it looks like $('#sideBarTab') is returning null, I stripped
js/prototype.js from my index.php and sidebar works, but
I get an insane amount of errors after its gone. Most
likely all the functions that are looking for commands
from prototype.....
edit / Errors thrown after prototype.js is removed
Code:
Prototype is not defined // Part of prototype
http://localhost/xampp/js/effects.js
Line: 147
Class is not defined // Part of prototype
http://localhost/xampp/js/accordion.js
Line: 19
Event.observe is not a function // Part of prototype
http://localhost/xampp/index.php#
Line: 42
$$ is undefined // Part of prototype
http://localhost/xampp/index.php#
Line: 254
handler is undefined // Part of JQuery
http://localhost/xampp/js/jquery.js
Line: 25
$("#sideBarTab").children().get(0).src is undefined //Sidebar still
http://localhost/xampp/js/sidebar.js
Line: 16
Perhaps a conflict between jQuery and Prototype? Both frameworks define a $() function, and Prototype's version can only take string and DOM nodes as arguments. I believe JQuery allows you to pass a function object, like you are doing, and have it attached to the DOMLoad event. Maybe the version of the $() you are using is that of Prototype and not JQuery?
It doesn't like my JQuery thats for sure....
I got things in "limp home mode" right now
after ALOT of tweaking, I back dated my
JQuery pack to 1.2.1 moved my proto js
files ontop of my jquery, and now I have
jquery working again, unfortunetly this
killed anything prototype driven....
Thanks toicontien, appreciate the hotlink, you've been helping me
out a lot lately, if you're ever in Seattle I'm buying you a beer, no
questions asked.
As long as we're on the subject of me owing you favours,
I was trying the other day to write a snippet into my sidebar.js
that would take the "current" height of submenucontentsinner
and constantly replace the value of my var height. Would you
mind helping a bit with that? I was seriously banging my head
long after work trying to figure it out, but never got the thing
working right.... The height of 480 was a max variable that I've
been having to deal with out of no other method to get my height
to shrink/grow as I accordion. And even though my accordions
broken right now (because i suck at jquery ) I should get it
working here in about an hour or so. Thanks for taking a look dude.
Code:
var isExtended = 0;
var width = 200;
var height = 480;
var slideDuration = 1000;
var opacityDuration = 1500;
function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');
}
}
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
$("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
$("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, { 'queue': false, 'duration': slideDuration }, "linear" );
}
function sideBarOpacity(from, to){
$("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear" );
}
$(function(){
// Document is ready
$('#sideBarTab').hover( function() { extendContract(); return false; });
});
Each DOM node has properties called scrollHeight and scrollWidth. This is the height and width of the content area of a DOM node. The clientHeight and clientWidth is the height and width of the visible portion of the content area. You want to expand to the scrollHeight and scrollWidth of the sideBarContents.
Code:
var isExtended = 0;
//var width = 200; <-- no longer needed
//var height = 480; <-- no longer needed
var slideDuration = 1000;
var opacityDuration = 1500;
function extendContract(){
if(isExtended == 0){
sideBarSlide(0, sideBarScrollHeight(), 1, sideBarScrollWidth());
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');
}
}
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
$("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
$("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, { 'queue': false, 'duration': slideDuration }, "linear" );
}
function sideBarOpacity(from, to){
$("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear" );
}
function sideBarScrollHeight() {
return $("siteBarContents").scrollHeight;
}
function sideBarScrollWidth() {
return $("siteBarContents").scrollWidth;
}
$(function(){
// Document is ready
$('#sideBarTab').hover( function() { extendContract(); return false; });
});
Its doing the same thing it did to me the other day, telling me height is no longer
defined. JQuery stores its variables in its () though right? Wouldn't I be able to do
something along the lines of ... ?
Code:
function sideBarScrollHeight(height) {
return $("siteBarContents").scrollHeight;
}
And I caught the error siteBarContents / rly sideBarContents
Didn't work either. This is what I think is happening, so bear
with me for a second. Up in the code height/width are registered as
variables so expected later on as....variables What I THINK is that
since no var height or var width is ever declared, or maybe appended
to(???) in the JQuery that follows that it pretty much freaks out. Is
there a way to declare height is/as a variable in the code .... just to
see what it does? I'll try to change sideBarScrollHeight() to height()
also just to see if I can get it to return a different value to me.
Code:
function sideBarScrollHeight() {
return $("siteBarContents").scrollHeight;
}
Here's the error it returned, I cleaned and marked it with bbcode so
it doesn't look like mouse sh*t gibberish like it did a minute ago....
long pause then this one threw.....
height is not defined
extendContract()sidebar.js (line 19)
(?)()()sidebar.js (line 48)
handleHover(mouseover clientX=231, clientY=252) ...cachedJSFile..... (line 1)
(?)()(mouseover clientX=231, clientY=252) ...cachedJSFile..... (line 1)
[Break on this error] sideBarSlide(height, 0, width, 1);
Reply With Quote
Originally Posted by toicontien
Excellent! I'll keep that in mind. A free beer in Seattle!
What I THINK is that
Bookmarks