Develop Reference

Close menu by clicking on any screen place

Have a script thats open menu and closes after clicking on 'li' element, how to close it by clicking on any place on screen ?
$(function() {
$('.drop-down-input').click(function() {
$('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection
$(this).addClass('selected');
$(this).find(".dropdown-list").show();
});
$(document).on("click", ".drop-down-input.selected li",
function(e) {
e.stopPropagation();
$('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
});
});
Thats my HTML:
<div class="styled-input-container drop-down-input">
<input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
<ul class="dropdown-list">
<li>eeee</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xsssxxx</li>
</ul>
</div>

Here's a working solution. Hope it helps :)
$( document ).ready(function() {
// change from grey to blue color input
$(".styled-input-container input").focus(function () {
$id = this.id;
$idgen = '#' + $id;
//console.log($idgen);
$($idgen).closest( "div" ).addClass('focused');
});
$(".styled-input-container input").blur(function() {
$('.styled-input-container').removeClass('focused');
});
//open % close ul list input
$(function() {
$('.drop-down-input').click(function() {
$('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection
$(this).addClass('selected');
$(this).find(".dropdown-list").show();
});
$(document).on("click", ".drop-down-input.selected li",
function(e) {
e.stopPropagation();
$('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
});
});
$(document).mouseup(function (e){
var container = $(".dropdown-list");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="styled-input-container">
<input id="simple_1" placeholder="input text" type="text">
</div>
<div class="separator"></div>
<div class="styled-input-container drop-down-input">
<input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
<ul class="dropdown-list">
<li>eeee</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xsssxxx</li>
</ul>
</div>

Just add a listener on all the dom like this:
$(document).on('click', ':not(.drop-down-input.selected li)',function() {/* Close all open menus */});
See than you can just ignore the li element with the :not selector to prevent listen the click on that elements.

Toggle elements view on buttons click

I have different divs which all have the same class "textBox".
At the same time there should always just be one box displayed. For most Boxes there is a button on the bottom of my page which can be clicked and triggers
to make the box visible and hide the box which is already shown at this moment.
Edit: Fiddle https://jsfiddle.net/8uvsq7ta/
For this I have this JS-code:
$( "#gettingStartedButton" ).click( function () {
if (! $( "#gettingStarted" ).is( ":visible" ) ) {
if ( $( "#extension" ).is( ":visible" ) ) {
$( "#extension" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#executingBox" ).is( ":visible" ) ) {
$( "#executingBox" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#feedback" ).is( ":visible" ) ) {
$( "#feedback" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#impressum" ).is( ":visible" ) ) {
$( "#impressum" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
else if ( $( "#registration" ).is( ":visible" ) ) {
$( "#registration" ).fadeOut( function () {
$( "#gettingStarted" ).fadeIn();
});
}
}
else {
$( "#gettingStarted" ).fadeOut( function () {
$( "#executingBox" ).fadeIn();
});
}
});
The div boxes look like this:
<div id="gettingStarted" class="textBox">
test blabla
</div>
<div id="feedback" class="textBox">
test blabla
</div>
<div id="registration" class="textBox">
test blabla
</div>
<div id="impressum" class="textBox">
test blabla
</div>
CSS:
.textBox {
diplay: none;
}
This Code checks if the box is already shown and if yes it checks EVERY OTHER BOX to get the one which is visible and then fade it out to afterwards fade the reffered box in.
My problem is, I need this part of code for every box. I think there should be a better way to accomplish this.
What I am searching is kind a method openBox(id) where I give the id of the box as paramete and it automatically detects all other boxes with the class parameter and detects which is already faded in, then fades this out to fade the box with the id in.
Sadly my javascript skills aren't that good, so I seek to find some advices or examples how to achieve this.
Thank you very much for every input you can give me.

var $textBox = $(".textBox"); // get 'em all!
$textBox.eq(0).fadeIn(); // FadeIn first one
$("[data-showid]").on("click", function(){ // Buttons click (Use data-* attribute!)
var $box = $("#"+ this.dataset.showid); // Get the target box ID element
$textBox.not($box).hide(); // Hide all bot targeted one
$box.stop().fadeToggle(); // FadeToggle target box
});
.textBox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gettingStarted" class="textBox">getting started blabla</div>
<div id="feedback" class="textBox">feedback blabla</div>
<div id="impressum" class="textBox">impressum blabla</div>
<button data-showid="gettingStarted">GS</button>
<button data-showid="feedback">FB</button>
<button data-showid="impressum">Imp</button>
If you don't want the current box to toggle, than instead of .fadeToggle() use .fadeIn().
http://api.jquery.com/fadetoggle/
https://api.jquery.com/data/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

With the addition of a data-* attribute on your button to link it to its content:
<button id="gettingStartedButton" data-link="gettingStarted">GS</button>
<button id="feedbackButton" data-link="feedback">FB</button>
<button id="impressumButton" data-link="impressum">Imp</button>
The javascript becomes very simple:
$( "#gettingStarted" ).fadeIn();
$('button').click(function(){
var link = $(this).data('link');
$('.textBox:visible').fadeOut(function(){
$('#' + link).fadeIn()
});
})
Updated fiddle: https://jsfiddle.net/8uvsq7ta/2/

I did it using class. The HTML would be like :
<div class="textBox gettingStartedButton" style="display: none;"> 1 test blabla </div>
<div style="display: none;" id="feedback" class="textBox .gettingStartedButton gettingStartedButton"> 2 test blabla </div>
<div id="registration" class="textBox gettingStartedButton" style="display: block;">3 test blabla </div>
<div id="impressum" class="textBox"> 4 test blabla </div>
And use the code below. Keep any element visible at first. Then on click of that element it fades it out and fades the next element in. and adds the class "gettingStartedButton" to the visible element to run click event again.
$( ".gettingStartedButton" ).on('click', function () {
var visible_element = $('.textBox:visible');
visible_element.next().fadeIn();
visible_element.next().removeClass('gettingStartedButton');
visible_element.next().addClass('gettingStartedButton');
visible_element.fadeOut();
});

How can I have only one div shown at a time?

I have this code but I'm not sure how to make it so that each time one button is clicked, it closes the other div that is already open. New to jquery!
HTML:
<p class="profile-name">Name</p><br>
<p class="profile-title">Documentation Officer</p><br>
<button id="button-g" class="bio-button">Bio</button><br>
<a class="profile-email" href="mailto:email#test.com">email#test.com</a>
<div class="toggler">
<div id="effect-g" class="profile-bio">
<p>Bio information. Bio Information</p>
</div>
</div>
JQUERY:
<script>
$(function() {
$( "#button-a" ).click(function() {
$( "#effect-a" ).slideToggle( "visible");
});
$( "#button-b" ).click(function() {
$( "#effect-b" ).slideToggle( "visible");
});
$( "#button-c" ).click(function() {
$( "#effect-c" ).slideToggle( "visible");
$("#button-b").hide();
});
$( "#button-d" ).click(function() {
$( "#effect-d" ).slideToggle( "visible");
});
$( "#button-e" ).click(function() {
$( "#effect-e" ).slideToggle( "visible");
});
$( "#button-f" ).click(function() {
$( "#effect-f" ).slideToggle( "visible");
});
$( "#button-g" ).click(function() {
$( "#effect-g" ).slideToggle( "visible");
});
});
</script>

It's rarely wise to target a zillion elements by ID (or any other unique attribute) in a uniform, repetitive structure. Give all your buttons and all your collapsible siblings the same classes, respectively, then do this (or something similar--I can't be more specific without seeing your HTML):
$('.my-button-class').click(function() {
$(this).next('.my-collapsible-div-class').slideDown()
.siblings('.my-collapsible-div-class').slideUp();
});
This assumes markup like this:
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
Update based on your HTML:
$('.bio-button').click(function () {
$(this).nextAll('.toggler:first').slideToggle()
.siblings('.toggler').slideUp();
});
Demo
http://api.jquery.com/nextall
http://api.jquery.com/first-selector
Off-topic suggestion: Use CSS margin or padding rather than line breaks to format your content. Extra markup elements for spacing is ugly and inefficient.

Give the div's a common class, and a custom data attribute with the letter of the next div to open, then combine this into a single function. Sample div:
<div id="effect-a" class="effect"></div>
Sample button
<button id="button-a" class="button" data-letter="a">Click me</button>
Single function
$(".button").click(function() {
//Slide up any open divs
$(".effect").slideUp();
var divLetter = $(this).data("letter") //a
//Concatenate selector
$("#effect-" + divLetter).slideDown();
});

show and hide element on mouse over jquery

I want to show the buttons on hover and hide them when moused out, i tried the following code but doesnt work.
<div class="mybooks">
<div class="divbutton">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia">
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia">
</div>
</div>
".$Tri_IMAGE."
".$Tri_CAPTION."
</div>";
}
?>
</div>
<!--close accordion-->
</div>
<script>
$( ".mybooks" ).mouseenter(function() {
$('.divbutton').show();
});
$( ".mybooks" ).mouseleave(function() {
$('.divbutton').hide();
});
</script>

Just hide the div first
//hide the div here
var $btn = $('.divbutton').hide()
$(".mybooks").mouseenter(function () {
$btn.show();
});
$(".mybooks").mouseleave(function () {
$btn.hide();
});
Demo: Fiddle
Or use a css rule to hide it
.divbutton {
display:none
}
Demo: Fiddle

This fiddle shows the buttons hiding (display: none;) when you hover over them. The thing is, you can't have them reappear once they're gone. There is nothing to hover over...
<div class="divButtons">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia" />
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia" />
</div>
JavaScript:
$('#edit_trivia').hover(function(){
$(this).css('display', 'none');
});
$('#delete_trivia').hover(function(){
$(this).css('display', 'none');
});

You should put your javascript code in this function:
$( document ).ready(function() {
//your code
});
Your code: http://jsfiddle.net/VGJ5u/

Jquery html attr radio input alt content

I want to use Jquery Attr.Radio Button click and write to #RadioDesc id's div...
<input type="radio" desc="sample description" class="AddText">
<script type="text/javascript">
$( document ).ready( function() {
$("radio").click( function() {
$("#RadioDesc").attr("desc");
});
});
</script>
<div id="RadioDesc"></div>
These codes not work...Please help me solutions...

your selector is invalid, change:
$("radio").click(function(){
to
$( document ).ready( function() {
$(":radio").click( function() {
//add to html
$("#RadioDesc").html($(this).attr("desc"));
});
});

Html:
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
Js:
$(document).ready(function() {
$("input[type=radio]").click(function(){
$("#RadioDesc").text($(this).attr("desc"));
});});
Working Fiddle

The radio selector is :radio
$(document).ready(function () {
$(":radio").click(function () {
$("#RadioDesc").html($(this).attr('src'));
});
});

Your selector isn't targeting the radio, its targeting an element radio
try this:
$('input[type=radio]')

You should change div's html to radio's attribute value
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
<script type="text/javascript">
$( document ).ready( function() {
$("input:radio").click( function() {
$("#RadioDesc").html( $(this).attr("desc") );
});
});
</script>