Develop Reference

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();
});

Replace text in paragraph in div by clicking on a span

I am looking to change a paragraph of text into different text by clicking on a fake 'link' (span) at the bottom of the page.
what I have thus far
<body>
<p> here is a paragraph that i would like to change once the span below me is clicked </p>
<span id="click"> click me for the text above me to change </span>
</center>
</body>
<script>
$( "click" ).click(function() {
$( "p" ).replaceWith( "new paragraph" );
});
</script>
I'm really new to jquery and javascript so any help would be appreciated! thanks.

1st: for id you should use #
2nd: to get the previous element use .prev() .. $(this).prev('p')
<script>
$( "#click" ).click(function() {
$(this).prev( "p" ).replaceWith( "<p>new paragraph</p>" );
});
</script>
Note: id must be unique so don't use same id for more than one element
so try to use class instead <span class="click"> and then use $('.click') instead of $('#click')
3rd: what is </center> in your code should do?
4th: you should check to include jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
5th: put script before closing body tag
full code
<body>
<p> here is a paragraph that i would like to change once the span below me is clicked </p>
<span id="click"> click me for the text above me to change </span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(docuemt).ready(function(){
$( "#click" ).click(function() {
$(this).prev( "p" ).replaceWith( "<p>new paragraph</p>" );
});
});
</script>
</body>
to put img instead of paragraph use
$(this).prev( "p" ).replaceWith('<img src="http://placehold.it/350x150">');
to put img inside paragraph
$(this).prev( "p" ).html( 'new paragraph<img src="http://placehold.it/350x150">' );

$( "click" ) should be $( "#click" )

In reality you don't need replaceWith(). You can just use text() to change the text.
$( "#click" ).click(function() {
$( "p" ).text( "new paragraph");
});

How to get background to fade when jQuery Dialog box is active

I have a jQuery dialog box which appears when a button is pressed. I want the background to fade out colour (dim) when the dialog box is open.
What do I have to put or replace in the CSS to achieve this.
Here is the code:
// Button that brings up a dialog box
<div id="dialog" title="Sign in" style="display:none">
Sign in
</div>
// jQuery dialog function
<script>
function check_domain_input()
{
$( "#dialog" ).dialog();
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog();
return false;
}
</script>

A modal dialog prevents the user from interacting with the rest of the page until it is closed.
$("#dialog").dialog({modal: true});

Open div when click a another div

I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo

You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});

alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');

you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});

Jquery Drag Element after changing through dialog when dragged gets to orignal default state

i have this drag drop code for my elements
$( ".sortable" ).sortable({
revert: true
});
$( ".draggable" ).draggable({
connectToSortable: ".sortable",
helper: "clone", //clone
revert: "true"
});
$( ".sortable" ).droppable({
drop: function( event, ui ) {
var $element = $(ui.draggable).clone();
$element.find('.control').children('.delete').css('display', 'inline').click(function () {
$(this).parent().remove();
});// display properties Link
$element.find('.control').children('.properties').css('display', 'inline');
//For Text Box Change the text and add a label
if($element.find('.control').find('input').attr('type') == "text")
{
$element.find('.control').find('.controlText').html("");
$element.find('.control').find('label').html("Label Here");
}
}
});
This is the code for the drag element
<div class="tools">
<ul>
<li class="draggable" >
<div class="control">
<label> </label>
<input type="text" name="txt" value="" /><span class="controlText"> Text Box </span>
<div class="delete" style="display:none"><sup>x</sup></div>
<div class="properties txtbox" style="display:none">Properties</div>
</div>
</li>
</ul>
</div>
When the Text Box is dragged this event is attached to it
$('.txtbox').live('click', function() {
//get the label
var label = $(this).parent().find('label').html();
$("#textbox_label").val(label);
$( "#dialog-textbox" ).dialog( "open" ).data('parent_div',$(this).parent());
return false;
});
This is the dialog which opens when the Properties is clicked
<div id="dialog-textbox" title="Text Box Properties" style="display:none">
<p>This is the Text Box Properties Form.</p>
<form>
<fieldset>
<label for="textbox_label">Enter Label </label>
<input type="text" name="textbox_label" id="textbox_label" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
The following code handles the Dialog
$("#dialog-textbox").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Apply": function(){
//code to update element goes here...
var label = $("#textbox_label").val()
var $elem_clicked = $("#dialog-textbox").data('parent_div'); //This retrieves
$elem_clicked.find('label').html(label);
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
What is happening here is that i have a text box which i drag to a ul li list and that is sortable, the text box is added to the list and and then i show and close and properties links attached to the text box. when the properties is clicked a dialog box opens and asks for a new label. user gives new label to the text box that is shown with that. But what goes wrong is when i again drag the box in the sortable list up or down it goes back to its initial state and the new label is lost... I think this is due to the helper clone or should i make a clone of the draggable item?

Use a simple trick to distinguish you original element fromthe copy you drag:
- add a class to the label of the original element eg
<label class='orig'> </label>
- in your $(".sortable").droppable handler add atthe end
$(ui.draggable).find('.control').find('.orig').html("Label Here").removeClass('orig');
It should solve your problem. Check it here.