Basically I did a rollover in css but i want it in javascript instead. Also I want,once my page is loaded one of the pictures would be automatically selected. I tried this code for that but its not working.. any ideas? for some reason its not calling the function. ps: the id is called clicked3 as well in my html
<script type="text/javascript">
window.onLoad=function(){
clicked3();
}
function clicked3(){
document.getElementById("clicked3").style.backgroundPosition = "-198px top";
}
</script>
Do yourself a favor and use a javascript library, such as jQuery...
1) Javascript is case sensitive, so window.onLoad isn't the same as window.onload (correct sintax)
2) If your image is exactly 198px wide (you're hiding the image), you may have forgot to add background-repeat:no-repeat; in your css, making you see a copy of that image
Anyway, your sintax for changing background position is correct, see it in action here:
http://jsfiddle.net/zszB4/
The real reason your code isn't working is because you're assigning your function to a non-existent event handler onLoad. window.onload is the correct syntax, notice it's all lower case.
http://jsfiddle.net/9Kh8f/3/
You dont need the window.onload=function.. you can just call...
window.onload=clicked3();
Working demo here for you :)
http://jsfiddle.net/9Kh8f/
Related
Please consider this very simplified sample.
Below code remove a fixed nav bar from pages when screen size is small. It is named removeFixedNavbar().
This should be done when document is loaded and when window is resized. Please see the code. Well, this code seems some how ugly (calling removeFixedNavbar() twice, is it a better way to write it (with less code).
$(document).ready(function() {
removeFixedNav();
$(window).resize(function(){
removeFixedNav();
});
});
$(document).ready(removeFixedNav);
$(window).resize(removeFixedNav);
This should work, but i think it should be doable using CSS Media Queries only (depends upon the use-case).
Even simpler could be:
$(function(){
$(window).resize(removeFixedNav).trigger("resize");
});
Placing it at bottom most part can get rid of $(function(){...})
An other equivalent version can be:
$(function(){
$(window).trigger("resize");
});
$(window).resize(removeFixedNav);
Well you call it twice in document.ready.
Place window. resize outside document.ready event.
I have this fiddle:
http://jsfiddle.net/6HKJZ/3/
This is the part of CSS that causes troubles:
.r .rp{
max-width:50%;
}
.r .r2{
padding:5px;
max-height:60px;
background-color:#292929;
}
And this is the Javascript code:
$(".rp, .r2").dotdotdot();
I get informations from an external page, everything worked before, but now it does not.
This is what I get on my site:
Everything is correct but it's not working...
P.S. Sorry about bad formatting
when you call dotdotdot() it is to early stage to calculate domElements. I wired thing to a button click and it is working.
http://jsfiddle.net/6HKJZ/5/
I don't know when you call it exactly but try jquery dom ready event
$(function(){
//Your code
});
if this does not work try to call it little bit later with a setTimeout
AS I understand it you are trying to use a jQuery plugin that adds the method "dotdotdot". Your fiddle only includes jQuery, not the dotdotdot library.
If you check your console, running your project, does it give an "undefined" on the line it runs "dotdotdot"? It does on the fiddle.
I included the lib on this updated fiddle: http://jsfiddle.net/6HKJZ/4/. And it works.
$(".rp, .r2").dotdotdot();
I have been trying to change the background image of my HTML body with a .js but nothing happens. Do I need to put the Javascript code inside my HTML?
function plano1() {
alert('you');
$(document.body).css('background-image', 'url(img/planoSelected.png)');
}
This is the complete function I have been trying to do. Google Chrome shows the alert, but doesn't do the $(document.body). What am I supposed to do?
Notes: I use the function with a "onmouseover". I have already tried to use:
$('body').css('background-image', 'url(img/planoSelected_2.png)');
$("body").css('background-image', 'url(img/planoSelected_2.png)');
The jQuery code should be called at the bottom of the page, above the closing body tag.
Load jQuery first:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(img/planoSelected_2.png)');
});
</script>
The code is fine, but there are a few reasons why this might not work.
Make sure the image paths are correct, relative to the script's location
Is plano1 called?
Make sure jQuery is actually loaded
Make sure the DOM is ready when calling the function (use $(document).ready if not sure)
Make sure there are no errors in the code before plano1 is called
If these things are all right, and it still doesn't work, check if your onmouseover is working at all. Simply alert or log something in the console.
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
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>