I am now writing a web page using a bootstrap 3 template. When I include a jquery plugin (jquery-frontier-calendar) in my page, I found that it does not work. I guess the problem is due to overlapping of javascript library.
For example, if I use the code below, the calendar works well but dropdown menu in my page not work.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="image/pageLogo.jpg">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/homepage/navbar-static-top.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/calendar/frontierCalendar/jquery-frontier-cal-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/calendar/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" />
<script type="text/javascript" src="js/calendar/jquery-core/jquery-1.4.2-ie-fix.min.js"></script>
<script type="text/javascript" src="js/calendar/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/calendar/lib/jshashtable-2.1.js"></script>
<script type="text/javascript" src="js/calendar/frontierCalendar/jquery-frontier-cal-1.3.2.min.js"></script>
<script type="text/javascript" src="js/calendar/calendar.js"></script>
<script src="js/calendar.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
</head>
Dropdown menu:
<li class="dropdown">
About us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Company information</li>
<li>Contact</li>
</ul>
</li>
However, if I add the below in the code, the dropdown menu work well but calendar cannot be displayed.
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
Could anyone help to fix this problem?????
Try - jQuery.noConflict();
Check the usages in jQuery website
Related
Hi i am trying implement DRY by using jQuery load(). I want to have navbar.html that is on each page and is called by load() rather than having it on each html. All my files are in the same directory at the moment but I cannot seem to make the navbar load on the services page. please see my code below. I think there is a simple solution maybe its my syntax.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A_D Acupuncture in Amsterdam | Best In Amsterdam</title>
<meta name="description" content="A_D Ac upuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:title" content="A_D Acupuncture in Amsterdam | Best In Amsterdam">
<meta property="og:image" content="facebook-card.jpg">
<meta property="og:description" content="A_D Acupuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:site_name" content="A_D Acupuncture"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lora:700|Merriweather" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js" async=""></script>
hello world /* test */
<-- Navbar.html -->
<div class="navbar-ad">
<div class="navbar-logo">
<img id="logo" src="../images/logo.png">
</div>
<div class="navbar-right">
Home
Services
Contact
</div>
</div>
$(document).ready(() => {
$("#nav-placeholder").load("navbar.html");
$('#h1').html("heeey") /* test line to make sure filepath is correct */
});
I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.
I have a page that implemented using bootstraptour (a product tour page). It's working fine in large screens, like desktops and laptops.
But when I open that page in mobile device the entire UI is breaking, so I have found that there is no viewport in header.
So i have added following tag in header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and after that UI is much better but still breaking a lot. So is there anything that I need to add?
This is my page head links:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="//dujl9qf395ztu.cloudfront.net/js_new/jquery-1.9.1.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/Chart.js"></script>
<!-- JavaScript -->
<script src="//dujl9qf395ztu.cloudfront.net/js_new/bootstrap.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/bootstrap-tour.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/demo.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Hachi| Product Tour</title>
<!-- Bootstrap core CSS -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/bootstrap.css" rel="stylesheet">
<link href="//dujl9qf395ztu.cloudfront.net/css_new/tour_app.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/bootstrap-tour.min.css" rel="stylesheet">
<script src="//dujl9qf395ztu.cloudfront.net/js_new/jquery-1.9.1.js"></script>
</head>
I'm trying to use jScrollPane, and I'm getting jQuery is not defined.
We all know the universal answer to this: load jQuery first, however, i'm loading it before, and i'm intializing jScrollPane on $(document).ready() (I'm using jquery, how can it not be there?)
Here's my markup:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<script type="text/javascript" url="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" url="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- Jscrollpane so we can style scroll bar cross-browser -->
<!-- styles needed by jScrollPane -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
</head>
And here is my script
$(document).ready(function() {
/* Setting up the dropdown */
var dropdown = new DropdownMenu();
dropdown.run();
/* Setting scrollbar */
$('#dropdown-menu .content').jScrollPane();
});
What may be happening? All I can find around the web is telling me to initialize jquery first, but it is initialized.
Why url attribute instead of src in your script tag reference? I don't think it's a valid syntax.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Try:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
I visited Eyecon and downloaded the datepicker. I got three folders. 'css', 'js' and 'less'. I have included the bootstrap-datepicker.js and the latest jquery.js and linked the .css in the head:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<div class="well">
<!--What should I enter here and where/how do I call the function?-->
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
As one can see, I'm already working with the bootstrap library and have therefore also included that.
My question now is: how do I implement and call the date picker function?
$('element').datepicker(); where element is some class, id etc.
http://jsfiddle.net/6kk3k/1/
HTML
<input type="text" class="datepicker">
jQuery
$('.datepicker').datepicker();