I am pretty new to jQuery but I am trying to get a code setup which hides a div when the 'innerHTML' is null. I tried using the code below. But it doesn't work! Where is my fault??
if (($("#php-errors").html).length) {
$("#php-errors").css("display", "block");
}
else {
$("#php-errors").css("display", "none");
}
One line, and using .show() and .hide() methods:
var hasCont = $("#php-errors").contents().length ? $("#php-errors").show() : $("#php-errors").hide();
Using the ternary operator that says:
(define var) statement ?
action if statement is true :
action if statement is false ;
DEMO JSFIDDLE
A good practice would be to cache your element inside a var, let's call it var $el, and use it like:
var $el = $("#php-errors");
var hasCont = $el.contents().length ? $el.show() : $el.hide();
Much more readable, and
it will save you some micro processing time ;) but it really helps in terms of cross-function reusability (if defined outside the function.)
if ($("#php-errors").html().length) {
$("#php-errors").css("display", "block");
}
else {
$("#php-errors").css("display", "none");
}
Correction:
($("#php-errors").html).length should be $("#php-errors").html().length
You can clean your code a little like this.
It also uses the innerHTML property as the condition part of the ternary expression. If there's any content, it'll return and set "block", if not, then "none".
$("#php-errors").css("display", function() {
return this.innerHTML ? "block" : "none";
});
http://jsfiddle.net/WKWNc/2/
update:
If this only runs when the page loads, you could initially have it set to "block", and then do this.
$("#php-errors:empty").hide();
http://jsfiddle.net/WKWNc/1/
Or the opposite, have it set to "none", and show it if not empty.
$("#php-errors:not(:empty)").show();
http://jsfiddle.net/WKWNc/
Just to add the css way that will not require javascript in case someone else needs it:
.php-errors:empty { display: none; }
Will Match:
<div class="php-errors"></div>
<div class="php-errors"><!-- test --></div>
Will Not Match:
<div class="php-errors"> </div>
<div class="php-errors">
<!-- test -->
</div>
<div class="php-errors">
</div>
Source: https://css-tricks.com/almanac/selectors/e/empty/
For your case, it seems you just want:
$("#php-errors").toggle();
I can see no case where you want to set the display to either block or none if none is already set.
Are you sure your logic isn't redundant?
I think u missed compare , try this
if ($("#php-errors").html() == "") {
$("#php-errors").css("display", "block");
}
else {
$("#php-errors").css("display", "none");
}
I would do something like this:
var $php_errors = $("#php-errors");
if ($php_errors.is(":empty")) {
$php_errors.hide()
}
else {
$php_errors.show();
}
hope it helps
Related
I would expect the following code to toggle the html content of .articleArrow between up and down arrows when .articleTitle is clicked:
jQuery
$(".articleTitle").click(function () {
if ($(this).children('.articleArrow').html() == '↑')
$(this).children('.articleArrow').html('↓');
else if ($(this).children('.articleArrow').html() == '↓')
$(this).children('.articleArrow').html('↑');
});
HTML
<div class='articleTitle'>
Blah
<div class='articleArrow'>
↓
</div>
</div>
But it doesn't do anything. On the other hand if I take the if...else if out and just set the character with $(this).children('.articleArrow').html('↑'); it works. So setting the character works it's the if...else if that's not getting triggered properly and I can't figure out why.
You can view it live on my website here (don't get excited it's not the actual admin panel!)
Works for me if I use the unicode characters to compare to:
$(".articleTitle").click(function () {
if ($(this).children('.articleArrow').html() == '↓') $(this).children('.articleArrow').html('↑');
else if ($(this).children('.articleArrow').html() == '↑') $(this).children('.articleArrow').html('↓');
});
jsFiddle example
You can easily do with this without the messy if statement by simply making use of the .slideToggle's complete callback method and jQuery's :visible selector.
$(".articleTitle").click(function () {
// 1st, i go ahead and asign our arrow element to a variable for use in callback
var arrow = $(this).find('.articleArrow');
$(this).siblings('.articleContent').slideToggle("slow", function(){
// this is the `complete` callback method
// in here, we can now manipulate whatever we need to when the "toggle" is `complete`
arrow.html( $(this).is(':visible') ? '↑' : '↓' );
// inside the .html statement is a simple `inline if` statement that simply says:
// if true ? do this : else do this
});
});
ExampleBehind the show
Plain Code:
$(".articleTitle").click(function () {
var a = $(this).find(".articleArrow");
$(this).siblings(".articleContent").slideToggle("slow", function () {
a.html($(this).is(":visible") ? "↑" : "↓")
})
});
I am trying to create a if statement that triggers a alert box if there is text in the div.
My Jsfiddle: http://jsfiddle.net/D7cPT/21/
My HTML:
<div id="post-preview">aasasdasd</div>
MY JQUERY:
$(document).ready(function() {
// Bind it to some action.
if{$('#post_body_html').html();) {
alert('asdasda');
}
});
OH DEAR GOD:
//why is there a bracket after the if and a semicolon in there?
if{$('#post_body_html').html();) {
How about:
//change if{ to if( and remove semicolon
if($('#post_body_html').html()) {
Also your selector doesn't match the ID of your element. Change #post_body_html to #post-preview
jsFiddle
Edit:
To those who land here later on, a better way to accomplish the same test is written:
if($('#post_body_html')[0].childNodes.length) {
instead.
Try this ->
$(document).ready(function() {
// Bind it to some action.
if($('#post-preview').html()) { // wrong ID and wrong syntax
alert('asdasda');
}
});
Working demo : http://jsfiddle.net/manseuk/D7cPT/25/
You have MANY problems:
It should be post-preview, not #post_body_html
You have if { instead of if (
You end your if statement with a semi-colon? Huh?
html() doesn't return a bool, it returns a string.
Try this:
$(document).ready(function() {
// Bind it to some action.
if ($('#post-preview').html().length > 0) {
alert('asdasda');
}
});
You should remove the ;
$(document).ready(function() {
// Bind it to some action.
if{$('#post_body_html').html()) { //line changed
alert('asdasda');
}
});
Hi,
When the page first is rendered my div elements looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
Then i manually updates the onmouse attributes with javascript so it looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
They looks the same, the big difference is that the first one will change class when hovering and the second will not? Is it not possible to set this after page is rendered?
Please note : I need IE6 compability, thats why I use onmouse instead of CSS hover
BestRegards
Edit : This is what I found and that works grate, I haven´t tested it in IE6 just yet :
$("#extraFilterButton").hover(function() {
$(this).attr('class','showhideExtra_down_hover');
},
function() {
$(this).attr('class','showhideExtra_down');
});
you can use:
$('#selector').live('mouseover',function(){//something todo when mouse over})
live() allows for dynamic changes
(you can do the same for 'mouseout')
To expand on #maniator's correct answer, I would use:
$("#some_id").live("hover",
function() {
// do on mouseover
},
function() {
// do on mouseout
});
This is what I ended up with :
$("#extraFilterDropDownButton").hover(function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up_hover');
}
else{
$(this).attr('class','showhideExtra_down_hover');
}
},
function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up');
}
else{
$(this).attr('class','showhideExtra_down');
}
});
This is however not yet tested in IE6.
I am using jQuery to show / hide lists, but it takes two clicks on a link instead of just one to show the list. Any help?
jQuery.showList = function(object) {
object.toggle(function(){
object.html("▾");
object.siblings("ul.utlist").show("fast");
}, function(){
object.html("▸");
object.siblings("ul.utlist").hide("fast");
});
}
$(document).ready(function() {
$("#page").click(function (e){
e.preventDefault();
var target = $(e.target);
var class = target.attr("class");
if(class == "list")
$.showList(target);
});
});
It's probably because toggle thinks the object is already visible, and executes the 'hide' clause.
edit:
Eh.. quite circular logic; how else would a user be able to click on it :-)
PS. You changed the logic from is-object-visible? to is-list-visible? in your own reply.
Not sure if this will fix everything but stop using reserved keywords.
Change variable class to something like c. And Change object variable to at least obj.
Doing the following worked well
jQuery.showList = function(obj) {
var list = obj.siblings("ul.utlist");
if(list.is(":visible")){
obj.html("▸");
list.hide("fast");
} else {
obj.html("▾");
list.show("fast");
}
}
I have the following code:
function showAccessRequests_click() {
var buttonValue = $("#showAccessRequests").val();
if (buttonValue == "Show") {
$(".hideAccessRequest").removeClass("hideAccessRequest");
$("#showAccessRequests").val("Hide");
}
else {
$(".hideAccessRequest").addClass("hideAccessRequest");
$("#showAccessRequests").val("Show");
}
}
This script removes a class fine but it does not want to add the class. Can you see any issues with this code?
When you add hideAccessRequest class to the element, you search for it by the existence of that class.. if you are adding it, that class won't already be applied and thus you won't match any elements.
$(".hideAccessRequest") doesn't exist. you need to use id, I guess. And you might want to look at toggleClass.
you'd need an identifier for the classes you want to toggle ex:"accessRequest"... try this.
function showAccessRequests_click() {
var buttonValue = $("#showAccessRequests").val();
if (buttonValue == "Show") {
$(".accessRequest").removeClass("hideAccessRequest");
$("#showAccessRequests").val("Hide");
}
else {
$(".accessRequest").addClass("hideAccessRequest");
$("#showAccessRequests").val("Show");
}
}
classes are space-delimited, so if you want them hidden by default...
<div class="accessRequest hideAccessRequest">...</div>