I want to make this source code, I copy this source code in my notepad and I paste it in one file, include CSS, JavaScript and HTML. The file name is sel.php.
I take the source code from http://jsfiddle.net/davidThomas/x5YW3/
I include my CSS with:
<style type="text/css">
----this_source_css----
</style>
JavaScript with :
<script type="text/javascript">
----this_source_javascript----
</script>
And HTML in:
<html>
<body>
----html_source_code----
</body>
</html>
But this code does not work in my copy paste, whereas I run in jsfiddle working fine, what might be wrong?
Just a guess - include your javascript-
$(document).ready(function(){
// your code here
});
Also make sure you included JQuery source in your file.
However, Your fiddle code is being executed "onLoad" - check the dropbox below "Choose Framework".
As Pekka pointed out, if you do intend your code to run after "load" instead when your dom is ready, you can use this -
$(document).load(function() {
// your code here
});
An explanation of the difference between the two events is here
As #Boaz Said:
You haven't included jQuery in your document. Get the latest version from jquery.com and also use this:
$( function() {
// paste js code here
});
Related
How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">
To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.
I wrote a tiny piece of script. It's working when I add it directly into my page. But how do I make it working when the script is in a .js file? And is it enough to put the code into a .js file? Or do I need to add extra lines of code?
I know I have to refer to the file in the header. But that doesn't do the trick. This is the script:
$("#david").mouseover(function() {
$('#charlotte').addClass('hover');
$('#timon').addClass('hover');
}).mouseout(function() {
$('#charlotte').removeClass('hover');
$('#timon').removeClass('hover');
});
$("#charlotte").mouseover(function() {
$('#david').addClass('hovert');
$('#timon').addClass('hovert');
}).mouseout(function() {
$('#david').removeClass('hovert');
$('#timon').removeClass('hovert');
});
$("#timon").mouseover(function() {
$('#david').addClass('hovertt');
$('#charlotte').addClass('hovertt');
}).mouseout(function() {
$('#david').removeClass('hovertt');
$('#charlotte').removeClass('hovertt');
});
I hope you guys can help me out!
I know it's a very basic question, but I can't find the answer I need and I'm still a noob at making scripts..
Within the your HTML document add the second line after your jQuery script.
<script src="/js/jquery.js"></script>
<script src="/js/name-of-your-file.js"></script>
In the example, I've prepended /js/ to your scripts. It's best practice to separate your files into specific folders, so you'll have to create a new js folder. Also, jQuery needs to be in place and ready for you to start using it. If you need to wait for the document to load then you'll need to wrap your code in the following.
$(function() {
// Past your code here.
// This syntax is simply a shortcut for
// $(document).ready(function(){});
});
First of all you will need to include that javascript file in your html page:
<script src="yourscript.js"></script>
or
<script src="pathToYourScript/yourscript.js" type="text/javascript"></script>
furthenrmore you will need to tell the js when to execute and I would recomend either wrapping your code in
$(document).ready(function{
// your code here
})
or in window.load
$(window).load(function{
// your code here
})
or in self executing function :
(function(){
// your code here
})();
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.
I am new to jQuery and am stuck at some strange issue. I am using jQuery's change and click methods. They are working fine when used in my HTML file in the <script> tag.
Like:
<script>
$("select,input").change(function ()
{
// My code and some alerts
});
</script>
When I copied the same in external JavaScript code without <script> and imported that in my HTML it was not at all working.
Are there any changes which are needed to use jQuery in external JavaScript code?
PS: Some other non-jQuery functions present in same external JavaScript code are successfully called from HTML.
First off, you don't want a <script> tag in an external JavaScript file, if that's how I'm reading your post.
The trick with jQuery is that your code is set to execute immediately.
You want to wrap your script so that it loads when the document is ready, in something like:
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
});
And you want to make sure that your file is loaded after jQuery (otherwise the $ global will not be set).
Additions:
Here is what your HTML should look like:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jscript/myExternalJs.js"></script>
Here is what your JavaScript code should look like (note there is no script tag inside the JavaScript file):
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
// Other event handlers.
});
As far as your other script... it sort of depends on what you're doing. The most important thing is to not try to hook event listeners up to objects that don't yet exist, which is why we use document.ready.
Did you make sure jquery is defined before your own jquery code?
You should also make sure the DOM is ready when dealing with jquery:
$(document).ready(function() {
$("select,input").change(function() {
// my code and some alerts
});
// more code here if needed, etc.
});