Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple issue with dropdown reveal

    Hi all,
    I'm a newbie here, and a newbie programmer who has slaved over a piece of code for a week, and still can't resolve the issue. I think it's a simple issue/problem...Really appreciate your help!

    Simply, on the landing page of my website I have a long continuous background with a series of headlines. I want to reveal some more information/details related to the headline when the viewer clicks the stylized tab underneath it.
    I've been on the W3 website and found the Jquery and integrated it, but for some reason it's not working. I think it's either that my class/id selectors in the Jquery is not correct or I'm not stating the CSS correctly.

    I've attached both the HTML, CSS and the image for the dropdown as a zip, and the included below the coding below.

    Again, I really appreciate anyone's help !

    ---------------------------------------------------------

    <!DOCTYPE html>
    <html>

    <head>
    <title>Pencil Paper and Partner</title>
    <link rel="stylesheet" type="text/css" href="pencilpaperandpartner3.css">
    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <meta name="description" content="design,export markets, packaging, retail design">
    <meta name="author" content="Andrew POtter">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("section_content_wrapper""pulldown_tab").click(function(){
    $("section_content_wrapper" "cream_of_the_craft").slideToggle("slow");
    });
    });
    </script>

    </head>

    <body>
    <div id="main"><!-- Start Main Area -->

    <div class="navigation_container"><!-- navigation -->
    <ul class="menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div><!-- END navigation -->

    <div class="pppd_logo"><!-- logo -->
    </div><!-- END logo -->

    <div class="section_content_wrapper"><!-- Start Section 1 Cream_of_the_Craft -->
    <h1>We are a Cream of the Craft Retail Design Team</h1>
    <div id="pulldown_tab"></div>

    <div id="cream_of_the_craft"> <!--section content-->
    Our creative team is a global roster of design talent who are cream of their craft.
    We specialise in packaging, point of sale, visual merchandising and in-store design.
    Whenever we receive a client’s brief, we assemble a creative team according to the media, and their
    experience of a particular product category and consumer.
    By comparison to the traditional agency process, our clients receive all round better value.
    We provide more ideas and diversity. Exceptional design. All managed by design leaders who have worked on both client and agency side. </div><!--section content-->
    </div><!-- END Section 1 Cream_of_the_Craft -->

    </div><!-- End Main Area -->
    <footer>
    Copyright &copy; Pencil Paper &amp; Partners
    </footer>

    </body>
    </html>

    -------------------------------------------------------------

    @charset "UTF-8";

    body
    {
    background-color: #7d7d7d;
    margin: 0 auto;
    padding: 0;

    }

    #main
    {
    position: relative;
    height: 4390px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    max-width: 81em;
    background-image:url('Services_Page_1120nonav.jpg');
    background-color: red;
    background-repeat:no-repeat;
    z-index: -1;
    }

    .navigation_container
    {
    position: fixed;
    left: 50%;
    margin: 0 0 0 -265px;
    width: 530px;
    height: 30px;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;
    background: black;
    z-index: 3;
    }

    .pppd_logo
    {
    position: absolute;
    width: 220px;
    height: 120px;
    margin-top: 50px;
    left: 41%;
    background-image:url('pppd_logo.tif');
    z-index: 5;
    }

    .menu
    {
    width: 500px;
    height: 30px;
    font-family: 'Istok Web', sans-serif;
    font-size: 16px;
    list-style: none;
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    background: none;
    text-transform: capitalize;
    }

    .menu li
    {
    display: inline-block;
    width: 94px;
    padding: 2px 0px 2px 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

    .menu li a
    {
    color: white;
    text-decoration:none;
    line-height: 1.6em;
    }

    .menu li a:hover
    {
    color: white;
    border-bottom: solid 2px white;
    }

    .menu li.selected
    {
    background: black;
    }

    .menu li.selected a
    {
    color: red;
    }

    .section_content_wrapper
    {
    position: absolute;
    width: 46%;
    height: 200px;
    margin-top: 15%;
    margin-right: auto;
    margin-left: 39%;
    z-index: 0;
    }

    h1
    {
    position: relative;
    margin-bottom: .8em;
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 2em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-bottom: 0;
    color: black;
    text-align: center;
    border-bottom-style:solid;
    border-width: 1px;
    border-color: black;
    z-index: 0;
    }

    #footer
    {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    }


    /* drop down section content */

    #pulldown_tab
    {
    position: absolute;
    height:48px;
    width: 34px;
    background: url('pulldown.png');
    margin-top: -25px;
    margin-right: auto;
    margin-left: 17em;
    z-index: 2;
    }

    #cream_of_the_craft
    {
    position: absolute;
    margin-top: -25px;
    padding-top: 4em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    font-family: 'Istok Web', sans-serif;
    font-size: 1em;
    color: black;
    background-color: #FFFFFF;
    opacity: .5;
    z-index: 0;
    display: none;
    }
    Attached Files Attached Files

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I don't use jQuery, so I won't try to play with your code, but I can tell you that this is clearly wrong:
    Code:
    $("section_content_wrapper""pulldown_tab").click(function(){
    $("section_content_wrapper" "cream_of_the_craft").slideToggle("slow");
    JavaScript doesn't permit two quoted strings in a row like that. (And, yes, I know this is jQuery, but it still has to follow JavaScript syntax rules.)

    On top of that, so far as I know, jQuery doesn't understand $("xxx"). It expects the string to start with either a period (".section_content_wrapper") indicating a CSS class or an octothorp ("#pulldown_tab") indicating an ID.

    Since both of the elements you are trying to affect have IDs, I can't see any reason to mention the classname. So I *suspect* you need simply:
    Code:
    $("#pulldown_tab").click(function(){
        $("#cream_of_the_craft").slideToggle("slow");
        ...
    But now I'd suggest you move your question to the jQuery forum, where it's more likely to attract relevant answers.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •