I am making a site using Bootstrap 3.0.0
All is fine except that the dropdown menu is not working.
In the head of the file i am making this declarations:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
Something is missing there?
The html should be correct:
<li class="dropdown">
Dropdown-example<span class="caret"></span>
<ul class="dropdown-menu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 3</li>
</ul>
</li>
Does anyone knows how to do?
Link to your external javascript file jquery.js before Bootstrap.js.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
You need to load jQuery before you use it.
I'm not sure but this scripts should be probably included at the end of html document
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
Did you include jQuery too? Bootstrap plugins depend on this.
Just close the tag where you link to bootstrap.css. The "/" before the last angle bracket is missing in the code in your question. <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet" />
Related
I want to implement a date picker in one of my text input page. I have a page call panel.blade.php and app.blade.php which is the layout page. Since Laravel comes with bootstrap and jquery installed, I did the usual import to include the necessary files to make it work.Below is the code.
app.blade.php:
<head>
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
.
.
.
.
.
.
<script>
$('.date').datepicker({
format: 'mm-dd-yyyy'
});
</script>
panel.blade.php:
<tr>
<td>454542</td>
<td><input class="date form-control" type="text"></td>
<td>Chair</td>
<td>Received</td>
<td>xxxx</td>
</tr>
The problem is when I click on the textbox, it's supposed to pop out the date picker UI but nothing came out. I spent some time trying to figure out what went wrong but to no avail. Anyone can point out what went wrong?
Appreciate it.
The problem is that you are assuming that Laravel includes Bootstrap and jquery, but I don't see it in a fresh install. (Are you using a template maybe?)
Put this lines in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
And it should works perfectly ;)
EDIT:
Try putting the jquery import before the bootstrap datepicker import:
app.blade.php
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
EDIT2:
To change the format you can also try to add a property to the input field:
<input class="date form-control" data-date-format="mm/dd/yyyy">
Hope it works flawlessly!
I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file
I am trying to add a zoom on my image with the jQuery (brilliant) plugin gzoom (http://lab.gianiaz.com/jquery/gzoom/ or http://www.chouselive.co.za/demo/pictures/zoom/gzoom.php).
But it doesn't work. My image is just resized, but there is no zoom in it.
Here is my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test gzoom</title>
<link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jquery.gzoom.css" type="text/css" media="screen">
<style>
div#zoom{
cursor: crosshair;
}
</style>
</head>
<body>
<div id="gzoomwrap">
<div id="zoom" class="zoom minizoompan">
<span class="loader">loading...</span>
<img src='img/myImage.png'/>
</div>
<!-- START gzoom zoom bar -->
<div class="ui-icon ui-icon-circle-minus gzoombutton"> </div>
<div class="gzoomSlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width: 258px;"></div>
<div class="ui-icon ui-icon-circle-plus gzoombutton"> </div>
<br style="clear:both">
<!-- END gzoom zoom bar -->
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- START gzoom dependencies -->
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.slider.min.js"></script>
<script type="text/javascript" src="js/jquery.gzoom.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(function() {
$zoom = $("#zoom").gzoom({
sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});
});
/*]]>*/
</script>
<!-- END gzoom dependencies -->
</body>
</html>
I looked on the Chrome console, and found some errors in the libraries. So I assume I didn't implement gzoom correctly. (Doesn't work in all browsers)
If you know what I'm doing wrong... I'll thank you a lot !
I'm the gzoom plugin author.
The plugin was developed a lot of time ago, but it's still working with new versions of jquery and jquery ui.
If you include a modern jquery version you have also to include a modern version of jquery-ui.
I've just tried the plugin with this versions and it does his job:
jquery-1.10.2.min.js
jquery-ui-1.10.3.custom.min.js
Include this files, and remove the ui.core.min from, and ui.slider.min.
Hello guys I'm trying to implement the wmd editor like this on stackoverflow but I can't show the buttons of the editor only the textarea appears.. here is my codes.. Am I doing something wrong here? Or missing something? Thanks hopefully you guys could help me.
<!DOCTYPE html>
<head>
<link href="#Url.Content("~/Content/wmd.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/showdown.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/wmd.js")" type="text/javascript"></script>
<body>
<div id="wmd-button-bar" class="wmd-panel"></div>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
</head>
</body>
When I include the js for lightbox it prevents my other js from running; which means my jquery nav and slide down effects for divs stop working. Am I including the files in the correctly? I tried the endconflict() in the top of my script but that didn't work. Any help is greatly appreciated.
Thx
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
***<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />***
<script type="text/javascript" src="js/jquery.js"></script>
<script src="javascript/jquery-1.7.1.min.js"></script>
<script src="javascript/bootstrap.js"></script>
***<script type="text/javascript" src="../lightbox2.05/js/prototype.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/scriptaculous.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/lightbox.js"></script>***
<script>
<a href="images/Screen Shot 2012-02-27 at 9.51.49 PM.png" rel="lightbox">
<img src="../../images/Screen Shot 2012-02-27 at 9.56.49 PM.png" height="180" width="460" alt="">
</a>
The problem is that lighbox uses pieces of Scriptaculous and Prototype, which are other javascript libraries like jQuery is. They don't play nicely with each, so you have to tell jQuery to avoid them.
Rather than the typical document ready setup that you normally put your jQuery code in:
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
You will instead wrap your jQuery code in this:
jQuery(document).ready(function($){
// Stuff to do as soon as the DOM is ready;
});
You can read more about handling javascript library conflicts here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries