I'm really bad at css or designing and I'm struggling to fix this.
Here is the outcome:
<!-- Scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<!-- <script id=js-dispatcher src='scripts/scripts.js'></script> -->
<script type="text/javascript">
var SubjTable = $("#SubjTable").DataTable({
columnDefs: [ {
targets: 0
} ]
})
</script>
Related
When I run this in a blade.php file it return's a blank white page. I don't know my error can any one help me. or give any suggestion I am new to Laravel.
graph.blade.php
<html lang="en">
<head>
<title> Bar Chart | Laravel Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-5">
<div id="barchart_material" style="width: 100%; height: 500px;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product Id', 'Sales', 'Quantity'],
#php
foreach($products as $product) {
echo "['".$product->id."', ".$product->sales.", ".$product->quantity."],";
}
#endphp
]);
var options = {
chart: {
title: 'Bar Graph | Sales',
subtitle: 'Sales, and Quantity: #php echo $products[0]->created_at #endphp',
},
bars: 'vertical'
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</body>
</html>
Controller file
public function barChart(){
$data=Sql::all();
return view('graph',compact('data'));
}
}
any suggestions would be great!
I am working on an application struts 1/HTML. The idea is to make the website responsive using bootstrap 4. I have an issue when trying to add options using javascript. The "All" and "none" are not displayed. Screenshot of menu
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
<head>
<title><mfb:message key="registration.title"/></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/d1ed746900.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/i18n/defaults-en_US.min.js"
integrity="sha512-m8hWkNWHy3+ItOW2VjI5JEpu04AXwLMef1xho55Pmw9pdwocACt8wYo/+yznN3o5JqYcmHOHe7x6Th5cEcqZsA=="
crossorigin="anonymous"></script>
</head>
<body>
<select class="selectpicker " multiple>
<option data-hidden="true">Select</option>
<option data-subtext="AUS">Australia</option>
<option data-subtext="INA">Indonesia</option>
<option data-subtext="IND">India</option>
<option data-subtext="GBR">United Kingdom</option>
<option data-subtext="USA">United States of America</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-select',
selectAllText: 'All',
deselectAllText: 'None'
});
$('.selectpicker').selectpicker('refresh');
});
</script>
</body>
</html>
Please, do you have an idea. Thank you.
Only need to add a "multiple" attribute to the select header:
https://developer.snapappointments.com/bootstrap-select/examples/#multiple-select-boxes
UPDATE:
I found the reason it didn't work so far: You forget to includes the bootstrap-select plugin resources(css and js files) to your code:
https://developer.snapappointments.com/bootstrap-select/#quick-start
My working example (external resources in under Settings):
https://codepen.io/adampweb/pen/jOMmwPO
Hi i have now a big project done in angularjs and my index.html file starts to be very long :
<!DOCTYPE html>
<html class="no-js">
<head>
<title>InTouch</title>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Utilise LESS -->
<link rel="stylesheet" href="stylesheets/ngprogress-lite.min.css">
</head>
<body ng-app="InTouch">
<!--<div ng-include="" src="'./partials/header.html'"></div>-->
<div ng-view>
</div>
</div>
<!-- <div id="footer">
<div class="container">
<div ng-include="" src="'./partials/footer.html'"></div>
</div>
</div> -->
<!-- Fix for old browsers -->
<script type="text/javascript" src="javascript/less.min.js"></script>
<script type="text/javascript" src="angularLib/angular.js"></script>
<script type="text/javascript" src="angularLib/angular-animate.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="angularLib/angular-messages.js">
</script>
<script type="text/javascript" type="text/javascript" src="angularLib/angular-route.js"></script>
<script type="text/javascript" src="angularLib/angular-strap.js"></script>
<script type="text/javascript" src="angularLib/angular-strap.tpl.js">
</script>
<script type="text/javascript" src="angularLib/ui-bootstrap.js"></script>
<script type="text/javascript" src="angularLib/angular-css.min.js">
</script>
<script type="text/javascript" src="angularLib/angular-cookies.js"></script>
<script type="text/javascript" src="angularLib/http-auth-interceptor.js"></script>
<script type="text/javascript" src="angularLib/angular-resource.js"></script>
<script type="text/javascript" src="angularLib/angular-file-upload.js"></script>
<script type="text/javascript" src="angularLib/ngprogress-lite.js"></script>
<script type="text/javascript" src="angularLib/ngStorage.js"></script>
<script type="text/javascript" src="angularLib/angular-growl-notifications.js"></script>
<script src="angularLib/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angularConstant/geolocation_msgs.js"></script>
<script type="text/javascript" src="angularConstant/useragentmsgs.js"></script>
<script type="text/javascript" src="angularConstant/config.js"></script>
<script type="text/javascript" src="angularControllers/NavbarAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/AdminNavbarAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/MainHeaderAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/modal/ModalInstanceAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/MainAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/AnnouncesAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ProfileAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ActualityAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/modal/AboutModalAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/HistoricAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/MessageAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/PictureAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ReputationAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/WalletAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/admin/AdminAngCtrl.js">
</script>
<script type="text/javascript" src="angularDirectives/compareToValidatorDrct.js">
</script>
<script type="text/javascript" src="angularDirectives/fmRatingDrct.js"></script>
<script type="text/javascript" src="angularDirectives/onBlurDrct.js"></script>
<script type="text/javascript" src="angularDirectives/onFocusDrct.js"></script>
<script type="text/javascript" src="angularDirectives/emailAvailableValidatorDrct.js"></script>
<script type="text/javascript" src="angularDirectives/userFilterDrct.js"></script>
<script type="text/javascript" src="angularDirectives/fmCheckboxListDrct.js"></script>
<script type="text/javascript" src="angularDirectives/usernameAvailableValidatorDrct.js"></script>
<script type="text/javascript" src="angularDirectives/paginationDrct.js"></script>
<script type="text/javascript" src="angularDirectives/fileUploadDrct.js"></script>
<script type="text/javascript" src="angularDirectives/headerDrct.js"></script>
<script type="text/javascript" src="angularDirectives/adminHeaderDrct.js"></script>
<script type="text/javascript" src="angularFactories/GeolocalisationFctr.js"></script>
<script type="text/javascript" src="angularFactories/UserAgentFctr.js"></script>
<script type="text/javascript" src="angularFactories/AuthFctr.js"></script>
<script type="text/javascript" src="angularFactories/SessionFctr.js"></script>
<script type="text/javascript" src="angularFactories/UserFctr.js"></script>
<script type="text/javascript" src="angularFactories/AnnouncesFctr.js"></script>
<script type="text/javascript" src="angularFactories/AnnouncesFromUserFctr.js"></script>
<script type="text/javascript" src="angularFactories/CommentsFctr.js"></script>
<script type="text/javascript" src="angularFactories/FriendsFctr.js"></script>
<script type="text/javascript" src="angularFactories/MessagesFctr.js"></script>
<script type="text/javascript" src="angularFactories/RoomsFctr.js"></script>
<script type="text/javascript" src="angularFactories/SocketFctr.js"></script>
<script type="text/javascript" src="angularFactories/ProfileFctr.js"></script>
<script type="text/javascript" src="angularFilters/starsFltr.js"></script>
<script type="text/javascript" src="angularFilters/cutFltr.js"></script>
</body>
</html>
What is the method to divide this file into different ones ? Is it a problem to have such a long file ? Would'nt it have any problem of loading ?
#felix, this is not a problem to have a long index file as you have presented. Consider the tag for instance ng-include, you may want to uncomment and use this as a resource.
<!--<div ng-include="" src="'./partials/header.html'"></div>-->
This will fetch html asynchronously after initial load.
https://docs.angularjs.org/api/ng/directive/ngInclude
Now consider your app.js, it will register as many modules that your project is using. These modules will be loaded asynchronously. So it is not such a terrible thing having as many script tags listed as you do.
<script type="text/javascript" src="app.js"></script>
When you build this for production, I would recommend minifying and concatenating your scripts however, that will reduce the number of requests to the server.
The AngularJS Yeoman project has examples on how to do that.
https://github.com/yeoman/generator-angular
For development, what you have is fine. However when you deploy to production, you will want to combine all of the JavaScript files into one so that you have a single script. This SO question: Combine and Minify Multiple CSS / JS Files gives some good suggestions on how to do this. The most upvoted tool is minify.
Here are some reasons why combining the files would be a good idea:
It's faster. One single download is more efficient than many small downloads. (See this question: Is it better to load many small JavaScript files or one large JavaScript file?)
SEO. Many search engine spiders only index up to a certain number of bytes. You will want to make your head as succinct as possible in order to allow the engine to get to the real content.
I paste the script for a video and I getting conflict when I paste the video script it make to stop my menu and slider using another version of jQuery, how I can fix it?
This is my head:
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Beautiful_ES_italic_400.font.js"></script>
<script type="text/javascript" src="js/OptimusPrincepsSemiBold_600.font.js"></script>
<script src="js/script.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
<script src="index_videolb/jquery.js" type="text/javascript"></script>
<script src="index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
This is the Body section:
<!-- Start VideoLightBox.com BODY section -->
<div class="videogallery">
<a class="voverlay" href="index_videolb/vdbplayer.swf?volume=100&url=video/devocional.mov" title="Devocional">
<img src="index_videolb/thumbnails/devocional.png" alt="Devocional" /><span></span>
</a>
<span class="videolb">
<a class="videolb" href="http://videolightbox.com">Lightbox in Flash</a> by VideoLightBox.com v2.7m
</span>
</div>
<script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script>
<script src="index_videolb/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section -->
From looking at the VideoLightBox site, it looks like it uses jQuery 1.9.1. If that version is compatible with the rest of your code, you can move index_videolb/jquery.js to the top and remove 1.7.1...
<link rel="stylesheet" href="css/style.css">
<script src="index_videolb/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Beautiful_ES_italic_400.font.js"></script>
<script type="text/javascript" src="js/OptimusPrincepsSemiBold_600.font.js"></script>
<script src="js/script.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
<script src="index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
I have this program and i want to add a jquery datepicker on it, but for some reason (maybe its how i put in order the library), it won't show. I created a sample .html file that would only display a datepicker and it shows the datepicker. Here's the code of my .html file (that shows the datepicker):
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
datepicker.js code:
$(function() {
$( "#date" ).datepicker();
});
And this is my other .html which i wanted to insert my datepicker, (but unfortunately, it won't show):
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--this is for my jqgrid-->
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
<!--this is for my other .js files-->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="globalFunc.js"></script>
<script type="text/javascript" src="tallySheet.js"></script>
<script type="text/javascript" src="mainindex.js"></script>
<script type="text/javascript" src="prime-settings.js"></script>
<!--this is for my closable tabs-->
<script type="text/javascript" src="js/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>
Please, anybody here know where should i insert the code to display the datepicker? Please help.
Edit:
here's my input date inside the body tag (this code is in the two .html file):
date: <input type = "text" id = "date" value= "[select date]" color = "gray">
Without the complete HTML file it will be difficult to say, but try this:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<!--this is for my jqgrid-->
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
<!--this is for my other .js files-->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="globalFunc.js"></script>
<script type="text/javascript" src="tallySheet.js"></script>
<script type="text/javascript" src="mainindex.js"></script>
<script type="text/javascript" src="prime-settings.js"></script>
<!--this is for my closable tabs-->
<script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>
You are loading 2 versions of jquery and 3 versions of jquery.ui. Put jQuery first followed by jQuery.ui. If that doesn't solve the problem, can you post the complete html file?
Based on your code, you need a
<input type="text" id="date" />
somewhere in your markup
You are right 37Stars, by loading two different version of JQuery you cause the Datepicker's opening fail.