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>
Related
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"/>
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 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>
I'm using PHPChart for creating charts, now i want to have an option for exporting charts to pdf and images.
Bellow is my code:
<link rel="stylesheet" type="text/css" href="/phpChart_Enterprise/js/src/jquery.jqplot.css" />
<!--<link rel="stylesheet" type="text/css" href="/phpChart_Enterprise/examples/examples.css" />-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../flot/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../explorercanvas/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="/phpChart_Enterprise/js/src/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../flashcanvas/src/flashcanvas.js"></script>
<![endif]-->
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/jquery.js"></script>
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.canvasAxisTickRenderer.js"> </script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.canvasTextRenderer.js"></script>
<!--<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/canvasHack2.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
if (!$.jqplot.use_excanvas) {
$('div.jqplot-target').each(function(){
// Add a view image button
var btn = $(document.createElement('button'));
btn.text('View as PNG');
btn.bind('click', {chart: $(this)}, function(evt) {
evt.data.chart.jqplotViewImage();
});
$(this).after(btn);
// add a save image button
btn = $(document.createElement('button'));
btn.text('Save as PNG');
btn.bind('click', {chart: $(this)}, function(evt) {
evt.data.chart.jqplotSaveImage();
});
$(this).after(btn);
btn = null;
});
}
$('#stackChart1').CanvasHack();
});
</script>
But when i click on generated buttons Save as PNG and View AS PNG browser goes to loading and down.
For any help and guid thanks.
Did you check out the image export example? It's all done in Javascript.
http://phpchart.com/phpChart/examples/export_image.php
Not sure about PDF export, but I believe it would require some server side script. See example below.
https://phpchart.uservoice.com/knowledgebase/articles/443666-how-to-export-my-chart-on-the-server-side-in-php
How to write php code(variable) in tooltip
Here is my code:-
<head>
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
<script type="text/javascript">
$(function() {
$('.ChillTip').ChillTip();
$('.ChillTip1').ChillTip({
CTBK:'#fff',
CTBC:'#000',
CTW:'150'
});
});
</script>
</head>
<body>
<?php
$abc= 'Urvisha';
?>
For more info.
<button class="ChillTip" title="This is a button example">BUTTON</button>
</body>
I want the $abc in my tooltip
if i am writing $abc inside title="" then $abc is displaying not its value
plz help me.....
You just need to echo the variable into the HTML:
<button class="ChillTip" title="<?php echo $abc?>">BUTTON</button>