Develop Reference

How can i make smaller js code in js?

I have 5 css classes with different type of colors in a buttons for on hover function, in my page might be have 5 buttons with diffenent classes. When i hover the each button, color should be set as per respective class name so far its working fine for me. but now i can see huge code, i want to make it smaller. Please suggest anyone.
$('[class^="button"]').parent().each(function(){
var parentElement = $(this);
var buttonfullwidth = $(parentElement).hasClass('buttonfullwidth');
var buttonfullwidth_1 = $(parentElement).hasClass('buttonfullwidth_1');
var buttonfullwidth_2 = $(parentElement).hasClass('buttonfullwidth_2');
var buttonfullwidth_3 = $(parentElement).hasClass('buttonfullwidth_3');
var buttonfullwidth_4 = $(parentElement).hasClass('buttonfullwidth_4');
if(buttonfullwidth_1 !== false) {
$(parentElement).hover(function(){
$(this).addClass('buttonfullwidth_1');
}, function(){
$(this).removeClass('buttonfullwidth_1');
});
}
if(buttonfullwidth_2 !== false) {
$(parentElement).hover(function(){
$(this).addClass('buttonfullwidth_2');
}, function(){
$(this).removeClass('buttonfullwidth_2');
});
}
if(buttonfullwidth_3 !== false) {
$(parentElement).hover(function(){
$(this).addClass('buttonfullwidth_3');
}, function(){
$(this).removeClass('buttonfullwidth_3');
});
}
if(buttonfullwidth_4 !== false) {
$(parentElement).hover(function(){
$(this).addClass('buttonfullwidth_4');
}, function(){
$(this).removeClass('buttonfullwidth_4');
});
}
if(buttonfullwidth !== false) {
$(parentElement).hover(function(){
$(this).addClass('buttonfullwidth');
}, function(){
$(this).removeClass('buttonfullwidth');
});
}
});

You need CSS for this job by using the :hover pseudo selector
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, it is generally triggered when the user hovers over an element with the mouse pointer.
For example, if you want this button to turn blue when hovered:
.myButton {
background-color: lightgreen;
}
.myButton:hover {
background-color: lightblue;
}
<button class="myButton">Hover this button</button>
Notice how I can set properties to the element when it is in his hover state.
So for your code you simply need to use the following selectors:
buttonfullwidth
buttonfullwidth:hover
buttonfullwidth_1
buttonfullwidth_1:hover
buttonfullwidth_2
buttonfullwidth_2:hover
buttonfullwidth_3
buttonfullwidth_3:hover
buttonfullwidth_4
buttonfullwidth_4:hover
in the same manner as I did in my example.

Change element css when div has specific class

I have problem with my code. What I want to do is change css of elemnt when I'm on first div. So, when I'm on first div my element have for example font-size: 24px; when I scroll down my element should have font-size: 40; I'm using wordpress and Vase theme. My site - http:///www.ciranga.pl
When I'm on main slide (with red background) I want to make my arrows on right to be white. When I scroll down I want it to be red. How Can I do that? Any help would be great.
jQuery(document).ready(function($) {
if ($('.swiper-slide:first-of-type').hasClass('swiper-slide-active')) {
$('.vase_whiteC').css('font-size', '40px');
} else {
$('.vase_whiteC').css('font-size', '24px');
}
$('html').keydown(function(e) {
var Key = e.keyCode;
if ([37, 38, 39, 40].indexOf(Key) > -1) {
// up!
if (Key == 38) {
$(".umicon-vase_arrowPrev").parent().trigger("click");
}
// down!
if (Key == 40) {
$(".umicon-vase_arrowNext").parent().trigger("click");
}
return false;
}
});
});

After working with the original poster, we have arrived at this solution:
$(window).on('wheel', function() { setButtonState(); });
arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]').click(function() { setButtonState(); });
function setButtonState() {
setTimeout(function() {
var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length;
if(!sbw) {
arw.css('color', 'red');
} else {
arw.css('color', 'white');
}
}, 600);
}

You can use other methods like $(document).scroll(function(){
Below code is not your answer but you can try something like that
var
$w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
// add css here
}
}
targetOffset would be 38,40.

Float list-items left when others are hidden

I'm having an issue with my list items not floating left automatically upon toggling the visibility of other list items through a filter.
See the website and code here:
http://javinladish.com/dev/
When you toggle 'Gloves' for example, the gloves should not appear in the same place, but instead move to the first slot in the list.
Is the plugin I'm using called AwesomeGrid causing this issue? It might be absolutely positioning the li elements, but I'm not exactly sure.
The jQuery code I'm using to toggle the filter and list-items is:
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul.grid li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul.grid li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
How can I make sure that when I filter my list-items, that they always float left?
Thanks in advance to anyone who helps out!

