Okay so basically I have 3 divs, called first, nextscreen, and finalscreen. I created some jquery that allows the divs to slide in and out of view, when pressing next or back. Animating from first to nextscreen when pressing Next >>> and <<< Back works, UNTIL I press Next >>> to animate from nextscreen to finalscreen. When I go <<< Back from finalscreen to nextscreen, and then try go <<< Back from nextscreen to first, NEXTSCREEN SIMPLY DOES NOT MOVE. However if I try make it slide out to the left it does work, but I need it to slide out to the right, or it just looks silly. This is my html:
<div class="row">
<div class="col-lg-12" id="first" style="position: relative; right: 0px">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div class="form-group">
<label for="tableName">Name</label>
<input type="text" class="form-control" id="tableName" name="tableName" placeholder="Name your list..." />
</div>
<div class="form-group">
<label for="Description">Description</label>
<textarea class="form-control" id="Description" name="Description" placeholder="Provide a brief description of this list..." rows="3"></textarea>
</div>
<button type="button" class="btn btn-default" id="next">Next >>></button>
</div>
</div>
<div class="col-lg-12" id="nextscreen" style="right: -2000px; top: -220px; position: relative">
<div class="col-lg-6">
<div class="form-group">
<label for="addField">Add Field</label>
<input type="text" class="form-control" id="addField" placeholder="Field Name..." />
</div>
<button type="button" class="btn btn-default" id="add">Add Field >>></button>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="fieldList">Field List</label>
<select multiple class="form-control" id="fieldList" style="height: 200px">
<option>Name*</option>
<option>Cell*</option>
</select>
</div>
<p>* Compulsory fields</p>
<button type="button" class="btn btn-default" id="back"><<< Back</button>
<button type="button" class="btn btn-default" id="final">Next >>></button>
<button type="button" class="btn btn-default pull-right" id="remove"><<< Remove Field</button>
<input type="hidden" name="SelectedOptions" id="Name" value="Name" />
<input type="hidden" name="SelectedOptions" id="Cell" value="Cell" />
</div>
</div>
<div class="col-lg-12" id="finalscreen" style="right: -4000px; top: 0px; position: relative">
<div class="form-group">
<button class="btn btn-primary" type="submit" id="createtable">Create Table</button>
<button type="button" class="btn btn-default" id="finalback"><<< Back</button>
</div>
</div>
</div>
And this is my JQuery:
$("#next").click(function () {
$("#first").animate({ left: '-2000px' });
$("#nextscreen").animate({ right: '0px' });
$("#finalscreen").animate({ right: '-2000px' });
});
$("#final").click(function () {
$("#first").animate({ left: '-4000px' });
$("#nextscreen").animate({ left: '-2000px' });
$("#finalscreen").animate({ right: '0px' });
});
$("#back").click(function () {
$("#first").animate({ left: '0px' });
$("#nextscreen").animate({ right: '-2000px' })
$("#finalscreen").animate({ right: '-4000px' });
});
$("#finalback").click(function () {
$("#first").animate({ left: '-2000px' });
$("#nextscreen").animate({ left: '0px' });
$("#finalscreen").animate({ right: '-2000px' });
});
Here is a fiddle http://jsfiddle.net/yjZBe/
I think it would be way easier and efficient to place those elements in a container and animate only that one instead of each element.
Related
I know this question has been asked before, but all the other answers I found are way too complicated for me to understand.
When you click a button, I need one section to disappear and another to show in its place.
How can I do this with jQuery?
Here's the outline of my code:
<div class="container">
<div class="hide">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<button class="btn btn-block btn-primary rounded-0">Button</button></div>
</form>
</div>
</div>
What do I need to do CSS and jQuery-wise to make this work? So the second section (.show) appears exactly where the first one was?
You need to bind a click event to the button, .show() the section you want to show and .hide() the one you want to hide.
$('.btn').on('click', function() {
$('div-to-show').show();
$('div-to-hide').hide();
});
Example below:
$('#btn').on('click', function() {
$('.hide').hide();
$('.show').show();
});
.hide {
display: block;
}
.show {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
<div class="hide">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
</div>
First, your HTML has an error in it. You have an extra closing div just before your closing form.
One of your div elements will default to be hidden and the other to be shown. Then upon your trigger (button click) we swap the display of both.
// Get references to the two areas
var divs = $("#div1, #div2");
// When the "trigger" button is clicked, toggle the hidden class on both elements
$("#btnShowHide").on("click", function(){
divs.toggleClass("hidden");
});
.hidden { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hidden" id="div1">
<button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
<button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3" id="div2">
<form>
<div class="form-group mb-2">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<button class="btn btn-block btn-primary rounded-0">Button</button>
</form>
</div>
<button id="btnShowHide" type="button">Click to toggle display</button>
</div>
I have a list of Divs which contain an image. When I hover over a div, I want the image to move up (I'm doing this by altering the image css on hover). The issue I'm having is that when I hover over one div, all the images in all divs are changing. Instead, I want the hover effect just to take place on the div I'm hovering over. Here is my current jQuery:
jQuery(document).ready(function($){
screenshotHeight = $('.l_admin-product-screenshot img').height();
$('.l_admin-product').hover(function () {
$('.l_admin-product-screenshot img').css({
top: -screenshotHeight
});
},
function () {
$('.l_admin-product-screenshot img').css({
top: '0'
});
});
});
Here is my html structure:
<div class="l_admin-products">
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-1-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-1-radio">
<input id="layers-preset-layout-skizzar-homepage-1-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-1-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage21_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-1" data-key="layers-preset-layout-skizzar-homepage-1">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-2-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-2-radio">
<input id="layers-preset-layout-skizzar-homepage-2-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-2-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage2_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-2" data-key="layers-preset-layout-skizzar-homepage-2">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-3-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-3">
<label for="layers-preset-layout-skizzar-homepage-3-radio">
<input id="layers-preset-layout-skizzar-homepage-3-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-3-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage3_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-3" data-key="layers-preset-layout-skizzar-homepage-3">
Select </a>
</div>
</label>
</div>
</div>
$('.l_admin-product').hover(function () {
$this = $(this);
$this.find('.l_admin-product-screenshot > img').css({
top: -screenshotHeight
});
},function () {
$this.find('.l_admin-product-screenshot img').css({
top: '0'
});
});
Try with $this to point current image.
I have a piece of HTML that looks like this
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
Above that I have a button that looks like this
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.
<script type="text/javascript">
function add_fields() {
var div = document.getElementById("imageContent");
div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
</script>
This works as expected and adds a new row into the imageContent div.
See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.
onInsertCallback: function (obj){
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
}
The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.
$(document).ready(function() {
jQuery(document).ready(function() {
/** Keep track of which modal button was clicked. **/
var currentModalBtn;
jQuery('.modal-btn').click(function() {
currentModalBtn = jQuery(this);
});
jQuery('.laradrop').laradrop({
onInsertCallback: function(obj) {
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
},
onErrorCallback: function(jqXHR, textStatus, errorThrown) {
// if you need an error status indicator, implement here
//Swal here
swal({
title: 'Error!',
text: 'An Error Occurred',
type: 'error',
showConfirmButton: false,
showCancelButton: true
});
},
onSuccessCallback: function(serverData) {
//
}
});
});
});
My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.
move var currentModalBtn; outside the ready so it is available to the callback(s)
Also have only one
$(document).ready(function() {
jQuery(document).ready(function() {
you have a mess of jQuery/$ and so on - this will likely work better:
function add_fields() {
var $div = $("#imageContent");
$div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
var currentModalBtn;
$(function() {
/** Keep track of which modal button was clicked. **/
$("#imageContent").on("click",".modal-btn", function() {
currentModalBtn = $(this);
});
$("#test").on("click",function() {
currentModalBtn.closest('.input-group').find('input.file-src').val("hello");
$('#myModal').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
<button type="button" id="test">
click
</button>
I making a "to do list" of task to be done. I have some buttons that will move the tasks up and down on the list.
I go the up and down buttons going. My only issue is that the task divs are able to move up and down the entire page. How can I keep the task divs to only moving up and down on on each other?
Thank you!
Here's my code:
$(document).ready(function(){
$('.up_button').click(function(){
$(this).parents('.task').insertBefore($(this).parents('.task').prev());
});
$('.down_button').click(function(){
$(this).parents('.task').insertAfter($(this).parents('.task').next());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
1st: I think you need to define $(this) before going to insertAfter or insertBefore
2nd: you can use .closest()
$(document).ready(function(){
$('.up_button').click(function(){
var ThisIt = $(this);
$(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
});
$('.down_button').click(function(){
var ThisIt = $(this);
ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
});
});
Demo Here
Hi how i can render a different form using leanModel dialog box? Currently this is how the lean model works:
<a id="go" rel="privateMsg" name="signup" href="#signup">With Close Button</a>
<div id="signup" style="display: none; position: relative; opacity: 1; z-index: 11000; left: 50%; margin-left: -202px; top: 200px;">
<div id="signup-ct">
<div id="signup-header">
<h2>Create a new account</h2>
<p>It's simple, and free.</p>
<a class="modal_close" href="#"></a>
</div>
<form action="">
<div class="txt-fld">
<label for="">Username</label>
<input id="" class="" name="" type="text">
</div>
<div class="txt-fld">
<label for="">Email address</label>
<input id="" name="" type="text">
</div>
<div class="txt-fld">
<label for="">Password</label>
<input id="" name="" type="text">
</div>
<div class="btn-fld">
Cancel
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
$(function() {
$('a[rel*=privateMsg]').leanModal({ top : 100, closeButton: ".modal_close,.close" });
});
The leanModel js is as follows :
(function($){
$.fn.extend({
leanModal:function(options){
var defaults={top:100,overlay:0.5,closeButton:null};
var overlay=$("<div id='lean_overlay'></div>");
$("body").append(overlay);
options=$.extend(defaults,options);
return this.each(function(){
var o=options;
$(this).click(function(e){
var modal_id=$(this).attr("href");
$("#lean_overlay").click(function(){
close_modal(modal_id)
});
$(o.closeButton).click(function(){
close_modal(modal_id);
});
var modal_height=$(modal_id).outerHeight();
var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css({"display":"block",opacity:0});
$("#lean_overlay").fadeTo(200,o.overlay);
$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":"100px"});
$(modal_id).fadeTo(200,1);e.preventDefault()
});
});
function close_modal(modal_id){
$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})
}
}
});
})(jQuery);
How i can improve this code so that i can open a dialog box just for any form? Also if i would like to load signup div from ajax how can i do so? Thanks