How to combine two Javascript functions on the same object - javascript

I'm stuck trying to get random colour overlay on the pictures on this site.
http://www.reportageborsen.se/reportageborsen/wordpress
The Javascript I'm trying to combine are:
$(function() {
$('.media-box .mask').each(function() {
var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
$(this).css("background-color", hue);
});
});
///and///
$('.media-box').hover(function() {
$(this).find('.mask').stop(true, true).fadeIn();
}, function() {
$(this).find('.mask').stop(true, true).fadeOut();
});​
Is it possible to just get them together in some way?
Best Regards
Fortes

if you are looking to combine two functions in one, you may try this:
var getRandomInRange = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
$('.media-box').each(function() {
var mediaBox = $(this);
var mask = mediaBox.find('.mask');
var hue = 'rgb(' + getRandomInRange(200, 255) + ',' + getRandomInRange(200, 255) + ',' + getRandomInRange(200, 255) + ')';
mask.css("background-color", hue);
mediaBox.hover(function() {
mask.stop(true, true).fadeIn();
}, function() {
mask.stop(true, true).fadeOut();
});
});
Note, that I also moved random number generator to separate function, just for clarity. Let me know if this worked.

Related

My JavaScript financial calculation problem

We are working on financial calculations.
JavaScript front-end code gives different results and C# backend gives different results. Please give me a solution to get the same result in both languages.
I mention two Cases in my example. The first case is not working and another is working.
I want results like C# code those are my expected results.
decimal TotalItemWiseRate = Convert.ToDecimal((Convert.ToDecimal(txtQuantity.Text) * Convert.ToDecimal(txtRate.Text)).ToString("0.00"));
myFunction();
function myFunction() {}
function setDecimalPoint(num) {
var setNumber = parseFloat(num);
if (isNaN(setNumber) || setNumber == 0) {
return setNumber;
} else {
var dotcontain = (setNumber).toString().includes(".");
if (dotcontain == true) {
var a = (setNumber).toString().indexOf(".");
setNumber = (setNumber).toString().substring(0, a + 4);
return (roundNumber(setNumber, 2));
} else {
return (roundNumber(setNumber, 2));
}
}
}
document.getElementById("Case1").innerHTML = "Javascript result: " + 756.05 * 43.5;
document.getElementById("Case11").innerHTML = "Current function: " + setDecimalPoint(756.05 * 43.5);
document.getElementById("Case111").innerHTML = "Calculater result: " + 32888.175;
document.getElementById("Case1111").innerHTML = "C#/My Expected Result: " + 32888.18;
document.getElementById("Case2").innerHTML = "Javascript result: " + 6864.48 / 100;
document.getElementById("Case22").innerHTML = "Current function: " + setDecimalPoint(6864.48 / 100);
document.getElementById("Case222").innerHTML = "Calculater result: " + 68.6448;
document.getElementById("Case2222").innerHTML = "C#/My Expected Result: " + 68.64;
function roundNumber(num, scale) {
if (!("" + num).includes("e")) {
return +(Math.round(num + "e+" + scale) + "e-" + scale);
} else {
var arr = ("" + num).split("e");
var sig = ""
if (+arr[1] + scale > 0) {
sig = "+";
}
return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + scale)) + "e-" + scale);
}
}
<p id="Case1"></p>
<p id="Case11"></p>
<p id="Case111"></p>
<p id="Case1111"></p>
<p id="Case2"></p>
<p id="Case22"></p>
<p id="Case222"></p>
<p id="Case2222"></p>
This single function is the simplest answer I found.
function setDecimalPoint(num) {
if (isNaN(parseFloat(num)))
return 0;
else {
var Number = parseFloat(num);
var multiplicator = Math.pow(10, 2);
Number = parseFloat((Number * multiplicator).toFixed(2));
return (Math.round(Number) / multiplicator);
}
}

I am looking for a JavaScript random color generator to output the color red 10% of the time

This is what I have so far, I have the background set to a solid color and a div that when clicked generates the random color. I want it to be generated by the space bar, and I want it to output red 10% of the time. I am an amateur at JavaScript but am learning.
var r, g, b, cstring;
function colapply() {
color();
r = newcolor.slice(1, 3);
g = newcolor.slice(3, 5);
b = newcolor.slice(5, 7);
r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);
cstring = "rgb(" + r + "," + g + "," + b + ")";
$(".colorc").html("<" + "div class=" + "'" + "colorc1" + "'" + ">" + "<" + "/" + "div" + ">" + newcolor + "<span class='rgb'>" + cstring + "</span>");
$("body").css({
"background": newcolor
});
$(".colorc").css({
"color": newcolor
});
$(".colorc1").css({
"background": cstring
});
}
var newcolor;
function color() {
newcolor = '#' + (Math.random().toFixed(6).toString(16)).slice(2);;
if (newcolor.length < 7) {
color();
}
}
$(".colorc").click(colapply);
colapply();
Try introducing a special case for red.
function color() {
if (Math.random() < 0.1) { // 10% of the time
newcolor = '#FF0000'
return;
}
newcolor = '#' + (Math.random().toFixed(6).toString(16)).slice(2);;
if (newcolor.length < 7) {
color();
}
}

Js function working only once

