Can Onmouseover be used outside a Hyperlink? - javascript

I'd like to build onmouseover directly into a javascript block. I can do it within a hyperlink but I need to do it in the actual script section for the code im writing. Can I do object.onMouseOver()? Or is there another way to do it?
So for example I'd like
<script>
something i can put in here that will make on mouseover work on a specific object
</script>

Yes. :)
<span onmouseover="alert('Hi there')">Hi there</span>
Do you mean like that?
edited to add:
Ah I see so like this?
<span id="span1">Hi there</span>
<script>
document.getElementById('span1').onmouseover = function() {
alert('Hi there');
}
</script>

You bind events to HTML elements not javascript blocks. If you are talking about binding events to elements using script, yes you can do it. You can use addEventListener to bind events.
document.getElementById("eleid").addEventListener("mouseOver", myEventMethod, false);

Yes you can so if you have a link somewhere in the page that you want to fire the hover for you can use the following.
http://jsbin.com/asoma4/edit
EDIT: I should add that the attached is just an ugly example to demonstrate that what you want to do can be done. I would look into popular js libraries (jquery, prototype, etc..) to clean this up a lot and make it easier.

You can use addEventListener in Firefox/Chrome/etc. and attachEvent in IE. See this page.
For example,
<div id="cool">Click here!</div>
<script>
function divClicked()
{
// Do some stuff
}
var theDiv = document.getElementById("cool");
if(theDiv.attachEvent)
{
// IE
theDiv.attachEvent('onclick', divClicked);
}
else
{
// Other browsers
theDiv.addEventListener('click', divClicked, false);
}
</script>
If you want to avoid having to write all that code, you can use a JavaScript library (jQuery, Prototype, etc.) to simply your code.

Related

scratchpad.io functions don't work

I am trying to use functions on the website scratchpad.io, but they don't appear to work. I have tried using onclick events for buttons and just having it call the function from inside of the same script tag after it is defined. Does anyone know why this is, and how to fix it?
<script>
function Message(){
alert("scratchpad.io does not work with functions... You won't see this!");
console.log("scratchpad.io does not work with functions... You won't see this!");
}
Message();
</script>
<br>
<button onclick="Message();">Trigger Function</button>
scratchpad.io is for HTML & CSS, it does not support javascript. For that you can use one of the many other similar services that exist out there, like:
JSFiddle
JS Bin
CodePen

Rerun Jquery function onclick

I have a simple jquery script that changes the url path of the images. The only problem is the doesn't apply after I click the load more button. So I'm trying to do a workaround where it calls the script again after clicking the button.
<script type='text/javascript'>
$(document).ready(function ReplaceImage() {
$(".galleryItem img").each(function() {
$(this).attr("src", function(a, b) {
return b.replace("s72-c", "s300")
})
})
});
</script>
HTML
Load More
While Keith's answer will get you what you are looking for, I really can't recommend that approach. You are much better off with something like this.
<script type="text/javascript">
$(function() {
var replaceImage = function() {
$('.galleryItem img').each(function() {
$(this).attr('src', function(index, value) {
return value.replace('s72-c', 's300');
});
});
};
replaceImage();
$('.js-replace-image').on('click', replaceImage);
});
</script>
Using this html
<button class="js-replace-image">Load More</button>
By taking this approach, you do not expose any global variables onto the window object, which can be a point of issue if you work with other libraries (or developers) that don't manage their globals well.
Also, by moving to a class name and binding an event handler to the DOM node via JavaScript, you future proof yourself much more. Also allows yourself to easily add this functionality to more buttons very easily but just adding a class to it.
I updated the anchor tag to a button because of the semantics of what you need to do - it doesn't link out anywhere, it's just dynamic functionality on the page. This is what buttons are best served for.
I'd also recommend putting this in the footer of your site, because then, depending on your situation, you will already have the images updated properly without having to click the button. The only need for the button would be if you are dynamically inserting more images on the page after load, or if this script was in the head of your document (meaning jQuery couldn't know about the images yet).
I hope this helps, reach out if you have questions.

Why can't I call this object's function from an in-line anchor?

HTML:
Alert<br/>
Alert
Javascript:
var objection = {
sustained : (function() {return ("accroches-toi a ton reve")})
};
alert("In script: \n" + objection.sustained());
$("outdat").text( +"<br/>\n");
Working sample
Just curious here, why can't I call objection.sustained() from an anchor tag, but it's OK to do it from the script region?
It seems to not even know the object exists when using the anchor. Happens in several major browsers so I believe this is by design?
Use No Wrapper(head) or No Wrapper(body) on JSFiddle
Variable scope.
Fiddle is placing the variable in the document load scope so you're anchor code can not see it. As #kjy112 mentioned, remove this from those code blocks and all should work fine.

