I have made a code --
<?php
header("Content-type: text/javascript");
require_once('../php/config.php');
$domail_theme = $_GET['theme'];
?>
<?php
if($domail_theme=='default')
{
?>
$('div.theme_content').mouseover(function () {
$(this).stop().animate({
backgroundColor : '#234'
}, 250, 'linear', function() { });
});
$('div.').mouseout(function () {
$(this).animate({
backgroundColor : '#ddd'
}, 400, 'linear', function() { });
});
<?php
}
?>
And here is the script including tag --
<script src="domail_res/scripts/java/settings_form_css.php?theme=default"></script>
The thing I want is that when I mouse over on the div element with class theme_content it's background changes according to the given one in the animate function. It is working for the input element but that script is original javascript and in this I have included php that's why I'm thinking whether the php code I used is wrong or my javascript. Also when I include this code in javascript file it works correctly. And by the I'm including the script tag in between the body tag, is it wrong? Please help me out with this one.
Thanks in advance!
Try to put it inside script. <script></script>
And also it's possible that DOM might not have been loaded. so try putting wrappint in $(document).ready(function() { /*Your code here*/})
And also put alert('hello'); to check if that code is being executed or not. It might be useful in debugging.
The most likly explanation is that 'theme" is not set to 'default' in your URL request.
This should be easy to check. Also you can "View" -> "Page Source" in your browser and look at the html your php program is actually generating. If my guess is right you won't see your mouseover function in the page.
Hi you should write like this:-
<?php
if($domail_theme=='default')
{
?>
<script>
$('div.theme_content').mouseover(function () {
$(this).stop().animate({
backgroundColor : '#234'
}, 250, 'linear', function() { });
});
$('div.').mouseout(function () {
$(this).animate({
backgroundColor : '#ddd'
}, 400, 'linear', function() { });
});
</script>
<?php
}
?>
Just need add tag between on your php if statement.
Hope can help you.
Does it work better if you add type='text/javascript' to your script tag?
<script type='text/javascript' src="domail_res/scripts/java/settings_form_css.php?theme=default"></script>
Why not just put the php logic in your main file and include the javascript as plain javascript?
<?php
if($domail_theme=='default')
{
?>
<script type='text/javascript' src="domail_res/scripts/java/settings_form_css.js"></script>
<?php
}
?>
Seems like overcomplicating things
Related
I am just starting with PHP. What i am trying to get to do is change the color of a div from a function that's in an included page. I was able to do this in jquery using load() function.
Here is my current work:
index.php:
include 'functioncontainer.php';
<div style="background-color:#ffff00;">I want this back. color changed</div>
functioncontainer.php:
`<script>
$(document).load(function() {
$('.change').click(function() {
$('div').css('background-color','#06C');
});
});
</script>`
I don't know php but I think you need to echo
echo "<script>
$(document).load(function() {
$('.change').click(function() {
$('div').css('background-color','#06C');
});
});
</script>";
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I'm building a web application inside CodeIgniter and I've decided to have a fiddle with jQuery and Javascript - something I've never really used before.
I have included jQuery in my header using Google Libraries:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And now I'm fiddling with the SIMPLEST of jQuery but it's not working.
<p><?php if ($post->love) { echo $post->love; } else { echo 0; } ?></p>
<script type="text/javascript">
$("#lovecounter").click(function() {
alert("Click");
});
</script>
I am clicking on the lovecounter link but there is no alert. If I add simple javascript to the actual anchor tag it works though.
<p><?php if ($post->love) { echo $post->love; } else { echo 0; } ?></p>
Any ideas? What am I doing wrong?
Wrap your code in ready handler:
$(document).ready(function(){
$("#lovecounter").click(function() {
alert("Click");
});
});
Working Example
This works perfectly fine for me:
<p>asdf</p>
<script type="text/javascript">
$(document).ready(function() {
$("#lovecounter").click(function() {
alert("Click");
});
});
</script>
You should include a $(document).ready(function() {}); just like Sarfraz said. Otherwise, it would not find anything with an id of lovecounter because nothing on the page has loaded yet. If you wait for it to load, then it will find the element. Here is some documentation: http://www.w3schools.com/jquery/event_ready.asp. Here is a full jQuery lesson: http://www.codecademy.com/tracks/jquery.
I'm a bit new to Ajax.
I've got a Ajax file which includes a php file and refreshes it every X seconds. That code for AJAX.PHP is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "SANAjax();", 10000 ); ///////// 10 seconds
$(function() {
SANAjax = function(){
$('#dataDisplay').fadeOut("slow").load('rand.php').fadeIn("slow");
}
});
</script>
<div id="dataDisplay"></div>
This code is working fine.
Bbut the html of AJAX.PHP page shows as it is code, while I want the output html of rand.php not javascript code given above. How can i do it?
suppost "rand.php" html out put (source) is: < html >< body >this is body <\ body ><\ html >.
I want this html to be shown on the html source of AJAX.PHP.
How can i do it?
If I mess any thing let me know, I'll try to make it more clear.
You need to run it. Not insert only as file.
$.post("rand.php", { },
function(data) { $('#dataDisplay').html(data) });
updated:
SANAjax = function(){
$.post("rand.php", { },
function(data) { $('#dataDisplay').fadeOut("slow").html(data).fadeIn("slow"); });
}
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_rand').load('rand.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_rand"> </div>
Don't forget to add the jquery library
why my code is not working? I have called a javascript function after page load PHP script.like below:
<script>
setTimeout("fb_login()",100);
</script>
fb_login() function is on same page
function fb_login()
{
alert("ok");
}
Tried with setTimeout("fb_login",100); too. but not working.
I have checked console, but it's giving no error.
Just change it to:
<script>
setTimeout(fb_login, 100);
</script>
Change this code:
<script>
setTimeout("fb_login()",100);
</script>
to this:
<script>
setTimeout(fb_login,100);
</script>
Good explanation from similar post - How can I pass a parameter to a setTimeout() callback?
It might be you given less time in setTimeout but and it's calling your function befor page loaded fully. So Try to increase time.
<script>
setTimeout("fb_login()",1000);
</script>
Make sure that fb_login is being initialized before calling otherwise it will give error. Either use document.ready or add that function before it is called. Does it give you some error like "fb_login is undefined" ?
try this
<script>
window.onload = function(){
setTimeout(fb_login,100);
};
function fb_login(){
alert("ok");
}
</script>
EDIT: first check if the below is working or not, if it does not work then pbm is somewhere else
window.onload = function(){
setTimeout(function(){
fb_login();
},100);
};