Inserting javascript in to html file - javascript

How can I run this script, tried to run it in html file, but it doesn't seem to work..
I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/
<script type="text/javascript">
$('.question, .answer')
.css("display", "none");
$('.section')
.click(function ()
{
var $others = $('.question:visible')
.not(this);
$others.next('.answer')
.hide();
$others.slideToggle(500);
$(this)
.next('.question')
.slideToggle(500);
});
$('.question')
.click(function ()
{
$(this)
.next('.answer')
.slideToggle(500);
});​
</script>

First make sure you're including the jQuery library:
<script src="path/to/jquery.min.js"></script>
Make sure you're not including the jQuery within those tags, so you've got:
<script src="path/to/jquery.min.js"></script>
<script>
/* Your jQuery here */
</script>
And then ensure you're using a $(document).ready(), or $(window).load(), handler:
<script src="path/to/jquery.min.js"></script>
<script>
$(document).ready(
function(){
/* Your jQuery here */
});
</script>
The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.

put this code before the body close tag
Your Code
</body>

I would go this way:
<head>
...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.question, .answer').css("display", "none");
$('.section').click(function ()
{
var $others = $('.question:visible').not(this);
$others.next('.answer').hide();
$others.slideToggle(500);
$(this).next('.question').slideToggle(500);
});
$('.question').click(function ()
{
$(this).next('.answer').slideToggle(500);
});​
});
</script>
...
</head>
First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.

Related

How can I link JQuery AND another JS file to my html?

I need some help linking my JS file to my html file after I linked jQuery from Google CDN. I could do and put the code inside, but it makes my code look untidy.
This is what I'm doing:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script src="images/script.js"></script>
<script src="script.js"></script>
After that, my code does not work. However, when I put it into script tags, it does. I'm linking to script.js correctly, but the code doesn't activate when I try clicking on something. What can I do to fix this?
The code I created was:
$('div').on('click', function () {
$(this).toggleClass('show-description');
});
Thanks!
Try putting your code within document ready function from jQuery. The issue is your DOM is not ready at the time you defined the onclick handler.
jquery document ready function
$( document ).ready(function() {
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
});
Check your file pathway for your script.js file in regards to your html file.

Jquery not working inside of .net project

I have this script referenced inside my main.master file:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js" type="text/javascript"></script>
and inside of my Web User Control I have this jquery but it isnt working, i cant really see where there would be a problem. My code works just fine inside of jsfiddle:
<script type="text/javascript">
$(".package-container").click(function () {
$(this).closest('.radio-group-row').find('.package-title').removeClass('highlight');
$(this).find('input:radio').prop('checked', true);
$(this).find('.package-title').addClass('highlight');
});
</script>
EDIT
My jquery is referenced near the bottom of my master page above the closing body tag.
Make sure your jQuery include is placed early on the page (HEAD element) and either place your code at the end of the body element or wrap it in a DOM ready handler like this:
<script type="text/javascript">
$(function(){
$(".package-container").click(function () {
$(this).closest('.radio-group-row').find('.package-title').removeClass('highlight');
$(this).find('input:radio').prop('checked', true);
$(this).find('.package-title').addClass('highlight');
});
});
</script>
$(function(){YOUR CODE HERE}); is a shortcut for $(document).ready(function(){YOUR CODE HERE});
The advantage of using DOM ready handlers, is that you can place the jQuery code anywhere (including injection by child views/controls).
Update:
If you also need to locally scope your $ variable, I suggest using this rather nice shortcut DOM ready handler. It passes the jQuery instance as a first parameter to the DOM ready function you provide:
jQuery(function($){
// Your code placed here can use $ without any worry about other packages!
});

Sidebar Toggle doesn't work despite of the inline javascript

