We Keep Coding

Jquery hasClass Code not Working

I'm trying to make it so when any other slide is active besides the home page slide it hides the menu: ocw2018.orangecoastwebsites.com
I was using this code:
$(document).ready(function () {
if ($('.about-us, .services, .portfolio, ocw-whole-testimonials, .ocw-blog, .contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
});
In the console, it works fine, but I'm not sure why it's not working on the live site.
Edit:
Basically I want what this code is able to do but with a hasClass instead of hover
$(window).on('hover', function(){
if(
$('.about-us').hasClass('uncode-scroll-active') ||
$('.services').hasClass('uncode-scroll-active') ||
$('.portfolio').hasClass('active') ||
$('.ocw-whole-testimonials').hasClass('uncode-scroll-active') ||
$('.ocw-blog').hasClass('uncode-scroll-active') ||
$('.contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
});
It is live on the URL I provide above, so you can see when you scroll to the next page, and move your mouse, the menu disappears. It's my workaround until I figure out how to make it hidden when a class is active.

It is very hard to know from your post actually exactly what you want. However see below whatever I guessed so far.
First of all you missed '.' on 'ocw-whole-testimonials' it should '.ocw-whole-testimonials'.
After that please breakdown the multiple condition instead single line selector series like following, it will confirm you more accurate output, suppose any selector may have the expected selector so will return true but any other one may not so what will be out put false? so avoid this confusion it is better to breakdown:
$(document).ready(function () {
function hideMenu(){
if(
$('.about-us').hasClass('uncode-scroll-active') ||
$('.services').hasClass('uncode-scroll-active') ||
$('.portfolio').hasClass('uncode-scroll-active') ||
$('.ocw-whole-testimonials').hasClass('uncode-scroll-active') ||
$('.ocw-blog').hasClass('uncode-scroll-active') ||
$('.contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
}
hideMenu(); // Call when page load
$(window).scroll(function(){
hideMenu(); // Call when page scroll
})
});

Use this function.
$(window).scroll(function(){
//write your code here
});

JQuery Fade Hidden Field In And Out On Select Change

I currently have this jquery code that is supposed to show and hide a field based on the content on what is selected:
$('#State').on('change', function() {
var s = $('#State option:selected').text;
if(s !== "")
{
$('#showme').fadeIn();
}
if(s === "")
{
$('#showme').fadeOut();
}
});
Here is a working fiddle: https://jsfiddle.net/b0h6xd0t/
It will fade the field in, but it won't fade it back out for some reason. Any ideas?
Thanks!

In jQuery, text() is method. Methods, in order to work, require the use of the parentheses as shown below:
var s = $('#State option:selected').text(); // I added: ()
Note: In JavaScript, the empty string is considered false. So for neatness, you can turn your code into the following:
$('#State').on('change', function() {
var s = $('#State option:selected').text();
if(s) { // If it's true
$('#showme').fadeIn();
}
else { // If it's false
$('#showme').fadeOut();
}
});
Check out an updated version of your fiddle here.
As an alternative, as another answer has also correctly pointed, you can use:
$('#showme').fadeOut(500, function() {
$(this).text(s).fadeIn(500);
});
Putting s inside text() can also check its status, because according to the documentation s is:
The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.
In your case, as I pointed above, the empty string is considered false, so it fulfils the requirement.
Note: In this case, $('#showme') will fade out anyway, but if the value is true (not empty) it will fade back in. I'm not sure if you actually want that particular effect, so take a look at this fiddle as well.

Set the fade in as a function of the fade out, this allows the text to fade out, change, then fade back in. The if statements aren't really necessary. I also corrected the usage of text().
$('#State').on('change', function() {
var s = $('#State option:selected').text();
$('#showme').fadeOut(300, function() {
$(this).text(s).fadeIn(300);
});
});
Fiddle update

Try the following:
var s = $('#State option:selected').text();

Need help writing js function that changes the class of the button that calls it

I'm not very good with js, but basically I have a button
<%=button_to_function "✓", checkButton(), :class => "buttonGrey"%>
that is calling a js function I made. However I am getting errors in my syntax for the function.
function checkButton()
{
if (this.className="buttonGrey") {
this.removeClass('buttonGrey');
this.addClass('buttonGreen');
}
if (this.className="buttonGreen") {
this.removeClass('buttonGreen');
this.addClass('buttonGrey');
}
}

Use == to compare strings and not =.
Your button will always be buttonGrey because if it changes on the first if statement, it will be changed again on the second because it's not inside a else statement.
Also you can use toggleClass to toggle classes.
function checkButton() {
$(this).toggleClass("buttonGrey buttonGreen");
}

If you have a button with 'buttonID' than you can change class like this..
$("#buttonID").removeClass("buttonGrey").addClass("buttonGreen");
or use toggle function of jquery
$("#buttonID").click(function () {
$(this).toggleClass("buttonGrey buttonGreen");
});

I don't know much about Ruby/Rails, but the ideal solution would be to separate the HTML markup from the JavaScript. While you can still use the "onClick" event on the HTML element, it is generally a good practice to give the element an ID and/or Name and then allow JavasScript to bind to that element.
Here is a rough markup of using an ID value:
<%=button_to_function "✓", :class => "buttonGrey" :id => "myButton"%>
Then in your checkButton() method, update the calls to:
function checkButton()
{
if ($("#myButton").className=="buttonGrey") {
$("#myButton").removeClass('buttonGrey');
$("#myButton").addClass('buttonGreen');
}
if ($("#myButton").className=="buttonGreen") {
$("#myButton").removeClass('buttonGreen');
$("#myButton").addClass('buttonGrey');
}
}
Hope that helps, or at least steers you in the right direction :)

The above answer is partially correct. For comparison, you should be using == (=== is better to use when appropriate).
In the code above though, this will not be what you're expecting. In your case it will most likely be the global window object. You must pass a reference of the input with the function like so:
<%=button_to_function "✓", checkButton(this), :class => "buttonGrey"%>
function checkButton(in)
{
if (in.className === "buttonGrey") {
$(in).removeClass("buttonGrey");
$(in).addClass("buttonGreen");
}
if (in.className === "buttonGreen") {
$(in).removeClass('buttonGreen');
$(in).addClass('buttonGrey');
}
}

Hi the problem is that you are using assignment operator in you if statement
I am not sure what you try to do:
When I write an eventhandler like that i write it like:
$('#mybutton').click(function(){
if ($(this).attr('class') === "buttonGreen") {
$(this).removeClass('buttonGreen');
$(this).addClass('buttonGrey');
}
});
To actually getting the button id from asp.net use this code:
$('#<%=btnMyButton.ClientID %>').click(function().....
Good luck ; )

Hiding a div when the innerHTML is null

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

If statement not triggering alert box

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');
}
});