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

How to Prevent Collapsing of Kendo Dropdown List on Page Scroll using Javascript?

I am facing a weird issue and tried to implement 3 solutions but it didn't worked out for me.
The problem is with the default functionality of kendo dropdown collapsing on outer page scroll. I want to prevent the collapsing and did some research.
I have got a solution here to prevent this but this is working fine under the Preview section shown there but the same is not working under Dojo (the upper right link) and in the real project.
There is no difference I can see which prevents the collapsing of Dropdown in Preview and not in Dojo.
Please, help me resolving the same as I am a newbie in Kendo.

I believe that you need to handle the close event of the widget in order to control this behavior.
Here is an example:
<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [ "text1", "text2" ],
close: _myClose.bind(this)
});
var _myClose = function (e) {
var wish = true;
var element = e.sender;
if (wish) {
e.preventDefault();
}
};
</script>
I bind this so that you can have the advantage of your class attributes. You can remove it if you want. The kendo widget instance is available under the e.sender object.
Here is the link to the Docs.
Hope it helps.

$(".k-list-container").each(function () {
var elementId = this.id.split("-")[0];
var widget = $("#" + elementId).data("kendoDropDownList");
if (widget) {
widget.ul.parent().on("wheel", function (e) {
var container = this;
if ((container.scrollTop == 0 && e.originalEvent.deltaY < 0) ||
(container.scrollTop == container.scrollHeight - container.offsetHeight && e.originalEvent.deltaY > 0)) {
e.preventDefault();
e.stopPropagation();
}
});
}
});

I've found this simple snippet to reliably disable page scrolling as long as a kendo dropdownlist is open and the mouse is hovered over the list options.
// Fix annoyance where entire page scrolls when you scroll to the bottom of a dropdown
$(document).bind('mousewheel DOMMouseScroll', function (e) {
var kendoDropdownBoxes = $('.k-list-container[style*="display: block"]');
if (kendoDropdownBoxes.length > 0 && kendoDropdownBoxes.is(':hover')) {
$("body").css("overflow", "hidden");
} else {
$("body").css("overflow", "auto");
}
});

Issue with event functions

I have a strange issue with jQuery.
I have a function, which gets executed on an event of a <a> tag.
link.click(someAction);
In the action, I modify another div-element, where I simply set a few CSS parameters and modify the classes.
This works as expected.
Now, I wanted to expand someAction with a bool parameter.
I figured that I could call the method now as followed:
link.click(function () {
someAction(true);
});
Unfortunately, this does not work. I have no idea why.
The method gets called and everything, but the CSS & classes simply do not change.
Then again by calling exactly the same method with link.click(someAction); it works.
Can anyone tell me why?
Here's some code
var openPopover = function( showOverlay ){
if (typeof showOverlay === "undefined" || showOverlay === null) showOverlay = true;
if (showOverlay) {
// Add transparent overlay
overlay.show();
}
// Select popover next to the clicked item
popover = $(this).next("div.popover");
// It positioned underneath the clicked item, with the spacing above
// Display the popover
popover.show();
// Reset classes
popover.removeClass("hide-animation");
popover.addClass("show-animation");
var animationEnd = function() {
$(overlay).off("webkitTransitionEnd");
$(overlay).off("oTransitionEnd");
$(overlay).off("transitionend");
};
// Add animation did end observer
$(overlay).on("webkitTransitionEnd", animationEnd);
$(overlay).on("oTransitionEnd", animationEnd);
$(overlay).on("transitionend", animationEnd);
// Run animations
popover.addClass("shown");
overlay.addClass("shown");
// If the browser doesn't support css3 animations, we call it manually
if (!supportsCSSAnimations) {
setTimeout(animationEnd, animationDuration);
}
};
selectButton.hover(openPopover); // Opens the popover correctly
selectButton.hover(function () {
openPopover(true); // Doesn't work
});

After your changes:
this in the following line, will point to window:
popover = $(this).next("div.popover");
whereas before, it pointed to selectButton. Try:
selectButton.hover(function () {
openPopover.call(this, true);
});

Make sure to preventDefault on the link once it has been clicked:
link.click(function (e) {
e.preventDefault();
someAction(true);
});

