Develop Reference

change active menu-items font on click

So, i've got this menu which is linked to some dynamically displayed content, I've been trying to write some js-code that changes the font of the currently active item. My problem is now that it never deselects that item if it isn't active anymore.
jsfiddle:
https://jsfiddle.net/z4uhL5wv/2/
jquery:
$(document).ready(function() {
$("a.menu2").click(function(e) {
$('.ShowClickedContent').html($($(this).attr('href')).html()); //dynamic content
var clicks = 0;
if(clicks % 2 == 0){
$(this).css('font-family','gillsans');
}else{
$(this).css('font-family','gillsanslight');
}
++clicks;
});
});
Any help would be greatful. Note: i need to use that exact showClickedContent query in the final solution due to problems arising with margin otherwise.

https://jsfiddle.net/ynrnt6xL/
$(document).ready(function() {
const buttons = $('.menu2');
const clear = function() {
$.each( buttons, function(index, btn) {
$(btn).removeClass('selected');
})
}
$.each( buttons, function(index, btn) {
$(btn).click( function(e) {
clear();
$(this).addClass('selected');
});
});
});

You can do it with CSS! I didn't mess with fonts, but I did it with font-size as an example:
a:active, a:focus {font-size:15px;}
Just replace the font-size with font-family and whatever...

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L

Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

how to hide/show scrollbar and range selector of highcharts on button click?

I wish to hide/show the navigator, scrollbar & rangeselector on a button click.
There doesnt seem to be any API for it. .hide() hides the whole chart.
Any reference towards the solution will be helpful.

You can show/hide each SVG elements.
Example: http://jsfiddle.net/dJbZT/99/
$('#btn').toggle(function () {
chart.rangeSelector.zoomText.hide();
$.each(chart.rangeSelector.buttons,function(i,b){
b.hide();
});
chart.rangeSelector.inputGroup.hide();
chart.scroller.xAxis.labelGroup.hide();
chart.scroller.xAxis.gridGroup.hide();
chart.scroller.series.hide();
chart.scroller.scrollbar.hide();
chart.scroller.scrollbarGroup.hide();
chart.scroller.navigatorGroup.hide();
$.each(chart.scroller.elementsToDestroy, function (i, elem) {
elem.hide();
})
}, function () {
chart.rangeSelector.zoomText.hide();
$.each(chart.rangeSelector.buttons,function(i,b){
b.show();
});
chart.rangeSelector.inputGroup.show();
chart.scroller.xAxis.labelGroup.show();
chart.scroller.xAxis.gridGroup.show();
chart.scroller.series.show();
chart.scroller.navigatorGroup.show();
chart.scroller.scrollbar.show();
chart.scroller.scrollbarGroup.show();
$.each(chart.scroller.elementsToDestroy, function (i, elem) {
elem.show();
})
});

Jquery Issue With Form Select Drop Down Hiding

I have a drop down menu with form select options for quantity. The drop down works with Jquery hover. So, on hover of the menu icon, the drop down appears, and when you over off of it, it hides. Every time I try to change the select option, it shows the rest of the quantity. But when I hover onto a different option or off of the first select option, the entire drop down menu hides.
$("#navigation #seven").live({
mouseenter:function(){
$(this).find('ul').show();
},
mouseleave:function() {
$(this).find('ul').hide();
}
});

this happens because you are mouseouting the menuitem when you try to get to the select.
you must surround the menu item and the select by a container and apply hover on the div
<div id="hoverable">
<menuitem />
<select style="display:none"><option></option></select>
</div>
and then, apply the hover to the div
$('#hoverable').hover(function(){
$(this).find('select').show();
}, function(){
$(this).find('select').hide();
});

I'd suggest setting a timeout in the hover off, let's say a couple hundred ms. In your menu, set a flag true when you hover on it, and false when you hover off. So, if your menu icon's hover off sees that flag as true, it doesn't hide the drop down menu.
Example:
var overMenu = false;
$(menuItem).hover(
function() {
$(dropDownMenu).show();
},
function() {
setTimeout(function() {
if ( !overMenu )
$(dropDownMenu).hide();
}, 200);
}
);
$(dropDownMenu).hover(
function() { overMenu = true; },
function() {
overMenu = false;
$(this).hide();
}
};

Got it!
var hover_off = false;
var hover_count = 1000;
$("#navigation #seven").live("mouseover",function(){
hover_off = false;
$(this).find('ul').show();
});
$("#navigation #seven").live("mouseout",function(){
hover_off = true;
setTimeout(myMouseOut, hover_count);
});
function myMouseOut() {
if (hover_off) {
$("#navigation #seven").find('ul').hide();
}
}

Only select one row at a time using jquery

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.

Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help

While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');

Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i

You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.