Using the last example of this guide (http://www.learningjquery.com/2009/02/slide-elements-in-different-directions), I am trying to get a div to toggle 'behind' a button.
Desired Result Example:
Initially the div including input fields, Button B, and Button C will be hidden. When 'Slide it' button is clicked, the div slides in FROM behind the button until a specific distance (margin) is met between the RIGHT side of the div and the 'Slide it' button.
Upon clicking the button again (and/or when 'Esc' key is pressed), the div will slide "into" the button.
Here is the script, followed by the demo:
$('#button1').click(function() {
var $marginRighty = $('.inner');
$marginRighty.animate({
marginRight: parseInt(
$marginRighty.css('marginRight'),10) == 0 ?
$marginRighty.outerWidth() : 0});
});
https://jsfiddle.net/ishq786/xqb5a7dq/
Fiddle: https://jsfiddle.net/xqb5a7dq/6/
$('#button1').on('click', function() {
animateDiv();
})
$(document).keyup(function(e) {
if (e.keyCode === 27 && $('.inner').hasClass('visible')) {
animateDiv();
}
})
function animateDiv () {
$('.inner').toggleClass('visible');
$('.inner').animate({
width: 'toggle',
},350);
}
.toolbar {
width: 100%;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0px auto;
padding: 5px 0px;
background-color: skyblue;
}
#divA,
#divB {
display: inline;
}
.inner {
float: right;
display: none;
padding-right: 20px;
}
#button1 {
float: right;
margin-right: 5px;
}
input,
button {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toolbar'>
<div>
<button id="button1">Slide it</button>
</div>
<div class="inner is-hidden">
<div id="divA">
<input type="text" />
<input type="password" />
</div>
<div id="divB">
<button>Button B</button>
<button>Button C</button>
</div>
</div>
</div>
Fiddle.
I've solved some of your problems. I confess I'm not exactly sure how you want the outcome to look so I'll leave the tweaking to you. But two main things;
I have used css to get one on top of the other. I positioned the inner div 100% right, position: relative, and the button over the top now has its parent div set from the right with position: absolute so that it can overlap with no footprint. I literally moved the button lower in the HTML so I didn't have to mess about with z-index, haha.
I moved your Javascript into a separate function so you can call that with a keypress or however you like. This means you won't have code duplication.
Related
I have two images of arrows, up and down. My problem is when I use slideToggle(), it toggles up and down, but the image stays the same rather then changing. For instance, if I toggle up, the image should automatically change to the downward arrow and vice versa. Also, these arrows should be moved to the top of the page once the toggle happens. The current code displays two arrows, I would like that to be one arrow that changes based on the toggle.
What I have so far..
HTML:
<div id="toggleParam">
<input type="image" class="upArrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="downArrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
CSS:
.upArrow{
display: block;
margin-left: 690px;
margin-top: 0px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7pt;
}
.downArrow{
display: block;
margin-left: 760px;
margin-right: 70px;
margin-top: -10px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7.5pt;
}
JavaScript/JQuery:
$(document).ready(function () {
$('#toggleParam').on("click", function () {
$('.dropdown').slideToggle();
});
What I need is shown in these two pictures..
I realize missing a lot of code on the JS part.. I am working on it while asking this question. Thanks for the help!
You need to simply include the arrows' elements in the toggle function accordingly:
$('#toggleParam').on("click", function () {
$('.downArrow, .upArrow').toggle();
$('.dropdown').slideToggle();
});
Also in the beginning you need to hide one of the arrows (not sure which one in your case):
.downArrow{
display: none;
...
.upArrow{
display: block;
Try this (note - there's n-ways to do this; this is just how i'd do it).
<!--index.html-->
<div id="toggleParam" class="toggle-param--up">
<input type="image" class="up-arrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="down-arrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
/* app.css */
.toggle-param--up .down-arrow { display; none;}
.toggle-param--down .up-arrow { display; none;}
//app.js
$('#toggleParam').on("click", function (e) {
// the rest of your logic goes here....
var isUp = $(e.target).hasClass("toggle-param--up"),
directionClass = { true: "toggle-param--up", false: "toggle-param--down"};
$(e).target.removeClass(directionClass[isUp]).addClass(directionClass[!isUp];
});
I have a div "wtb_wrapper_middle" in middle of my web page.
For that div only scroll able in web page. In left and right div are not movable, it fixed in my web page.
So I want to mouse always focus on that particular div wherever my mouse clicked or mouse hover. Means when i use keyboard up or down button at that time that particular div only should be scroll.
Is there possible in JQuery.
My code is like below.
<div id="wtb_wrapper_inner">
<div id="wrapper_left">
....
....
....
</div>
<div id="wtb_wrapper_middle">
....
....
....
....
</div>
<div id="wtb_wrapper_right">
....
....
....
</div>
</div>
In from above html code "wtb_wrapper_middle" area only scrolls in my web page.
I have tried the below
window.onload = function() {
document.getElementById("wtb_wrapper_middle_inner").focus();
};
In this code is focus only on page load, but if clicked mouse in somewhere else, at that time also that middle area should be scroll. That is not working.
My Ajax callback function like below
$.ajax({
type: "POST",
url: "search.php?ajaxrequest=yes",
data: query_string
}).done(function( data ) {
$(".wtb_p_loader").remove();
$("#wtb_wm_listing").append(data);
});
I'm appending return success data into the di wtb_wm_listing which is i have placed inside of main div wtb_wrapper_middle
Anyone help me to make it success..
You can do this using css position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. Then the central div scrolls regardless of where the mouse pointer is. You can use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
And the Html is
<div class='left'>
<a href='#'>Hover to check the mouse focus and scorll</a>
</div>
<div class='center'>
//some long content
</div>
<div class='right'>
</div>
Css for doing this action.
a {
color: #000;
display: block;
font-family: arial;
margin: 10px;
text-decoration: none;
}
a:hover {
background-color: #f03055;
color: #fafafa;
}
p {
color: #fafafa;
font-family: arial;
line-height: 24px;
margin: 0 0 25px 0;
padding: 0 2%;
}
.center {
background-color: #97c;
height: 2000px;
margin: 0 25%;
width: 50%%;
}
.left {
background-color: #7c9;
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 25%;
}
.right {
background-color: #7c9;
bottom: 0;
position: fixed;
right: 0;
top: 0;
width: 25%;
}
EDIT: to filter out input elements
document.body.onkeydown = function(event){
var e = event || window.event,
target = e.target || e.srcElement;
if (target.tagName.toUpperCase() == 'INPUT') return;
document.getElementById("wtb_wrapper_middle_inner").focus();
};
this will move focus to your middle div whenever keydown event occurs.
I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!
If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>
You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});
I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.
I am trying to make resizible and draggable lines out of labels using jQuery UI.
The problem is, if I add two labels and try to resize the first label, it changes the position of the second label (but if I resize the second label it does not change the position of the first label).
How to prevent labels from changing other label's position while resizing..?
HTML:
<div id="main">
<button id="s">add line</button>
</div>
<div id="line" class="hidden">
<label class="dra"></label>
</div>
JS:
function makeline() {
$t = $(".dra", "#line").clone(true).draggable().resizable({
handles: "s, n"
});
$("#main").append($t);
}
$("#s").click(function () {
makeline();
});
CSS:
.dra {
display: block;
background-color:red;
width: 7px;
height: 80px;
border: 1px solid red;
}
.hidden {
display: none;
}
#main {
border: 1px solid black;
width:500px;
height: 300px;
}
UPDATE: Full code in JSFiddle
This is happening because the jQuery UI widgets set the position of element to relative by default, leaving it in the normal flow of the document. You can work around this issue by applying position:absolute for the elements like:
.ui-resizable {
position:absolute !important;
}
This will cause them to stack on top of each other rather than one below another since they aren't in the normal flow anymore. You can easily fix this using the jQuery ui position() utility method as shown below:
$("#s").click(function() {
$t = $("#line .dra").clone(true).draggable().resizable({
handles: "s, n"
})
if ($("#main").find(".dra").length) {
$t.position({
at: "left bottom",
of: "#main .dra:last"
})
};
$("#main").append($t);
});
.dra {
display: block;
background-color: red;
width: 7px;
height: 80px;
border: 1px solid red;
}
.hidden {
display: none;
}
#main {
border: 1px solid black;
width: 500px;
height: 300px;
}
.ui-resizable {
position: absolute !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="form-group">
<label>ADD two line and RESIZE THE FIRST LINE it will scroll down the line added after it. NOW add a 3rd line and resize the second line it will scroll down the 3rd line and if you resize the very first line you added it will scroll down the other lines</label>
<div id="main">
<button id="s">add line</button>
</div>
<div id="line" class="hidden">
<label class="dra"></label>
</div>
You can adjust the positioning however you want.
If your label is:
<div class="label">Lorem ipsum</div>
add this CSS:
.label {
white-space: nowrap;
}
I have div containing a form. When user clicks outside of the div it hides - this part works bit to good.
The problem is that while user is selecting text inside div(input, paragraph,...) and his mouse
leaves the modal(clicked state), mouseup event is triggered which causes my div to hide.
How do I ignore the mouseup event when user is selecting text?
Here is what my HTML mark up looks like:
<div class="body">
<button id="show-modal">Toggle modal</button>
<div class="modal">
<input type="text" name="opportunity-name" \>
<button>Submit</button>
</div>
</div>
CSS:
.body {
position: absolute;
width: 100%;
bottom: 0;
top: 0;
height: 100%;
background: green;
}
div.modal {
background: blue;
width: 200px;
height: 130px;
margin: 0 auto;
text-align: center;
padding-top: 70px;
}
JS:
var $modal = $('div.modal');
$('#show-modal').click(function () {
$modal.fadeIn();
});
$(document).mouseup(function (e) {
if (!$(e.target).is('div.modal *, div.modal')) {
$modal.fadeOut(100);
}
});
Here's a fiddle
How do I ignore the mouseup event when user is selecting text?
Check if the text input has focus. Ex:
if ( $(input).is(':focus') ) { ... }