I developed a sidebar. However I have a issue that the button required to open the sidebar gets invisible on mobile devices. If you know the position you can click on it and it works. The button to hide it works fine.
Here is a link to the website:
https://gdi.ethz.ch/jenkins/pages/current.html
And here the relevant html:
<div id="wrapper" class="container container-fluid col-md-12">
<header><nav id="sidebar-wrapper">
<ul class="sidebar-nav">
Some menue
</ul>
</nav>
</header>
<div id="main">
the site content
</div>
<footer></footer>
</div>
And the css code:
#menu-toggle {
position: fixed;
overflow:hidden;
z-index: 1100;
background-color: #009bf0;
color: white;
top: 0;
left: 249px;
padding-left: 10px;
padding-top: 3px;
width: 40px;
height: 40px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #menu-toggle {
left: 0px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #009bf0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Because the element is in a fixed position it is getting cut off when your screen gets smaller on mobile.
You'll either need to adjust how it handles the viewport or have its width adjust with the screen.
The problem is that the was inside the fixed #sidebar-wrapper. This resulted in an issue in chrome mobile. By moving the #menu-toggle outside the #sidebar-wrapper everything worked fine.
Related
I created a link that uses css pseudo classes. As seen in css (:before). Everything is fine in an Andriod device but in iPhone it's working on the second click Why...? if there is any solution please help me.
.link{float:left;}
.link a {
color: #000;
font-size: 15px;
font-weight: 400;
padding: 10px;
display: inline-block;
border: 1px solid #b6fe54;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.link a:before {
position: absolute;
content: "";
width: 0px;
background: #b6fe54;
left: 0px;
top: 0px;
height: 100%;
z-index: -1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.link a:hover:before {
width: 100%;
}
<div class="link">Learn More</div>
Add the following
<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(!iOS)
document.write('\x3Cstyle>.link a:hover:before {width: 100%;}\x3C/style>');
</script>
For visualization of the intended effect, go near the bottom of this site, at the "Catering Services" section, and hover over the three images.
I want my images, on hover, to zoom-in -- increase in height and width -- while the frame around it shrinks, with overflow:hidden ofcourse.
Here's what I have written so far:
<style type="text/css">
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 120%;
}
</style>
<div class="container">
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
</div>
<!---End of container-->
The height of the frame is shrinking but not the width. Moreover, I want the image to expand on all four sides, and the frame to shrink likewise. Can this be achieved with something other than transitions? Any suggestions or tips on how should I go about solving this?
Just animate the img's transform:scale() and you should be all set.
Hope it helps!
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover img {
transform: scale(2);
}
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
If you see the code here https://jsfiddle.net/ojagwxc0/ the following is not working :
.parallax > div .txparallax a {
position: absolute;
top: 50%;
right: 0;
margin-top: -49px;
display: inline-block;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #3498db;
width: 126px;
height: 126px;
line-height: 126px;
text-align: center;
overflow: hidden;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
All I want to see is any kind of "movement" for the words "Select", "Fishing Tackle You Need" & "Mes cuml dia sed inenias ingerto lot aliiqt dolore ipsum commete".
What am I doing wrong? Please advice.
Try somthing like this. For a transition to work you need to be moving it somehow, for example here I'm, moving it from left:0px; to left:400px on hover:
https://jsfiddle.net/ojagwxc0/2/
.parallax > div .txparallax {
width: 100%;
padding-right: 150px;
display: inline-block;
position: relative;
left:0px;
}
.parallax > div .txparallax:hover{
left:400px;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
}
you should add an action on hover for ex:
a:hover{
background-color:red;
}
working fiddle : https://jsfiddle.net/ojagwxc0/1/
I have ben boxing with this issue for ages now.
I have a parent div "wrapper" containing a child div "sidebar-wrapper" consisting of an ul with li in it.
I want "sidebar-wrapper"s height to fit "wrappers" height. My issue is when i set its height to auto goes 0.
My HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
a lit of these li's
</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
Whatever Content!!
</div>
</div>
</div>
</div>
My css:
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:400px;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
See this fiddle
The CSS used is as follows
html,body{
height: 100%;
}
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
I've given height:100% for html,body,wrapper and body-content..
Setting height to auto just sets the height equal to the height of the contents of the div..here i think you want the height to be equal to the wrapper..so you'll have to set it to 100%.
and this is how can i see your website after making the specified changes..
Change the sidewrapper height to 100% and give the wrapper a height: see fiddle: See fiddle
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: auto; /* example height */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
Set the parent div's position to relative and children div's to absolute:
#wrapper {
...
...
/**** added css ****/
position:relative;
/*********************/
...
...
}
Edit 1
as you commented, I came to learn that you want the sidebar to available throughout the page regardless the height of the page.
If that is the case then "wrapper" div has nothing to do with.
Just set the position of "sidebar-div" to "fixed" and give proper top and bottom margins according to your page header and footer margins:
and set the top and bottom of child wrapper to 0:
#sidebar-wrapper {
...
...
/**** added css ****/
position:fixed;
top:10px;
bottom:10px;
/*********************/
...
...
}
Here's the updated demo JS fiddle link:
Updated Demo JS Fiddle Link
Hope that helps!
I'm trying to create simple auto-hide menu/header with css. I use transition but I think this is not a point here.
When I hover header is should slide down and show whole content, when I move mouse away it should slideup. It works for me. I want also screen content to expand when header is slidedup. This is mayor problem. The only way I know to have div expanded on whole page (screen) is to fix its top, bottom, left & right. It does not work when top value is changing.
Please look at my code example:
http://jsbin.com/ahamid/2/edit
The green part is problematic. I tried to fix it with changing top value on hover - but it does not work when mouse is outside of content & outside of header too.
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main">
<div id="head">
<span> header </span>
</div>
<div id="content">
<span>
test content
</span>
</div>
</div>
</body>
</html>
and css:
body {
position: relative;
}
#main {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
}
#head {
display: block;
height: 50px;
top: -44px;
right: 0px;
left: 0px;
background-color: #fcc;
margin: 0px 3px;
position: absolute;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover {
height: 50px;
background-color: red;
top:0px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content {
background-color: cfc;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 3px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#head span {
color: black;
font-weight: bold;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover span {
color: yellow;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content:hover {
top: 6px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
I think that the problem is that you set the #content as you want it to be on hover.
What you really want is that it is always that way, and only change it (downwards; increasing top) in the hover of the #head
Change the #content to:
#content {
background-color: cfc;
.....
top: 6px;
.....
}
and modify the top in the hover of the head:
#head:hover ~ #content {
top: 50px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
You can do that because head and content are siblings, so you can use the sibling selector.
This way it behaves correctly, the only strange thing comes from the transitions timing being different, but you can manage this :-)