My hamburger menu isnt working I dont know why - javascript

guys, I am trying to get my hamburger button to work but nothing is happening does anyone have any advice?
here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
<title>David Underwood</title>
</head>
<body>
<header>
<a href="/" class="header-logo">
<h3>Welcome</h3>
</a>
<nav>
<img class="union" src="Union.png" alt="menu link" />
</nav>
</header>
<div class="greet">
<div class="top-row-one">
<h2 class="porto">Portoflio</h2>
<h3 class="about-top">About</h3>
<h4 class="con">Contact</h4>
</div>
<div class="text-box">
<h1 class="hi-there">Hey there. I’m <br />David</h1>
<h2 class="hi-there2">
I’m a software <br />
developer
</h2>
</div>
<div class="greeting2">
<h1 class="header-title">Hey there. I’m David.</h1>
<h1>
<span>I’m a software developer</span>
</h1>
</div>
<p class="paragraph1">
I can help you build a product, <br />
feature or website Look through <br />
some of my work and experience! <br />
If you like what you see and have <br />
a project you need coded, <br />
don’t hestiate to contact me.
</p>
<div class="para-box">
<p class="paragraph2">
I can help you build a product , feature or website Look through some
of my work and <br />
experience! If you like what you see and have a project you need
coded, <br />
don’t hestiate to contact me.
</p>
</div>
<div class="icons">
<ul class="icon-row">
<li>
<a href="https://twitter.com/david630"
><img class="tweet" src="twitter.svg" alt="twitter picture"
/></a>
</li>
<li>
<img class="med" src="medium.svg" alt="medium picture" />
</li>
<li>
<a href="https://github.com/david63011"
><img class="git" src="github.svg" alt="git picture"
/></a>
</li>
<li>
<img class="angel" src="angellist.svg" alt="angelist picture" />
</li>
</ul>
</div>
<div class="top-info">
<h1 class="works">
My Recent <br />
Works
</h1>
<img class="Indicator" src="Indicator.png" alt="green line" />
</div>
</div>
<h2 class="works2">My Recent Works</h2>
<section class="grid-containers">
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
<div class="container">
<div class="column1"></div>
<div class="column2">
<div class="project-box">
<h1 class="project-name1">Multi-Post Stories</h1>
<h1 class="project-name-two">Gain+Glory</h1>
</div>
<div class="languages">
<ul>
<li class="ruby">Ruby on Rails</li>
<li class="css">css</li>
<li class="js">JavScript</li>
<li class="html">HTML</li>
</ul>
</div>
<button type="submit" class="see-project-btn">See Project</button>
</div>
</div>
</section>
<div class="picture-box">
<section class="about">
<div class="about-me">About Me</div>
</section>
<section class="text-box1">
<div class="text-info1">
<p class="p2">
I can help you build a product, <br />
feature or website Look through <br />
some of my work and experience! If <br />
you like what you see and have a <br />
project you need coded, <br />
don’t hestiate to contact me.
</p>
</div>
</section>
<section class="text-box2">
<div class="text-info2">
<h2 class="text1a">
I can help you build a product , feature or website Look through
some of my work and
</h2>
<h3 class="text-info2b">
experience! If you like what you see and have a project you need
coded,
</h3>
<h4 class="text-info3c">don’t hestiate to contact me.</h4>
</div>
</section>
</div>
<button type="submit" class="resume-btn">Get My Resume</button>
<section class="new-end-section">
<ul class="about-me-end-section">
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="ball.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Languages</h2>
<ul class="cat-things">
<li>JavaScript</li>
<li>Ruby</li>
<li>Html</li>
<li>CSS</li>
</ul>
</div>
</li>
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="frame.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Frameworks</h2>
<div>
<ul class="cat-things">
<li>Bootstrap</li>
<li>Ruby on rails</li>
<li>RSpec</li>
<li>Capybara</li>
<li>Selenium</li>
</ul>
</div>
</div>
</li>
<li>
<div class="type-of-cards">
<div class="cat-images">
<img src="ball.svg" alt="picture of globe" />
</div>
<h2 class="cat-title">Skills</h2>
<ul class="cat-things">
<li>Codekit</li>
<li>Github</li>
<li>CodePen</li>
<li>GitLab</li>
<li>Terminal</li>
</ul>
</div>
</li>
</ul>
</section>
<footer class="contactpage">
<section class="projects-end">
<h2 class="textline1">I'm always</h2>
<h3 class="textline2">interested in</h3>
<h4 class="textline3">hearing about</h4>
<h5 class="textline4">new projects, so</h5>
<h6 class="textline5">if you'd like to</h6>
<h6 class="textline6">chat please get</h6>
<h6 class="textline7">in touch</h6>
</section>
<section class="projects-2-big">
<div class="new-paragraph">
I'm always interested in hearing about new projects, so if you'd like
to chat please get in touch.
</div>
</section>
<section class="form-section">
<div class="form-container">
<form action="https://formspree.io/f/myyvzkag" method="post">
<ul class="form-info">
<li>
<input
type="text"
maxlength="30"
name="user_name"
class="name-text-box"
id="full-name"
placeholder="Full Name"
required=""
/>
</li>
<li>
<input
type="email"
name="user_email"
class="name-last-text-box"
id="email"
placeholder="Email Address"
required=""
/>
</li>
<li>
<textarea
id="text-box"
name="message"
maxlength="500"
class="enter-form"
cols="30"
rows="10"
placeholder="Enter text here"
required=""
></textarea>
</li>
</ul>
</form>
<input type="submit" value="Get in touch" class="send-btn" />
</div>
<button type="submit" class="touch-btn2">Get in touch</button>
<img class="rec" src="rec.png" alt="long line" />
</section>
<div class="icon-row-footer">
<div class="tweet-connect">
<a href="https://twitter.com/david630"
><img class="tweet" src="twitter.svg" alt="twitter picture"
/></a>
</div>
<img class="med" src="medium.svg" alt="medium picture" />
<div>
<a href="https://github.com/david63011"
><img class="git" src="github.svg" alt="git picture"
/></a>
</div>
<img class="angel" src="angellist.svg" alt="angelist picture" />
</div>
<p class="email">david630#gmail.com</p>
<div class="black">
<img class="Indicator2" src="Indicator.png" alt="green line" />
</div>
</footer>
<!--Footer section end-->
<!--overlay section start-->
<div class="over">
<div class="cancel">
<img src=cancel.png alt="close-icon-button">
</div>
<ul class="main-overlay-menu">
<li>
<a class="menu-item" href="#grid-containers">Portofolio</a>
</li>
<li>
<a class="menu-item" href="#about">About</a>
</li>
<li>
<a class="menu-item" href="#contactpage">Contact</a>
</li>
</ul>
</div>
</body>
</html>
Javascript
const hamburger = document.querySelector('.union');
const overlay = document.querySelector('.over');
const menu = document.querySelector('.main-overlay-menu');
hamburger.addEventListener('click', () => {
overlay.style.display = 'flex';
menu.style.display = 'block';
});
When I click the hamburger icon nothing happens. And I don't know why so any help would be appreciated. I think the javascript is ok but maybe its now so any help on that area would also be apprecaited


