how do i implement a jquery background messages? - php

for example when you get a new badge on stack overflow, you get the notifaction message on the top, telling you have a new badge, it deos that on the backgroung!! is thier a toturial or article that can help me with this kind eventing updates!!

You should look into notifications such as jGrowl. The site has some samples to help you get going :)
EDIT
How will you be storing notifications? Within a DB? I will get back to you later - My lunch break is over for now :(
EDIT 2
Here is a basic example of how to get it working with php by declaring an array of messages which you could easily populate from a database. You could make this more advanced by using the other options offered by jGrowl such as stickies etc by using a multidimentional array to store such options and outputting the correct javascript.
<?php
$messages = array("This is a message", "And this is another", "etc...");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jGrowl and PHP Test</title>
<link type="text/css" rel="stylesheet" href="jquery.jgrowl.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
<?php foreach ($messages as $message) { ?>
$.jGrowl("<?php echo $message; ?>", { life: 3000 });
<?php } ?>
});
</script>
</head>
<body>
</body>

Related

Mathjax not rendering TEX formulas dynamically from PHP/Ajax

var questions = {"ques_id":"1","question":"<p><span class=\\\"math-tex\\\">\\\\(x = {-b \\\\pm \\\\sqrt{b^2-4ac} \\\\over 2a}\\\\)<\/span> Test Question new with mathjax<\/p>","ques_type":"text_based_questions","correctAnswer":3,"choices":[{"option_id":"1","value":"Option A"},{"option_id":"2","value":"Option B"},{"option_id":"3","value":"Option C"},{"option_id":"4","value":"OPtion D"}]};
$('#test-question').html(questions.question);
MathJax.Hub.Queue(["Typeset",MathJax.Hub, 'test-question']);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false,
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>
</head>
<body>
<h5 class="border-bottom">Instructions: Read the question, work out your answer and select the best option.</h5>
<p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
<div class="question" id="test-question"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</body>
</html>
I'm getting the following question from Ajax request
MathJax is configured properly but the question coming from the JSON is not rendered by MathJax. The question are saved in MySQL database and are fetched by ajax request.
I tried everything but it still not working. Please help
From Json it added double slash. Plz remove that it will solve your problem.

Fine-uploader out of the box questions / errors

Attempting to run fineuploader right out of the box using the same code that's on the site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader Demo</title>
<link href="custom.fineuploader-4.0.3.css" rel="stylesheet">
</head>
<body>
<div id="fine-uploader"></div>
<script src="custom.fineuploader-4.0.3.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'server/handleUploads'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
Even before beginning to mess around with the endpoint.php I took a look at in a browser and I'm getting the following errors in Firebug:
ReferenceError: jQuery is not defined
}(jQuery));
custom....0.3.js (line 8012)
Error: Cannot find template script at ID 'qq-template'!
...ew Error(qq.format("Cannot find template script at ID '{}'!", options.templateId...
What am I missing?
jQuery library is missing in your code
add this in your head tag
<head>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
.
.
</script>
</head>

PHP variable as Javascript popup not working

I am using a PHP variable called LeagueLink. When the user is not logged in I want the variable to read the text (Already have a league...) followed by a link to a popup window. So far it is displaying correctly except when I click on the link nothing happens. I think I just have a syntax error from mixing so much PHP and JS, but I can't figure out where. Please help make the popup window link work if you can...
<?php
// this starts the session
session_start();
$_SESSION['userid'];
$message = "";
if ($_SESSION['userid'] == "") {
$message = "You must create an account or sign in to play!";
$LeagueLink = "Already have a league...<a href='JavaScript:newPopup(\"http://www.yourfantasyfootballreality.com/signin.php\");' class='two'>Sign In</a>";
} else {
$message = "Hello, " .$_SESSION['userid'] . " make your picks!";
}
?>
<!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>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="http://www.indiana.edu/favicon.ico" />
<title>YourFantasyFootballReality</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<?=$message?>
<?=$LeagueLink?>
<?=$ActionLink?>
</body>
</html>
JavaScript:newPopup is a function that needs to be defined.
I think what you are looking for is the following: You don't need javascript to open the page in a new window. Just set the target property of the link to _blank.
$LeagueLink = "Already have a league...<a href='http://www.yourfantasyfootballreality.com/signin.php' target='_blank' class='two'>Sign In</a>";
EDIT: If you want it popping up, rather than opening in a new tab, you can resize it immediately after it is spawned. Add the following to your javascript.
function newPopup()
{
var url='http://www.yourfantasyfootballreality.com/signin.php';
windowProperties = "toolbar=no,menubar=no,scrollbars=no,statusbar=no,height=500px,width=500px,left=50%,top=50%";
popWin = window.open(url,'newWin',windowProperties);
}
and keep your PHP the same as before.

Making a facebook album slideshow with php, html? jquery?

Hello I'm making a website, and I want the albums and photos from a facebook page to be shown in a box.
Here is an example
I want the albums and photos to be shown just like this, in a slide, instead of finding the it automatically takes the photos from any decided album.
Example page
Here is the code used in the example page, this takes random pictures stored in a folder and displays them, same method should be used for the facebook album. This is where I'm stuck.
The 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>*title*</title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 2, timeout: 200
});
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow/';
try {
// Styling for images
echo "<div id=\"myslides\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . "/" . $item;
echo "<img src=\"" . $path . "\" />";
}
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</body>
</html>
Hope you understand what I'm trying to say here :)
I have little knowledge about this, so be easy one me.
Sorry for my bad English.
From what i have understood
Give a name tag to each of the photos in an album.. when u click on one album all you need to do is run the a loop for that name tag.
If this doesn't suffice, explain your problem clearly. Some code will actually help understand the problem better

JSON: php to javascript data conversion gives me an error on eval

Hi im fairly new to using JSON and have been trying to pass an array from PHP to Javascript using JSON. I have been reading up a bit on it but am having an error on the eval function in javascripts side of the code. If anyone couid please help id really appreciate it thanks in advance!
PHP (lang.en.php)
<?php
$lang['TITLE'] = 'My Title';
$lang['MESSAGE'] = 'My Message';
?>
HTML/Javascript (index.php)
<?php
include "lang/lang.en.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' xml:lang='en' lang='en'>
<head>
<title>My Page</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script language='JavaScript' type='text/javascript'>
$(function(){
//Get the JSON string and pass it to the cb function
$.get("index.php", function(data){cb(data)});
})
function cb(data){
//converts the JSON string to a JavaScript object
eval("lang="+data); //This is where the error occurs
lang = dataToObj;
alert(lang.TITLE);
}
</script>
</head>
<body>
<? json_encode($lang); ?>
</body>
</html>

Categories