AwesomeGrid has a built in property called hiddenClass, you can define hidden as your hidden class selector, then recall AwesomeGrid after the click event. Basically the code will be like this :
$(window).load(function(){
function grid_relayout() {
$('ul.grid').AwesomeGrid({
responsive : true,
initSpacing : 0,
rowSpacing : 28,
colSpacing : 28,
hiddenClass : 'hidden',
columns : {
'defaults' : 3,
'990' : 2,
'650' : 1
}
})
}
grid_relayout();
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul.grid li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul.grid li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
grid_relayout()
return false;
});
})

If you look at the CSS properties of the "li" elements, you see that they are positioned "absolute" with pixel values for "left". What you want is "float: left". But I don't know AwesomeGrid so I can't give you a solution without studying it further.

Jquery UI Menu Positioning

I have been working on a small application for the last little while. I am by no means a pro at this. I would like to have a jQuery UI Menu show up where the user clicks on my table. The problem is that the menu never shows up "over" the table but underneath (below as in farther down the page not under the table) it instead.
$("table.selectTable").delegate("tr", "click", function(event) {
event.stopPropagation();
lastClicked = $(this);
var menu = '#' + $(this).parent().parent().attr('name') + 'Menu';
console.log(menu); //getting the result (the show and hide work as well)
$(menu).hide();
if (!event.shiftKey) {
if ($(this).children().hasClass("highlight")) {
console.log('event coords' + event.pageX + "," + event.pageY);
console.log($(this).offset());
//$(this).children().removeClass("highlight");
position = $(this).position();
if ($(menu).css('display') === 'none') {
$(menu).menu().position({
my: "right top",
of: event
});
$(menu).show();
} else {
console.log('no menu to show');
$(this).children().removeClass("highlight");
}
} else {
console.log('add');
$(this).parent().children().children().removeClass("highlight");
$(this).children().addClass("highlight");
}
} else {
if ($(this).children().hasClass("highlight")) {
$(this).children().removeClass("highlight");
} else {
$(this).children().addClass("highlight");
}
}
clearSelection();
});
This chunk of code which is ugly and no longer in use DOES work:
(was too specific, not terribly reusable, and depended on ugly checkboxes for selection - the highlighting was just to show which row the menu related to)
$("#groupList tbody").delegate("tr", "click", function(event) {
lastClicked = $(this).children("td").next().html();
$(this).parent().children().children().removeClass("highlight");
event.stopPropagation();
if (event.target.nodeName !== "INPUT" && $(event.target).children("input").first().attr('rel') === undefined) {
$(this).children().addClass("highlight");
$("#gListMenu").menu().position({
my: "right top",
of: event
});
$("#gListMenu").show();
} else {
$("#gListMenu").hide();
}
});
I sincerely appreciate any input anyone has to offer as I've researched as much as I can.

Use the same keypress to show a div and hide another, repeatedly, using Javascript

Lets call the 2 divs in question div1 and div2.
What I'm trying to do is use the enter key to show div1 and hide div2 (if div2 is currently visible) and vice-versa. Right now I have the code so that pressing enter will show div1 and hide div2, but to go back to having div2 shown and div1 hidden you have to use the shift key. The way it is now works, but I would like it so I only have to press enter each time I want the divs to alternate.
Here is the javascript code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var keys = [];
var code = [13];
var keys1=[];
var code1 = [16];
$(document).keydown(function(keyEvent) {
keys.push(keyEvent.keyCode);
keys1.push(keyEvent.keyCode);
if ( keys.length > code.length ) {
keys.shift();
}
if ( keys1.length > code1.length ) {
keys1.shift();
}
if ( keys.toString() == code.toString() ) {
showAns();
}
if ( keys1.toString() == code1.toString() ) {
hideAns();
}
});
});
</script>
Any idea how to accomplish what I'm asking?

Try this sample of what you want to achieve:
var toShow = true;
$(document).keydown(function(keyEvent) {
if(keyEvent.keyCode == 13){
$('#div1').toggle(toShow);
$('#div2').toggle(!toShow);
toShow = !toShow;
}
});

I'll give you a nudge in the right direction, but won't supply you the answer outright.
You need to find a way to check the property of your elements visibility ( How do I check if an element is hidden in jQuery? This might help you!), and add that to your conidtion like so:
if(KeyIsPressed && element.IsVisible)
{
HideElement
}
else if(KeyisPressed)
{
ShowElement
}

Without getting too fancy, you can use a 'state' variable to hold that information, and then synchronize that to the DOM:
var state = {
"div1": true,
"div2": false,
};
synchronizeState();
$(document).on("keydown", function(event) {
if(event.which === 13) {
state.div1 = !state.div1;
state.div2 = !state.div2;
synchronizeState();
}
});
function synchronizeState() {
if(state.div1) {
$("#div1").show();
} else {
$("#div1").hide();
}
if(state.div2) {
$("#div2").show();
} else {
$("#div2").hide();
}
}
Working example: http://jsbin.com/eJiPavO/1/