you can try to using getElemantById or className.

Related

How to make a webpage fade in and fade out without it instantly fading in (Using JQuery)

I am trying to make it to where there is a clean fade in and out transition between the multiple HTML pages within my website. I am trying to achieve this by causing everything but the navbar in my body to fade out, and then having that part fade back in. The Fadeout portion works fine, but, when I try to fade back in, the other pages' content instantly appears instead of gradually appearing.
The Javascript:
$("#MainBody").css('display','none');
jQuery(document).ready(function(){
jQuery("#MainBody").fadeIn('slow',function(){
});
jQuery("a").on('click',function(event){
var thetarget = this.getAttribute('target')
if(thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery("#MainBody").fadeOut('slow',function(){
window.location =thehref;
$("#MainBody").fadeIn('slow', function(){
})
});
}
});
});
setTimeout(function(){
$('#MainBody').fadeIn();},1000);
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hakim Ottey's Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;1,200;1,400;1,700&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
</head>
<body>
<div class="Header">
<div class="Introduction">
<div class="Intro_Info">
<h1 class="Name">Hakim Ottey</h1>
<h2 class="Title">Game Designer</h2>
</div>
</div>
<div class="Resume">
<h2 class="Download">Download Resume</h2>
</div>
<ul class="Nav_Menu">
<a href="index.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Home</li>
</div>
</a>
<a href="GD_Projects.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Game Design Projects</li>
</div>
</a>
<a href="Prog_Projects.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Programming Projects</li>
</div>
</a>
<a href="3DG_Art.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">3D Game Art</li>
</div>
</a>
<a href="2DG_Art.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">2D Game Art</li>
</div>
</a>
<a href="About_Me.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">About Me</li>
</div>
</a>
<a href="Contacts.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Contacts</li>
</div>
</a>
</ul>
</div>
<div id="MainBody">
<div class="General_Showcase">
<div class="General_Info">
<!-- first row -->
<ul class="InfoRow">
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Experience</h3>
<ul>
<li class="list_head">
<h4>AI Programmer for robot development</h4>
</li>
<ul>
<li class="list_entry">Created contour recognition for robot​</li>
<li class="list_entry"> Managed group milestones and needs </li>
</ul>
<li class="list_head">
<h4>Co-Lead and programmer for Project Techno </h4>
</li>
<ul>
<li class="list_entry">Programmed Loading and Character Select Menu​</li>
<li class="list_entry">Re-worked vehicle functionality </li>
</ul>
<li class="list_head">
<h4>Programmer for InternMe App</h4>
</li>
<ul>
<li class="list_entry">Developed Wireframes for app​</li>
<li class="list_entry">Programmed screen transitioning and basic functionality
for
the app
</li>
</ul>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Skills</h3>
<ul>
<li class="single_list_entry">2D Asset Creation</li>
<li class="single_list_entry">3d Asset Creation</li>
<li class="single_list_entry">Test Suite Creation</li>
<li class="single_list_entry">Programming in C++, C#, Python, Dart, XAML, and Java
</li>
<li class="single_list_entry">Website Development</li>
<li class="single_list_entry">Unity Engine Development</li>
<li class="single_list_entry">Unreal Engine Development</li>
<li class="single_list_entry">Chatbot Development</li>
<li class="single_list_entry">App Development</li>
<li class="single_list_entry">AI Development</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="small_box">
<div class="topspace">
</div>
<div class="Info">
<img class="sm_images" src="Images/Cirlce_Overhead_PNG.jpg">
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="topspace">
</div>
<div class="Info">
<img class="images" src="Images/HO_Wall.png">
</div>
</div>
</li>
</ul>
<!-- second row -->
<ul class="InfoRow">
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Program Experience</h3>
<ul>
<li class="single_list_entry">Microsoft Visual Studio</li>
<li class="single_list_entry">Microsoft Access</li>
<li class="single_list_entry">PHPMyAdmin</li>
<li class="single_list_entry">Adobe Photoshop</li>
<li class="single_list_entry">Adobe Illustrator</li>
<li class="single_list_entry">Adobe Premiere</li>
<li class="single_list_entry">Autodesk 3DSMax</li>
<li class="single_list_entry">Autodesk Maya</li>
<li class="single_list_entry">Unity Engine</li>
<li class="single_list_entry">Unreal Engine</li>
<li class="single_list_entry">Valve Hammer Editor</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Languages</h3>
<ul>
<li class="single_list_entry">HTML</li>
<li class="single_list_entry">CSS</li>
<li class="single_list_entry">C#</li>
<li class="single_list_entry">UnityScript</li>
<li class="single_list_entry">Python</li>
<li class="single_list_entry">Dart</li>
<li class="single_list_entry">XAML</li>
<li class="single_list_entry">Java</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="small_box">
<div class="Info">
<h3>Engines</h3>
<ul>
<li class="single_list_entry">Construct</li>
<li class="single_list_entry">Unreal Engine</li>
<li class="single_list_entry">Unity Engine</li>
<li class="single_list_entry">Valve Hammer Editor</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<div class="topspace">
</div>
<iframe class="images" src="https://www.youtube.com/embed/XaqywWdpW4k" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Footer">
<p class="footinfo">Hakim Ottey © 2019</p>
</div>
</body>
</html>
This is an example of what the other pages have as content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Design Projects | Hakim Ottey's Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;1,200;1,400;1,700&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
</head>
<body>
<div class="Header">
<div class="Introduction">
<div class="Intro_Info">
<h1 class="Name">Hakim Ottey</h1>
<h2 class="Title">Game Designer</h2>
</div>
</div>
<div class="Resume">
<h2 class="Download">Download Resume</h2>
</div>
<ul class="Nav_Menu">
<a href="index.html" id="Home">
<div class="inlineNav">
<li class="navbutton">Home</li>
</div>
</a>
<a href="GD_Projects.html" id="GDP">
<div class="inlineNav">
<li class="navbutton">Game Design Projects</li>
</div>
</a>
<a href="Prog_Projects.html" id="PP">
<div class="inlineNav">
<li class="navbutton">Programming Projects</li>
</div>
</a>
<a href="3DG_Art.html" id="3DGA">
<div class="inlineNav">
<li class="navbutton">3D Game Art</li>
</div>
</a>
<a href="2DG_Art.html" id="2DGA">
<div class="inlineNav">
<li class="navbutton">2D Game Art</li>
</div>
</a>
<a href="About_Me.html" id="AboutMe">
<div class="inlineNav">
<li class="navbutton">About Me</li>
</div>
</a>
<a href="Contacts.html" id="Contacts">
<div class="inlineNav">
<li class="navbutton">Contacts</li>
</div>
</a>
</ul>
</div>
<div id="MainBody">
<div class="Table_of_Contents">
<div>
<h3>Contents</h3>
</div>
<a href="" id="Adaptchar">
<div class="PageLink">
<p>Adaptchar</p>
</div>
</a>
<a href="" id="PageLink">
<div class="PageLink">
<p>Project Techno</p>
</div>
</a>
<a href="" id="P2CM">
<div class="PageLink">
<p>Portal 2 Custom Map</p>
</div>
</a>
<a href="" id="Unreal">
<div class="PageLink">
<p>Unreal Target Test</p>
</div>
</a>
<a href="" id="RBA">
<div class="PageLink">
<p>Rockstar Bully Analysis</p>
</div>
</a>
<a href="" i="CM">
<div class="PageLink">
<p>Card Mechanics</p>
</div>
</a>
</div>
<div class="GDBody">
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Adaptchar</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/CBCdtNp6UU0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Adaptchar</h2>
</div>
<div class="PortExpl">
<p>By using Adaptchar, players playing role-playing games will be able to have their party grow
and
adapt to
how the
player wants to play the game. Using an Artificial Neural Network, players could either play
normally or
configure the weights of the ANN in order to teach the bots to make decisions that can
benefit
how
the
player
playstyle.</p>
</div>
</div>
</div>
<div class=Portblock>
<div class="PortPres">
<div class="PortObjname">
<h2>Project Techno</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/GxmuPkdXDzA" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Project Techno</h2>
</div>
<div class="PortExpl">
<p>Worked with the lead of Project Techno to develop the loading screen, the UI for the
Character
Select and
End of
Level Screens, and functionality of the game's main vehicle. This was a team effort, with me
being one
of the
programmers for the project.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Portal 2 Custom Map</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/r52zQmvZ4L0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Portal 2 Custom Map</h2>
</div>
<div class="PortExpl">
<p>Using Valve's Hammer Editor, I created a custom map for Portal 2 that called for the player
to
use
alternate
means to catch objects and to reach different parts of the map. Also made a tutorial on
making
custom
brush
shapes within the editor.</p>
</div>
</div>
</div> -->
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Unreal Target Test</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/itt-z1gIYxY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Unreal Target Test</h2>
</div>
<div class="PortExpl">
<p>Using Unreal Engine Blueprint, I created a target inlineNav map that had parts of the map
changing and
the
targets following a determined path.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Rockstar Bully Analysis/Other Blogs</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic"
src="https://docs.google.com/document/d/e/2PACX-1vQ--lYr9hisdK0AR5Vze8K9hldvgLg6EL8VhxnSyf2KaBBefB7-45DMnSH19fM0jk39mmECs4KTCd1M/pub?embedded=true"></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Blogs</h2>
</div>
<div class="PortExpl">
<p>Studied the design of Bully's tutorial level and broke it down for an audience of possible
Game
Design
Students. Did this for other games as well, such as Don't Starve and Uncharted.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Card Mechanics and Art for Bring Them To The Festival</h2>
</div>
<div class="PortPicBox">
<img class="PortPicSmall" src="Images/Card1.png">
<img class="PortPicSmall" src="Images/Card2.png">
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Card Mechanics and Art</h2>
</div>
<div class="PortExpl">
<p>Integrated a way to use cards for the Board Game called Bring Them To The Festival. Also,
created
the
card
art by using a mixture of Photoshop and Illustrator. Development on Bring Them To The
Festival
was a
team
effort, with me being the card artist of the team. </p>
</div>
</div>
</div>
</div>
</div>
<div class="Footer">
<p class="footinfo">Hakim Ottey © 2019</p>
</div>
</body>
</html>

