Need some help... related to Design

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

I need some JavaScript that would let me to Show/hide certain content... What I'm trying to do is an archive type thing... let's say I have the following list...
Code: [ Select ]
<ul class="archives">
    <li><a href="#">2008</a>
        <ul>
            <li><a href="#">January</a></li>
            <li><a href="#">Febuary</a></li>
            <li><a href="#">March</a></li>
            <li><a href="#">April</a></li>
            <li><a href="#">May</a></li>
            <li><a href="#">June</a></li>
            <li><a href="#">July</a></li>
            <li><a href="#">August</a></li>
            <li><a href="#">September</a></li>
            <li><a href="#">October</a></li>
            <li><a href="#">Novermber</a></li>
            <li><a href="#">December</a></li>
        </ul>
    </li>
    <li><a href="#">2009</a>
        <ul>
            <li><a href="#">January</a></li>
            <li><a href="#">Febuary</a></li>
            <li><a href="#">March</a></li>
            <li><a href="#">April</a></li>
        </ul>
    </li>
</ul>
  1. <ul class="archives">
  2.     <li><a href="#">2008</a>
  3.         <ul>
  4.             <li><a href="#">January</a></li>
  5.             <li><a href="#">Febuary</a></li>
  6.             <li><a href="#">March</a></li>
  7.             <li><a href="#">April</a></li>
  8.             <li><a href="#">May</a></li>
  9.             <li><a href="#">June</a></li>
  10.             <li><a href="#">July</a></li>
  11.             <li><a href="#">August</a></li>
  12.             <li><a href="#">September</a></li>
  13.             <li><a href="#">October</a></li>
  14.             <li><a href="#">Novermber</a></li>
  15.             <li><a href="#">December</a></li>
  16.         </ul>
  17.     </li>
  18.     <li><a href="#">2009</a>
  19.         <ul>
  20.             <li><a href="#">January</a></li>
  21.             <li><a href="#">Febuary</a></li>
  22.             <li><a href="#">March</a></li>
  23.             <li><a href="#">April</a></li>
  24.         </ul>
  25.     </li>
  26. </ul>

What I want to do is that at first, all of the months for the dates are collapsed... when a user clicks on a date, the months show... if a user clicks on another date, the months that are showing for the other year collapse and the months for the year the user chose the second time show...

I can't find a simple script anywhere that fits my need... Any help would be greatly appreciated.

Thanks.

[EDIT:] Nevermind, found this.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • effim
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Austin, TX

Post 3+ Months Ago

This should get you started on the right foot. It doesn't do everything, and it's certainly not complete, but it should give you enough of a hint and direction that you can get it completed on your own. If not, we're available for hire...

Using jQuery...

Code: [ Select ]
 
<script type="text/javascript" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){
    $('.year_li ul').hide();
    $('.year_li').click(function(){
        $(this).children('ul').slideDown('normal');
    });
});

</script>
 
  1.  
  2. <script type="text/javascript" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  3. <script type="text/javascript">
  4.  
  5. $(document).ready(function(){
  6.     $('.year_li ul').hide();
  7.     $('.year_li').click(function(){
  8.         $(this).children('ul').slideDown('normal');
  9.     });
  10. });
  11. </script>
  12.  


Simply tag your yearly li tags with the class 'year_li'.

PS: Untested. Should go fine, but if not, let me know.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

That didn't work... and if that works, that would be much better then the one I got from that site.

[EDIT:] Don't worry about it... I just figured out how to make that one work like I want it to.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Glad to see I'm not the only one who utilizes Google hosting of jQuery. There's a chance visitors will already have it loaded by the time they get to me afterall. :D

That structure can be targeted without any additional classes though since jQuery supports all of the awesome selectors in addition to what browsers support.
http://docs.jquery.com/Selectors

Code: [ Select ]
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">/*-*/</script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('.archives a:not(:last)').click(function(){
            $(this).next('ul').toggle(250);
            return false;
        });
        $('.archives ul').slideUp(0);
    });
    </script>
  1.     <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">/*-*/</script>
  2.     <script type="text/javascript">
  3.     $(document).ready(function () {
  4.         $('.archives a:not(:last)').click(function(){
  5.             $(this).next('ul').toggle(250);
  6.             return false;
  7.         });
  8.         $('.archives ul').slideUp(0);
  9.     });
  10.     </script>


BTW, it took me a good while to figure this one out since I just copied this line from the topic to test mine with. :lol:
Code: [ Select ]
<script type="text/javascript" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  • effim
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Austin, TX

Post 3+ Months Ago

