jQuery mistakenly causes hover - javascript

I want to show hidden navigation with jQuery. Here is my code:
$(document).ready(function() {
var x = 0;
$(".navbar-fixed-top").mouseover(function() {
console.log("555");
if (x != 1) {
$(".header-triangle").fadeToggle();
$(".topbar-menu").slideToggle();
}
x = 0;
});
});
.topbar-menu {
background-color: rgba(84, 84, 84, 0.4);
height: 40px;
line-height: 40px;
direction: rtl;
display: none;
}
#fix-header {
background-color: rgba(84, 84, 84, 0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-xs">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid" id="fix-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/150_50.png" alt="image">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class=" hidden-xs ">
<a id="navbar-menu" href="#">
<img id="menuHeader" src="img/hamburgerMenu.png">
</a>
</li>
<li class="visible-xs">example
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="searchbox-navigation">
<form class="navbar-form" role="search">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default " type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
<input type="text" class="form-control" style="direction: rtl;" placeholder="search" name="q">
</div>
</form>
</div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
<div class="topbar-menu container-fluid hidden-xs">
</div>
</nav>
</div>
<script src="js/headerEvent.js"></script>
When I leave my mouse from that section, it logs another “555”. why does this happen? I want to have it logged just once.


here's a codepen link: http://codepen.io/anon/pen/RaGLWd
You'd wan to change it to either mouseenter or mouseleave to trigger it only once:
$(".navbar-fixed-top").mouseenter(function() {
console.log("555");
if (x != 1) {
$(".header-triangle").fadeToggle();
$(".topbar-menu").slideToggle();
}

Related

JQuery function not responding to navigate between buttons

I am expecting when I click the tab buttons the buttons to get active and display there corresponding content but I am not able to figure out why JavaScript function not working as expected. Below is my HTML, JavaScript and CSS respectively.
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="list" class="nav navbar-nav">
<li><a data-page="home-button" href="#">Home</a></li>
<li><a data-page="about-button" href="#">About</a></li>
<li><a data-page="contact-button" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div id="pages">
<div id="home-button" class="page" data-page="home-button">
<div class="container">
<div class="jumbotron">
<h1>Welcome to 2018</h1>
</div>
</div>
</div>
<div id="about-button" class="page hide" data-page="about-button">
<div class="container">
<div class="jumbotron">
<h1>Content 2</h1>
</div>
</div>
</div>
<div id="contact-button" class="page hide" data-page="contact-button">
<div class="container">
<div class="jumbotron">
<h1>Content 3</h1>
</div>
</div>
</div>
</div>
This is my JavaScript function:
$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
e.preventDefault();
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
This is my CSS:
.hide {
display: none;
}

This $("#pages .page:not('.hide')") is an incorrect selector,
has to be changed to this: $("#pages .page:not(.hide)")

$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
e.preventDefault();
var page = $(this).data('page');
$("#pages .page:not(.hide)").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="list" class="nav navbar-nav">
<li><a data-page="home-button" href="#">Home</a></li>
<li><a data-page="about-button" href="#">About</a></li>
<li><a data-page="contact-button" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div id="pages">
<div id="home-button" class="page" data-page="home-button">
<div class="container">
<div class="jumbotron">
<h1>Welcome to 2018</h1>
</div>
</div>
</div>
<div id="about-button" class="page hide" data-page="about-button">
<div class="container">
<div class="jumbotron">
<h1>Content 2</h1>
</div>
</div>
</div>
<div id="contact-button" class="page hide" data-page="contact-button">
<div class="container">
<div class="jumbotron">
<h1>Content 3</h1>
</div>
</div>
</div>
</div>

How to stick the header area at the top of page?

This is my header area section of my template. i want to stick the menu bar and logo at the top. I tried a lot for all most 4 days.But i couldn't.I use sticky.js plugin.But it wouldn't happen.What's wrong with my code?I couldn't understand.I use parallax in the header section.Is that for the problem.
.parallax-window {
background: transparent;
}
.parallax_bg {
z-index: 2;
position: relative;
color: #FFFFFF;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Try navbar-fixed-top in class of header.

Is this what you're trying to achieve?
.parallax-window {
position: fixed;
top: 0px;
left: 0px;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap navbar search button

I am trying to implement search menu on navbar in following way.
There is two design, which is one fore screen < 767px and another one above 767px.
Basically, I am able to expand the search bar but the position of the expanded search bar is not display correctly.
$(function(){
$("#search-button, #search-icon").click(function(e){
e.preventDefault();
$("#search-button, #search-form").toggle();
});
})
#search-form { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1
</li>
<li>Menu 2
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form role="search">
<button id='search-button' class='btn btn-default '><span class='fa fa-search'></span></button>
<div id='search-form' class="form-group">
<div class="input-group">
<span id='search-icon' class="input-group-addon"><span class='fa fa-search'></span></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</li>
<li><i class="fa fa-user"></i>
</li>
<li>Log In <span class="sr-only">(current)</span>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>

I would try this; it follows the bootstrap default for adding forms to the navbar, then you can adjust it for mobile viewports with CSS.
$(function() {
$("#search-button, #search-icon").click(function(e) {
e.preventDefault();
$("#search-button, #search-form").toggle();
});
});
#search-form {
display: none;
}
#media (max-width: 767px) {
.custom-navbar {
text-align: right;
}
.custom-navbar #search-button {
float: none;
border: none;
right: 0;
text-align: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1
</li>
<li>Menu 2
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i>
</li>
<li>Log In <span class="sr-only">(current)</span>
</li>
</ul>
<form class="navbar-form navbar-right custom-navbar" role="search">
<button id="search-button" class="btn btn-default"><span class="fa fa-search"></span>
</button>
<div id="search-form" class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search"><span id="search-icon" class="input-group-addon"><span class="fa fa-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>

Button to the left side of navbar-brand

I am trying to put a button on the left side of navbar-brand for toggling a sidebar. The button toggles the sidebar. In desktop mode, it works fine but on smaller screens, it changes position and comes to the right side of the navbar-brand.
Here are the screenshots.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Login.aspx" style="vertical-align: middle">
<img src="Logo.png" style="vertical-align: middle" /></a>
<label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium">Example Distribution</label>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search..." />
</form>
</div>
</div>
</nav>
<div class="container-sidebar">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Explore</li>
<li>Users</li>
<li>Sign Out</li>
</ul>
</div>
</div>

Just add this css class pull-left DEMO
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class=" navbar-toggle pull-left">

Just add this code on document.ready
There might be CSS alternative but I feel this is easy!
DEMO
$(document).ready(function(){
if($(window).width()<768)
{
$('#sidebar-toggle').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('#sidebar-toggle').css('float','left');
}
});
});
CSS Solution:
#media screen and (max-width: 768px) {
#sidebar-toggle{
float:left !important;
}
}
Updated DEMO

Bootstraps toggle menu won't open

For some reason that I can't figure out, bootstrap 3 on my site is having it's way with me. The toggle menu for when the screen-size is small won't open.
Site http://www.gamingonlinux.com, code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.gamingonlinux.com"><img src="/templates/default/images/navbar_logo_light.png" alt="GamingOnLinux" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li>Community Page</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b>
<ul class="dropdown-menu">
{:user_menu}
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" style="padding-right: 5px;" class="form-control search-bar" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</div>
</nav>

You have an overriding style in another style sheet, style.light.min.css:
#media (max-width: 985px) {
.navbar-collapse.collapse {
display: none!important;
}
}
Remove that, and the navbar will toggle correctly.

Categories

Resources