Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I Have fixed images using Skrollr pretty much just like this: http://prinzhorn.github.io/skrollr/examples/classic.html
I am also using Slicknav for the menu. Unfortunately, when the menu opens it opens behind the Fixed "parallax" image.
I've tried changing positioning, margins, z-index, Blah! nothing helps. I would like the menu to open on top of the image.
Edit: Here's some code:
This menu is placed in the div with the class="section-1" which is inside skrollr-body
<ul id="menu">
<li>About</li>
<li>Services</li>
<li>Staff</li>
<li>Map</li>
<li>Contact</li>
</ul>```
The images that come after are outside skrollr-body:
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#section-1 + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(assets/images/back_sun.jpg)"
data-anchor-target="#section-1 + .gap"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
css:
/*---------------
Slick-NAV
*/---------------
/* Button */
.slicknav_btn {
background: none;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
background-color: #FFF2E8;
}
.slicknav_menu {
background:#212b41;
padding:0;
}
.slicknav_nav ul, .slicknav_nav li {
border-top:2px solid #9FBDD1;
margin-top:0;
margin-right:0;
margin-bottom:0;
}
.slicknav_nav .slicknav_item:hover {
background:none;
color: #FFF2E8;
}
.slicknav_nav a {
color: #FFF2E8;
}
.slicknav_nav a:hover{
background:none;
color:#FFF2E8;
}
.slicknav_nav .slicknav_txtnode {
padding: 7px 15px;
margin: 0;
}
a.slicknav_btn.slicknav_collapsed, a.slicknav_btn.slicknav_open {
background-color: transparent;
}
.slicknav_menu .slicknav_menutxt, .slicknav_brand a, .slicknav_brand {
color: #FFF2E8;
font-family: 'Codystar', cursive;
font-weight: normal;
text-shadow: 0 0px 0px #000;
}
/*---------------
Skrollr
*/---------------
html, body {
height:100%;
}
.skrollr-desktop body {
height:100% !important;
}
body {
font-family:sans-serif;
}
p {
margin:0 0;
}
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}
.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}
.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.parallax-image-50 {
height:200%;
top:-50%;
}
.parallax-image-100 {
height:100%;
top:0;
}
.parallax-image.skrollable-between {
display:block;
}
.no-skrollr .parallax-image-wrapper {
display:none !important;
}
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
background:transparent center no-repeat;
background-size:cover;
}
.skrollr .gap {
background:transparent !important;
}
.gap-50 {
height:50%;
}
.gap-75 {
height:75%;
}
.gap-100 {
height:100%;
}
.header, .content {
background:#eee;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.content-full {
height:100%;
}
#done {
height:100%;
}
Anyone have any ideas?
Thank you!
Answered my own question!
gave .slicknav_menu:
position: relative;
z-index: 10;
Unfortunately the non-fixed content also slides but that I can figure out!
Related
I have this animated retractable menu bar. I made two menu bars. When one slides out when the icon is clicked, the other slides in. I use hidden-sidenav to change the transition delay to zero for the closing nav so the expanding nav will wait 1s for the closing nav to finish retracting.
The transition I don't like is the icon that moves. It is because I have a box-sizing property and padding for each nav bar. I use box-sizing to center the icon. But I want effect like this . Notice how the links in the nav bar stays fixed.
function closeIt(){
document.getElementById('mysidenav').classList.add('hidden-sidenav');
document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
document.getElementById('mysidenav').classList.remove('hidden-sidenav');
document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:20%;
background:#111;
transition:1s;
transition-delay:1s;
transition-timing-function:ease-out;
overflow-x:hidden;
box-sizing:border-box;
padding:calc((20% - 50px)/2);
}
.sidenav a{
font-size:90px;
color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
height:100%;
width:20%; /* Changed to 20%: visible by default. */
background:#111;
overflow-x:hidden;
position:fixed;
top:0;
transition:1s;
transition-timing-function:ease-out;
transition-delay:1s;
box-sizing:border-box;
padding:calc((20% - 50px)/2);
}
.sidenav2 a {
font-size:50px;
color:#818181;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
transition-delay:0s;
transition-timing-function:ease-in;
width:0;
padding:0;
}
<div id='mysidenav'class='sidenav hidden-sidenav'>
<a onclick='closeIt()'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>☰</a>
</div>
In order to make icons fixed, I just added
position:absolute;
left:15px;
to
.sidenav a
.sidenav2 a
Also I removed padding calculations and made positions absolute. Due to font size difference, I also put
top:12px;
to
.sidenav2 a
Hope this helps.
function closeIt(){
document.getElementById('mysidenav').classList.add('hidden-sidenav');
document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
document.getElementById('mysidenav').classList.remove('hidden-sidenav');
document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}
setIconPositions('mysidenav');
setIconPositions('mysidenav2');
function setIconPositions(parentElement) {
var element = document.getElementById(parentElement);
var positionInfo = element.getBoundingClientRect();
var width = positionInfo.width;
var closeIcon = document.getElementById('close-icon');
var openIcon = document.getElementById('open-icon');
closeIcon.style.left = (width/2-getWidthOfText(closeIcon.text, window.getComputedStyle(closeIcon).fontFamily,
window.getComputedStyle(closeIcon).fontSize)/2)+"px";
openIcon.style.left = (width/2-getWidthOfText(openIcon.text, window.getComputedStyle(openIcon).fontFamily,
window.getComputedStyle(openIcon).fontSize)/2)+"px";
}
function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.c === undefined){
getWidthOfText.c=document.createElement('canvas');
getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
}
getWidthOfText.ctx.font = fontsize + ' ' + fontname;
return getWidthOfText.ctx.measureText(txt).width;
}
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:30%;
background:#111;
transition:1s;
transition-delay:1s;
transition-timing-function:ease-out;
overflow-x:hidden;
box-sizing:border-box;
position:absolute;
top:0;
}
.sidenav a{
font-size:90px;
color:#818181;
position:absolute;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
height:100%;
width:30%; /* Changed to 20%: visible by default. */
background:#111;
overflow-x:hidden;
position:absolute;
top:0;
transition:1s;
transition-timing-function:ease-out;
transition-delay:1s;
box-sizing:border-box;
}
.sidenav2 a {
font-size:50px;
color:#818181;
top:12px;
position:absolute;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
transition-delay:0s;
transition-timing-function:ease-in;
width:0;
padding:0;
}
<div id='mysidenav'class='sidenav hidden-sidenav'>
<a id="close-icon" onclick='closeIt()' class='hidden-sidenav'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a id="open-icon" onclick='openIt()' class='hidden-sidenav'>☰</a>
</div>
I limited click event to :after pseudo-element using click-event:auto and created a span to bind an event inside the parent element. Why the span does not work?
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
}else{
bar.className='slide up';
}
}
function click(){
document.body.innerHTML+='<div>Hello</div>';
}
span{
position:relative;
top:90px;
background:green;
cursor:pointer;
pointer-event:auto;
}
*{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
pointer-events:none;
}
.slide:before {
pointer-events:auto;
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.down{
transform:translateY(100vh);
}
.slide.up{
transform:translateY(23vh);
}
.slide.up:before{
transform:translateY(3vh) rotateX(180deg);
}
.slide{
transition:transform 0.4s ease-out;
}
<div class='box'>
<div class='slide up' onclick='toggle()'><span onclick='click()'>Hello</span></div>
</div>
The white triangle is .slide:before. I use click-event:auto; on it. I am NOT sure if I should use AUTO or ALL. Then I use click-event: none; on .slide class, which is the red rectangle below it. So now, I cannot click on the red rectangle just the white triangle to make it slide up and down. But I do still want to click on part of the red rectangle to do other things(not sliding necessarily).So I added a span(green Hello) inside the div that is the rectangle+the triangle. I then write the JS code so that if the green Hello is clicked, a div will Hello will be added to the body of the HTML. But it does NOT work.
I learned this span method here, but I dont quite understand it.
A few things:
Avoid events on pseudo-elements
Don't add elements by reassigning the entire body innerHtml - you lose all event bindings on all elements
Try to avoid putting JavaScript in your HTML
//listen for click event on toggle element
document.querySelector(".toggler").addEventListener("click", function(){
this.parentElement.classList.toggle("up");
});
//listen for click event on hello
document.querySelector(".clicker").addEventListener("click", function(){
var div = document.createElement("div");
var text = document.createTextNode("Hello");
div.appendChild(text);
document.body.appendChild(div);
});
html, body{
height:100%;
}
*{
margin:0px;
padding:0px;
}
.clicker{
position:relative;
top:90px;
background:green;
cursor:pointer;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
height:100%;
width:100%;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
transform:translateY(100vh);
transition:transform 0.4s ease-out;
}
.slide.up{
transform:translateY(23vh);
}
.toggler {
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.up .toggler{
transform:translateY(3vh) rotateX(180deg);
}
<div class='box'>
<div class='slide up'>
<span class='toggler'></span>
<span class='clicker'>Hello</span>
</div>
</div>
Even better:
This effect can be done completely without JavaScript. Use sibling selectors, a label, and a checkbox instead. See working demo here
I've got a snippet of code working fairly well thus far, but there's a small glitch that needs to be worked out.
The goal is to have two items next to each other where one is a fixed width and the other fills the remaining available width within a given container.
The fluid item is resizing appropriately, however there's a little hiccup every so often as the browser/container is resized.
See: http://jsfiddle.net/tedgrafx/kTeCC/
The two items are floating, but as you resize the width, at certain widths they don't float, and appear vertically stacked - pushing one below the other.
What can be done to remedy this little glitch so it appears seamless during resizing?
Any/all help would be appreciated.
HTML:
<div class="panel">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS:
html, body{
margin:0;
padding:0;
}
.panel {
float:left;
width:100%;
margin:0;
padding:0;
}
.left {
float:left;
width:50px;
height:10px;
margin:0;
background:red;
}
.right {
float:right;
width:100%;
height:10px;
margin:0;
background:blue;
}
Javascript:
// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
resizeRight();
$(window).resize(function () {
resizeRight();
});
});
function resizeRight() {
// Subtract the width of the TopLeft section from the width of the entityPanel div:
var right_width = $('.panel').width() - ($('.left').width());
// Set the width of the TopRight to an even number:
if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
// Set the width of the TopRight section:
$('.right').css({ 'width': right_width });
}
}
You don't need the javascript really, you can lose the float on #right.
Unless I misunderstood what you wanted.
http://jsfiddle.net/kTeCC/7/
html, body{
margin:0;
padding:0;
}
#main {
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:30px;
height:20px;
margin:0;
background:red;
}
#right {
height:30px;
margin:0;
padding-left: 5px;
background:blue;
}
br {
clear: both;
}
http://jsfiddle.net/kTeCC/16/
simple solution that only use position,top, left, right
html, body{
margin:0;
padding:0;
}
#main {
position:relative;
width:100%;
margin:0;
padding:0;
}
#left {
position: absolute;
left:0;
top:0;
width:30px;
height:30px;
margin:0;
background:red;
color:#fff;
}
#right {
position:absolute;
left:30px;
right:0;
top:0;
height:30px;
margin:0;
background:blue;
color:#fff;
}
Just as an addendum to what OneOfOne suggested; to have #left and #right not overlap (while not floating #right) you can add padding-left to #main and position #left with a negative margin-left: http://jsfiddle.net/rasmusfl0e/33pVN/
html, body{
margin:0;
padding:0;
}
#main {
padding-left: 30px;
background-color: pink;
}
#main:after {
clear: both;
content: " ";
display: table;
}
#left {
float: left;
margin-left: -30px;
width: 30px;
background: red;
}
#right {
background: blue;
}
And BTW - floating blocks will stack on top of eachother if their combined width is bigger than their container; the modulus thing you're doing to get even pixel widths on #right is your culprit.
I have a problem with my dropkick menu for my responsive website. When the site enters iphone size it changes to this dropkick menu using dropkick.js, it's a dropdown.
My HTML:
<div id="mobilemenu">
Menu
</div>
This above code is only visible if you view the site in 320px width.
My Javascript:
<script type="text/javascript">
$(function () {
var pull1 = $('#pull');
menu1 = $('ul.menuresponsive');
menuHeight = menu1.height();
$(pull1).on('click', function (e) {
e.preventDefault();
menu1.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu1.removeAttr('style');
}
});
});
</script>
I don't really know much about Javascript, this was taken from a tutorial.
My CSS for when the site is in 320px:
/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }
/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }
As it looks now, the menu is constantly open as shown below, I would very much like it to be closed by default but I can't seem to find a solution.
My menu is rendered as a <ul> and <li> dynamically inside the <div id="mobilemenu">
In the tutorial you link to the demo example has two media queries - one for 515px and one for 320px.
The css for the 515px will be inherited by the 320px one and it contains the code you need to close the menu I think.
Try adding this code into your media query:
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}