Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [HELP] Simple JS onClick Toggle

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #32019
    AnonymousBlah
    Participant

    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:

    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.

    #55570
    jamygolden
    Moderator

    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.

    #55521
    AnonymousBlah
    Participant

    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.

    #55484
    jamygolden
    Moderator

    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.

    #55470
    AnonymousBlah
    Participant

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

    #55464
    jamygolden
    Moderator

    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");
    });
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.