I'm developing a template. While doing so, i encountered a error. I have placed a button that toggles the sidebar from invisible to visible state.I have used the right codes to initiate the jquery response.But the sidebar doesn't toggle.Help me solve this issue
html
<a id="click-slide">
<span>
\
</span>
</a>
Javascript
<script type="text/javascript">
//<![CDATA[
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
//]]>
</script>
My site
i have used it with and without Cdata.Where did i go wrong
You should put your javascript code into document.ready. The reason behind document.ready is you put your javascript code before the a#click-side element. That means when your javascript executed, in the page there is no element called a#click-side. When we put into document.ready it downloads your javascript and all document gently and then starts executing your javascript code.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
//]]>
</script>
You've not wrapped your code in a document.ready event handler. Change it to this...
jQuery(function($) {
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
It was trying to assign the click event handlers before the page was loaded, so none of the elements actually exist at that time. Wrapping in the ready handler, as above, means it will only run the script when the page has finished loading.
Added your code when document gets ready.
<script type="text/javascript">
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
</script>

jQuery conflict when removing div after page load

I'm trying to remove a div from the page (preferably prevent it from loading at all)
but for now I'm settling on removing it after the page loads.
When I try the following lines of code in jsFiddle, the #content div gets removed, as expected.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#content').remove();
});//]]>
</script>
However, I have also tried implementing it on an actual website, but in that case, the #content div isn't removed.
Any suggestions as to what might be wrong?
If you're sharing jQuery with another library that uses the dollar for its operation you need to guard against it like this, using an anonymous wrapper:
(function($) {
$(window).on('load', function(){
$('#content').remove();
});
}(jQuery));
Note that instead of .load() I'm using .on('load', fn).
Instead of on page load you could also bind your code on DOM ready; jQuery passes itself as the first argument to the inner function:
jQuery(function($) {
$('#content').remove();
});
Your $ variable does not point to jQuery for some reason.
<script type='text/javascript'>
window.$ = jQuery;
$(window).load(function()
{
$('#content').remove();
});
</script>
Try with this
<script type='text/javascript'>
$(document).ready(function(){
$('#content').remove();
});
</script>
or
$(function()
{
$('#content').remove();
});
It's because you have a javascript error when you call $(window).load().
Uncaught TypeError: Object [object global] has no method 'load'
Also, you should better use document.ready instead as the content will be removed faster (doesn't need to wait for all the images to load).
//shorthand for $(document).ready()
$(function(){
$('#content').remove();
});
TypeError: $(...).load is not a function
It is giving error above instead of below one as load is deprecated in new version of Jquery
$(window).load(function(){
});
use this code
$(function(){
// your code here
})
use this:
<script type="text/javascript">
var node = document.getElementById('content');
if(node.parentNode)
{
node.parentNode.removeChild(node);
}
</script>
Hope this help.
Case of jquery conflict. You have mootools framework too on the page.
Also I did a 'view source' of the page and I found out this line
$j = jQuery.noConflict(); //line 132
So try this
$j('#content').remove();
Or
jQuery('#content').remove();
You are using jQuery testing with onload,
so you have to add onload syntax in jquery, on your site the statement was not called onload, that why its not working
I have updated fiddle
http://jsfiddle.net/MarmeeK/FRYsJ/3/
The JS code under <script> tag, without adding in onload in page,
<script type="text/javascript">
$(document).ready(function(){$('#content').remove();});
</script>
this should work :)

jquery .load isn't checking if my element is loaded

I have this code
<script type="text/javascript">
$("#main_photo_display").load(function(){
alert("loaded");
});
</script>
<div id="main_photo_display"></div>
I need it to do something once that div has loaded. Currently it does nothing. When I substitute window for "#main_photo_display" it works. I have googled and I keep coming across .load as how to check if a page element has been loaded.
The load event is sent to an element when it and all sub-elements have
been completely loaded. This event can be sent to any element
associated with a URL: images, scripts, frames, iframes, and the
window object.
Source: http://api.jquery.com/load-event/
Further down on the same page they state:
It doesn't correctly bubble up the DOM tree
So you can't delegate this event, the event handler must be attached to the element on which the load event fires.
Or you can run the script after the DOM is ready like so:
<script type="text/javascript">
$(document).ready(function() {
$("#main_photo_display").load(function(){
alert("loaded");
});
});
</script>
<div id="main_photo_display"></div>
Sorry I think I read it wrong :) You need this:
<script type="text/javascript">
$(document).ready(function() {
alert('loaded');
});
</script>
A plain div does not have a load event except when you are loading content into it with ajax (which I don't think is what you are doing here). If your code is physically located after the div in your page, then the div will be available and ready for your code to operate on it (you don't have to check anything).
If your code is located before the div in the page, then you can use jQuery's .ready() method to know when it is safe to access the div:
<script type="text/javascript">
$(document).ready(function() {
// safe to access $("#main_photo_display") here
});
</script>
<div id="main_photo_display"></div>
I don't think a DIV fires a loaded event. If there was a blank.gif image within the DIV, you could attach the $.load() function to that.
<div id="main_photo_display">
..... Other Content .....
<img class="loadcheck" src="blank.gif" width="0" height="0" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#main_photo_display img.loadcheck").load(function(){
alert("loaded");
});
});
</script>
You can't do that: load events are not fired on just any HTML element, only on those that require loading an external resource.
The best way to ensure the element is loaded is to put the script tag after it in the markup.
<div id="main_photo_display"></div>
<script type="text/javascript">
alert("loaded");
</script>
The Javascript will not be run before the div is parsed.
I have a sort of workaround, and it is sloppy (please comment out if you have notes).
It is useful when you have a javascript out of your control which appends elements to your dom on a page load.
$(function () {
var counter = 0;
var intervalId = setInterval(function () {
$(document).mouseover()
}, 105);
var unbind = function () {
$(document).off('mousemove', '#label');
$(document).off('mouseover');
window.clearInterval(intervalId);
};
$(document).mouseover(function () {
$('#label').trigger('mousemove');
counter++;
if (jivositecounter > 200) unbind();
});
$(document).on('mousemove', '#label', function () {
console.log(counter);
...doing our stuff when #label appears
unbind();
});
});

Categories