joebert wrote:
Glad to see I'm not the only one who utilizes Google hosting of jQuery. There's a chance visitors will already have it loaded by the time they get to me afterall. :D

That structure can be targeted without any additional classes though since jQuery supports all of the awesome selectors in addition to what browsers support.
http://docs.jquery.com/Selectors

Code: [ Select ]
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">/*-*/</script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('.archives a:not(:last)').click(function(){
            $(this).next('ul').toggle(250);
            return false;
        });
        $('.archives ul').slideUp(0);
    });
    </script>
  1.     <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">/*-*/</script>
  2.     <script type="text/javascript">
  3.     $(document).ready(function () {
  4.         $('.archives a:not(:last)').click(function(){
  5.             $(this).next('ul').toggle(250);
  6.             return false;
  7.         });
  8.         $('.archives ul').slideUp(0);
  9.     });
  10.     </script>


BTW, it took me a good while to figure this one out since I just copied this line from the topic to test mine with. :lol:
Code: [ Select ]
<script type="text/javascript" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>


Whoops. Nice slip up there. I really wish Ozzu used a nice syntax highlighted JS editor. And what's with not supporting [php] tags anymore? Pshh. I digress.

Your solution is definitely more elegant than mine. I tend to avoid tricky selectors under the assumption that there's going to be a performance penalty (probably an erroneous assumption, though...I've never bothered to look behind the scenes).

Oh, and honestly I tend to shy away from using externally hosted code...even with Google. Most people don't visit googlecode.com, so there's a short delay for the DNS lookup. On top of that, I don't know when they might change the directory structure or remove the file. To a more paranoid degree, I'm worried Google will see what's up and want me to quit linking to a file if it gets hit with too much traffic. I work with some high traffic sites and I've had stranger issues with large companies and small files.

As far as the potential for a user having it cached...it's not too likely yet since very few websites actually link straight to it, unfortunately. Google has set about a 1-week expiration on the file, just as an added note. Should be sufficient if a few popular websites use that particular library from Google Code.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

There's a performance hit, I used to notice it real bad when I was using a sub-1Ghz system for awhile on JS-busy sites.
I'm not so sure that hit really matters too much when attaching event handlers in the beginning though. It's placing them within mousemove event handlers and the like where it ges ugly.

Quote:
I'm worried Google will see what's up and want me to quit linking to a file if it gets hit with too much traffic

I used to think about that too. But if they were worried about that happening I'm fairly sure they would be distributing archives instead of usable files. I get the impression they actually want people to use it. :)

Quote:
As far as the potential for a user having it cached...it's not too likely yet since very few websites actually link straight to it, unfortunately.

You understand my excitement. :)

Quote:
I really wish Ozzu used a nice syntax highlighted JS editor. And what's with not supporting [php] tags anymore? Pshh. I digress.


Yeah the code can get pretty quirky around here. Sometimes I wish we could all just attach files to threads so we can use our own editors and not have to scroll through long pages.
Once in awhile that "select all" gimmick has me selecting the text of the entire page.
  • effim
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Austin, TX

Post 3+ Months Ago

joebert wrote:
Yeah the code can get pretty quirky around here. Sometimes I wish we could all just attach files to threads so we can use our own editors and not have to scroll through long pages.
Once in awhile that "select all" gimmick has me selecting the text of the entire page.


That's why a lot of other websites keep the code in a div with a scroll bar in it. Makes life much easier. It's especially handy if the website is smart enough to give you a resize handle to expand the code box.

I can't stand file attachments on forums, personally. Scrolling is much easier than clicking and opening a file in a new tab or, even worse, app.

/threadjack
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Joebert's code worked almost perfectly... how do I make it so if one year opens, the other closes?
  • effim
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Austin, TX

Post 3+ Months Ago

Bogey wrote:
Joebert's code worked almost perfectly... how do I make it so if one year opens, the other closes?


It's a bit trickier to do that since you have several levels. It'd definitely feasible, but honestly, I'd recommend against it. It's not very good user-interface design in most cases.

If you want to do it smoothly, you're going to need to select just the objects that are currently shown (read: expanded) but are not an ancestor of the clicked element and 'toggle' them so they hide with animation. Then you can toggle the clicked element so it expands.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

This will only allow one to be open at a time, but I doubt I'm the only one who doesn't like this behavior.