How do I go from one div to a specific slide in a slider?

Suppose i have two pages. One is index.html and another is page.html. In page.html i have a slider which has 9 slides (using the plugin StackSlider). Now, when i will click in a link in index.html, i want to go to a specific slides say slide no 4 in page.html.
How can i do that?
I tried the following but it did not work
Here is my index.html code
<body>
go to 1st slide of page.html
go to 3rd slide of page.html
</body>
Here is part of code for page.html
<section class="main">
<ul>
<li id="one">
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li id="two">
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
</ul>
</section>

StackSlider cannot work with given parameter ,so you should 'fix it a little bit.
go to function _init within jquery.stackslider.js and instead of row:
this.current = 0;
place following:
if(!this.options.current)
this.current = 0;
else
this.current = this.options.current-1;
now you can pass initial parameter of which slide to show.
now your html should look like so->
go to 1st slide of page.html<br>
go to 2st slide of page.html<br>
go to 3st slide of page.html
and your page.html will look like-->
<ul id="st-stack" class="st-stack-raw">
<li id = "1">
<div class="st-item"> <img src="images/fl1.jpg" /> </div>
<div class="st-title">
image1
</div></li>
<li id=2><div class="st-item st-center"> <img src="images/fl2.jpg" /> </div>
<div class="st-title">
image2
</div></li>
<li id = "3"><div class="st-item"> <img src="images/fl3.jpg" /> </div>
<div class="st-title">
image3
</div></li>
</ul>
<script type=text/javascript>
//passing parameter from hash
var img2show = parseInt((location.hash || 5).split('#')[1]);
$( '#st-stack' ).stackslider({"current":img2show});
</script>

