SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Accordion Error

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accordion Error

    Hi

    I have an accordion on my website whih works ok but not perfect

    See Here: http://www.togganet.co.uk/huddersfie...-district.html down the page to the left hand side named Tables/Fixtures/Results

    1 - My accordion is 3 tabs. When I click the furthest right one it moves below the rest and doesn't come back. How do I stop this?

    2 - Between my league tables is a huge gap, how do I change this (each league table is a separate div). How do I remove this huge gap?

    Example HTML:
    HTML Code:
     <div id="accordion2">
        <ul>
            <li>
                <h1>Fixtures</h1>
                <div>
                    <span>
     
             <h4>Premier Division</h4>
    
    <p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '195196557'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    </p>		 
    
           <h4>Division 1</h4>
    
    <p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '195196557'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    </p>
    	
    		
                    </span>
                </div>
            </li>
            <li>
                <h1>Tables</h1>
                <div>
                                    <span>
     
             <h4>Premier Division</h4>
    		  
    <div id="lrep716502288" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=481650819">click here for Premier Division</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '716502288'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>		  
    
           <h4>Division 1</h4>
    		  
    <div id="lrep313940496" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '313940496'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
     
    		
                    </span>
                </div>
            </li>
            <li>
                <h1>Results</h1>
                                <span>
     
             <h4>Premier Division</h4>
    		  
    <div id="lrep245446854" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=481650819">click here for Premier Division</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '245446854'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>		  
    
           <h4>Division 1</h4>
    		  
    <div id="lrep737249595" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '737249595'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    		  
    	
    		
                    </span>
    CSS:
    Code:
    /*##VERTICAL ACCORDION##*/
    .accordion-ver>ul , .accordion-hor>ul{
      margin: 0 auto;
      padding: 0;
      list-style:none;
    } 
    .accordion-ver>ul>li {
      display:block;
      margin: 0;
      list-style:none;
      clear: left;
      position: relative;
      width: 600px;
      border-bottom:#f0f0f0 1px solid;
      background:#cccccc;
      *margin-bottom: -4px; /* IE6 e IE7 */
    }
    .accordion-ver>ul>li:hover {
      cursor:pointer;
    }
    .accordion-ver>ul>li.last {
      border: 0;
    }  
    .accordion-ver>ul>li>h1 {
      position: absolute;
      display:block;
      float:left;
      margin: 0;
      padding: 0 0 0 10px;
      top: 0;
      left: 0;
      font-size: 15px;
      font-family: Helvetica, Arial, sans-serif;
      text-decoration:none;
      text-transform:uppercase;
      color: #000;
    }
    .accordion-ver>ul>li>h1:hover {
      cursor:pointer;
    } 
    .accordion-ver>ul>li>div {
      display:none;
      background: #666;
      overflow: hidden;
      font-family: Helvetica, Arial, sans-serif;
    }
    .accordion-ver:hover>ul>li:hover>div {
      cursor: default;
    } 
    .accordion-ver>ul>li>div>span {
      padding:10px;
      display: block;
      text-align: left !important;
      line-height: normal;
    }
    .accordion-ver>ul>li>span.numericTab {
      position: absolute;
      display:block;
      top: 0;
      padding: 0 10px 0 0;
      float:right;
      margin: 0;
      right: 0;
      font-size: 15px;
      font-family: Helvetica, Arial, sans-serif;
      text-decoration:none;
      color: #000;
      background:#cccccc;  
    }
    .accordion-ver>ul>li>i {
      position: absolute;
      display:block;
      top: 0;
      right: 0;
      padding: 0 10px 0 0;
      float:right;
      margin: 0;
      font-size: 18px;
      text-decoration:none;
      color: #000;
    }
    Tiny bit of Javascript too
    Code:
    </div>   <!-- End of Accordion2 Div -->
        <script src="jquery-1.8.2.min.js"></script>
        <script src="jquery.accordion.js"></script>
        <script>    
        $("#accordion2").awsAccordion({
        type:"horizontal",
        cssAttrsVer:{
            ulWidth:"responsive",
            liHeight:50
        },
        cssAttrsHor:{
            ulWidth:"responsive",
            liWidth:50,
            liHeight:1000
        },
        startSlide:2,
        openCloseHelper:{
            openIcon:"ok-circle",
            closeIcon:"ok-sign"
        },
        openOnebyOne:true,
        classTab:"active",
        slideOn:"click"
    })
        </script>
          </section>

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have I rambled here

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I need to explain further I will

    Would REALLY appreciate some help if anybody knows please?

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hi,
    1 - My accordion is 3 tabs. When I click the furthest right one it moves below the rest and doesn't come back. How do I stop this?
    Well it looks like the div (lrep-blahblah) doesn't see the bar in the way. You have position settings like left: 40px but those don't mean anything to the browser because the div is not positioned (position: relative or position: absolute). You'll find you can set "left" to something ginormous like 500px but it won't move the box. But try a margin-left. That *will* move the box. margin-left: 45px moves the box just far enough away in my browser. I don't know how this accordion works though so I dunno if that means you'll have to change other margins too.

    I suspect the original accordion code set positioning on those divs somewhere, if it also had the left: stuff. Also, you can see the white text part actually *is* on top of the div correctly, it's just hard to see because the grey background isn't behind it. So it's just a matter of pushing that div away from the left.

    2 - Between my league tables is a huge gap, how do I change this (each league table is a separate div). How do I remove this huge gap?
    It's actually not a gap. Give those divs with id="lrep-blahblah" a fugly background colour and you'll see they're just that tall. You have an explicit height:500px set in your css... I think you can just remove that, or if you needed height somewhere, change it to min-height and set it to something smaller so your tables get closer together.

    You're also likely being hit with a lot of HTML errors, because some of the code is not nice.
    Probably not causing your current problem(s) but you never know what a browser might do with invalid HTML. Don't do this
    Code:
     <span>
     
             <h4>Premier Division</h4><p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '195196557'
    </script><script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    </p>		 
    <h4>Division 1</h4><p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '195196557'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    </p>
    	
                    </span>
    spans are inline elements, which means trying to stuff a block element (like a div, p, h1, h4) inside isn't allowed. If you need a box there, you can make it another div.

    or for example here, we do know what the browser will do here: close the p and leave a little gap:
    Code:
    //browser sees this
    <h4>Premier Division</h4><p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="blah">click here for Division One</a><br/><br/><a href="blah">FULL-TIME Home</a></div>
    
    //and will do this to "fix" it:
    <h4>Premier Division</h4>
    <p></p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="blah">click here for Division One</a><br/><br/><a href="blah">FULL-TIME Home</a></div>
    This is because you can't put blocks like divs inside p's, so the browser tries to close the p's first. But then the <p></p> leaves a little gap if you have margins, padding, or default line-height/font-size on your p's.

    You're loading a script of javascript after each div. Can you just load it once at the bottom of all the divs?

    I also happened to notice, maybe because I enlarge my fonts to read stuff, that the main title of the page wraps and gets lost:

    <div id="forumbanner"> <h9><a href="blah">CLICK HERE TO DISCUSS THIS LEAGUE ON OUR FORUM</a> </h9> </div>

    The last word "forum" wraps to the next line, but the next line is covered by the boxes with the League Bio in it. It might not be wrapping for you, but there are probably as many computers that think they need to wrap that text as not. Also there is not such tag as h9, they only go up to h6. I think "Huddersfield & District Association" would be a good h1, since that seems to be the "title" of the page, and I would just use a normal p for the CLICK HERE and use CSS to make it look all big, since I wouldn't call it a header.

    I can't see "Huddersfield" without thinking of that Maiden song "sheriff of huddersfield", sorry :P

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hi,

    Well it looks like the div (lrep-blahblah) doesn't see the bar in the way. You have position settings like left: 40px but those don't mean anything to the browser because the div is not positioned (position: relative or position: absolute). You'll find you can set "left" to something ginormous like 500px but it won't move the box. But try a margin-left. That *will* move the box. margin-left: 45px moves the box just far enough away in my browser. I don't know how this accordion works though so I dunno if that means you'll have to change other margins too.

    I suspect the original accordion code set positioning on those divs somewhere, if it also had the left: stuff. Also, you can see the white text part actually *is* on top of the div correctly, it's just hard to see because the grey background isn't behind it. So it's just a matter of pushing that div away from the left.


    It's actually not a gap. Give those divs with id="lrep-blahblah" a fugly background colour and you'll see they're just that tall. You have an explicit height:500px set in your css... I think you can just remove that, or if you needed height somewhere, change it to min-height and set it to something smaller so your tables get closer together.

    You're also likely being hit with a lot of HTML errors, because some of the code is not nice.
    Probably not causing your current problem(s) but you never know what a browser might do with invalid HTML. Don't do this
    Code:
     <span>
     
             <h4>Premier Division</h4><p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '195196557'
    </script><script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    </p>		 
    <h4>Division 1</h4><p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=403288927">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '195196557'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    </p>
    	
                    </span>
    spans are inline elements, which means trying to stuff a block element (like a div, p, h1, h4) inside isn't allowed. If you need a box there, you can make it another div.

    or for example here, we do know what the browser will do here: close the p and leave a little gap:
    Code:
    //browser sees this
    <h4>Premier Division</h4><p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="blah">click here for Division One</a><br/><br/><a href="blah">FULL-TIME Home</a></div>
    
    //and will do this to "fix" it:
    <h4>Premier Division</h4>
    <p></p>	   
    <div id="lrep195196557" style="width: 350px;">Data loading....<a href="blah">click here for Division One</a><br/><br/><a href="blah">FULL-TIME Home</a></div>
    This is because you can't put blocks like divs inside p's, so the browser tries to close the p's first. But then the <p></p> leaves a little gap if you have margins, padding, or default line-height/font-size on your p's.

    You're loading a script of javascript after each div. Can you just load it once at the bottom of all the divs?

    I also happened to notice, maybe because I enlarge my fonts to read stuff, that the main title of the page wraps and gets lost:

    <div id="forumbanner"> <h9><a href="blah">CLICK HERE TO DISCUSS THIS LEAGUE ON OUR FORUM</a> </h9> </div>

    The last word "forum" wraps to the next line, but the next line is covered by the boxes with the League Bio in it. It might not be wrapping for you, but there are probably as many computers that think they need to wrap that text as not. Also there is not such tag as h9, they only go up to h6. I think "Huddersfield & District Association" would be a good h1, since that seems to be the "title" of the page, and I would just use a normal p for the CLICK HERE and use CSS to make it look all big, since I wouldn't call it a header.

    I can't see "Huddersfield" without thinking of that Maiden song "sheriff of huddersfield", sorry :P
    Wow what a fantastic post! I'll have a good read this evening when I'm back from the office

    I really appreciate our time!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •