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.

JavaScript event when mouseover AND mousedown

Using only Javascript (no jQuery etc) , is there a way I can trigger an event if those two conditions are met?
I currently have a n x m table and I can change the color of each entry with a click. However, I also want to be able to drag the mouse around instead of having to click many times. Is this possible?
This is what I have:
<div id ="startButton">
<button onclick="startGame()">START</button>
</div>
(...)
var tableEntry = document.getElementsByTagName('td');
(...)
function startGame() {
for(var i = 0, il=tableEntry.length; i < il; i++) {
tableEntry[i].onmousedown = toggle; //changes color
}
}

Since events in JS are "short-lived", you'd have to maintain some shared state variable.
var table = document.getElementById('game-table');
var tableEntry = table.getElementsByTagName('td');
var isToggling = false;
function enableToggle(e) {
console.log('enableToggle')
isToggling = true;
if (e.target !== table) {
toggle(e);
}
}
function disableToggle() {
console.log('disableToggle')
isToggling = false;
}
function toggle(e) {
if (isToggling === false) {
return;
}
console.log('toggle:', e.target);
e.target.classList.toggle('active');
}
function startGame() {
table.onmousedown = enableToggle;
for (var i = 0, il = tableEntry.length; i < il; i++) {
tableEntry[i].onmouseenter = toggle; //changes color
}
table.onmouseup = disableToggle;
}
startGame();
table,
td {
background: rgba(0, 0, 0, 0.4);
padding: 20px;
color: white;
user-select: none;
}
td.active {
color: red;
}
<table id="game-table">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

Set a variable in your onmousedown, and clear it in your onmouseup.
Then, in your onmousemove, check the variable. If it's set the mouse is down, if not it's up.
You will have to get a bit creative. What you are describing is a drag event. To avoid the default drag behaviour you will need to respond to the ondragstart event and return false after calling event.preventDefault();

The easiest thing to do is to add two event listeners which both have the same functionality
function startGame() {
for(var i = 0, il=tableEntry.length; i < il; i++) {
tableEntry[i].addEventListener('mousedown', () => toggle());
tableEntry[i].addEventListener('mouseenter', () => toggle());
}
}
Basically () => toggle() means function() { toggle(); }, so when the button is pressed, then call toggle, this is a good way to represent a function, because toggle could just as well have been a boolean, then saying tableEntry[i].addEventListener('mousedown', toggle); could have been confusing

Not sure if I understood the question correctly, but when I ran into the same issue, I simply added an eventlistener on document level, which set a global variable to true or false. Example:
let tableEntry = document.getElementsByTagName('td');
let squares = Array.from(tableEntry);
let trigger = false;
tableEntry.forEach(function(e){
e.addEventListener('mouseenter', function(e){
e.preventDefault();
if (trigger === true){
//do something
};
});
});
document.addEventListener('mousedown', function(){
trigger = true;
});
document.addEventListener('mouseup', function(){
trigger = false;
});
Your mileage may very in terms of how you select your elements for 'tableEntry'. Remember that some selectors return 'live' nodelists, etc.
It might make sense trying to identify the tds by using something like "table.children". Could be more reliable, depending on how your site is structured.
Also note that I have to convert to an array first, in order to make use of the 'forEach' function.

If element changed class from one particular to another in jQuery

Normally my slideshow goes automatically to the next picture, but I want to detect if it goes backwards by an user-initiated action (keyboard arrows or controls). My solution to this would be to do this (my imaginary code):
if(jQuery("#slideshow article").hasChangedClassFrom("previous").hasChangedClassTo("current")) {
backwards = true;
}
if(backwards) { // code for backwards
jQuery("#slideshow article.previous").css("z-index", "1");
jQuery("#slideshow article.next").css("z-index", "2");
}
else { // code for forwards (normal state)
jQuery("#slideshow article.previous").css("z-index", "2");
jQuery("#slideshow article.next").css("z-index", "1");
}
The classes are already implemented, so that the current slide always has the class "current" and so on. I know this isn't valid code at all, but by reading this, I think it would be quite clear what I want to achieve. I'm not very good at JavaScript/jQuery, but I've tried searching for solutions like this without luck.
Live site // Live JS code

Based on the code from the mentioned link http://dans.no/cycle.js
Declare a variable clickindex=0;
Place the following inside the click function of jQuery("#slideshow nav a").click
clickindex = jQuery("#slideshow nav a").index(this);
if(clickindex<index){
console.log("execute some logic");
}
The jsfiddle link for my solution javascript code http://jsfiddle.net/y601tkfL/