The plugin is not reading the hash value, that's why it's not working. BUT, you can pass the wanted slide with the hash and pass it to the plugin via the start options. Something like this:
var start = location.hash || 5;
$('#st-stack').stackslider({
start: start
});
<link href="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/js/modernizr.custom.63321.js"></script>
<script type="text/javascript" src="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/js/jquery.stackslider.js"></script>
<section class="main">
<ul id="st-stack" class="st-stack-raw">
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/1.jpg" />
</div>
<div class="st-title">
<h2>Graverobber</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/2.jpg" />
</div>
<div class="st-title">
<h2>Hideous Snake Queen</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/3.jpg" />
</div>
<div class="st-title">
<h2>Queen of Hearts</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/4.jpg" />
</div>
<div class="st-title">
<h2>Dead Pirate vs Kraken</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/5.jpg" />
</div>
<div class="st-title">
<h2>Mountain Lion</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/6.jpg" />
</div>
<div class="st-title">
<h2>Flying Skull</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/7.jpg" />
</div>
<div class="st-title">
<h2>The Fly & Bureaucratic Elephant</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/8.jpg" />
</div>
<div class="st-title">
<h2>Failsnake</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/9.jpg" />
</div>
<div class="st-title">
<h2>Cultist</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/10.jpg" />
</div>
<div class="st-title">
<h2>Crusader & Viking</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/11.jpg" />
</div>
<div class="st-title">
<h2>Crocodile</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/12.jpg" />
</div>
<div class="st-title">
<h2>Captain Banana</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/13.jpg" />
</div>
<div class="st-title">
<h2>Werewolf</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
<li>
<div class="st-item">
<img src="//tympanus.net/Development/StackSlider/images/14.jpg" />
</div>
<div class="st-title">
<h2>Vegetables</h2>
<h3>by Isaac Montemayor</h3>
</div>
</li>
</ul>
<p>Tip: to see a continuous flow, keep your mouse pressed on the navigation arrows.</p>
</section>
I just put 5 by default so you could see the effect but in your project, if you will redirect the user with the slide in the hash it will work for you without the default value.

How to reduce number of lines in jquery code

I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>

Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});

Fullpage.js sections not working

I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});

displaying a hidden div with a scroll down effect using jquery on hover

I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.
JsFiddle: http://jsfiddle.net/WZvPk/2/
This is what i have so far:
HTML
<div class="sectorWrapper">
<ul class="sectors">
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
<div class="sectorTitle">
Sector 1
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 2
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 3
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 4
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 5
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 6
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 7
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 8
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
<br />
</div>
</div>
</li>
</ul>
</div>
CSS:
/*force the image size to be set by css*/
div.sectorImage a img
{
width:193px;
height:88px;
}
div.showMe
{
display:block;
}
.sectorGrid
{
position:relative;
}
jquery
$("ul.sectors li").hover(
function () {
$("div.sectorImage div.showme").css("display", "block");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.
I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.
Could you help me now that ive explained better?

If you change this
$("div.sectorImage div.showme").css("display", "block");
to this
$(this).children(".sectorImage").children(".showme").css("display", "block");
you'll be showing only one div

Categories