I am using cluetip jquery plugin and I want to show laoding image inside the tooltip popup.
Just like facebook do. It shows a "loading..." text inside the popup window and then show the data.
Thanks
Here is an demo which can help you
My root folder contains the following files
index.html
demo.html
jquery.cluetip.css
jquery.cluetip.js
jquery.min.js
Koala.jpg
My index.html has the following code
<html >
<head>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="jquery.min.js"></script>
<script src="jquery.cluetip.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.sticky').cluetip();
$('#sticky').cluetip({
arrows: true,
sticky: true,
tracking: true,
mouseOutClose: true,
closePosition: 'title',
cursor: 'pointer'
});
});
</script>
</head>
<body >
<strong>Demo for tooptip</strong> <br>
<a id="sticky" href="#" rel="demo.html" title="Demo">ToopTip with arrows</a>
</body>
</html>
Here is the code for demo.html
<html >
<head>
</head>
<body class="page">
<img src="Koala.jpg" width="65" height="65" alt="Koala" />
<p>The koala is an arboreal herbivorous marsupial native to Australia, and the only extant representative of the family Phascolarctidae.</p>
</body>
</html>
Now open the index.html page and get the clueTip working
Related
I have a div tag with many anchor tags in it. On clicking a lick it should open a php page in another div tag of the same page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h2>Test</h2>
</header>
<div class="topnav" id="myTopnav">
page1
page2
page3
page4
</div>
<div id="content" >
</div>
<script>
$(function(){
$("#myTopnav a").click(function(e){
e.preventDefault(); //To prevent the default anchor tag behaviour
var url = this.href;
$("#content").load(url);
});
});
</script>
</body>
</html>
I have a nav bar and on clicking the links it should load a php page in content div. I tried the above code but it does not work.
The Reason is that its a local file at your system, you need to set up a webserver.
If the problem exist further then you can add "Cross Origin" headers to the called php files.
If it's not working for you, try the full context and see what the error message might be:
$( "#content" ).load( url, function( response, status, xhr ) {
if ( status == "error" ) {
window.alert(xhr.status + " " + xhr.statusText);
}
});
I have been trying to implement the FilePicker.io API to let users upload images on a product page and I have been desperately trying to display the uploaded files (images only) on the page. The Filepicker opens fine, I can upload the image successfully etc, so after uploaded a file I can see in the console that I have an object with some information about the newly uploaded file. All I want now is to display the images, using $.ajax POST ? Here is the code I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Upload</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//api.filepicker.io/v2/filepicker.js"></script>
<script type="text/javascript">
$(function() {
filepicker.setKey('l5uQ3k7FQ5GoYCHyTdZV');
$('#big-freaking-button').click(function() {
filepicker.pickAndStore({},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});
});
</script>
</head>
<body>
</div>
<div id="content">
<div class="row button">
Filepicker Something
</div>
</div>
</body>
</html>
UPDATE:
Ok I have manage to display one image... using the filepicker and a placeholder. Now can any one tell me how to display multiple images as a gird?
Working Exemple
$('#big-freaking-button').click(function(){
filepicker.pickAndStore({},{location: 's3'},
function(fpfiles){
console.log(JSON.stringify(fpfiles));
},
function(Blob) {
console.log(Blob);
console.log(Blob.url);
$.ajax("/upload", {
type: "POST",
data: {
product_id: {{{ $product->id }}},
img_path: Blob.url
}
});
}
)
};
You will need to store the URL somewhere for this to work, then in your HTML you can perform a foreach to display the images:
<?php foreach($product->images as $image){ ?>
<img src="{{{ $image->img_path }}}">
<?php } ?>
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
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>
There is my code so far. The issue is that the popup seems to be working perfect in Chrome but in Firefox it sticks to the top of the window after entering and in IE the popup does not even appear.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
</body>
</html>
I want the popup to behave in the same manner as it is in Chrome with all the browsers.
http://jsfiddle.net/fakhruddin/x39Rr/14/
Web Page Link
Please guide.
Try to add:
<body style="height:100%">
The solution is simple! Add to the begin of file:
<!DOCTYPE HTML>