jQUery .slideToggle() & .text replace

I've got the following problem (test version available http://jsfiddle.net/qmP8R/2/):
I have two <div> containing two versions of text and a third <div> used as a "container".
On load the container is populated with the shorten text. On the click of a button I want to change the short version for the long version with some animation (sliding up/down animation) and vice versa (swap short for long and long for short - basically toggle).
In the test version it works quite as expected, but I am not able to solve the following problems:
animation on 1st click does not work (but the text is changed to the long version)
on second click the whole container is slided up - not reverting to initial state
Basically what I waht to achieve is a kind of toggle behaviour, but connected with .text replacement rather than display: show/hide.
P.S.: AJAX content replacement is not available as a solution in my case.

How about sliding the text up, then changing it, and sliding it back down:
$(document).ready(function(){
$("#popis").text($("#popis_short").text());
var toggle_sw = true;
$("#popis_switch").click(function(){
var full = $("#popis_full").text(),
short = $("#popis_short").text();
if ( toggle_sw == true )
{
$("#popis").slideUp('slow', function () {
$(this).text(full).slideDown('slow');
});
toggle_sw = false;
}
else
{
$("#popis").slideUp('slow', function () {
$(this).text(short).slideDown('slow');
});
toggle_sw = true;
}
});
});
Here is a demo: http://jsfiddle.net/qmP8R/11/
Update
Since the text does not change, you can optimize your code a bit by selecting the text of the elements when the document is ready rather than doing so every-time the click event handler is called:
$(function(){
var $popis = $('#popis'),
toggle_sw = true,
full = $("#popis_full").text(),
short = $("#popis_short").text();
$popis.text(short);
$("#popis_switch").click(function(){
if ( toggle_sw ) {
$popis.slideUp('slow', function () {
$(this).text(full).slideDown('slow');
});
toggle_sw = false;
} else {
$popis.slideUp('slow', function () {
$(this).text(short).slideDown('slow');
});
toggle_sw = true;
}
});
});
Here is a demo of the optimized version: http://jsfiddle.net/qmP8R/13/
This example caches everything it can so no calculations have to happen that don't need to in the click event handler.

Check out JSFiddle. I've basically removed all the logic you had with changing the text.
There is a short div and a long div. The short div contains the first part and the long div contains the REST. Then all you need to do is slide up and down on the long div without changing any of the text.

This best way to do it in my opinion is to hide only the part of the text that should only be shown when you want the full text. This will save on the size of data required as well.
See my example here: http://jsfiddle.net/qmP8R/19/
The javascript is much simpler, and there is less html too:
$(document).ready(function(){
$("#popis_switch").on( 'click', function(){
if ( $("#popis_full").is(':visible') )
{
$("#popis_full").slideUp('slow');
}
else
{
$("#popis_full").slideDown('slow');
}
});
});

The sliding animation is hiding the toggle. I've edited the script to remove the animation and it shows the toggle working as intended. How you had it, the initial state is there but is hidden by the slide up.
$(document).ready(function(){
$("#popis").text($("#popis_short").text());
var toggle_sw = true;
$("#popis_switch").click(function(){
var full = $("#popis_full").text();
var short = $("#popis_short").text();
if ( toggle_sw == true )
$("#popis").text(full).slideDown('slow');
else
$("#popis").text(short).slideUp('slow').slideDown('slow');
toggle_sw = !toggle_sw;
});
});
EDIT:
Changing the order in the jquery chain, I was able to get a smooth animation:
$(document).ready(function(){
$("#popis").text($("#popis_short").text());
var toggle_sw = true;
$("#popis_switch").click(function(){
var full = $("#popis_full").text();
var short = $("#popis_short").text();
if ( toggle_sw == true )
$("#popis").slideUp('slow').text(full).slideDown('slow');
else
$("#popis").slideUp('slow').text(short).slideDown('slow');
toggle_sw = !toggle_sw;
});
});
Or : http://jsfiddle.net/qmP8R/24/

How to call a function with jQuery blur UNLESS clicking on a link?

I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?

You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.

This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});

I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.