I looked for hours on the internet but didn't find anything about starting css transition without using trigger events.. I'm not using it for a website but for a kind of advertisement.
this is what i got: [(jsfiddle)][1]
body{
width:1920px;
height:1080px;
margin:0;
padding:0;
background: #FFF;
}
#box{
position: absolute ;
left: 0px;
top: 0px;
width: 800px;
height: 140px;
border:solid 5px #000;
transition: width 5s linear 2s;
overflow:hidden;
}
#box:hover{
left: 0px;
height: 140px;
width: 0px;
}
img{
display: inline-block;
left: 100px;
margin-top: 20px;
width: 100px;
height: 100px;
position: absolute
}
.song1{
position: absolute;
left: 250px;
margin-top: 20px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
.song2{
position: absolute;
left: 350px;
margin-top: 40px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
<img src="/Users/ts/Desktop/1.png" class="album">
<div class="song1">NOW --> </div>
<div class="song2">NEXT --></div>
</div>
</body>
</html>
Hope someone can help me
You can replicate your width animation using keyframes. The animation would still start on page load (or other trigger, like adding a class, which is something you want to avoid), but the difference is that with keyframes you can completely control when the actual visible animation starts.
For example, you can set a 15 second animation, and set the keyframes from 0% to 66% to be the same (static) and only do the width animation between 67% and 100% (which equals to 10-15 seconds).
Helpful resources:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
No. In programming, you have to have a trigger to do something. Now, that trigger can be a set amount of time, which would not require a click, scroll, etc. There is a good question about timing here.
Related
I need to make a floating div that appears to be almost hidden and if I click in the tab it appears to the left. Floating over the rest of the site. I don't know if I made myself clear, so I put here two images, how it should look hidden and visible. But I couldn't figure it out yet how to make it. Any help will be appreciated.
I work with VueJS.
This is a vanilla js implementation that uses fixed position, the css transition property for animation, and a class that is toggled when the handle is clicked to change the position.
const slideout = document.querySelector('.slideout')
const handle = slideout.querySelector('.handle')
handle.onclick = function() {
slideout.classList.toggle('active');
}
.slideout {
position: fixed;
width: 80%;
height: 80%;
left: 100%;
top: 10%;
transition: left .3s ease-out;
}
.slideout.active {
left: 10%;
}
.handle {
position: absolute;
top: 10px;
left: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: darkred;
cursor: pointer;
}
.body {
position: absolute;
background: red;
width: 100%;
height: 100%;
border-radius: 8px;
}
<div class="slideout">
<div class="handle"></div>
<div class="body"></div>
</div>
Exhausted in trying to figure out what is wrong. I can't seem to get my menu box to slide out.
https://jsfiddle.net/87cd9341/5/
My sliding menu box does not slide out when I click on the "nav-toggle".
Not sure if z-index has anything to do with it because I'm using it to cover some elements, but it shouldn't right?
I just added the main elements of the code...when you click the black tab, the blue box is suppose to shoot out right?
When I I manually add "open" into class for the "nav-side" into the html or input 0% into the transform section of the "nav-side" into the css, this is what I want to happen after I click the "nav-toggle' with jquery/javascript.
<div class="nav-side">
</div>
<div class="tab-container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
.plageholder-container {
display: block;
width: 29.064039%;
min-width: 121px;
max-width: 121px;
margin-left: 2.955665%;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background: #ffffff;
z-index:2;
}
.nav-side {
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 295px;
max-width: 500px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background-color:blue;
z-index:1;
margin-left: 2.955665%;
padding-left: 120px;
transform:translateX(-100%);
transition: transform .06s ease;
}
.nav-side.open {
transform:translateX(0);
}
.tab-container{
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 25px;
max-width: 25px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 126px;
padding-right: 0px;
overflow: hidden;
background-color:#ffffcc;
z-index:0;
margin-left: 2.955665%;
}
.nav-toggle{
position: relative;
position: relative;
display: inline-block;
top: 3px;
width:25px;
height:121px;
background-image: url(../Buttons/Button-About_Slider_Letter.svg);
}
$(".nav-toggle").on("click", function(){
$("nav-side").toggleClass("open");
});
});
Theoretically, if my research is correct I think class="nav-side" is suppose to change to class="nav-side open"
when I click the "nav-toggle" link ????????
The problem is probably either the position or z-index. Please provide a jsfiddle.
Missing a dot . in $("nav-side")
$(".nav-side").toggleClass("open");
I want to hide scrollbar, but at the same, i also want to have scrolling action i.e
I want to hide scrollbar but still, want to scroll to see rest of content without actually seeing the scrollbar.
overflow: hidden won't work because after using that I cannot scroll to see the content.
how to do that using HTML/CSS/javascript?
I am working on styling scrollbar but I noticed there is no well-defined way to style scroll bar so I made custom scrollbar using divs with jQuery, but at the end, I have two scroll bar one which I made and other default scrollbar and now I want to hide default scroll bar.
I don't want to use -webkit- because it is not accepted in all browser.
I want to hide scroll bar in the following code.
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 6000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 300px;
background-color: teal;
height: 2000px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 6000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
please anybody answer!
And overflow:auto; is out of the question?
It won't show if you don't need but does show when you do.
You need to add the following styles:
#parent {
height: 100%;
width: 100%;
overflow: hidden;
}
#child {
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
Here is the working fiddle: http://jsfiddle.net/5GCsJ/954/
Make your scroll bar transparent. You can do this by the following code.
::-webkit-scrollbar
{
width:0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
}
Hope this will help you!
Try this:
yourDiv::-webkit-scrollbar{
width: 0px;
}
I don't realy know how to explain this thing in short sentence.
I don't know if it is bug or not..
In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.
I tried to search for this problem, cause it should be pretty common. But nothing came up.s
It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome.
https://jsfiddle.net/zvwcdzjz/2/#
P.S. I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome.
It can be solved with jQuery too, makes no difference for me.
HTML:
<div id="el">
<div class="content">
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
</div>
</div>
CSS:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
margin-left: 300px;
background-color: red;
display: none;
}
JS:
$(function(){
$(".button").click(function(){
$(this).parent(".block").children(".blocktoopen").show();
});
$("#el").scroll(function(){
$(".blocktoopen").hide(); });
});
The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:
Change:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
To:
#el {
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
And then you're good to go.
To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
bottom: 50%;
background-color: red;
display: none;
right: 0;
}
I can't post comment so here is another try with jsfiddle. I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
display: none;
top: 50%;
bottom: 50%;
right: 0;
}
.internal{
width: 225px;
}
Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none;. Maybe trying to set the position: relative; ...
Just seen the jquery script. Show() and hide() appears to work as visibility css property.
If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.
I've been trying to implement drag and drop functionality using JQuery. I've got 3 'draggable' divs and 3 'droppable' divs. Div with id 'draggable1' should be accepted by div with id 'droppable1' and so on. However, it only works for one pair of the divs(draggable1 and droppable1). It doesn't work for the other two.
I think it's somehow related to the css positioning. When I don't set the margin properties for the individual divs, it works. However, if I want to position the divs elsewhere, the functionality doesn't work anymore.
Here's a jsfiddle I've created: https://jsfiddle.net/3ews8j8x/
HTML
<center><h3>Drag and Drop</h3></center>
<div class="wrap">
<div class="draggables" id="draggable1"></div><br>
<div class="draggables" id="draggable2"></div><br>
<div class="draggables" id="draggable3"></div><br>
</div>
<div id="droppable1"></div>
<div id="droppable2"></div>
<div id="droppable3"></div>
CSS
body{
margin: 0;
}
.wrap{
width: 400px;
height: 300px;
background: #e3e3e3;
position: relative;
margin-top: 80px;
}
.draggables{
width: 20px;
height: 20px;
margin: auto;
position: absolute;
margin-left: 30px;
}
#draggable1{
background: #003366;
position: relative;
}
#draggable2{
background: #ffff00;
position: relative;
margin-top: 90px;
}
#draggable3{
background: #ff0000;
margin-top: -150px;
margin-left: 220px;
}
#droppable1{
width: 50px;
height: 50px;
background: #0000FF;
margin-left: 600px;
margin-top: -200px;
}
#droppable2{
width: 50px;
height: 50px;
background: #008080;
margin-left: 700px;
margin-top: -50px;
}
#droppable3{
width: 50px;
height: 50px;
background: #00cc00;
margin-left: 800px;
margin-top: -50px;
}
Javascript code is provided in the link.
I want to know why it doesn't work when I try to change the positioning of the divs. Can it not be done or am I doing something wrong? I've been stuck with this problem for over 3 days now. Any help would be appreciated.
Thank you in advance.
So there were a few fundamental errors. Firstly the .draggables are set to position:relative; These need to be absolute. You were positioning these .draggables with margins, you should be positioning them with top & left:
JSFiddle
.draggables{
width: 20px;
height: 20px;
position: absolute;
}
#draggable1{
background: #003366;
}
#draggable2{
background: #ffff00;
top: 90px;
}
#draggable3{
background: #ff0000;
top: 150px;
left: 220px;
}