[HELP] Simple JS onClick Toggle

[AnonymousBlah]

I have limited time for this so please read carefully and contribute if you can.

Background Info:
I am an amateur web designer in high school and am doing my first client job.
I am using this post here as a backbone for my site: https://css-tricks.com/dynamic-page-replacing-content/
The link to my test server is as follows: http://northerneurope.xp3.biz/Wallah/

Problem:
Under the ‘Real Estate’ tab, my client wants a sidebar. So with the ‘Dynamic Page’ link above, I thought I should just put the sidebar in the tag – to load ONLY on that page.
Please view the sidebar on the test server under the ‘Real Estate’ tab, it all works, but us not functional.

Solution should…
The result SHOULD look like this: http://northerneurope.xp3.biz/Wallah/sidebar_correct.html
But that ‘correct’ one shows on ALL pages, and I need it only under ‘Real Estate’

Code:
All the JS is the same, on both pages (The dysfunctional and the ‘correct’)
The HTML for the sidebar is this:

»




 « Quick Links


Link 1


Link 2


Link 3


Link 4


Link 5

The JS to make it work is this:

I know it’s messy, and could be done more easily, but my knowledge is only so extensive.
Please help me achieve the functionality on the ‘correct’ page, while viewing the element ONLY on the ‘Real Estate’ tab.

Thanks, if you post!

EDIT: I forgot to add, the website looks best in webkit browsers (Safari/Chrome). So, please test in those, if you can.

[jamygolden]

Change

#scroll_box {

background: -moz-linear-gradient(#EEEEEE, #CCCCCC) repeat scroll 0 0 transparent;

border: medium none;

border-radius: 8px 8px 8px 8px;

box-shadow: 0 0 10px #222222;

color: #333333;

font-family: AllerBold;

height: auto;

margin-left: -200px;

margin-top: -292px;

padding: 10px 10px 10px 60px;

position: fixed;

text-decoration: none;

width: auto;

z-index: 1337;

}

to this:

#scroll_box {

background: -moz-linear-gradient(#EEEEEE, #CCCCCC) repeat scroll 0 0 transparent;

border: medium none;

border-radius: 8px 8px 8px 8px;

box-shadow: 0 0 10px #222222;

color: #333333;

font-family: AllerBold;

height: auto;

left: -45px;

padding: 10px 10px 10px 60px;

position: fixed;

text-decoration: none;

top: 220px;

width: auto;

z-index: 1337;

}

Basically I’ve removed margin and added the ‘top’ and ‘left’ properties. It didn’t, however, seem to open when I clicked on it.

As for it not opening when you click on it, that’s because the events are loaded in the DOM and afterwards you bring in the elements. Therefore they are not being effected by the javascript.

Change this:

$("#sidtgl a").click(function(){

$("#sidtgl").slideToggle("slow");

$(this).toggleClass("active");

});

to this:

$("#main-content").delegate("#sidtgl a", "click", function(){

$("#sidtgl").slideToggle("slow");

$(this).toggleClass("active");

});

If all goes well it should work.

[AnonymousBlah]

Thank you!

This helps somewhat, but creates another bug:
If you notice the url, upon change, you will see that it creates a ‘dual’ url.
For example, when the user goes to the initial url, it is viewed: /index.html
When the user then clicks on the real estate tab, the following url is seen: /index.html#realestate.html
Your fix works perfectly if the user views the page initially going to: /realestate.html
But any time the ‘Real Estate’ is seen at the end of the url, like this: /index.html#realestate.html or /realestate.html#realestate.html
This causes the #scroll_box element to close up. It looks like it toggles #sidtgl, without toggling the rest of the necessary elements.

Please view the difference between the following links:
http://northerneurope.xp3.biz/Wallah/realestate.html
http://northerneurope.xp3.biz/Wallah/index.html#realestate.html

I did try changing all the other element toggles to the same ‘delegate’ style, like this:

But the same error is occurred.

Again, thank you for helping, and I apologize if this isn’t making much sense.

[jamygolden]

This is happening because you have different javascript on the pages lol.

Look at the delegate code on
http://northerneurope.xp3.biz/Wallah/realestate.html

Then look at it on
http://northerneurope.xp3.biz/Wallah/index.html#realestate.html

Make them the same and they should function equally.

[AnonymousBlah]

Thanks, I can’t believe i missed that!
But the whole element still closes up…
Again, I appreciate your help greatly.

[jamygolden]

I’m really not sure what’s going on with your javascript:
This should cause it to work properly:

$("#main-content").delegate("#siddetgl").click(function(){

$("#navigation-block").slideToggle("slow");

});

[Author]

Posts