Active Section Title Arrow Graphic

dcb / 2011-07-22 09:18:51   

I've searched and searched for anything having to do with the Section titles as used with the expandingMenu.js but I cannot find a solution for what I'm trying to do.

I've been able to maintain the active state of the Exhibition titles, but not the Section titles. You can see what I've got so far here

My question is: Is it possible to maintain the Active state on the Section title? and if so, how do I begin to do this?

My plan is to include image backgrounds in the Section titles so that before the menu expands there is a little down arrow and then after the menu expands there is a little up arrow. I think I have to alter the expandingMenu.js in some way and then style it up with css??

Thanks in advance for your help!

G470 / 2011-07-22 12:04:10   

You can do this with jquery. Put this code into the $(document).ready(function(){

  1. ...this is not tested. moybe you have to change some selectors...
  2. $('#menu .container ul li.active').parent().children('.section-title').addClass('activeparent');
dcb / 2011-07-22 13:24:42   

G470, thanks for your help!

  1. I looked everywhere for $(document).ready(function(){

..but I could not find it. I looked for this line in the following files:
expandingMenu.js
index.php
jquery.js

  1. Am I mistaken? Do I have to add this first?$(document).ready(function(){

And then add this next line?

  1. $('#menu .container ul li.active').parent().children('.section-title').addClass('activeparent');

I'm still guessing that this goes in the expandingMenu.js?

I'm really new to js/jquery and I've really hit a brick wall on this one..can you clarify about where to insert this line?

Right now I have it in the expandingMenu.js file. It definitely changed the drop down menu, however the Section title still doesn't maintain it's active state.

I'm also trying to figure out the difference between the way I got this to work for the Exhibition titles and what I need to do with the CSS file to get this to work for the Section titles.

Thanks for listening!

dcb / 2011-07-22 13:47:21   

Wait!

Ok, I found

  1. $(document).ready(function(){

it was in the index.php file

Now I'm trying to figure out what to do with the CSS file. This is what I have right now:

  1. #menu ul li.section-title.active {
  2.     text-decoration: none;
  3.     color: #ffffff;
  4.     background-color: #000000;
  5.     display: block;
  6.     width: auto;
  7. }

note: I haven't added any background images yet, because I'm still trying to get these Section titles to maintain that Active state.

I think I'm a little closer now, but I'm still trying to wrap my head around how this new line in the PHP file is talking to the CSS.

dcb / 2011-07-22 18:46:17   

Still can't figure this out..Can anyone offer any thoughts on something I can try, or some way to understand how to do what I'm trying to do?

G470 / 2011-07-23 03:49:08   

Hi, I just read your question again and I thing I was a bit to fast in the answer.
What this code does... it adds a class to the section title of the active menu point.
You can now style a active parent with css like this:

#menu ul li.section-title. activeparent {
// some css styles here...
}

but you just want to add some arrows that change on click...
all you have to do is add the first arrow with css as a background

#menu ul li.section-title{
background-image:url(http://yourdomain.com/yourimage.jpg);
background-position:right;
background-repeat:no-repeat;
}

then add some javascript to change the background image on click:

$('#menu ul li.section-title').toggle(
function(){
$(this).css({'background-image' : 'http://yourdomain.com/new_bgimage.jpg'''});

},
function(){
$(this).css({'background-image' : 'http://yourdomain.com/new_bgimage.jpg'''});

}
);

...add this to the document ready function. Maybe you want to use a css sprite so you only have to load one image. Here is a nice tutorial on using css sprites :)
http://css-tricks.com/158-css-sprites/

dcb / 2011-07-23 18:18:54   

G470,

Unfortunately things are still not working.

I've tried to search high and low for how to correctly modify javascript to no avail. I'm not quite comprehending certain basic concepts.

Something tells me I have something wrong with the javascript. Is it spacing, or a rouge character, or something like that? Is it where I'm placing your above code? I've placed it directly after:

$(document).ready(function(){

I've got the background-image in the CSS, that was no problem--I've got a good understanding of CSS, its the javascript where things get confusing.

I'll leave the above code in there as it is now so you maybe can see what is wrong. As it is right now, the animation is lost, and the background image is not changing on click.

Again, thank you sooo much for your help! I feel like we get a little closer every time!

G470 / 2011-07-24 17:11:46   

sorry, the code is incorrect. Remove the two extra ''
_bgimage.jpg'''});
it should look like this:

$('#menu ul li.section-title').toggle(
function(){
$(this).css({'background-image' : 'http://yourdomain.com/new_bgimage.jpg'});

},
function(){
$(this).css({'background-image' : 'http://yourdomain.com/new_bgimage.jpg'});

}
);

dcb / 2011-07-25 15:27:50   

G470, Hi, Still no luck.

But first let me tell you what I've done this time. Originally I put this code in the index.php file because the index.php file was the only place I could find the 'document ready function' line.

I searched around the forum and read about both the Ross Cairns script as well as the Nine script.

I'm using the centered theme which for some reason doesn't use either the Ross Cairns or Nine scripts. It includes in it an expandableMenu.js that does not include the 'document ready function' line. (This may be irrelevant, I'm not sure)

However I realized that both the Cairns and Nine scripts did have the 'document ready function' line. So I uploaded the 'Nine' script with the title: 'collapsable.menu.v2.thenine.js'. Then I called this file in my index.php file. And then I added your above code correction (without the extra two ") to the Nine script, and I still cant get the toggle between the plus and minus background images in the Section title.

I've tried to mess around with the placement of the jquery code in the Nine script but nothing seems to work.

As always, thanks for any advice you can offer!

G470 / 2011-07-25 16:51:57   

ok :) I thougt this can´t be this hard. And it´s really easy.
check the sourcecode on this site http://raumzwei.gatonet.de/
change the theme changer on the right bottom to "sample2"
I will delete this again ;)

No additional script is needed. just put this function into your script tag:

  1. $(document).ready(function(){
  2. $("#menu .container ul li.section-title").nextAll().hide();
  3.   $("#menu ul li.section-title").toggle(
  4.   function () {
  5.   $(this).css({'color' : '#000000'});
  6.   $(this).css({'background-image' : 'url(http://barrettdaniel.com/files/minus.png)'});
  7.   $(this).nextAll().slideToggle("fast");
  8.   }, 
  9.   function () {
  10.   $(this).nextAll().slideToggle("fast");
  11.   $(this).css({'background-image' : 'url(http://barrettdaniel.com/files/plus.png)'});
  12.   $(this).css({'color' : '#fff'});
  13.   }
  14.   );
  15.   setTimeout('move_up()', 1);
  16.   });
dcb / 2011-07-25 19:15:14   

Money!!

Nice, thanks for your help G470!

This has been an incredible learning experience, the js/jquery stuff is actually starting to make sense now!

Sample2 looks hot ;)

Nin / 2011-11-27 18:14:16   

Hi,

Thanks for this thread!
I've been dreaming about achieving this when I'll grow up and be a real web-girl!
Now I see that it's not "that" complicate... Well... Almost.

Ok, so I used G470's function-code and change some stuffs because, to be honest, my menu was getting a little crazy with this one.

Heres's what I'm using now:

  1. $("#menu .container ul li.section-title").nextAll().hide();
  2.   $("#menu ul li.section-title").(
  3.   function () {
  4.   $(this).css({'color' : '#000000'});
  5.   $(this).css({'background-image' : 'url(http://anais.antonio.com/files/minus.png)'});
  6.   $(this).nextAll();slideToggle(500);
  7.   }, 
  8.   function () {
  9.   $(this).nextAll().slideToggle(500);
  10.   $(this).css({'background-image' : 'url(http://anais.antonio.com/files/plus.png)'});
  11.   $(this).css({'color' : '#000'});
  12.   }
  13.   );
  14.   setTimeout('move_up()', 1);

});

  1. Then I add this code in my Style.Css:
  2. #menu ul li.section-title {
  3.     color: #000000;
  4.     text-decoration: none;
  5.     background: url('http://mywebsite.com/files/plus.png') no-repeat scroll -1px 1px transparent;
  6. }

And now, I'm almost there!

My problem is that it seems that the links in the function-code are not working...

I can click on my menu as many times as I want, the 2nd sign (the minus sign) that is suppose to appear once the section is expanded, is not showing...

I tried a couple of things before to post this message but nothing worked...

Also, since I added the function to my index.php, my exhibition links are kinda bouncing when they expand!?
And... I don't think I like this new animation...

Is there's something I missed?

Thx!

Nin / 2011-11-27 18:15:01   

Oh! My website!

:-)

Nin / 2011-11-28 09:00:00   

OK, forget this!

I manage an other function-code that works better for me!

Thanks!

Nin / 2011-11-28 13:27:48   

Well... Rule 1rst --> Don't talk too fast!

The function I thought "great" is actually not really... How to say... As perfect as I thought!

I'm going to try to explain this the best way I can...

When I first click on one section, the related exhibitions links expand and:
-the "+" sign change into the "-" one = Great!

When I re-click on this same section, the related exhibition links expand-back up normally, BUT:
-the "-" sign don't switch into the "+" one and stay "-" = Not great!

Also:

When I click on a section, leave it expanded and click on a another one that also expands:
-the first section recovers her "-" sign while is still expanded!! = Not great!
and
-the second expanded section change into the "minus sign" = Great!

So, basically what I want to reach is this:

When I first click on a section:
-the "+" sign change into the "-" one since it's expanded.
-->when I re-click on this same section, the "-" sign becomes "+" since it's not expanded.

Then:

When I click on a section (that expands) and on an other one (that expands also):
-I want the two sections to show the "-" sign since they are both expanded.

For the rest, the code does a very good job!
I've changed a couple of things to make it a bit personalized but here how it looks:
(hope the forum and stuffs is not going to go too crazy!)

  1. $(document).ready(function()
  2. {        
  3. setTimeout('move_up()', 1);
  4. expandingMenu(0);
  5. expandingMenu(1);
  6. expandingMenu(2);
  7. expandingMenu(3);
  8. expandingMenu(4);
  9. expandingMenu(5);
  10. expandingMenu(6);

$("#menu ul li.section-title").nextAll().hide();
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
$("li.active").prevAll(".section-title").addClass("active-section");});

$("#menu ul li.section-title").click(function(){
$("#menu ul li.section-title").removeClass("active-section").prevAll().nextAll().hide();
$(this).nextAll().prevAll(".section-title").addClass("active-section");});});

In my Style.Css, I have this to make it... Happen.

  1. #menu ul li.section-title {
  2.     color: #000000;
  3.     text-decoration: none;
  4.     background: url('http://mywebsite.fr/files/plus.png') no-repeat scroll -1px 1px transparent;
  5. }

#menu ul li.section-title.active-section{
    color: #000000;
text-decoration: none;
    background: url('http://mywebsite.fr/files/minus.png') no-repeat scroll -1px 1px transparent;
}

And that's about it...

If anyone has a bit of patience for me, it would be amazing!

Thx.

Nin / 2011-11-28 18:19:16   

Ok,

I fix a part of the problem...! (thans god I'm a late sleeper!)

Now when I click on several section, they all show the "-" sign...

I still need help to fix my second problem though:

When the section are expanding-back up, they are still showing the "-" sign...

Thx!

Nin / 2011-11-28 18:23:09   

Sorry!

-->they are not showing the "+" sign!

Hahaha, I'm getting all mixed-up!

Geez!

Nin / 2011-12-02 06:31:04   

Also, I think that my sections are still animated (Toggle, I think) and I will had prefer to have a basic "SlideUp"...

Is that possible? Cause now, I can't remember how was it before!? But I think, I liked it more :-

For my problem above:
I tried to add this line in my ready function:

  1. $("active-section").each(function()

and

  1. $("active section").prevAll().hide();
  2. $(this).nextAll().prevAll("active section").addClass(".section-title");
  3. });

But... No-results!

Thx!

G470 / 2011-12-02 10:00:53   

woh, a lot of text to read ;)

...so you add a the class active-section (minus sign) on click.
Why not remove the class again?

$("#menu ul li.section-title").toggle(function()
{
// stuff for the first click. Maybe something like: if($(this).hasClass('active-section')){$(this).removeClass('active-section');} else {$(this).addClass('active-section'); }
}, function(){
// stuff for the second click
}
);

Nin / 2011-12-02 14:12:12   

Hi G470!

Thanks for your fast answer and sorry for the long text but, for me, those things are really hard to explain in a few words :-)

-> Here's a shorter one:
I didn't understand nothing about your message...
Add class? Remove it? How? Why? Where? Stuff for the second click= empty...

Am I suppose to add this code to mine or replace it?
and... "Toggle" isn't the bouncing animation thing? :-

Thx!

A.

Nin / 2011-12-02 20:10:18   

Ok, sorry G470!

I've spoke a bit too fast once again and been a bit lazy on this shot...!

Lots and lots of thanks for your code, I've manage to achieve my goal but now there's something a bit unexpected that's happening... (sorry, this thing is a real pain in the *ss!)

-When I click on an exhibition, the section that is active (the one that contains the exhibition) is not showing the right sign anymore when I'm re-cliking on it...

  1. I guess it might be because I used only this part of your code:if($(this).hasClass('active-section')){$(this).removeClass('active-section');} else {$(this).addClass('active-section'); }
  2. }, function(){

And didn't figured out what to put for the "second" click... Or the first one!?
Oh dear...!

I thought this could work but it didn't:

  1. if($(this).hasClass('li-active')){$(this).removeClass('active-section');} else {$(this).addClass('.section-title'); }
  2. }, function(){

:- Any idea?

G470 / 2011-12-03 11:30:55   

Did a fiddle with your modification. Have a look ;)
http://jsfiddle.net/G470/bXydW/

You can remove all the expanding menu stuff in your header.

Nin / 2011-12-05 05:33:38   

Woooooooooooooooooooooooooooow!!!

Ok, well... Thank you G470!
That's real serious pro' thing! Oh my... Big pressure on me!
You're not messing around! My deep respects!

Ehm... Now...
Let me just try to figure out how... This work!

Just a quick questions first:
1) Is this app a kind of... coding playground? Or this is just another way to change the codes on my site?
2) Is that really my code you did modificate?
and
3) If I click on the "run" button...? Was is it going to happen excatly? :-

Thanks, thanks, thanks, thanks!
I will never going to forget this!

Ps:I already tried to delete all my expanding menu stuffs as you say but after that, my menu was not expendable anymore in Safari... Is there's something I should add?...

Thanks again for your very kind help!

A.

Nin / 2011-12-05 06:33:31   

Oh! Sorry G470!
I don't know why I'm always doing that!? Gosh...

I found the "read our documentation" link down the Fiddle left column... :-
And...Yes. They are actually explaining everything...

I'm working on it and will find a way to be able to work with...

I'll get back to you if ever I got stuck with the technical langage...

If you could still answer my question about my espanding menu and safari, it will be great! :-)

Thanks a lot!

A.

pernin / 2011-12-05 06:55:40   

Hi Anaïs: maybe you need to refresh your safari cache? your expanding menus are working alright in my safari (5.1.2 for Win)

Nin / 2011-12-05 08:01:59   

Hi Alfredo, nice to hear from you :-)

but I didn't delete anything yet! All my expanding menu codes are still here...

I've got rid of Dreamweaver this morning and changed for Komodo but there's something going wrong with it so... I'm a bit late on G470's lessons.

How did you manage to see that it was working on Safari if my codes are still here...?

Also, this is maybe stupid, but if later I want to make a particular section not expandable anymore... Would I'll be able to do it if I delete my expanding menu code?

Thx!

A.

Nin / 2011-12-05 10:07:10   

Geez, this was a no-end story...!

I deleted Komodo (that was only displaying an ERROR message) for Bluefish and even if I still don't know how to connect the files I edit to my ftp, I found a way to delete my expanding menu codes from my php file as you suggest me...

-Now, the problem is not only Safari...
My menu is just not expandable at all (not even on Firefox)...

Tough day for me guys, sorry for the hassle... :-(

The forum is getting real busy today, hope you'll find some time for this...

Thanks.

A.

G470 / 2011-12-05 11:08:51   

Hi Nin, you just have the wrong code in your index.php file.
Take the javascript code from my jsfiddle example, and paste it into the script tags of your site.
Remove the the old stuff and you should be fine ;).

Nin / 2011-12-05 12:11:05   

G470,

I know it's gonna' sound crazy but seriously... It is just-not-working!

How can something that easy can cause me so much pain!?
Plus, you are helping me like if I was 4 years old...!?

You did the code for me, you linked me to it and...
I just can't make it work!

I've deleted e-v-e-r-y-t-h-i-n-g, copy-pasted the whole thing...
There's not a tones of possibilities, I must have made something wrong somewhere...

-First, when I paste your code, I'm having a message error on line 71.
-Then, if I delete this

  1. $(document).ready(function()
  2. {    

It's not working.

-If I'm keeping it: it's not working.

-If I delete the first:

  1. {    
  1. Or the second one:
  2. }); 

It is not working neither...

Pfffff!

I'm out of stock!
Bad luck, bad luck, bad luck, bad luck...

G470 / 2011-12-05 15:05:50   

Lol, sometimes the smallest things are causing the biggest trouble.

Send me your theme index.php file. I´ll clean it a little bit: info[at]gatonet.de

Nin / 2011-12-09 07:31:28   

Ok,

Sorry for posting in all directions but each thread has it's own subject right...
And... I need you one more time on this G470 :-)
...you know I'm real bad at Jquery, even if I try to...

Remember,
I wished I could open several sections in the same time...

Now, my active section (the one that contains the active exhibiton) stay open when it's on, and that's great...

But if I try to see what's in the other sections, the active section close-up and I would love to get rid of this function...

I've tried to "decompose" and "understand" each line of your code and figured out that what I want might need and extra line...?

Obviously, I'm absolutely not able to create this line myself, either way I won't disturb for free... :-

Thanks for your precious help, trust me, I'm really greatful,

A.

G470 / 2011-12-09 08:23:55   

no extra lines ;) http://jsfiddle.net/G470/bXydW/embedded/result/

Nin / 2011-12-09 08:53:35   

Uh! Okay...
-> That's chinese, seriously...!?

What'S the difference between this:

  1. $aswt.removeClass('active-section')
  1. and this?
  2. $(this).removeClass('active-section')

1) This remove the class of that...
and
2) Answer to that and remove the class of this...!?

Arff, whatever!

Thank you G470... You're kind!

A.

This thread has been closed, thank you.