$( "#target" ).scroll(function() {
if ( !($('#log')) ) {
$( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
};
});
I want to append #log to the body if there isn't already a #log div, but if there is do nothing. How do I do this, my code doesn't work.
You use $('#log').length to see how many objects are found.
In your case it might be
if (!$('#log').length) {
// ...
}
Your solution does not work because !$('#log') expression is always false, because any object in JS (and $() function always returns an object, even if nothing was found) is always truthy.
$( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
Instead of that try using this :
$("#log").appendTo('body');
Related
$.get( load_this, function( page ) {
$article = $( page ).find( ".js-Article--current" );
console.log( $(page) );
$article.removeClass( "js-Article--current" ).addClass( "Article--contentHidden" )
.children( ".js-ArticleHeader" ) .addClass( "ArticleHeader--teaser" )
.find( ".next-teaserFade" ) .addClass( "ArticleHeader-teaserFade" )
.end()
.find( ".next-teaserSqueeze" ) .addClass( "ArticleHeader-teaserSqueeze" );
$( ".js-Article--current" ).after( $article );
});
get returns whole page.
Now problem I've encountered is this:
if js-Article--current is not top level element find finds it.
if js-Article--current is top level element find cannot find it.
Why?
p.s. I know solution: filter instead of find. But why is find behaving like this? I don't get it.
find() will try to find a child element of the selector. So, if .js-Article--current is the selector, it will not find it.
filter(), instead, filters through the selectors
Check the console:
var findTest = $('div').find('#test').length;
var filterTest = $('div').filter('#test').length;
console.log('find test: ' + findTest);
console.log('filter test: ' + filterTest);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<div id="anotherTest"></div>
i have this working code bellow and i think he is a little bit too long and redundant can i customize it ?
$( "#unique" ).click(function() {
if ( $( this ).is(':checked') ) {
$( ".lotud" ).show();
$( "#add_lot" ).hide();
$( "#lots_rows_contnr" ).hide();
$(".lotud input").prop({disabled: false})
$("#lots_rows_contnr input").prop({disabled: true})
}
else {
$( ".lotud" ).hide();
$( "#add_lot" ).show();
$( "#lots_rows_contnr" ).show();
$(".lotud input").prop({disabled: true})
$("#lots_rows_contnr input").prop({disabled: false})
}
});
You can shorten it slightly through the use of ternaries, using the checked property on the DOMElement itself, joining selectors and using the checked property as the basis for the disabled property. Try this:
$("#unique").click(function() {
$(".lotud").toggle(this.checked);
$("#add_lot, #lots_rows_contnr").toggle(!this.checked);
$(".lotud input").prop({ disabled: !this.checked });
$("#lots_rows_contnr input").prop({ disabled: this.checked });
});
Which of the two versions, your original or the above, is more readable is a matter of opinion.
So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});
Is it possible to enable ckeditor by class type?
For example, I tried the following code but getting error:
$(document).ready(function() {
var txtArea= $(".ckeditor");
CKEDITOR.replace(txtArea,{ });
});
CKEDITOR.replace accepts ids and native element instances. But you're trying to pass jQuery object to it - it cannot work.
You should try this way:
$( document ).ready( function() {
$( '.ckeditor' ).each( function() {
CKEDITOR.replace( this );
} );
} );
Or, if you know that there's just one textarea to be replaced:
$( document ).ready( function() {
CKEDITOR.replace( $( '.ckeditor' )[ 0 ] );
} );
See this example on JSFiddle.
Apologies if this is an overly simple question, but my searches are getting me nowhere.
I have a jQuery function which produces an error on some of my pages which do not contain the #message input:
Error: jQuery("#message").val() is undefined
Line: 56
And my jQuery function:
function updateCountdown()
{
var $left = 255 - jQuery( '#message' ).val().length;
jQuery( '#countdown' ).text( $left + ' Characters Remaining' );
}
$( document ).ready( function()
{
updateCountdown();
$( '#message' ).change( updateCountdown );
$( '#message' ).keyup( updateCountdown );
});
So my question is, how do I use a conditional to remove the error message from pages without the #message input? I believe my problem is a basic lack of knowledge of how JavaScript works.
I wouldn't bother to perform an explicit test on the jQuery object returned from the selector — let jQuery do that for you!
$(function() {
$('#message').each(function() {
var $self = $(this);
$self.bind('change keyup', function updateCountdown() {
$('#countdown').text((255 - $self.val().length)) + ' characters remaining');
});
});
});
If '#message' doesn't match anything, then the .each( ... ) call won't do anything.
The only problem is with your init code.. after that it'll run fine. So do:
$( document ).ready( function()
{
$( '#message' ).change( updateCountdown ).keyup( updateCountdown ).keyup();
});
Note the use of chaining.
Improve your selector to ensure that it's actually getting an input element (so that there is a value). Then check to see if your selector actually matched anything before working with it. Note that the length of the jQuery object returned is the number of matching elements (it must be greater than 0). Oh, and you can consistently use the $ function as long as there aren't any conflicts with other javascript frameworks.
function updateCountdown()
{
var msg = $('input#message');
if (msg.length > 0) {
var $left = 255 - msg.val().length;
$( '#countdown' ).text( $left + ' Characters Remaining' );
}
}
You just need to check if the jQuery object contains any items. I would do it like this.
$( document ).ready( function()
{
var $message = jQuery( '#message' );
if($message.length > 0) {
updateCountdown();
$( '#message' ).change( updateCountdown );
$( '#message' ).keyup( updateCountdown );
}
});
Then I'd change your updateCountdown() function to use the this keyword rather than doing another jQuery lookup. jQuery sets this to be the DOM element the event occurred on.
function updateCountdown()
{
var $left = 255 - jQuery( this ).val().length;
jQuery( '#countdown' ).text( $left + ' Characters Remaining' );
}