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>
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 tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
I'm trying to load a range slider in PHP (slider like one of http://ghusse.github.io/jQRangeSlider/demo.html).
This is the slider in HTML, which works (see: http://www.leff-design.nl/websites/sliderpreview/test.html):
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="jQAllRangeSliders-min.js"></script>
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script>
//<!--
$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});
//-->
</script>
</body>
</html>
Now I tried to set this to php but don't know exactly how to do this. I tried this (it's not the full php code but just a part of an Advanced custom field plugin php file):
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fields/css/iThing.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/jQAllRangeSliders-min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).load(function() {
$('#slider').editRangeSlider();
});
})(jQuery);
</script>
<?php
function create_field( $field )
{
{
echo '<script type="text/javascript">$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});</script>';
}
}
new acf_field_number_range();
?>
Also tried to echo the slider code but it does nothing. It does not get the right css classes like in the HTML file. How do I exactly connect the #slider id with the jquery files in php?
Thanks in advance.
Never mind, I forgot the <div id="slider">. Stupid.
I am getting an error ReferenceError: jQuery is not defined in jquery-ui-1.8.17. I tried to change code to jquery-ui-1.8.16 but that is also not working.
My template view is as follows:
<head>
<LINK REL="SHORTCUT ICON" HREF="<?php echo base_url('theme'); ?>/images/icon.jpg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('theme/css');?>/style.css" />
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery.js"></script>
</head>
can any one help me ??
you need to include jQuery base library first, and then you can include custom.
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
May be this link http://forum.jquery.com/topic/and-jquery-not-defined-problems
can help you out. maintaining the order can resolve your problem.
Change the order of your include scripts:
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
include jQuery before adding jQuery-ui
I am very inexperienced with PHP and I've having trouble calling a mootools function.
Here's my code:
echo '<script language="JavaScript">';
echo "Sexy.error('Test!');";
echo '</script>';
When viewing source code looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bath Solutions</title>
<link xmlns="" href="html_includes/css/main.css?version=10.03.05" rel="stylesheet" type="text/css" media="all" />
<link xmlns="" href="html_includes/mootools/Autocompleter.css?version=10.03.05" rel="stylesheet" type="text/css" media="screen" />
<link xmlns="" href="html_includes/css/print.css?version=10.03.05" rel="stylesheet" type="text/css" media="print" /><link xmlns="" href="html_includes/css/schedule.css?version=10.03.05" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="html_includes/mootools.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/main.js.php?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/datepicker.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Observer.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Autocompleter.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Autocompleter.Request.js?version=10.03.05"></script>
<script type="text/javascript" src="html_includes/mootools/sexyalert/sexyalertbox.v1.2.moo.js?version=10.03.05"></script>
<link rel="stylesheet" type="text/css" media="all" href="html_includes/mootools/sexyalert/sexyalertbox.css?version=10.03.05"/>
<script type="text/javascript" src="html_includes/fckeditor/fckeditor.js?version=10.03.05"></script>
</head>
<body>
<script language="JavaScript">Sexy.error('Test!');</script>
...
When I try it with a simple alert('test') it works just fine.. I'm confused?!?
UPDATE: I tried a calling the Sexy.error() onClick in an anchor tag and it works fine:
click to test
wrap the call into a domready
<script type="text/javascript">
window.addEvent("domready", function() {
Sexy.error('test');
});
</script>
if the class depends on any part of the dom, like <div id='sexy'></div> being 'there', it won't work as is--at the time of running of the script block, the target div won't be available for DOM manipulations yet.
You haven't specified your version of mootools, but according to this there is not error method. Try changing your code to:
echo '<script language="JavaScript">';
echo "Sexy.alert('Test!');";
echo '</script>';
instead.
and remember to add this to your html too:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.moo.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>
You have to learn how to use FireBug - will help you greatly in such cases.