I have a file called Head.inc which my index uses for the design of the page. which looks like this:
Name-----Marks----Age----Subject
Bob-------67------13------Maths
James-----89------15------English
But i need the files to be sorted by the subject:
----------Maths--------
Name----Marks----Age
Bob-------67------13
---------English------
Name----Marks----Age
James------84----15
This is my header.inc file:
<title>Contacts</title>
<!-- custom style -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- font awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- tynymce -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<!-- Custom js -->
<script type="text/javascript" charset="utf8" src="js/custom.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
Related
It doesn't show output <option>. It shows only the select with no element inside. I'm using bootstrap-select library. What's the problem?
$(function () {
$('select').selectpicker();
});
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/timeline.css">
<!-- ICONE -->
<script src="https://kit.fontawesome.com/6b765b0f40.js" crossorigin="anonymous"></script>
<!-- SELECT WITH SEARCH BAR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
You don't have any problem: It's working here:
Try to set the function like this (inside script tag):
<script type="text/javascript">
$(function () {
$('select').selectpicker();
});
</script>
I have designed a page using bootstrap 4. But it is not appearing according to my design. Below the code of CSS and JS files that I used. Also shared the excepted appearance and wrong appearance.
<!-- Link CSS // -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<!-- Link JS -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<!--<script src="../js/jquery-3.3.1.js"></script>-->
<script src="../js/bootstrap-datetimepicker.js"></script>
<!--<script src="../js/bootstrap-multiselect.js"></script>-->
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-select.js"></script>
<script src="../js/ajax.js"></script>
<!-- multiselect based on dropbox -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Graph Chart -->
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
Below the excepted Appearance
enter image description here
the Wrong appearance
enter image description here
Probably it's because the order of the CSS elements.
The latest you reference on the HTML document is the one who has more priority.
Try to first load the bootstrap base CSS and then the others:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
Please help, ajax is not working..
I tried the tutorial from here,
Ajax box PHP
it works well, but when the code is installed in a different page, I just don't want to work.
here is codes
<!DOCTYPE html>
<html lang="en">
<head>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
<script src="typeahead.min.js"></script>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/font- awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/simple-line-icons.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/fullcalendar.min.css"/>
<link rel="stylesheet" href="asset/datepicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="asset/css/plugins/datatables.bootstrap.min.css"/>
<link href="asset/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="asset/select2/select2.min.css">
<!-- end: Css -->
<script type="text/javascript" src="asset/js/jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="shortcut icon" href="asset/img/logomi.png">
</head>
<body>
<div id="content">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
</div>
please help... thanks..
Please try by including the js and other bootstrap files first. And then try to execute the jquery and ajax code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
Now it will works. Also make sure that all the js related files are included properly. While running the page in browser, type f12 and check the ajax call is generated or not.Hope it works.
I installed the plugin layeredpopups. But it does not work for me
I’ve tested the plugin on other sites, but it does not work on my site!
My site: artawp.com
Is js,jquery a problem?
Now I have the following js
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
tag head :
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<title><?php wp_title(''); ?></title>
<!-- Bootstrap CSS -->
<?php wp_head(); ?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Before closing body
This code is located in the footer
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
</body>
I have a website with 50 pages. I have a header.html I include on every page. In the header I link to my external CSS, and the same counts for the footer, except the links here are to external JS.
But a few of my sites I need to use a specific CSS and JS, that I did not implement yet. If I include that in the header, it means that all my pages are loading an external CSS or JS file, which I dont think is so good?
Is there a way I can only call a script on a few pages, without setting it in my header.html or footer.html?
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="resources/library/bootstrap/bootstrap.min.css" rel="stylesheet"> <!-- ok -->
<link href="assets/css/core/theme.css" rel="stylesheet"> <!-- ok -->
<link href="resources/library/bootstrap/bootstrap-reset.css" rel="stylesheet"> <!-- ok -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<!--external css-->
<link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" /> <!-- ok -->
<link rel="stylesheet" href="resources/library/flexslider/css/flexslider.css"/> <!-- ok -->
<link href="resources/library/bxslider/jquery.bxslider.css" rel="stylesheet" /> <!-- ok -->
<link rel="stylesheet" href="assets/css/core/animate.css"> <!-- ok -->
<link rel="stylesheet" href="resources/library/owlcarousel/css/owl.carousel.css"> <!-- ok -->
<link rel="stylesheet" href="resources/library/owlcarousel/css/owl.theme.css"> <!-- ok -->
<link href="resources/library/superfish/css/superfish.css" rel="stylesheet" media="screen"> <!-- ok -->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> -->
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="assets/css/core/component.css"> <!-- ok -->
<link href="assets/css/core/style.css" rel="stylesheet"> <!-- ok -->
<link href="assets/css/core/style-responsive.css" rel="stylesheet" /> <!-- ok -->
<link rel="stylesheet" type="text/css" href="resources/library/parallax-slider/css/parallax-slider.css" /> <!-- ok -->
<script type="text/javascript" src="resources/library/parallax-slider/js/modernizr.custom.28468.js"></script> <!-- ok -->
</head>
index.php
<body>
<p> A lot of content</p>
<?php include 'resources/includes/footer.html';?>
footer.html
<div>
<div>
<p> A lot of content</p>
</div>
</div>
**<!-- ********* The Magnific popup script I only use on 2 sites: *********-->**
<script src="js/module/jquery.magnific-popup.js"></script>
<!-- Scripts for all sites -->
<script src="resources/library/bootstrap/jquery-1.8.3.min.js"></script> <!-- ok -->
<script src="resources/library/bootstrap/bootstrap.min.js"></script> <!-- ok -->
<script type="text/javascript" src="resources/library/superfish/js/hover-dropdown.js"></script> <!-- ok -->
<script defer src="resources/library/flexslider/js/jquery.flexslider.js"></script> <!-- ok -->
<script type="text/javascript" src="resources/library/bxslider/jquery.bxslider.js"></script> <!-- ok -->
<script type="text/javascript" src="resources/library/parallax-slider/js/jquery.parallax-1.1.3.js"></script> <!-- ok -->
<script type="text/javascript">
$('.image-caption a').tooltip();
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist-three').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
};
// Run the show!
filterList.init();
});
$( document ).ready(function() {
$('.magnefig').each(function(){
$(this).magnificPopup({
type:'image',
removalDelay: 300,
mainClass: 'mfp-fade'
})
});
});
</script>
</body>
</html>
Example:
These two links I need on 1 side. Where should those to links be placed?
<link rel="stylesheet" type="text/css" href="assets/css/module/mixitup.css"> <!-- ok -->
<link rel="stylesheet" href="assets/css/module/magnific-popup.css"> <!-- ok -->
There is a simple way in core php use include in your custom pages to add header and footer. To add extra css add in content pages
index.php without extra css
include('header.php');
<div>
content goes here
</div>
include('footer.php');
about.php with extra css
include('header.php');
<link rel="stylesheet" type="text/css" href="assets/css/module/mixitup.css"> <!-- ok -->
<link rel="stylesheet" href="assets/css/module/magnific-popup.css"> <!-- ok -->
<div>
content goes here
</div>
include('footer.php');