Jump to content

Collapsable DIVS


Jumpy09

Recommended Posts

I'm working with a Script which Collapses Divs!  The website which I found the code can be found: HERE!

 

I've only edited a few things, which is:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/javascript/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
animatedcollapse.addDiv('personalsettings', 'fade=1')
animatedcollapse.addDiv('sitesettings', 'fade=1')
animatedcollapse.addDiv('privacy', 'fade=1')
animatedcollapse.addDiv('themes', 'fade=1')
animatedcollapse.addDiv('myinfo', 'fade=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

 

All but info are not being used, I needed to add them for when I actually use them.

 

echo '		   <th class="t r b l" colspan="2" align="center">My Information<a href="javascript:animatedcollapse.toggle(\'myinfo\')"><img src="themes/carbon/images/menu/p7PM_dark_south.gif" border="0" /></a>';

echo '<div width="100%" id="myinfo" style="display:none">';

 

The problem is:  It works perfectly find with my Google Chrome, but when testing it on Firefox and IE8 it doesn't like to work.  I'm collapsing the DIV from the beginning using CSS, I know Mozilla and IE8 have issues with some CSS things.  Could it be a CSS issue?  The inline style is all I am using.

 

I'm using <!DOCTYPE HTML> which is HTML 5, I plan on changing it when I go to Validate my website in both HTML and CSS, unless they have HTML 5 Validation.

 

I had tried HTML 4.0 Traditional, which came up with the same results.

 

So, why does it work on the website they coded it in.. but not so much for my site in either Firefox nor IE8?  Google Chrome shows it perfectly.

 

NOTE:  I have a style I code in.  I code basic, then alter it to standards required by Validation.  It's quicker for me to do so, which explains the inline style and the align="center" being in the <td>. 

 

The information contained in the div is a Form, which allows a user to update their profile.  I don't feel this is an issue, if you need the .js information.. it can be found on their website.

 

Thanks for any help, hopefully I can get this resolved!  I have attached examples of what it is suppose to do, and what the IE/Firefox looks like.

 

[attachment deleted by admin]

Link to comment
Share on other sites

Found a possible Culprit using FireBug.

 

It's saying :: jQuery is not defined

[break on this error] Failed to load source for: http://mirk...ncludes/javascript/animatedcollapse.js

 

Since it isn't loading the animatedcollapse, it won't work.  I'm sure IE is causing the same issue.  :/  So I'm confused.

 

I'll try a few things, try to get it to define jQuery.

 

 

It's in this code, which FireBug is saying it is!

uninit:function(){
177 var opendivids='', groupswithpersist=''
178 jQuery.each(this.divholders, function(){  //Saying it isn't defined HERE!
179 if (this.$divref.css('display')!='none'){
180 opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
181 }
182 if (this.getAttr('group') && this.getAttr('persist'))
183 groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
184 })
185 opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
186 groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
187 this.setCookie('acopendivids', opendivids)
188 this.setCookie('acgroupswithpersist', groupswithpersist)
189}, 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.