I'm working on a simple javascript photo editor, and I'm stuck on this part:
var opacity = document.getElementById("opacity").value;
var contrast = document.getElementById("contrast").value;
var saturate = document.getElementById("saturate").value;
var brightness = document.getElementById("brightness").value;
var color = document.getElementById("color").value;
var sepia = document.getElementById("sepia").value;
function filter() {
document.getElementById("output").style.filter = "hue-rotate(" + color + "deg) sepia(" + sepia + "%) brightness(" + brightness * 3 + "%) saturate(" + saturate + "%) contrast(" + contrast * 2 + "%)";
}
var filters = document.getElementsByClassName("slider");
for (i = 0; i < filters.length; i++) {
filters[i].addEventListener("click", filter);
}
This function works only once. Similar function for opacity:
function opacity() {
var a = document.getElementById("opacity").value;
document.getElementById("output").style.opacity = a / 10;
}
document.getElementById("opacity").addEventListener("change", opacity);
works fine. Any ideas why? I tried doing it this way:
/*
function contrast() {
var b = document.getElementById("contrast").value;
document.getElementById("output").style.filter = "contrast(" + b * 2 + "%)";
}
document.getElementById("contrast").addEventListener("change", contrast);
function saturate() {
var c = document.getElementById("saturate").value;
document.getElementById("output").style.filter = "saturate(" + c + "%)";
}
document.getElementById("saturate").addEventListener("change", saturate);
function brightness() {
var d = document.getElementById("brightness").value;
document.getElementById("output").style.filter = "brightness(" + d * 3 + "%)";
}
document.getElementById("brightness").addEventListener("change", brightness);
function color() {
var e = document.getElementById("color").value;
document.getElementById("output").style.filter = "hue-rotate(" + e + "deg)";
}
document.getElementById("color").addEventListener("change", color);
function sepia() {
var f = document.getElementById("sepia").value;
document.getElementById("output").style.filter = "sepia(" + c + "%)";
}
document.getElementById("sepia").addEventListener("change", sepia);
/*
And everything is ok, but then I'm unable to apply multiple filters. Any help appreciated!
You have to get the value every time you click
var contrast = document.getElementById("contrast");
var saturate = document.getElementById("saturate");
var brightness = document.getElementById("brightness");
var color = document.getElementById("color");
var sepia = document.getElementById("sepia");
function filter() {
//You have to convert to number to do arithmetic
var _brightness = ~~brightness.value;
document.getElementById("output").style.filter = "hue-rotate(" + color.value + "deg) sepia(" + sepia.value + "%) brightness(" + _brightness * 3 + "%) saturate(" + saturate.value + "%) contrast(" + contrast.value * 2 + "%)";
}
and so on

Counter Increment Exponentially

I'm trying to increment my counter every time but when the html is clicked the counter grows exponentially like +1, +2, +3, +4.
$('.dates').click(function(){
$('#output').html(function(i, val) { return val*1+1 });
});
HTML:
<div id="output">0</div>
Heart Animation Code:
var rand = Math.floor(Math.random() * 100 + 1);
var flows = ["flowOne", "flowTwo", "flowThree"];
var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
var timing = (Math.random() * (1.3 - 0.3) + 1.6).toFixed(1);
// Animate Particle
$('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (30 - 22) + 22) + 'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({ animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear" });
$('.part-' + rand).show();
// Remove Particle
setTimeout(function () {
$('.part-' + rand).remove();
}, timing * 1000 - 100);
Why is it incrementing exponentially?
How do I make it increment by 1 every time? Like 0, 1, 2, 3, 4
Most likely, you are registering a new click event listener every time you click.
Please check and post the code that surrounds the line $('.dates').click(...).
Make sure this line is called only once in your code, and not again later.
May be it is considering it as string. Use parseInt to parse the value as an integer instead of using String Concatenation:
$('.dates').click(function() {
$('#output').html(function(i, val) {
return parseInt(val, 10) + 1;
});
});
Working snippet:
$('.dates').click(function() {
$('#output').html(function(i, val) {
return parseInt(val, 10) + 1;
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div id="output">0</div>

HTML5 Drag-Drop: SetDragImage not working

I'm new to front-end programming and experimenting with HTML5 drag-drop. The object to drag is a bootstrap div.panel which does its job pretty well. However, whilst the object is being dragged, I want to show a custom image using SetDragImage function. I've used this function precisely as described in the Mozilla Developer Network, but still its not working - the default blank rectangle is shown when the object is dragged.
Below is the JavaScript for the drag/drop events, and here is the JSFiddle.
<script type="text/javascript">
function drag(ev){
//var style = window.getComputedStyle(ev.target, null);
var ss = (parseInt($(ev.target).position().left,10) - ev.clientX) + ',' + (parseInt($(ev.target).position().top,10) - ev.clientY);
ev.dataTransfer.setData("text/plain", ss);
ev.dataTransfer.setDragImage(document.getElementById("draggit"), 0, 0);
console.log("drag:target", $(ev.target).position().left + "," + $(ev.target).position().top);
console.log("drag:offset", ss);
}
function drop(ev) {
//console.log("drop:" + $(ev.target).position().left + "," + $(ev.target).position().top);
//console.log("drop:" + ev.clientX + "," + ev.clientY);
var offset = ev.dataTransfer.getData("text/plain");
var npos = offset.split(",");
console.log("drop_clientpos:" + ev.clientX + "," + ev.clientY);
console.log("drop_newpos:" + (ev.clientX + parseInt(npos[0])) + "," + (ev.clientY + parseInt(npos[1])));
document.getElementById("dragme").style.left = (ev.clientX + parseInt(npos[0])) + "px";
document.getElementById("dragme").style.top = (ev.clientY + parseInt(npos[1])) + "px";
ev.preventDefault();
return false;
}
function dragOver(ev) {
ev.preventDefault();
return false;
}
</script>

Categories

Resources