#1
  1. They're coming to take me away

    Join Date
    Jan 2005
    Location
    Florida
    Posts
    5,087
    Rep Power
    5080

    Creating rotating banner based on city (or state) clicked on


    I have a navigation bar on the left using Jquery and javascript that lists various states, counties, and cities. On the right I have an area where I'm wanting rotating banners based on the state/county/city that is currently being viewed.

    What would be the best way to accomplish something like this?

    For the left nav, there is a + sign in front of each of the items. Once clicked, it drops down and changes to a minus. The state/county/city is not currently clickable (or linked). Only the + and - signs expand/collapse the items.

    Any assistance or input would be greatly appreciated. If you need further information, let me know. If you want to see the site, let me know and I'll upload it for you guys to view to see what I'm talking about.

    Thanks.
  2. #2
  3. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,884
    Rep Power
    6355
    The right panel can use javascript to access the left panel periodically and detect which city/state has been clicked on.

    You can also have the left panel set a global javascript variable when the user clicks, though I'm not sure how that would work between frames.

    I assume you're using frames, otherwise the answer is as easy as "do it when they click."

    -Dan
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  4. #3
  5. They're coming to take me away

    Join Date
    Jan 2005
    Location
    Florida
    Posts
    5,087
    Rep Power
    5080
    Originally Posted by ManiacDan
    I assume you're using frames
    Not using frames...

    otherwise the answer is as easy as "do it when they click."
    The problem is that the page doesn't refresh on clicks. The left nav is just a smooth treeview dropdown. So when something is clicked, how would I get the right column to refresh to display the corresponding banners? The states/counties/cities aren't linked, although I have no problem linking them. However, only the + and - signs are what expands and collapses the menu. Even clicking the linked states/counties/cities won't expand or collapse the menu.

    (I'm not experienced with PHP, so it's not as easy as "do it when they click." for me.. )
  6. #4
  7. Sarcky
    Devshed Supreme Being (6500+ posts)

    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    10,884
    Rep Power
    6355
    Use javascript to reset the image source when they click.

    -Dan

    Comments on this post

    • hiker agrees : Thanks... I'll try that.
    HEY! YOU! Read the New User Guide and Forum Rules

    "They that can give up essential liberty to obtain a little temporary safety deserve neither liberty nor safety." -Benjamin Franklin

    "The greatest tragedy of this changing society is that people who never knew what it was like before will simply assume that this is the way things are supposed to be." -2600 Magazine, Fall 2002

    Think we're being rude? Maybe you asked a bad question or you're a Help Vampire. Trying to argue intelligently? Please read this.
  8. #5
  9. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2008
    Location
    North Carolina
    Posts
    2,670
    Rep Power
    2677
    Try tinkering with this that I just came up with.

    page1.html
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Test</title>
    <
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    body { margin: 5px; }
    .left_frame {
        border-right: 1px solid #666;
        float: left;
        padding: 0 5px 0 0;
        width: 150px;
    }
    .left_frame ul.menu { margin: 0; padding: 0; }
    .left_frame ul.menu li { list-style: none; }
    .right_frame { float: left; padding: 0 0 0 5px; }
    .clear {
        clear: both;
        display: block;
        height: 0;
        font-size: 0px;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    $(function(){
        // jQuery object of all links in our menu
        var $links = $(".menu a");

        // jQuery object of our content-frame that pages will be injected into
        var $content_frame = $("#content_frame");

        // When end-user clicks a link in our menu
        $links.click(function(event){
            // Store a reference to the link
            var $this = $(this);

            // Prevent the browser from navigating to the link
            event.preventDefault();

            // Send an AJAX request to retrieve the link's content and inject it into our content-frame
            $.ajax({
                url: $this.attr('href'),
                success: function(html){
                    var $html = $(html);
                    $html.filter("body");
                    $content_frame.html($html.text());
                }
            });
        });
    });
    </script>
        <div class="left_frame">
            <ul class="menu">
                <li><a href="page2.html">Page 2</a></li>
                <li><a href="page3.html">Page 3</a></li>
            </ul>
        </div>
        <div class="right_frame">
            <div id="content_frame">
            </div>
        </div>
    </body>
    </html> 
    page2.html & page3.html (title and text changed to match page number)
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Page 3</title>
    </
    head>

    <
    body>
    Page 3
    </body>
    </
    html
    In your instance, the links should be something like "banners.php?cat=5" or a friendly-url equivelant. banners.php needs to act as if its a completely separate page so users without javascript can still see them.

    Comments on this post

    • hiker agrees : Thanks.. I'll try deciphering that.. :) (I have no clue about Ajax and hardly any about Javascript)
    • ryon420 agrees
    • medialint agrees
    Last edited by simshaun; May 19th, 2009 at 09:39 AM.
  10. #6
  11. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2008
    Location
    North Carolina
    Posts
    2,670
    Rep Power
    2677
    Well, you know where to come if you run into problems. Good luck!

IMN logo majestic logo threadwatch logo seochat tools logo