Adding Jquery dropdowns to header


#1


I am trying to add dropdowns to the code and need help implementing them.


 var main = function() {
 $ ('.dropdown-toggle').click(function() {
    $(this).next().toggle();

    $('.icon-menu').click(function() {
    $('.pull-out').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });
  });
  
	

  $('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if(nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }
    
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
  });


  $('.arrow-prev').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if(prevSlide.length === 0) {
      prevSlide = $('.slide').last();
      prevDot = $('.dot').last();
    }
    
    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
  });
   $('.icon-close').click(function() {
    $('.pull-out').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });

}

$(document).ready(main);


#2

Hi @coreslayer87033,

Was the information given in your previous topic not sufficient to help you do this? Please explain what you need more help with.


#3

Yes. It was not sufficient. I needed to know how to add a side-header to my
preexisting code, not how to dissect a Jquery function.


#4

@coreslayer87033 How about you post your HTML then, if that's what you'd like help with.


#5

Here you go...



<link href='http://fonts.googleapis.com/css?family=Oswald:400,300'
rel='stylesheet'>
http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css"
rel="stylesheet">



<marquee scrollamount="10", direction="left", behavior="scroll",
scrolldelay="0">Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab:
Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow,s




<img
src="file:///C:/Users/almaheights/Downloads/Innovation_Lab2.png">
    <ul class="menu">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle">Resources <b

class="Bob">

       </ul>
       </li>

   <li class="dropdown">
        <a href="#" class="dropdown-toggle">Projects <b

class="Bob">


      <li><a href="http://almaheights.org/">Alma Heights</a></li>



      <li class="dropdown">
        <a href="#" class="dropdown-toggle">Students <b

class="caret">

        </ul>
      </li>
    </ul>

  </div>
</div>

<div class="slider">

  <div class="slide active-slide">
    <div class="container">
      <div class="row">
        <div class="slide-copy col-xs-5">
          <h1 style="color:#02faff">Innovation Lab</h1>
          <p style="color:#02faff">Innovation Lab is an elective whose

purpose is to educate students in the knowledge that is needed to
effeciantly, quickly, and cleanly

        </div>
        <div class="slide-img col-xs-7">
        <img

src="file:///C:/Users/almaheights/Downloads/Innovation_Lab.png">




  <div class="slide slide-feature">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <a href="#"><img

src="file:///C:/Users/almaheights/Downloads/download.jpg">
Come now

      </div>
    </div>
  </div>

  <div class="slide">
    <div class="container">
      <div class="row">
        <div class="slide-copy col-xs-5">
          <h1 style="color:#02faff">Learn many coding languages</h1>
          <h2 style="color:#02faff">In Innovation Lab</h2>
          <p style="color:#02faff">The Students in Innovation Lab class

have learned Html, CSS, Jquery, Javascript, PHP, Jekyll, Git, Windows
Command Line, SCSS, and SQL.

        </div>
        <div class="slide-img col-xs-7">
          <img

src="file:///C:/Users/almaheights/Downloads/software-computer-code-1940x900_35196.jpg"
width="900" height="500">



  <div class="slide">
    <div class="container">
      <div class="row">
        <div class="slide-copy col-xs-5">
          <h1 style="color:#02faff">Elective Course from Alma

Heights

Millions of people use Flipboard to read and collect the
news they care about, curating their favorite stories into their own
magazines. Now you can promote the ones you create or think are awesome.

        </div>
        <div class="slide-img col-xs-7">
          <img

src="file:///C:/Users/almaheights/Downloads/AHCHSLogo.png">



</div>

<div class="slider-nav">
  <a href="#" class="arrow-prev"><img src="


">







http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png
">

  <!-- Menu icon -->
  <div class="icon-close">
    <img src="

http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">

  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- Main body -->
<div class="jumbotron">

  <div class="icon-menu">
    <i class="fa fa-bars"></i>
    Menu
  </div>
<script src="

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">



#6

@coreslayer87033 Please follow the instructions in this guide to format your code so we can see it and help you:


#7

I uploading the code it twisted it. reuploading


#8

