I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it messes up the other tabs on my webpage and basically even if i click on the other tabs it does not navigate me.
I think there is a conflict between jquery and bootstrap. I am pasting my header.php file below for more reference.
header.php
<?php require_once "essentials.php";
//error_reporting(~0);
//ini_set('display_errors', 1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="logo" src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
<!--<script type="text/javascript">
//Script to implement tabs
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>-->
<script>
$.noConflict();
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
</script>
Can someone please let me know how do i solve this issue? and how should i load all the js and css files to avoid any issues with the webpage.
Thanks
data-toggle="tab" for bootstrap means there has to have a [tab panel] for it, however, you only use it as nav, and it caused the problem.
Please read: http://getbootstrap.com/javascript/#tabs
Also, use js closure can more easier to avoid js conflict issue:
(function($){
....
})(jQuery);
Please check the code below, you can use WinMerge to compare the code with your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title ?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<li class="dropdown">
<a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="userlogin">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
})(jQuery);
</script>
</body>
</html>
Usually when i run into jquery and bootstrap conflicts, i just add this as the first line of my php file:
<script>jQuery.noConflict();</script>
This is to avoid conflicts with other libraries.
You can read more here: https://api.jquery.com/jQuery.noConflict/
Edit:
Or use
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
instead of 1.10.3
Related
I am trying to load an external file within my HTML, but nothing happens.
My HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Navigation Bar</title>
<link rel="stylesheet" href="Mainpage.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src= "mainp.js"></script>
</head>
<body>
<div class="nav1" id="nav1">
<ul>
<li>School History</li>
<li>School Times</li>
<li>School Fees</li>
<li>Why?</li>
</ul>
</div>
<div id="article" class="article"></div>
<div class="aside">Aside</div>
<div class="footer">
<p>Contact Number: • Email Address: </p>
</div>
</div>
</body>
</html>
My js File
$(document).ready(function(){
$("reason").click(function(){
$("#article").load("Reason.html");
});
});
This is the external file I'm trying to run. Reason.html
<H1>Reasons Page</H1>
For some reason the dropdown in my navbar is not working. The dropdown button is there but it is not dropping, so there is probably something wrong in the triggering part of the dropdown. I've tried everything but I can't fix it, any help is appreciated. Here is the link to the documentation of materialize: https://materializecss.com/navbar.html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casual Clothing comparer</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<div class="row">
{% for post in final_products %}
<div class="col s12 m6 l4">
<div class="card horizontal hoverable z-depth-1-half">
<div class="card-image" id="card_image" style="height:300px">
<img src="{{ post.6 }}">
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{ post.0 }}</span>
<p>Initial Price €{{ post.3 }}</p>
<p>Discount {{ post.7 }}%</p>
<p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
</div>
<div class="card-action">
Buy
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
//Initialize dropdown
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
The $(document) is a jQuery selector and you did not included a path for the jQuery.
I added the following line to your code and the drop-down works fine: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. You can read more about this here.
The line of code should be included before the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The reason why your code did't worked is that Materialize CSS uses jQuery methods.
It was working fine until a while ago. I did not change anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">11:00 AM</li>
<li role="presentation">4:00 PM</li>
<li role="presentation">9:00 PM</li>
</ul>
</header>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="elevenam">
<div class="row">
<?php include_once 'elevenam.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fourpm">
<div class="row">
<?php include_once 'fourpm.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ninepm">
<div class="row">
<?php include_once 'ninepm.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Is there something wrong with twitter bootstrap??
my js used to be link
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
from their site but it stopped working so i tried the downloaded one and it still doesn't work.
I notice in their demo, it wasn't working either.
because
`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css%22%20integri ty=%22sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7`
is no more public. Upload a file on your server and load the css from there.
Since, I'm new in MVC, I've a question on how to set up a master page in MVC-4 using a template that I already have in aspx engine (not razor). After a ton of research, somehow I could able to run a sample index page using the master page which is placed inside shared folder.
But the problem is that the CSS files and .js files for the master page are not being triggered. So, what I see after running page is not as it expected to be.
I tried putting the js and CSS files inside content folder and tried putting in shared folder as well, but still the style is not showing up.
Master page code is as follows:
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Princi_Gym Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- hover-effects -->
<!-- //hover-effects -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<!--start-top-nav-script-->
<!--End-top-nav-script-->
</head>
<body>
<body style="">
<!-- header -->
<div class="header">
<div class="container">
<div class="header-top-left" id="home">
<ul>
<li class="activ">LAST NOTICE</li>
<li>Aliquam sit amet gravida ipsum,vitae scelerisque mi.Maecenas ullamcorper in
metus a ullamcorper.Sed dictum neque </li>
</ul>
</div>
<div class="header-top-right">
<p>Phone Number:<span> 043-234-3453</span></p>
</div>
<div class="clearfix"> </div>
<div class="head-logo">
<span> </span>
</div>
<div class="header-top">
<div class="navigation">
<span class="menu"></span>
<ul class="navig">
<li>Home</li>
<li class="plan active">CLASSES
<ul class="sub-nav sub">
<li>DROP ITEM1</li>
<li>DROP ITEM2</li>
</ul>
</li>
<li>PAGES</li>
<li>NEWS</li>
<li>GALLERY</li>
<li>TRAINERS</li>
<li>CONTACT</li>
<li>CONTACT</li>
<div class="clearfix"> </div>
</ul>
</div>
<div class="search">
<form>
<input type="text" placeholder="Type and search..." required=" ">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- script-for-menu -->
<script>
$("span.menu").click(function () {
$(" ul.navig").slideToggle("slow", function () {
});
});
</script>
<!-- script-for-menu -->
<!-- //header -->
<!-- banner -->
<!-- //banner -->
<!-- banner-bottom -->
<div class="banner-bottom">
<asp:ContentPlaceHolder ID="FeaturedContent" runat="server" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<%: Scripts.Render("~/bundles/jquery") %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</div>
<!-- //banner-bottom -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-icon footer-icon-top">
<img src="images/row.png" alt=" ">
</div>
<div class="footer-social">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="footer-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>ARCHIVES</li>
<li>CONTACT</li>
</ul>
</div>
<p>Template by w3layouts</p>
</div>
</div>
<!-- //footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function () {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
<span id="toTopHover"></span>To Top</body>
<div id="body">
</body>
</html>
And the sample page code is as follows:
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page - My ASP.NET MVC Application
</asp:Content>
<asp:Content ID="indexFeatured" ContentPlaceHolderID="FeaturedContent" runat="server">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Home Page.</h1>
<h2><%: ViewBag.Message %></h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
our forums.
</p>
</div>
</section>
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
Learn more…
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
Learn more…
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
Learn more…
</li>
</ol>
</asp:Content>
Any help will be greatly appreciated...
in my previous project , i have used the foundation 4 open source. that time i have got a top bar navigation. but now am again trying new project with foundation. for that i have downloaded http://foundation.zurb.com/develop/download-f4.html that is foundation4.3.2 version. i have refereed the foundation 4.3.2 version css and js in my new project, but the top-bar not coming its showing like tree view without any effort of foundation ?
if i refer the foundation 4 , top - bar is working...
then
why Top-bar not working while i refereeing the foundation 4.3.2 version ?
HTML code
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</ul>
</section>
</nav>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
Note: There is no error i found out at run time.. but my web page showing like tree view ( i used ul and li element) without any effort of foundation 4.3.2 version.
My web page should look like below image
The following should work:
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Options
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Configuration
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>');
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
I've done a few things here. First and foremost, I just formatted the code so it could be read easier. Second, I removed the call to foundation.min.js in the head. You're calling foundation.min.js at the foot of the body, and including it twice can cause confusion with naming variables. I also removed your call to foundation.topbar.js because this file is included in the minified script you've already included. Last I re-worked your dropdown menus so that Foundation could interpret them properly. Foundation expects to the dropdown menu to be within the parent li element. I also made the dropdown li text into anchors in accord with Foundation documentation.
Oh, and I added a semi-colon to the document.write() statement that includes jQuery/zepto.
This is not foundation 4.3.2 version problem. actually i have made some changes in foundation.css itself.. that made the problem for my web page. after i deleted changes made in the foundation.css then got the top-bar navigation.
So we dont make changes in the foundation.css itself.
better we can create customized css for our references.