Instead of guessing that the previous class, use the current and the previous index.
http://jsfiddle.net/whyba4L9/5/
UPDATE 2:
var stopp, antall = jQuery("#slideshow article").length;
var index = 0
function slideTo(idx) {
jQuery("#slideshow article, #slideshow nav a").removeAttr("class").filter(':nth-of-type(' + (idx+1) + ')').addClass("current");
if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {
jQuery("#slideshow article:first-of-type").addClass("forrige");
jQuery("#slideshow article:last-of-type").addClass("neste");
}
else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {
jQuery("#slideshow article:last-of-type").addClass("forrige");
jQuery("#slideshow article:nth-of-type(2)").addClass("neste");
}
else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {
jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");
jQuery("#slideshow article:first-of-type").addClass("neste");
}
if(index ==antall-1 && idx ==0 )
{
//lasto to first
}
else if(index>idx || (index == 0 && idx == antall-1))
{
alert('BACKWARDS')
}
index = idx;
};
function startCycle() {
stopp = setInterval(function() {
jQuery("#slideshow article").stop(true, true);
var idx = index + 1 > antall - 1 ? 0 : index + 1;
slideTo(idx,false);
}, 5500);
};
if (antall > 1) {
jQuery("#slideshow").append("<nav>").css("height", jQuery("#slideshow img").height());
jQuery("#slideshow article").each(function() {
jQuery("#slideshow nav").append("<a>•</a>");
}).filter(":first-of-type").addClass("current first");
jQuery("#slideshow article:nth-of-type(2)").addClass("neste");
jQuery("#slideshow article:last-of-type").addClass("forrige");
startCycle();
jQuery("#slideshow nav a").click(function() {
clearInterval(stopp);
startCycle();
var idx = jQuery("#slideshow nav a").index(this);
if (index === idx) return;
slideTo(idx);
}).filter(":first-of-type").addClass("current");
jQuery(document).keyup(function(e) {
if (e.keyCode == 37) {
var idx = index - 1 < 0 ? antall - 1 : index - 1;
slideTo(idx);
clearInterval(stopp);
startCycle();
}
else if (e.keyCode == 39) {
var idx = index + 1 > antall - 1 ? 0 : index + 1;
slideTo(idx);
clearInterval(stopp);
startCycle();
}
});
}

Try calling this function when the user changes the image with parameter of this. I hope I correctly understood what you are asking. If not let me know and I will recode it. Also if the slide show is finished please post your html and javascript.
function whatever(this)
{
if(this.className == 'previous')
{
alert('the user has changed the image');
this.className = 'current';
}
else
{
alert('the user hasn\'t changed the image');
}
}

The dead simplest way to do this, from what I understand your question to aim at, is to put a handler on the index buttons and a method for tracking the current image.
Listen for slide change
var currentSlide = '';
$('.slideIndexButtons').on('click', function(e){
// Conditional logic that compares $(this).data('whichimage') to currentSlide
var whichImage = $(this).data('whichimage');
// ->this means attaching data-whichimage="" to each of the elements, or
// ->you can just stick with detecting the class and going from there
// Either process results in isBackwards boolean
if (currentSlide == 'prev' && whichImage == 'current') {
isBackwards = true;
}
if (isBackwards) {
// Backwards logic here
} else {
// Other logic here
}
// Unless the event we're listening for in keeping currentSlide updated is also fired when
// the slide changes due to user input, we'll need to update currentSlide manually.
currentSlide = whichImage;
});
Track the current slide
$('#slider').on('event', function(){
// This is assuming that we're strictly listening to the slider's automatic sliding
// The event you attach this to is either fired before or after the slide changes.
// Knowing which is key in getting the data you want. You are either getting
// The data from this slide $(this).data('whichimage') or
// $(this).next().data('whichimage')
// Again, you can go with classes, but it is a lot of logic which you have to
// update manually if you ever have to add or alter an image in the slide set.
// Either way, you end up with the variable targetImage
currentSlide = targetImage;
});
With any luck, your slideshow code has an API that will allow you to listen for when slide-related events are fired. Otherwise, you'll have to find a way of setting up, firing and listening for these events manually, either through callbacks passed in or by (eek!) altering the code and possibly unintentionally changing its functionality.
This should give you what you asked for. Let me know how it goes.

