I am trying to add mouse over and mouseleave effets. Some code is coming on document load and some divs are loading by ajax
here is my code
$(".boxes").on('mouseover',function(){
ids = $(this).attr('vals');
myVar = setTimeout(function() {
$("." + ids).show();
}, 1000);
$("."+ids).css("display","block !important");
},function(){
clearTimeout(myVar);
$("."+ids).hide();
});
But this is not working
giving me error
ReferenceError: myVar is not defined. I write above code on document ready
How to fix this issue?
Thanks in advance
myVar = 1;
$(".boxes").on('mouseover',function(){
ids = $(this).attr('vals');
myVar = setTimeout(function() {
$("." + ids).show();
}, 1000);
$("."+ids).css("display","block !important");
},function(){
clearTimeout(myVar);
$("."+ids).hide();
});
you have to declare myvar outside the event.. then asign it a different value
Related
So i want to send a variable to my php page and output appropriate json there based on the data.
THis is what i did.I am new to jquery but have done php
$(function() {
$("#json-one").change(function() {
var dropdown = $(this);
var name=dropdown.val();
$.getJSON("categories_php?name=",{ "name": name },
function(data) {
prompt(data.name);
var $jsontwo = $("#json-two");
$jsontwo.append("<option>" + data.name + "</option>");
});
});
});
on the php page for test i have not done much
<?php
$m=new Mongo();
$db=$m->admin;
$collection=$db->categories;
$cur=$collection->find();
$name['name']= $_REQUEST['name'];
print_r(json_encode($name));
?>
You can use:
$.getJSON("categories_php",{ name: name }, function() {
//Some code
});
If NewMessage changes, I want an alert. I have tried live and change on and bind change, but nothing works.
Relevant PHP:
$message=6;
$myReturnData["Message"] = $message;
//JSON-encode and return
print json_encode($myReturnData);
Relevant jQuery:
setInterval(function(){
$.getJSON("foo.php", function(data){
var NewMessage=(data.Message);
if(NewMessage>0){
document.title= NewMessage + ' pm';}
$(NewMessage).live("change", function() {
alert(NewMessage);
});
});
}, 3000);
'change' is not doing what you think it should be. You should store the original message in a variable, then compare it to the new message you're getting. Like this:
var currentMessage = '';
setInterval(function(){
$.getJSON("foo.php", function(data){
var NewMessage=(data.Message);
if(NewMessage>0){
document.title= NewMessage + ' pm';
if (currentMessage !== NewMessage) {
alert(NewMessage);
currentMessage = NewMessage;
}
}
});
}, 3000);
Assuming you want function X to run when a variable controlled by the server changes. To that means you are using a polling mechanism.
So if you want your code to know when it receives a different message, you must store the previous message somewhere outside the scope of your callback function.
Most easy way:
var lastMessage = 'the server will never ever forever ever return this message';
setInterval(function(){
$.getJSON("foo.php", function(data){
// .. arbitrary code
if (lastMessage != data.Message)
{
alert('it changed');
lastMessage = data.Message;
}
// .. more arbitrary code
});
}, 3000);
i don't think the following code makes any sense or would even remotely work, because the NewMessage is not a DOM element, is it?
$(NewMessage).live("change", function() {
alert(NewMessage);
});
I have a php page with jQuery, with range sliders.
When the sliders are changed the jQuery code sums the values.
I also want this code to be fired when the page is loaded. But it doesn't happen when I trigger the function inside $(window).load(function() {}); or directly in $(document).ready(function() {});.
Here's the jQuery code:
$(document).ready(function() {
$(window).load(function() {
countSilders();
});
function countSliders(){
var SliderValue = parseInt($("#slider0").val())+parseInt($("#slider1").val())+parseInt($("#slider2").val());
if (SliderValue==10)
$("#submit_next").button("enable");
else
$("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue+"/10");
}
$(document).on("change","#sliders", function(){
countSliders();
});
});
Try this:
// First define your function
function countSliders() {
var SliderValue = parseInt($("#slider0").val()) + parseInt($("#slider1").val()) + parseInt($("#slider2").val());
if (SliderValue == 10) $("#submit_next").button("enable");
else $("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue + "/10");
}
// Run on ready, don't use ready and then on load, that will never happen
// And i changed the on() to change()
$(document).ready(function(){
countSilders();
$("#sliders").change(function(){
countSliders();
});
});
You should be able to do:
function countSliders(){
...
}
$(document).ready(function() {
countSilders(); // fire it on load
// bind it to sliders
$(document).on("change","#sliders", function(){
countSliders();
});
});
I am trying to call a function on href but its showing undefined function but the function itself is working when I call it inside album loop. Is there some other way of calling the function after appending the href? I tried using jquery onclick with the id of anchor but that doesn't work either and got no error. Any idea how I should be calling?
function getPhotosByAlbumID(albumID){
FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
$(photos.data).each(function(index, value){
console.log(value.source);
});
});
}
FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
$(me_album.data).each(function(index, value){
FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {
$('#facebook-cover').append('<li id="'+value.id+'"><img src="'+picture.data.url+'" /></li>');
});
});
});
Error: Uncaught ReferenceError: getPhotosByAlbumID is not defined
All appended like so..
<ul id="facebook-cover">
<li id="4758611198834"><img src="image-link"></li>
</ul>
try
var li=$('<li id="'+value.id+'"></li>');
var anchor=$('');
anchor.click(function(){
getPhotosByAlbumID(value.id);
return false;
});
var img=$('<img src="'+picture.data.url+'" />');
anchor.append(img);
li.append(anchor);
this way your click event must work. unless there is any error inside getPhotosByAlbumID();
you can also return false from the same function
My guess would be that the js-file is not properly included in the page where the html is. One easy way of testing if this is the problem would be to just put the javascript in the same file as your links. If this solves the problem, you have an include error.
Like so:
<script type="text/javascript">
function getPhotosByAlbumID(albumID){
FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
$(photos.data).each(function(index, value){
console.log(value.source);
});
});
}
FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
$(me_album.data).each(function(index, value){
FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {
$('#facebook-cover').append('<li id="'+value.id+'"><img src="'+picture.data.url+'" /></li>');
});
});
});
</script>
<ul id="facebook-cover">
<li id="4758611198834"><img src="image-link"></li>
</ul>
I notice you originally had a significant amount of indentation in your JS code. Is your getPhotosByAlbumID function within some other function perhaps? Something like this:
var module = (function () {
...
function getPhotosByAlbumID(albumID){
...
}
If so you need to make it accessible. Here is some info on the module pattern which may be useful.
Been building sites with this code from chris coyier recently. Ajax jquery .load() etc.
everything is working great.
see code dump here http://css-tricks.com/dynamic-page-replacing-content/
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href='"+newHash+"']").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
HOWEVER - I have now been turning all my pages into php - and I can't seem to hack it together... I thought I could just change the "html" to "php" in the jQuery... but that is not working...
Any help ?
Sorry to waste your time guys - I had been in front of this computer an unhealthy amount of time.
I had rushed and replaced href with php ... (thinking it was html)
REMEMBER TO TAKE BREAKS EVERYONE - OR FACE LOOKING LIKE A FOOL (Like me)
-thanks for your time...