<!doctype html>
<html>

  <head>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">

  </head>
  <body>
  <marquee scrollamount="10", direction="left", behavior="scroll", scrolldelay="0">Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow,  Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow, Innovation Lab: Leaders of Tomorrow,s </marquee>
    <div class="header">
      <div class="container">
        <a href="#" class="logo-icon">
          <img src="file:///C:/Users/almaheights/Downloads/Innovation_Lab2.png">
        </a>

        <ul class="menu">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">Resources <b class="Bob"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Class Schedule</a></li>
              
           </ul>
           </li>

       <li class="dropdown">
            <a href="#" class="dropdown-toggle">Projects <b class="Bob"></b></a>
            <ul class="dropdown-menu">
              <li><a href="The Bus Ticket From Hell..html">Bus Ticket</a></li>
              <li><a href="Dog Breed.html">Dog Page</a></li>
              <li><a href="SocialMedia.html">Social Media Page</a></li>
              <li><a href="Small Project 2.html">Olympic Medal Counter</a></li>
              <li><a href="Autobiography.html">Autobiography</a></li>
           </ul>
           </li>

          <li><a href="http://almaheights.org/">Alma Heights</a></li>
         
          

          <li class="dropdown">
            <a href="#" class="dropdown-toggle">Students <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="TaliesinLarsen.html">Taliesin Larsen</a></li>
              <li><a href="AlfonsoCefre.html">Alfonso Cefre</a></li>
              <li><a href="CarolynClausen.html">Carolyn Clausen</a></li>
              <li><a href="DwightBumgarner.html">Dwight Bumgarner</a></li>
              <li><a href="HanwenLi.html">Hanwen Li</a></li>
              <li><a href="LukePhilpott.html">Luke Philpott</a></li>
              <li><a href="BaojunTang.html">Baojun Tang</a></li>
              <li><a href="AdhilVinod.html">Adhil Vinod</a></li>
              <li><a href="ZefengZhao.html">Zefeng Zhao</a></li>

            </ul>
          </li>
        </ul>

      </div>
    </div>

    <div class="slider">

      <div class="slide active-slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1 style="color:#02faff">Innovation Lab</h1>
              <p style="color:#02faff">Innovation Lab is an elective whose purpose is to educate students in the knowledge that is needed to effeciantly, quickly, and cleanly</p>
              
              
            </div>
            <div class="slide-img col-xs-7">
            <img src="file:///C:/Users/almaheights/Downloads/Innovation_Lab.png">
            </div>
          </div>
        </div>      
      </div>

      <div class="slide slide-feature">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <a href="#"><img src="file:///C:/Users/almaheights/Downloads/download.jpg"></a>
              <a href="#">Come now</a>
            </div>
            
          </div>
        </div>      
      </div> 

      <div class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1 style="color:#02faff">Learn many coding languages</h1>
              <h2 style="color:#02faff">In Innovation Lab</h2>
              <p style="color:#02faff">The Students in Innovation Lab class have learned Html, CSS, Jquery, Javascript, PHP, Jekyll, Git, Windows Command Line, SCSS, and SQL.</p>
              
            </div>
            <div class="slide-img col-xs-7">
              <img src="file:///C:/Users/almaheights/Downloads/software-computer-code-1940x900_35196.jpg" width="900" height="500">
            </div>
          </div>
        </div>      
      </div> 


      <div class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1 style="color:#02faff">Elective Course from Alma Heights</h1>
              <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
              
            </div>
            <div class="slide-img col-xs-7">
              <img src="file:///C:/Users/almaheights/Downloads/AHCHSLogo.png">
            </div>
          </div>
        </div>      
      </div> 

    </div>

    <div class="slider-nav">
      <a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
      <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
      </ul>
      <a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
    </div> 
     <div class="pull-out">
      
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- Main body -->
    <div class="jumbotron">

      <div class="icon-menu">
        <i class="fa fa-bars"></i>
        Menu
      </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="script.js"></script>

  </body>
</html>

#9

@coreslayer87033 I need you to follow the instructions linked above in my post. Use the preview to the right of the area where you type to see if your code is completely visible. If not, then you'll know that I can't see it either.


#10

I appear to be having problems with the browser cutting off the code. Can you help?


#11

@coreslayer87033 Start off by wrapping your second <li class="dropdown"> in a <ul class="menu">, like the one before it. If you haven't, I'd strongly recommend taking the HTML & CSS course if you want to be messing with HTML, as that course covers a lot of the stuff you'll need to know.


#12

I completed that course. My code is fine. When I put it into this editor, the top half is torn off, and is missing a large chunk of styling.


#13

@coreslayer87033 I'm not understanding the issue... could you post a screenshot of what you're seeing?


#14

The computer I am using can't take screenshots.


#15

@coreslayer87033 Then I'll need a much more detailed description of the issue. Your post above is vague and doesn't help me understand your problem.

I don't know of any operating system you might be using that wouldn't allow you to take a screenshot, though - I assume you have tried looking up how to take a screenshot on your OS?


#16

Yes I have. I am running windows 6 home premium on a old Dell desktop.


#17

Look, I can't help you if you won't tell me what's wrong. If you can't give a screenshot then I need a good description in text. Or maybe you could take a picture of your screen using a camera or phone and upload the picture here instead of a screenshot. Either way, I need a description of the issue that helps me find the problem.

Also, there's no such thing as Windows 6 - do you mean Windows 7? Windows 7 does allow you to take screenshots, and I'm pretty sure any other version you'd be using would as well.


#18


#19

@coreslayer87033 I'm sorry, but I don't see any issues with the top half being torn off or missing styling1 in your screenshot. <!doctype html> should be the first line, and it's there.

It doesn't appear I'm able to help you much, so you may need to work through this yourself. I'm happy to help all I can, though.


#20

Okay, sorry. Thanks though.