You can add this line at the very start of slideTo function in your cycle.js
if((idx < index && !(idx == 0 && index == antall - 1)) ||
(idx == antall - 1 && index == 0)){
jQuery.trigger('BACKWARDS')
}
and then add an event handler for "BACKWARDS" somewhere else convenient (Maybe at the end of cycle.js?).
jQuery.on('BACKWARDS', function(e){
//DO THINGS HERE
}

I wrote a plugin attrchange which I think will effectively solve your problem. attrchange is a simple jQuery plugin to detect an attribute change. The plugin internally uses one of the following compatible methods based on the browser to detect an attribute change,
Mutation Observer
DOMAttrModified
onpropertychange
Try out below demo to understand more about how you can use the plugin for your need.
Click to read more about attrchange.
Note: The plugin doesn't use polling so you can use it without any worries, however polling is supported as an extension to the plugin. You can read more if you are interested.
$('#test').one('click', function() {
$('#test').attrchange({
trackValues: true,
callback: function(event) {
$('#result').html('<div><label>Attribute Name: </label>' + event.attributeName + '</div>' + '<div><label>Old Value</label>' + event.oldValue + '</div>' + '<div><label>New Value</label>' + event.newValue + '</div>');
}
});
//this will toggleClass 'blue-background' every 2 secs
setInterval(function() {
$('#test').toggleClass('lightblue-background');
}, 2000);
});
html {
font-family: Segoe UI, Arial, sans-serif;
font-size: 13px;
}
div#test {
border: 1px solid #d2d2d2;
padding: 10px;
display: inline-block;
}
.lightblue-background {
background-color: #DBEAF9;
}
div label {
font-weight: bold;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/meetselva/attrchange/master/js/attrchange.js"></script>
<div id="test">
<p style="font-weight: bold;">Click anywhere in this box to Start the DEMO</p>
<p>The demo is to simply toggle a class 'lightblue-background' to this div every 2 secs.</p>
<div id="result" style="font-size: 0.9em;"></div>
See the pseudo code for your case using the plugin,
jQuery("#slideshow article").attrchange({
trackValues: true,
callback: function(event) {
if ($(this).hasClass('current') &&
(event.oldValue && event.oldValue.indexOf('previous') >= 0)) {
//code for backward
} else {
//code for forward
}
}
});

Disable text selection dynamically per click via javascript?

I have a table which I've added some multiple selection functionality where shift + click selects rows between the first click and second click but it ends up highlighting all text between the rows.
I don't want to disable text selection via CSS because this stuff really does need to be selectable, just not when shift + clicking when my multi-select function fires.
Can this be done?
var lastChecked;
$("#contact_table tr").click(function(e) {
if (e.target.getAttribute('type') == 'checkbox') {
return;
};
if (e.shiftKey && lastChecked) {
// select between last point and new point
var tableRows = $("#contact_table tr");
var newRow = tableRows.index($(this));
var oldRow = tableRows.index(lastChecked);
if (oldRow < newRow) {
newRow = newRow +1;
}
var sliceRange = [newRow, oldRow].sort();
var selectedRows = tableRows.slice(sliceRange[0], sliceRange[1])
.find('input[type=checkbox]').attr('checked', true);
} else {
var checkbox = $(this).find('input[type=checkbox]');
var checked = toggleCheckbox(checkbox);
if (checked) {
lastChecked = $(this);
}
};
recalculateSelectedButton();
});

You can deselect all text with javascript; add a call to RemoveSelection() after you run the multi-select logic.
From http://help.dottoro.com/ljigixkc.php via Clear a selection in Firefox
function RemoveSelection () {
if (window.getSelection) { // all browsers, except IE before version 9
var selection = window.getSelection ();
selection.removeAllRanges ();
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
document.selection.empty ();
}
}
}