how to stop # links that call javascript functions from jumping to top of page

How do you I stop my links like this:
<a href="#" onClick="submitComment()">
From jumping to the top of the page after the click?
Many times you'll see people use the onclick attribute, and simply return false at the end of it. While this does work reliably, it's a bit ugly and may make your code-base difficult to manage.
<a href="#" onClick="submitComment(); return false;">
Seperate your HTML from your JavaScript
It's far better for you, and your project if you separate your markup from your scripting.
<a id="submit" href="enableScripts.html">Post Comment</a>
With the above HTML, we can find this element and wire up a handler for when the user clicks on the element. We can do all of this from an external .js file so that our HTML remains nice and clean, free from any scripting:
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", setup);
} else {
document.onload = setup;
}
function setup () {
var submit, submitComment;
submit = document.getElementById("submit");
submitComment = function (e) {
e = e || window.event;
e.preventDefault();
alert("You clicked the link!");
};
if (submit.addEventListener) {
submit.addEventListener("click", submitComment, false);
} else if (submit.attachEvent) {
submit.attachEvent("onclick", submitComment);
} else {
submit["onclick"] = submitComment;
}
}
There's a lot going on in the above code, but let's run over it from 30,000 feet. We start by figuring out how to best setup our code when the browser loads the page up. Ideally we'd like to do this when the DOM is ready.
After a few conditional checks we manage to instruct the browser to run our function after the DOM is prepared (this way our anchor element exists for us to interact with its behavior).
Our setup function gets a reference to this anchor, creates a function that we'll run when the anchor is clicked, and then finds a way to attach that function call to the click event of the anchor - losing your mind yet? This is the madness JavaScript developers have had to deal with for some time now.
With jQuery, this is much easier
Perhaps you've heard of jQuery, and wondered why it is so popular. Let's solve the same problem, but this time with jQuery rather than raw vanilla JavaScript. Assuming the following markup:
<a id="submit" href="enableScripts.html">Post Comment</a>
The only JavaScript we need (thanks to jQuery) is this:
$(function(){
$("#submit").on("click", function(event){
event.preventDefault();
submitComment();
});
});
That's it - that is all it takes. jQuery handles all of the tests to determine, given your browser, what the best way is to do this or that. It takes all of the complicated stuff and moves it out of the way so that you are free to be creative.
Add a return false. I believe that without that the page will reload.
<a href="#" onClick="submitComment(); return false;">
Just return false onClick of Hyperlink
Its will not scroll page up ie it will be still where it is
Unless you need the anchor to actual go somewhere, you don't need to use an "href=" reference at all.
Try just using <a id="stay-put">Submit Comment</a>
Then your javascript would look like this:
$("#stay-put").click(function(){
submitComment();
});
Try using:
Javascript is sweet!
This will anchor the page in the place it is at. I had this same issue and this was a simple and good fix for me.
An other simple way is
Link
Then you could have a separate code with onClick event to the class "action-class" with whatever framework you like or plain JavaScript.
You could use this alternative syntax instead:
<a href="javascript:submitComment()">

javascript doesn't execute on window.load

I have a javascript that executes within a element like : <a href="javascript:doSomething();"> but it doesn't execute on window.load , anyone knows why does that happen ?
With the example above doSomething() will only be called when the user clicks on the anchor. If you want it to execute on window.load you need to put the code in the head. i.e.
<script type="text/javascript">
window.onload = doSomething;
</script>
Also, if you're going to be using the onload event a lot I would personally recommend getting jQuery and using it's 'on DOM ready' event. This way your javascript will appear seamless to the end-user and won't have a flickering effect.
Have you tried writing <body onload="doSomething();">?
Assuming you did all the other suggestions, there is always a chance that someone later in the code (after your either <body onload=... or window.onload = ...) did exactly the same, and has overriden you.
If it happens to be the case (low chance) the solution to support both of your onload hooks, is window.attachEvent("onload", doSomething)
If I understand your problem correctly, you want to set an attribute in an element, calculating it dynamically via javascript, so that when the page is loaded your link points to the return value of "doSomething()".
For that you can use javascript's DOM manipulation utility functions.
In your case something like:
<a id="myLink">my anchor</a>
...
<script type="text/javascript">
getElementById('myLink').href = doSomething();
</script>

Categories