Code: [ Select ]
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">/*-*/</script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('.archives a:not(:last)').click(function(){
            $('.archives ul.open').toggle(250, function(){
                $(this).removeClass('open');
            });
            $(this).next('ul:not(.open)').toggle(250, function(){
                $(this).addClass('open');
            });
            return false;
        });
        $('.archives ul').slideUp(0);
    });
    </script>
  1.     <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">/*-*/</script>
  2.     <script type="text/javascript">
  3.     $(document).ready(function () {
  4.         $('.archives a:not(:last)').click(function(){
  5.             $('.archives ul.open').toggle(250, function(){
  6.                 $(this).removeClass('open');
  7.             });
  8.             $(this).next('ul:not(.open)').toggle(250, function(){
  9.                 $(this).addClass('open');
  10.             });
  11.             return false;
  12.         });
  13.         $('.archives ul').slideUp(0);
  14.     });
  15.     </script>


I used to have something similar on my blog, but ended up just leaving the open/close functionality out of it when Analytics wasn't showing much activity on the archive links.
Most of the activity on my blog goes directly to the pages from search engines, the acrhive links are pretty much there for inbound links and the tiny percentage of people who use them.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Alright thanks... the reason for it is more on the design part then functionality.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Here is what I was working on... could I get some criticism on it? I know I've being asking a lot for these lately... it's just that while I'm waiting for someone to criticize my design for Wedevoy, I'm working on a side-project here (I started the project... creating something related to a CMS).

Thanks.
  • effim
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Austin, TX

Post 3+ Months Ago

Bogey wrote:
Here is what I was working on... could I get some criticism on it? I know I've being asking a lot for these lately... it's just that while I'm waiting for someone to criticize my design for Wedevoy, I'm working on a side-project here (I started the project... creating something related to a CMS).

Thanks.



You decide not to go with the jQuery after all?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Sorry for hopping off topic, but I didn't see an introduce thread & I wanted to say thanks to you effim for your contributions thus far. Always glad to see another face in the design/coding forums. I hope you'll hang around with us. Happy to have you. :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

UPSGuy wrote:
Sorry for hopping off topic, but I didn't see an introduce thread & I wanted to say thanks to you effim for your contributions thus far. Always glad to see another face in the design/coding forums. I hope you'll hang around with us. Happy to have you. :)

Way to take my thread off-topic.

effim wrote:
You decide not to go with the jQuery after all?

That's right... I changed back for two reasons... I forgot the first reason and the second reason because this one has more functionality... meaning it saves the condition of that menu to a cookie, so if a person opens a year and clicks on a month, then that year would be open on the next page.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Quote:
Way to take my thread off-topic.


You'll survive it :P
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

UPSGuy wrote:
Quote:
Way to take my thread off-topic.


You'll survive it :P

I just had a bad day today.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Bogey wrote:
UPSGuy wrote:
Sorry for hopping off topic, but I didn't see an introduce thread & I wanted to say thanks to you effim for your contributions thus far. Always glad to see another face in the design/coding forums. I hope you'll hang around with us. Happy to have you. :)

Way to take my thread off-topic.

effim wrote:
You decide not to go with the jQuery after all?

That's right... I changed back for two reasons... I forgot the first reason and the second reason because this one has more functionality... meaning it saves the condition of that menu to a cookie, so if a person opens a year and clicks on a month, then that year would be open on the next page.


I just remembered the first reason... the most important reason... that jQuery way disabled all the links under those ul's. I'm serious... it did.
  • effim
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Austin, TX

Post 3+ Months Ago

Bogey wrote:
Bogey wrote:
UPSGuy wrote:
Sorry for hopping off topic, but I didn't see an introduce thread & I wanted to say thanks to you effim for your contributions thus far. Always glad to see another face in the design/coding forums. I hope you'll hang around with us. Happy to have you. :)

Way to take my thread off-topic.

effim wrote:
You decide not to go with the jQuery after all?

That's right... I changed back for two reasons... I forgot the first reason and the second reason because this one has more functionality... meaning it saves the condition of that menu to a cookie, so if a person opens a year and clicks on a month, then that year would be open on the next page.


I just remembered the first reason... the most important reason... that jQuery way disabled all the links under those ul's. I'm serious... it did.


jQuery has an excellent cookie plugin available that'll do the same as the other script (saving the status).

jQuery shouldn't have affected the links, and if it did, it should be looked into.

Honestly, you should trudge through and try to learn how to use jQuery. It's VERY easy to learn the basics if you're familiar at all with JavaScript.

http://jquery.com
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

I'm not familiar at all with JavaSCript... the only thing I'm familiar with JavaScript is whatever similar to PHP... such as the IF statements and FOR loop... that's about it. :lol:

I still have yet to learn the DOM part of it.

Post Information

  • Total Posts in this topic: 20 posts
  • Users browsing this forum: No registered users and 68 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.