change active menu-items font on click - javascript

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...

Related

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

jQuery ui autocomplete stay focus on mouseout

I am using the this autocomplete, so far everything is good, but I was wondering how can I make the focus to stay if we mouseout.. I mean if I type something and mouseover to it they will be gray background on that focus and if I mouseout it will return to white, I want it to stay gray background. in other words I want the hover to stay.
this is an example how I want it to be http://xdsoft.net/jqplugins/autocomplete/ but for some reasons I want to use jquery ui autocomplete.
I don't think this is possible with css ? so..
demo http://jsfiddle.net/2wyqjhmk/
code
$.widget("ui.autocomplete", $.ui.autocomplete, {
options: {
maxItems: 9999
},
_renderMenu: function (ul, items) {
var that = this,
count = 0;
$.each(items, function (index, item) {
if (count < that.options.maxItems) {
that._renderItemData(ul, item);
}
count++;
});
}
});
$(function () {
$("#tags").autocomplete({
source: availableTags,
maxItems: 10
});
});
.ui-menu-item.selected {
background: pink;
}
Determine the previous selected li, find it and add the selected class. This should allow for custom styling of the UL that is shown when you type.

Show/Hide using toggle jQuery

jQuery Script
This code works, But Is it possible to add 'options' inside the slideToggle method so that I toggle 'Show/Hide' text?
$(function() {
var container = $('div.container p'),
button = $('div#click');
container.hide();
button.on('click', function() {
if (button.text() == 'Show') {
button.text('Hide');
} else {
button.text('Show');
}
$(this).next().slideToggle(300);
});
});
http://jsfiddle.net/sachq/mt3duxzk/1/
You can go ahead and give this a try. You may also change the "complete" option to "start" if you want the callback to fire as soon as you click the button.
DEMO: HERE'S A FIDDLE
var container = $('div.container p');
var button = $('div#click');
container.hide();
button.on('click', function(){
container.slideToggle({
duration: 200,
complete: function(){
var txt = (button.text() === 'Show') ? "Hide" : "Show";
button.text(txt);
}
});
});
I can suggest better approach. The idea is that you should not hardcode your button texts into javascript code. It makes code very obtrusive and tightly coupled, because if you decide to change the text from "Show" to "Show more" you will have to modify javascript code as well. Instead you can have both labels in place but show only one at a time:
<div id="click"><span class="show">Show</span><span class="hide">Hide</span></div>
Javascript:
button.on('click', function () {
button.toggleClass('hide');
$(this).next().slideToggle(300);
});
and CSS:
div#click > span {
display: none;
}
div#click .show {
display: inline-block;
}
div#click.hide .hide {
display: inline-block;
}
div#click.hide .show {
display: none;
}
UPD. Apparently someone disagrees with me. But it is easy to see that the benefits of slightly increased amount of code are bigger then it might look at first. Approach described above is much more flexible then comparing text strings. Not to mention it also allows advanced styling of the buttons with images and other elements which could be problematic with hardcoded strings.
Demo: http://jsfiddle.net/mt3duxzk/3/
You can't do that, but you can simplify things to ternary operator.
button.text(function(_, txt){
return txt == "Show" ? "Hide" : "Show"
}).next().slideToggle(300);

jQuery: Clicking anywhere to remove class, without using $('body').on('click'

I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});

replace radio button with css button and keep label in div

have created a fiddle http://jsfiddle.net/4QZED/2/. (Explosion Pills updated version - http://jsfiddle.net/ExplosionPIlls/4QZED/4/ )Instead of showing the normal radio, or replacing the radio with an image. i would like to replace it with a div i can dress up as a button and on hover the class changes and on click the class changes. but also on click the hidden radio is selected. but also require the label (label in reference to the text showing e.g as below .co.uk .com .net etc.) to be inside the div/button. or be able to add text to the div button. is this possible?
$(function() {
$("input [name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after($("<div class='radioButtonOff'> label </div>"));
} else {
$(this).hide();
$(this).after($("<div class='radioButtonOff'> label </div>"));
}
});
$("input.radio").click(function() {
if($(this).attr('src') == 'radiobuttonOn') {
$(this).attr('src', 'radiobuttonOff');
$(this).prev().attr('checked', 'false');
} else {
$(this).attr('src', 'radioButtonOn');
$(this).prev().attr('checked', 'true');
}
});
});
I've attempted to improve upon your solution to get it to work the way you want. You had several errors. Most importantly, there is a vastly important difference between input[name=domain_ext] and input [name=domain_ext] (the space is the descendant selector). You were also using $(this) in the checked event to apparently change the divs, but the event was bound to the inputs. There's also a difference between input.radio and input[type=radio].
$("input[name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after("<div class='radioButtonOff'> label </div>");
} else {
$(this).hide();
$(this).after("<div class='radioButtonOff'> label </div>");
}
});
$("input[type=radio]").change(function() {
$(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});
http://jsfiddle.net/ExplosionPIlls/4QZED/4/

Categories

Resources