This is my coding for Qtip.But it wont be work .I dont know why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qtip</title>
<script type="text/javascript" src="/jquery demos/jquery1.4.2.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script>
<script>
$(document).ready(function()
{
// Match all link elements with href attributes within the content div
$("#content a[href]").qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
});
});
</script>
</head>
<body>
sdfsfsd
</body>
</html>
Thanks in advance?
Your selector is lookinf for <a href="something"> inside #content , so just remove that part, like this:
$("#content").qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
});
A space between selectors means look for descendants of matches of the preceding selector...the corrected, yet overkill selector would look like this: "a[href]#content", but...that's overkill (and therefore inefficient). The selector you're using is meant for the #content element to have links inside, like this:
<div id="content">
sdfsfsd
</div>
Or just use the qtip class you already have, like this:
$(".qtip").qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
});
Related
I am trying to do slide right but not working, When i am tryiing to write 'right' or 'left' instead of 'toggle'. it is not working. Please help me My code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul').hide();
});
function next(){
$('ul').animate({width: 'toggle'}, 1000);
}
</script>
<style>
ul{height:30px; overflow: hidden; }
ul li{ display: inline-block; padding: 10px; }
</style>
</head>
<body><p onclick="next()">next</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
Working demo here: Demo
JS Code:
$(document).ready(function(){
$("ul").hide();
$("p").click(function(){
$("ul").show("slide",{direction: 'right'})
});
});
You can try Sliding solution provided at: jQuery .slideRight effect
$(document).ready(function() {
$('#slider').click(function() {
$(this).animate(
{
'margin-left':'1000px'
// to move it towards the right and, probably, off-screen.
},1000,
function() {
$(this).slideUp('fast');
// once it's finished moving to the right, just
// removes the the element from the display, you could use
// `remove()` instead, or whatever.
}
);
});
});
I have an FTP setup on zymic.com. I have a jsonfile names testJson.json and a php file named index.php (obviously the default). I have some temperature data in the testJson.json file coming from a sensor. I want to display that onto the website (index.php) using highcharts. I have both testJson.json and index.php file on the same directory.
Although I believe that I am doing right but I am not getting the results. Below is my code of index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('testJson.json', function(data) {
// Create temperature chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Temperature graph in °C'
},
series : [{
name : 'Temperature',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="Highstock-1.3.2/js/highstock.js"></script>
<script src="Highstock-1.3.2/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I think you need to put your script after you load the hightstock.js and exporting.js
I can't figure out exactly how to make this work. I am new to PHP by the way.
Here is what I current have (zerkms's solution), and it still isn't working for some strange reason:
here is a link to the page on the server:
http://tinyurl.com/kd3gynk
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<?php
$srcmsg = 'http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg';
?>
<script type="text/javascript">
//<![CDATA[
//
var msr = "<?php echo $srcmsg; ?>";
window.onload = document.getElementsByTagName('img').src= msr;
//]]>
</script>
</head>
<body>
<img src="#" alt="Picture of the world" height="42" width="42" />
</body>
</html>
This has nothing to do with the PHP part.
This is not working purely because you are attempting to change an image that doesn't exist yet.
Either move your script to the end of the <body> (right before the </body> tag), or use window.onload = function() { /* your code here */ }, or implement some kind of deferring system.
With jquery, I'm attempting to pull information from a .php file and run it in another html page.
To try this out I attempted to use this example:
http://www.tutorialspoint.com/jquery/ajax-jquery-get.htm
The .php file would include:
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
================ The html page code includes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.get(
"/testing.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
The jquery library has successfully loaded, as per the "test result".
For some reason, the contents of the "testing.php" file are not being pulled... almost as though it's linked incorrectly. Is the file linked improperly? (both the .php and .html files are in the same folder)
I even tried doing something simple, like an echo statement in the php, but still nothing was pulled from the file and published to the html page.
There might be a simple fix that you see. I appreciate your time and energy in helping me resolve this issue. Thanks in advance!
You could simply do this: $('#stage').load('testing.php?name=Zara');
The files are hosted from a folder on my computer
This gives you two problems:
Browsers put pretty strict restrictions on what webpages loaded from the filesystem can do, loading other files via XMLHttpRequest is forbidden
PHP is a server side technology, it needs a server to work (in this context)
Host your site on a webserver. It can be one you run locally, then you can access the site via http://localhost/etc
Use jquery.ajax instead. Here is your HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax({
url: "testing.php",
data: { name: "Zara" },
success: function(data) {
$('#stage').html(data);
}
});
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
I would rather do the following...
<?php
if( $_GET["name"] )
{
$name = htmlspecialchars(trim($_GET['name']));
echo "Welcome ". $name;
}
?>
and
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.load( "testing.php?name=Zara, function(data) {
$('#stage').html(data);
}
);
});
});
</script>
I have 4 divs and on mouseover of each, I want the src of an img to change.
I have to get the images from PHP.
How can I use the array that I get in PHP over in my jQquery script?
And I know with just 4, I could just set up the array in javascript and put each image name, but that's not the functionality I'm looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div{
height:100px;
width:100px;
display:inline-block;
background-color:blue;
}
#my_image{
height:100px;
width:100px;
display:inline-block;
}
</style>
<?php
$images = scandir("images", 1);
?>
<script>
$(document).ready(function(){
$(div).mouseover(function(){
$("#my_image").attr("src", /*my php array*/);
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<img id="my_image" />
</body>
</html>
var images = <?php echo json_encode($images); ?>;
Then you have an array called images that you can use in your JavaScript code. Using it at the position of your comment makes no sense though. You can't assign an array to the src of an image.