I'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).
$("#toggle").click(function(event) {
event.stopPropagation();
$("#slider").toggle("slide", {
direction: "right"
}, 300);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
z-index: 100;
display: none;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.
I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.
Is there a simple way to fix this ?
The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.
In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
In addition, you can also prevent the text from wrapping with white-space: nowrap.
See the full example below:
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
white-space: nowrap;
z-index: 100;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
Related
I have made a basic div with a header and a paragraph inside of it and when I perform a multistep animation, the box glitches upwards than moves back down. It makes it look very glitchy and strange. You can view my error at https://jsfiddle.net/yajuy8qy/.
Code:
<div class="enlarge">
<h1 class="title">Welcome!</h1>
<p>Zach</p>
</div>
<script>
$(document).ready(function() {
$(".enlarge").animate({minHeight: '500px'}, "slow");
$(".enlarge").animate({width: '80%'}, "slow");
});
</script>
<style>
.enlarge {
height: 500px;
width: 50%;
background-color: #2098D1;
align-items: center;
align-content: center;
border-radius: 15px;
position: relative;
margin: 10px auto;
}
</style>
Thanks!
There seems to be an issue with the default padding property. Try setting the padding on the div (even 1px appears fixes the glitch).
.enlarge{
padding: 1px;
}
I am using a `.toggle("slide") function to try and get a piece of text I have to appear as if each letter is sliding in. Unfortunately, it looks as if the text is flying in instead. I tried to squeeze the margins in tight, so that it would start at a closer place, but it still looks as if it is flying in from the left side.
Is there a better way to do this, so it looks as if the letters are sliding in without "flying in"?
$("#home-learn").toggle("slide");
#blue {
background-color: #0085A1;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
display: none;
text-align: center;
position: relative;
margin: 0 40%;
top: 50%;
font-size: 2.3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue">
<div id="home-learn">Learn more...</div>
</div>
For the effect you want, put a div inside your container. Make the div position absolute, make it 100% the height and width of the container, and make it the same background color as the main background. Make the div's z index higher than the container so the div sits over the text like a curtain. Then use toggle() to slide the curtain to the right exposing the text underneath.
Note that this uses jQuery UI, without it, you can't make toggle() slide to the right like this needs.(at least to my knowledge you cant). If you dont want to use jquery UI, you could use .animate() instead of toggle()
$("#curtain-div").toggle("slide", {
direction: "right"
}, 3000);
#blue {
background-color: #0085A1;
position: relative;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
text-align: center;
position: relative;
top: 50%;
font-size: 2.3em;
}
#curtain-div {
width: 100%;
height: 100%;
position: absolute;
background-color: #0085A1;
top: 0;
left: 0;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="blue">
<div id="home-learn">
<div id="curtain-div"></div>
Learn more...
</div>
</div>
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel
I just want the cursor to stay a pointer when it passes over the text in my div. Using cs, it works, but using Jquery it reverts to the text selector over text.
This doesn't work...
<style>
#test
{
height: 300px;
width: 300px;
background: blue;
position:absolute;
top: 0px;
left: 0px;
font-size: 80px;
}
</style>
</head>
<body>
<div id="test">It's not a pointer!</div>
<script src='jquery-1.10.2.min.js'>
</script>
<script>
$(document).ready(function(){
$("#testjquery").hover(function(){
$(this).css({'cursor':'hand', 'cursor':'pointer'});
});
});
</script>
While this works fine...
<style>
#test
{
height: 300px;
width: 300px;
background: blue;
position:absolute;
top: 0px;
left: 0px;
font-size: 80px;
}
#test:hover
{
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<div id="test">It's a pointer!</div>
It seems weird, as I thought jquery simply accessed the css methods.
Looking for an explanation, or better yet a solution w/ how to do this in Jquery.
Thanks!
Your div id is test not testjquery
$("#test").hover(function () {
$(this).css({
'cursor': 'hand',
'cursor': 'pointer'
});
});
Update you can only use
$("#test").hover(function () {
$(this).css({
'cursor': 'pointer'
});
});
Read How can I make the cursor a hand when a user hovers over a list item? as commented by frnhr