I have some div elements. All of them are supposed to slide in when the page is opened. Three of them are sliding in horizontally and one is sliding in vertically.
$(document).ready(function () {
$("#lineHor1").toggle("slide");
$("#lineHor2").toggle("slide");
$("#lineHor3").toggle("slide");
$("#lineVer1").slideToggle("slow");
});
.lineSliderHor {
width: 1000px;
height: 2px;
background: #000000;
display: none;
}
.lineSliderVer {
width: 2px;
height: 1000px;
background: #000000;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
<p>Click anywhere to toggle the box.</p>
<div id="lineHor1" class="lineSliderHor"></div>
<br />
<div id="lineHor2" class="lineSliderHor"></div>
<br />
<div id="lineHor3" class="lineSliderHor"></div>
So my plan was to use this kind of behavior as animation on the page. As you can see the div sliding in vertically forces all other div's down. I want all the lines to overlap. Is there a way to achieve this? Is it even reasonable to do it this way, or should I use a canvas for this kind of requirement?
The easiest way to not have the vertical line push down the other elements, is to have its position absolute
.lineSliderVer {
...
position: absolute;
}
Snippet
$(document).ready(function () {
$("#lineHor1").toggle("slide");
$("#lineHor2").toggle("slide");
$("#lineHor3").toggle("slide");
$("#lineVer1").slideToggle("slow");
});
.lineSliderHor {
width: 1000px;
height: 2px;
background: #000000;
display: none;
}
.lineSliderVer {
width: 2px;
height: 1000px;
background: #000000;
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
<p>Click anywhere to toggle the box.</p>
<div id="lineHor1" class="lineSliderHor"></div>
<br />
<div id="lineHor2" class="lineSliderHor"></div>
<br />
<div id="lineHor3" class="lineSliderHor"></div>
You could use
position:absolute;
But this may not behave as you want because this makes the div break out of its parents constraints. Unless you use:
position:relative;
On the parent div.
If you choose position: absolute I prefer to use JQuery.animate(); as you can reference CSS properties directly (such as left or marginRight) and easing for more customisable sliding.
I hope this achieves something you're looking for.
Related
When link is clicked, I need jQuery to click on specific part of a div, lets say exactly 1px from its right side.
I'm familiar with jQuery, but I'm not sure how offsets really work in this case?
HTML
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
EDIT: I've added JSfiddle for reference: https://jsfiddle.net/ebc59bah/1/
Check this code.I create two color boxes.The red is the container and the aqua is the div that you want 1px right aside to have an event.I get the pageX position and via if condition I trigger the alert() method.Note the CSS setting specially the html and body because I don't want to have any margin in pixels that must adding to the if condition:
$('.container').on('click',function(e){
var xPosition=e.pageX;
if(xPosition>01 && xPosition<150){
alert('Click');
}
});
html, body {
margin: 0;
padding: 0;
}
.container{
height: 150px;
width: 250px;
background-color:#FF0000;
}
.toBeClicked{
position: inherit;
font-size: 150%;
height: 140px;
width: 150px;
background-color: #00FFFF;
word-break: keep-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
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>
I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.
I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.
As such I have tried various combinations of position: absolute and position: relative on the three <div>s, but so far nothing has worked.
JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/
<div> with id linkbar is the one that needs to be at the bottom.
The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.
I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:
$("#topBuffer").css("height", $("#front").offset().top + $("#front").height());
$("#showLink").click(function() {
if (!$("#back").is(":visible")) {
$("#back").show();
$("#front").animate({
'marginLeft': "+=30px"
});
$("#front").animate({
'marginTop': "+=20px"
});
$("#topBuffer").animate({
'height': "+=20px"
});
}
return true;
});
.front {
width: 400px;
display: block;
border: 2px solid #000000;
text-align: center;
position: absolute;
margin-top: 20px;
z-index: 10;
background-color: white;
}
.back {
display: none;
width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
z-index: 1;
margin-top: 20px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front" class="front">
<a id="showLink" href="javascript:void(0);">front</a>
</div>
<div id="back" class="back">
back
</div>
<div id="topBuffer"></div>
<div id="linkbar">
test
test
test
</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.
if i mouseover on my nick in stackoverflow on top page that show me new menu with * activity
* privileges
* logout etc. how can i make it? i maked something:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#ONE {
background-color: #888;
width: 500px;
height: 500px;
}
#TWO {
background-color: blue;
width: 50px;
height: 50px;
}
#THREE {
background-color: yellow;
width: 200px;
height: 200px;
display: none;
}
#four {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
$(document).ready(
function()
{
$("#TWO").click(
function()
{
$("#THREE").toggle();
});
});
</script>
<div id="ONE">
<div id="TWO">
</div>
<div id="four">
</div>
<div id="THREE">
</div>
</div>
sample image: http://img231.imageshack.us/img231/3885/threej.png
default
click for blue div
how can i it make?
If I understand correctly, you're asking how to make the yellow div appear up beside the blue one, as you have it in the third mockup? If that's the case, then:
You'll want to read up on CSS Positioning. In a nutshell, to make the yellow div sit over everything like that, it needs to take position: absolute; It'll be positioned in relation to it's nearest ancestor that has positioning, so set #ONE to position: relative;
So:
#ONE {
position: relative;
}
#THREE {
position: absolute;
left: 100%;
top: 25%;
}
This will make the top-left of #THREE shift to the far right of and a quarter of the way down #ONE. The absolute positioning also takes it out of the flow of the document, allowing it to overlap other elements.
If you want to position elements on top of each other, use position: relative or absolute. If you want it to stick to a position on your window regardless of if you scroll, use fixed.
After defining the position, you can define top, right, bottom and left to position it where you want. To simulate the 3rd image in your example, you could add:
position:relative;
top: -220px;
left:50px;
to your #THREE elements CSS, like here:
http://jsfiddle.net/niklasvh/Axjgf/