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>
Related
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>
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm having a problem with the following piece of code.
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Products<span class="caret"></span>
<ul class="dropdown-menu">
<li>Salonlite</li>
<li>Premier Salon</li>
<li>Premier Spa</li>
<li>Core by Premier Software</li>
<li>College by Premier Software</li>
</ul>
</li>
<!--<li>
About Us
</li>-->
<li>
Careers
</li>
<li>
Partners
</li>
<li>
Support
</li>
<li class="dropdown">
News<span class="caret"></span>
<ul class="dropdown-menu">
<li>Premier News</li>
<li>Premier Blog</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<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 class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
I'm using bootstrap and have two collapsible navigation on top of each other. When I select on of the options in the lower navigation in smaller screens (ie mobile screens), the top navigation opens.
To see this in action please visit:
http://www.premiersoftware.co.uk/corebypremier/index9.php
Really I would just like the lower navigation animate the page without the top one opening.
Any suggestions would really be appreciated.
Thanks
Dan
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();
}
I got an error
Uncaught TypeError: undefined is not a function
in my jQuery script. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href="css/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="css/mycss.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function() {
$i = 0;
$("#append").click(function() {
$i = $i + 1;
$(".inc").append('<div class="controls"><input type="text"placeholder="Sub-category Name" name="subcat[]" class="tbox"> <span class="glyphicon glyphicon-remove"></span><br><br></div>');
return false;
});
jQuery('.remove_this').live('click', function() { //Error is shown here
$i = $i - 1;
jQuery(this).parent().remove();
return false;
});
$("#f_category").submit(function(e) {
var inputVal = $("#t_catname").val();
var sactval = $("#t_subcategory").val();
if (inputVal == "") {
alert("Please Enter Category Name");
$("#t_catname").focus();
e.preventDefault();
} else if (sactval == "") {
alert("Please Enter Atleast One Sub-Category Name");
$("#t_catname").focus();
e.preventDefault();
}
});
});
</script>
<div id="maindiv" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top Header" role="navigation" style="border-color: #99ccff;">
<div class="container-fluid">
<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 fhtext" href="index.jsp"><img src="Img/dt.png" width="40" height="32" /> Catalog Tracking System</a>
</div>
<div class="navbar-collapse collapse">
<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>
</div>
<div id="menu_content">
<div class="col-sm-3 col-md-2 sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Product Master
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse ">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li class="active" ><span class="glyphicon glyphicon-list"></span> Category</li>
<li ><span class="glyphicon glyphicon-th-list"></span> Sub-Category</li>
<li ><span class="glyphicon glyphicon-book"></span> Product</li>
<li><span class="glyphicon glyphicon-th-large"></span> Stock</li>
</ul> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
User Master
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse ">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li ><span class="glyphicon glyphicon-filter"></span> Role</li>
<li ><span class="glyphicon glyphicon-tree-conifer"></span> Level</li>
<li><span class="glyphicon glyphicon-user"></span> User</li>
<li><span class="glyphicon glyphicon-earphone"></span> Address</li>
</ul> </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Order Master
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li><span class="glyphicon glyphicon-shopping-cart"></span> Order</li>
<li><span class="glyphicon glyphicon-plane"></span> Shipment</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Shipment Log</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Reports & Messages
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-sidebar">
<li><span class="glyphicon glyphicon-file"></span> Reports</li>
<li><span class="glyphicon glyphicon-bell"></span> To Do</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Category</h1>
<ul class="nav nav-tabs" role="tablist">
<li>Display</li>
<li class="active">Add New</li>
<!--<li>Messages</li>-->
</ul>
<br><br>
<div class="alert-success"><p></p></div>
<div class="col-md-6">
<form role="form" action="Con_Category" id="f_category">
<div class="form-group">
<input type="text" name="action" value="insert" readonly style="display: none;"/>
<label>Category Name</label>
<input id="t_catname" type="text" class="form-control" placeholder="Category Name" name="cat">
</div>
<div class="control-group form-group">
<label class="control-label" for="inputEmail">Sub-Categories</label>
<div class="inc">
<div class="controls">
<input type="text" placeholder="Sub-category Name" name="subcat[]" id="t_subcategory" class="tbox">
<button class="btn btn-info btn-sm" type="submit" id="append" name="append"><span class="glyphicon glyphicon-plus"></span></button>
<br>
<br>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-primary"><strong>Submit</strong></button>
</form>
</div>
</div>
</div>
</div>
<div>
<div class="footer">
<footer class="fhtext">
<span class="glyphicon glyphicon-copyright-mark"></span> Powered By<br> Dantek Technologies Pvt. Ltd.
</footer>>
</div>
</div>
</body>
</html>
As per the screenshot you can see that there is plus and cross buttons on this page the plus buttons add a new set of textfield and button and the cross remove the textfield beside it. Currently this feature is not working, but if inverse the two jQuery calls in my head it will work but features of bootstrap.js will not work.
The plus and cross feature works on jquery.min.js and the bootstrap.js works on jquery-2.1.1.js. If I remove jquery.min.js the plus minus feature will not work and if i remove jquery-2.1.1.js the bootstrap feature will not work. Please tell me how will I solve this problem so that both of my features will work.
Problem is here
jQuery('.remove_this').live
live method has been removed from jquery 1.9
use .on method instead.
You can also Try:
jQuery('.remove_this').click(function() { //Error is shown here
$i = $i - 1;
jQuery(this).parent().remove();
return false;
});