Develop Reference

Is there any way to merge two javascript together?

I just can't figure it out how to merge them together, or I always have to write a different one for all my popups? I tried different things but none of them worked.
$(document).ready(function() {
$('#trigger').click(function() {
$('#overlay').fadeIn(300);
});
$('#close').click(function() {
$('#overlay').fadeOut(300);
});
});
$('#overlay').click(function(e) {
if (e.target == this) {
if ($('#overlay').is(':visible')) {
$('#overlay').fadeOut(300);
}
}
});
$(document).ready(function() {
$('#trigger2').click(function() {
$('#overlay2').fadeIn(300);
});
$('#close2').click(function() {
$('#overlay2').fadeOut(300);
});
});
$('#overlay2').click(function(e) {
if (e.target == this) {
if ($('#overlay2').is(':visible')) {
$('#overlay2').fadeOut(300);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->

If you use classnames or data-* attributes it's easy.
<div class="overlay" data-id="1"></div>
<div class="overlay" data-id="2"></div>
Then JS :
$('.trigger').on('click', function() {
var number = $(this).dataset().id;
// also valid:
var number = $(this).attr('data-id');
$('.overlay[data-id="' + number + "').fadeOut();
});
Try something similar.

Using jQuery to show/hide an element if some value is found in document

I'm trying to hide an element if some specific value of input is not found on the site.
I can hide an element by:
$(document).ready(function() {
$("#someid").hide();
});
But how to show it, if the value is found? I'm trying to do something like this:
$(document).ready(function() {
$("#someid").hide();
$("input[value$='somevaluetobefound']").ready(function() {
$("#someid").show();
});
});
What am I doing wrong?

Try this:
$(document).ready(function() {
$("#someid").hide();
$('#inputID').on('input', function() {
if ( $('input').val() === 'test') {
$("#someid").show();
}
else $("#someid").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type 'test' to show DIV<br>
<input id="inputID" type="text">
<div id="someid">DIV</div>

I had not fully understood what you where trying to acomplish:
$( document ).ready(function() {
if (!$('input[value="somevaluetobefound"]'))
$("#someid").hide();
$(':input').on('keyup', function(){
if ($(this).val() == 'somevaluetobefound')
{
$("#someid").show();
} else {
$("#someid").hide();
}
});
});
I have updated the code here
EDIT: Based on new info provided by OP
$( document ).ready(function() {
if ($(':radio[value="somevaluetobefound"]').length !== 0)
$("#someid").show();
else
$("#someid").hide();
});
Sample here

<script type="text/javascript">
$(document).ready(function () {
$("input[value=somevaluetobefound]").closest('#someid').hide();
});
</script>

you can try this :
$(document).ready(function() {
$("#someid").hide();
if($("#someid").val() !=''){
$("#someid").show();
}
});

Improvising on #Arkej's answer:
$(document).ready(function() {
$("#someDiv").hide();
$(':input').on('input', function() {
if ( $('input').val() === 'somevalue') {
$("#someDiv").show();
}
else $("#someDiv").hide();
});
});
Here I am using :input to find all input boxes on the page. Since you need to either have an ID the input field you want or just have all input text boxes be used to show or hide your div depending on what the value you are looking for.
Also refer to this for guidance on getting val from inputs:
Get the value in an input text box
Cheers

checking a element's content on mouse enter

I'm trying to set a mouse enter event that triggers if the element contains a certain text, but it's not recognizing the :contains parameter for some reason.
html:
<div class="sample">red</div>
<div class="sample">text</div>
javascript:
$(".sample").on({
mouseenter: function () {
if($("this:contains('red')").length > 0)
{ $(this).css("background-color","red")}
},
mouseleave: function () {
if($("this:contains('red')").length > 0){
$(this).css("background-color","yellow")}
}
});
This is the JSFiddle
Any help would be greatly appreciated!

Personally, I'd check the value of the .text() of the div. Your selector is off, since you're not selecting the JS this, but the string 'this'.
$(".sample").on({
mouseenter: function () {
if($(this).text() =='Red') {
$(this).css("background-color","red")}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sample">Red</div>
<div class="sample">Text</div>

use is:-
$(".sample").on({
mouseenter: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "red")
}
},
mouseleave: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "yellow")
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sample">red</div>
<div class="sample">text</div>

try this instead
$(".sample").on({
mouseenter: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "red")
}
},
mouseleave: function() {
if ($(this).is(":contains('red')")) {
$(this).css("background-color", "yellow")
}
}
});
'This' should not be in quotes

Use jQuery .text()
$(".sample").on({
mouseenter: function () {
if($(this).text()=="red")
{
$(this).css("background-color","red")}
},
mouseleave: function () {
if($(this).text()=="red"){
$(this).css("background-color","yellow")}
}
});`

Rather than using the complicated:
if($("this:contains('red')").length > 0)
try instead the simpler:
if(this.innerHTML === 'red')
It works fine. You can also use:
if(this.textContent === 'red')

Tested this way of doing it and it works.
I'm not sure how to get the contains to work within that sort of statement - i have a feeling it is to do with that you are checking the element and not it's text, try using this instead:
$(function(){
$(".sample").on({
mouseenter: function () {
if(this.innerHTML.indexOf("red") != -1){
$(this).css("background-color","red")
}
},
mouseleave: function () {
if(this.innerHTML.indexOf("red") != -1){
$(this).css("background-color","yellow")
}
}
});

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?

Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")

You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});

You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/

you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>

Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});

concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>

If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

Getting localStorage and adding class to divs

I have a question that is quite confusing.
Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking".
When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".
I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"
JS Fiddle: http://jsfiddle.net/b4KgV/
HTML
1
2
<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>
JS
localStorage.clear();
$(document).on('click', ':checkbox', function () {
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem("marking","yes");
}
else {
$(this).closest("div").removeClass('hilight marked');
}
});
$(".1st").on('click', function() {
$(".second").css('display','none');
$(".second").removeClass('hilight');
$(".first").css('display','block');
});
$(".2nd").on('click', function() {
$(".first").css('display','none');
$(".first").removeClass('hilight');
$(".second").css('display','block');
});
if (localStorage.getItem("marking")) {
$(".marked").closest("div").addClass('hilight');
};
Thx.

Localstorage goes by key:value as you know, I tried to keep them separate.
Try this fiddle
http://jsfiddle.net/b4KgV/11/
$(document).on('click', ':checkbox', function () {
var div = $(this).closest("div").attr("id")
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem(div, true);
} else {
$(this).closest("div").removeClass('hilight marked');
localStorage.setItem(div, false);
}
});
$(".1st").on('click', function () {
console.log("test")
if (localStorage.getItem("firstDiv") == "true") {
$(".first").closest("div").addClass('hilight');
};
$(".second").css('display', 'none');
$(".second").removeClass('hilight');
$(".first").css('display', 'block');
});