You can try disabling user select based on the number of checked checkboxes. If there are any, just add the CSS style user-select: none; (and prefixed versions) to the #contact_table.
If you provide a jsfiddle with your current javascript code and table, I'd test the code too - now it's as-is ;) I'm not sure how the click interactions will play out with any cancelled event bubbling etcetera. Also, this implementation doesn't take into account that users might want to select text even if there's a checked checkbox (so it might not be what you're looking for).
$(function() {
var $contactTable = $("#contact_table"),
userSelectNoneClass = "user-select-none";
$contactTable.on("change", ":checkbox", function(e) {
var numberOfCheckedRows = $("#contact_table :checkbox:checked").length,
anyCheckedRows = (numberOfCheckedRows > 0);
if (anyCheckedRows && $contactTable.hasClass(userSelectNoneClass)) {
$contactTable.addClass(userSelectNoneClass);
} else {
$contactTable.removeClass(userSelectNoneClass);
}
});
});
.user-select-none
{
/* From https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Edit: using the change event instead.

jqTransform Select - Scroll to letter typed

I've got a form that uses jqTransform to replace the standard select boxes and radio buttons. It all works fine and dandy, except one thing that annoys me:
Since it replaces the select box with a list of links, when you type a letter to scroll it doesn't do anything. For instance, you click to open up the select, then type an S. It should scroll to the first S in the list, but nothing happens. Is there a way to re-instate this functionality? Below is the jqTransform code for the select box. I don't see a handler for this type of thing:
/***************************
Select
***************************/
$.fn.jqTransSelect = function(){
return this.each(function(index){
var $select = $(this);
if($select.hasClass('jqTransformHidden')) {return;}
if($select.attr('multiple')) {return;}
var oLabel = jqTransformGetLabel($select);
/* First thing we do is Wrap it */
var $wrapper = $select
.addClass('jqTransformHidden')
.wrap('<div class="jqTransformSelectWrapper"></div>')
.parent()
.css({zIndex: 10-index})
;
/* Now add the html for the select */
$wrapper.prepend('<div><span></span></div><ul></ul>');
var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
/* Now we add the options */
$('option', this).each(function(i){
var oLi = $('<li>'+ $(this).html() +'</li>');
$ul.append(oLi);
});
/* Add click handler to the a */
$ul.find('a').click(function(){
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the default */
$('a:eq('+ this.selectedIndex +')', $ul).click();
$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
this.oLabel = oLabel;
/* Apply the click handler to the Open */
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.click(function(){
//Check if box is already open to still allow toggle, but close all other selects
if( $ul.css('display') == 'none' ) {jqTransformHideSelect();}
if($select.attr('disabled')){return false;}
$ul.slideToggle('fast', function(){
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({scrollTop: offSet});
});
return false;
})
;
// Set the new width
var iSelectWidth = $select.outerWidth();
var oSpan = $('span:first',$wrapper);
var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
$wrapper.css('width',newWidth);
$ul.css('width',newWidth-2);
oSpan.css({width:iSelectWidth});
$ul.css({height:'420px','overflow':'hidden'});
// Calculate the height if necessary, less elements that the default height
//show the ul to calculate the block, if ul is not displayed li height value is 0
$ul.css({display:'block',visibility:'hidden'});
var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
(iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
$ul.css({display:'none',visibility:'visible'});
});
};
Here is what we tried to do to implement this:
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.keypress(function (e) {
$.each(myArray, function (i, l) {
var sc = l.substr(0, 1).toLowerCase();
var kc = String.fromCharCode(e.which);
if (sc == kc) {
$select[0].selectedIndex = i;
$('span:eq(0)', $wrapper).html(l);
$ul.hide();
return false;
}
});
});

Oh dang. I was missing the big picture without the code. Now I see what's going on... yeah, there's no "reinstating" the functionality since the new list of links is not actually a select box anymore. If jqTransform doesn't include a scrollable option by default I think you'll have to implement one.
If you look at their demo page, their "plain" select box works as expected (although it's hard to notice since all options start with "O", it WILL jump to the first "Option") and their styled select box does not.
Without looking deeper at the code, I suspect that means that a keypress capture is not implemented in the plug-in itself.
I'm afraid this isn't the "answer" you were probably hoping for. With any luck someone who has done this sort of thing before will hear your plea. ;-)

solution for jqTransform select keypress work link visit http://www.techapparatus.com/jqtransform-select-problem-with-keyboard-type-solution

Add the following code at the end of return this.each(function(index){ ... }); that is inside of $.fn.jqTransSelect function.
Also you have to install the scrollTo jquery plugin.
CODE:
var newChar;
$(document).bind("keydown", function (e) {
var char = String.fromCharCode(e.which);
var code = e.keyCode || e.which;
var charFound;
if( $ul.css('display') != 'none' ){
if (newChar != char){
newChar = char;
$ul.find('a').each(function(){
// Find first occurence of li that starts with letter typed
if ($(this).text().substr(0,1).toUpperCase() == char && $(this).text() != "Choose"){
charFound = true;
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
$select[0].selectedIndex = $(this).attr('index');
$($select[0]).trigger('change');
$that = $(this);
return false;
}
});
if (charFound == true){
// Scroll to selected value
$ul.scrollTo($('a.selected', $ul), 400);
}
}
//If Enter has been pressed, select the value
if(code == 13) {
$('span:eq(0)', $wrapper).html($that.html());
$ul.hide();
return false;
}
}
});