using screenx/screeny and their ilk, not exactly working - javascript

my jsfiddle is here:
http://jsfiddle.net/diabetesjones/o9o9bs0h/3/
now, this is an example coming straight out of Javascript and JQuery by Jon Duckett, but it is not working for me.
i also thought that maybe his example was wrong, and instead of
el.addEventListener('mousemove', showPosition, false);
i should put
el.addEventListener('mousemove', function(event) { showPosition(event);});
but that didnt work either...been fiddling with this for a few hours now!
any clarification would be great, at this point i think its a typo. :p
thanks!!

there was some mistakes :
one : you were using : document.getElementById('body') and the body didnt have and id="body"
attribute.
two : you were using sx.value.... and you had to use sx.innerHMTL... becouse theya re DIV tags.
three : the code was excuting beofre the body was loaded thus not attahcing the event handler to it.
here is the FIDDLE its all fixed and tested
look for your self :)

Related

addClass('open') is not working in jquery

i am facing some weird problem. i am trying to add "open" class on certain condition. I am using following code.
$('.stereo-nav-pos .login-register').addClass("open");
but its not working. I have tried to debug and i came to know that actually its appending "open" class and then its going to jquery.js file,at the end of jquery.js execution its removing "open" class from DOM.
then i have tried to add class called "openn" and it worked fine. So i am figuring out the issue why jquery.js file is remove "open" class from DOM?
If i try to run this code in console then its working fine.
can anyone tell me what's going wrong here?
Thanks in advance
I'm not sure if this will work for you or not, I had encountered similar problem a while ago.
What I've done is that I used setTimeout().
So you may try this:
setTimeout(function(){
$('.stereo-nav-pos .login-register').addClass("open");
},10);
This will let the function to add the class open after a while so that it doesn't gets removed by the other jQuery function.
Adding class "open" works just fine.
Try to see if your selector selects anything
console.log("test",$('.stereo-nav-pos .login-register').length);
Check this jsfiddle test.
http://jsfiddle.net/ja4xapdg/
Tested it and it seems to work just fine for me, there must be something different that causes this problem to occur.
Result if it doesn't work: red background
Result if it does work: green background
http://jsfiddle.net/mnbtnk7h/

Show/Reveal Content

I'm just starting out with Javascript. I cannot figure out for the life of my why a basic function won't work. I'm trying to make so when you click the button, the "World" disappears.
I'm not really seeing a logical reason as to why this shouldn't work; I'm basically copying from w3schools introductory JS tutorials.
I thought it was an issue with the new "hidden" attributed in html5, but I tried the usual "style="display: none;"" route too and it didn't work.
Here is the JSFiddle: http://jsfiddle.net/6qDap/966/
Thanks in advance for helping me with such a simple question!
HTML:
<button type="button" id="my_button" onclick="hide()">Hello</button>
<div id="my_div">World</div>
JS:
function hide()
{
document.getElementById('my_div').setAttribute('hidden');
}
I just realized your code should work correctly. You should try putting the script in the head to make sure it loads before the DOM.
Ignore my previous answer:
I think you're looking for display: none
Here's a jsfiddle to show an example
The attribute probably needs to be set to a value, try:
document.getElementById('my_div').setAttribute('hidden', 'hidden');
Or alternatively, set the style attribute.
document.getElementById('my_div').setAttribute('style', 'visibility: hidden;');
To make it work on jsfiddle you should load the javascript on
No wrap - in - <head> or
No wrap - in - <body>
function revealPhotos() {
document.getElementById("div_2008").style.display = "none";
}
Here is your updated fiddle

Jquery img added through append() triggers onload twice

The code that produces the headache for me is rather simple:
$(function(){
$("#test").append('<img onload="alert(\'hi\')" src="Image.jpg"/>');
})
I have the above code in my head and a div with id 'test' in the body. Now my problem is that the page produces two alerts when the image is loaded, but I expected it to produce only one as the 'onload' should be triggered only once- The way it happens when I add the image manually without any javascript..
See the fiddle I made at: http://jsfiddle.net/9985N/
Any help/explanation is greatly appreciated...
UPDATED (Because some people don't believe me, lol)
Because .append creates the node first and then moves it to its appropriate position. Try appending the element first then adding its attributes as follow:
$(function() {
$("#test").append(
$("<img />").attr({
src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
onload: "alert(\'hi\')"
})
);
});
My answer does not "avoid" the problem, it answers it very directly. If you open the jQuery.js file in uncompressed format you can clearly see that .append creates the node on the document which is when the onload event is first called and then shifts it into position which is when it gets called again. Perhaps shift is the wrong word, forgive me as vocabulary is not my strong suit. However if you follow the code you see its creation and its movement, however the same is not said for using append again to move it, as the node is already created it simply moves from one element to another with no respark of onload. As I said, not sure best terminology, but it's very easy to follow along on the jQuery.js.
Don't believe me? Just tested the following fiddle in MSIE9, FF12, & GoogleChrome20 with 0 problems.
jsFiddle
just FYI, it's not really a horrible practice, but I see people write whole lines of HTML in jQuery all the time and that kind of defeats the purpose. It's a library with many books to read on purpose. Sometimes a complete line of HTML might seem easier, but it may not be faster as it doesn't follow all the great layout work that has been done for you. The idea is to "Write less, do more" and this includes HTML. After all, if you were gonna write the whole line of HTML, why use jQuery at all when you could just PHP it in!? :P Just a thought.
or this:
var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"/>').on('load', function(){
$('#test').append(img);
alert('loaded');
});

jQuery - Very simple issue i cant sort out (class's and an alert)

I think this may be my most embarrassing question to date.
Why does this not work? Ive been staring at this for around half an hour now and im starting to get desperate
http://jsfiddle.net/FU6Jb/
My HTML
<a class="closedialog" href="#">Close</a>
My JavaScript
$(document).ready(function() {
$("a.closedialog").click(function() {
alert("Test")
});
});
You forgot to add the jQuery library, at the left panel.
This fiddle does work: http://jsfiddle.net/FU6Jb/1/
More explanation on JSFiddle. The dropdown box above the Framework indicates where the code should be inserted. Using your current setup, your JavaScript code will be wrapped in a onload event. I recommend to use the nowrap (head) option.

This is ugly and there has to be a better way to write it in jQuery

$(this).parent().parent().parent().parent().find('[name=reply_to_id]');
Thats just stupid looking, but its the best way i can think of writing it. I tried parentsUntil('li') but that didnt work at all and i also tried parents('li') and closest('li'). Isnt there something in jQuery with the equivalent of:
$(this).firstParentThatMatchesThis('li').find('[name=reply_to_id]');
If not i think ill try submitting it to the jQuery core...
Here is my HTML (long so i put it on pastebin): http://pastebin.com/FypJ9WGe
Working on getting JSFiddle in there...
Try this:
$(this).parents("li").eq(0).find('[name=reply_to_id]');
Example: http://jsfiddle.net/FvzT9/
But, closest should work as well:
$(this).closest("li").find('[name=reply_to_id]');
Example: http://jsfiddle.net/FvzT9/1/
$(this).closest('li').find('[name=reply_to_id]');

Categories

Resources