i have a sticky image which i am trying to place above my nav bar, the code for sticky is like below:
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 200px;
z-index: 1000;
}
<div>
<a href="index.html" rel="home" class="logo logo_image_only">
<img class="sticky" src="assets/img/logo_n.png" alt="">
</a>
</div>
here is my navbar css
.navbar-area {
position: absolute;
left: 0;
top: 50px;
width: 100%;
height: auto;
z-index: 999;
background-color: transparent;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.navbar-area.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
-webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
background-color: #ffffff !important;
-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.navbar-area.is-sticky .zash-nav .navbar {
-webkit-box-shadow: unset;
box-shadow: unset;
padding-left: 0;
padding-right: 0;
}
.navbar-area.navbar-style-two {
top: 0;
padding-left: 40px;
padding-right: 40px;
}
.navbar-area.navbar-style-two .zash-nav {
background-color: transparent;
}
.navbar-area.navbar-style-two .zash-nav .navbar {
background-color: transparent;
-webkit-box-shadow: unset;
box-shadow: unset;
padding-right: 0;
padding-top: 0;
padding-left: 0;
padding-bottom: 0;
}
now when i load the page, the image is not proper, its taking up space and making my nav bar go wrong like the image below:
can anyone please tell me whats wrong ? thanks in advance
You just need to make the position "sticky" to "fixed" for the image, Please refer below code.
img.sticky {
position: fixed;
top: 0;
width: 200px;
z-index: 1000;
}
Related
This content moves along with the window resize and I'm trying to make it stay in place. Is there any way to stop the content from moving or should I move the section along with window resize so that it appears in the same position?
Pictures of the content in [#media only screen and (min-width: 992px) and (max-width: 1199px)]
width: 1198 px
width: 992 px
The partial code
#hero {
height: 100%;
position: relative;
float: left;
padding: 18% 10% 35% 6%;
margin: 0 5% 0% 5%;
width: 90%;
}
.IntroText {
margin-left: auto;
margin-right: auto;
color:black;
padding-bottom: 1.5%;
font-size: 20px;
transform: translateX(-20px);
transition: transform 1s, opacity 1s;
transition-delay: 0.5s;
}
.MyName {
color:#fad25a;
}
.knowMore {
left: 0.4%;
font-weight: bold;
font-size: 20px;
transform: translateX(-20px);
transition: transform 1s, opacity 1s;
transition-delay: 1s;
}
button, .talkButton {
color: #d4af37;
padding: 5px 25px;
border: 2px solid #d4af37;
position: relative;
margin: auto;
z-index: 1;
overflow: hidden;
transition: 0.3s;
}
button:after, .talkButton:after {
content: '';
background-color: #252526;
position: absolute;
z-index: -2;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
button:before, .talkButton:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d4af37;
transition: 0.3s;
z-index: -1;
}
button:hover, .talkButton:hover {
cursor: pointer;
color: #252526;
}
button:hover:before, .talkButton:hover:before {
width: 100%;
}
button:focus, .talkButton:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero" class="jumbotron">
<div class="container">
<h1 class="IntroText animated">
Lorem Ipsum dolor <span class="MyName">sit amet</span> and<br> consecteuer
</h1>
<button type="button" id="knowbutton" class="knowMore animated" onclick="toAbout()">Know more</button>
</div>
</section>
In the CSS file, in the #hero rule set you have given padding and margins in percentages. It means whenever the screen changes then the padding and margin apply according to that screen(in percentages).
try by fixing padding and margins in the #hero rule set
You could do a position: fixed
#hero {
height: 100%;
position: fixed;
top: 100px;
left: 50px;
padding: 18% 10% 35% 6%;
margin: 0 5% 0% 5%;
width: 90%;
}
Now it is always going to stay in the same position(100px from the top, 50px from the left), even if you scroll.
I'm calling a tooltip and trying to hide it after 9 seconds, but it does not work for me.
What is happening here that the "tooltip" is only hidden after loading, but it does not respond the second time I click on "Touch Me" button.
The "Touch Me" button is #pop-regalo
What am I doing wrong in my script?
You can find a demo below:
$(function() {
$('#pop-regalo').hide();
setTimeout(function() {
$('#pop-regalo').fadeIn('slow');
}, 1000);
});
//--------------------
$(document).ready(function() {
$("#pop-regalo").click(function() {
$("#hola,.layer-2,.tooltip").show();
});
$("#hola").click(function() {
$("#hola,.layer-2").hide();
});
});
// --------------------
$(function() {
$('.tooltip');
setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
});
html,
body {
left: 0;
top: 0;
margin: 0;
padding: 0;
font-family: Arial, sans-serif
}
.note {
width: 50%;
margin: 70px auto 0
}
#pop-regalo {
position: fixed;
left: 15px;
top: 15px;
padding: 10px 15px;
color: white;
background: red;
cursor: pointer
}
#hola {
display: none;
position: absolute;
width: 200px;
height: 200px;
padding: 15px 15px 8px;
text-align: center;
font-size: 2em;
line-height: 200px;
background: #999;
-webkit-animation: fadein 1s;
animation: fadein .75s;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
z-index: 9999
}
#keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0
}
75% {
opacity: 0
}
100% {
opacity: 1
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0
}
50% {
opacity: 0
}
75% {
opacity: 0
}
100% {
opacity: 1
}
}
.layer-2 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
-webkit-animation: fadein .2s;
animation: fadein .2s;
z-index: 999
}
.tooltip {
display: none;
position: fixed;
top: 140px;
left: 100%;
margin-left: -80px
}
.tooltip .tooltiptext {
width: 120px;
background: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 30%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pop-regalo">Touch Me
<!--<img src="https://i.pinimg.com/originals/3b/4f/ff/3b4fff9dfb958a180863c56d7fcf6326.jpg">-->
</div>
<div class="note">What is happening here that the "tooltip" is only hidden after loading, but it does not respond the second time we click on the red button named Touch Me...?</div>
<div id="hola">Close</div>
<div class="tooltip">
<span class="tooltiptext">A gift for you</span>
</div>
<div class="layer-2"></div>
You have to trigger the timeout at the moment you show the tooltip. In your original code, you're only triggering the timeout upon page load, so when if you click the red button for the first time after 9 seconds have already passed, the tooltip would not hide even on the first iteration.
You might also want to save a reference to the timeout instance to a variable and cancel this instance before triggering a new one, so that the tooltip will not be hidden too early when you close the overlay and click the button again while the tooltip is still showing.
var tooltipTimeout;
$(function(){
$('#pop-regalo').hide();
setTimeout(function(){
$('#pop-regalo').fadeIn('slow');
},1000);
});
//--------------------
$(document).ready(function(){
$("#pop-regalo").click(function(){
$("#hola,.layer-2,.tooltip").show();
// clear any old timeout
window.clearTimeout(tooltipTimeout);
// you have to start the timeout after showing the tooltip
tooltipTimeout = setTimeout(function(){
$('.tooltip').fadeOut('slow');
},9000);
});
$("#hola").click(function(){
$("#hola,.layer-2").hide();
});
});
// --------------------
$(function(){
// the code in here is only called once at page load
// $('.tooltip'); // <= this doesn't do anything
// setTimeout(function(){
// $('.tooltip').fadeOut('slow');
// },9000);
});
html,body {left:0;top:0;margin:0;padding:0;font-family:Arial,sans-serif}
.note {width:50%;margin:70px auto 0}
#pop-regalo {
position:fixed;
left:15px;
top:15px;
padding:10px 15px;
color:white;
background:red;
cursor:pointer
}
#hola {
display:none;
position:absolute;
width:200px;
height:200px;
padding:15px 15px 8px;
text-align:center;
font-size:2em;
line-height:200px;
background:#999;
-webkit-animation:fadein 1s;
animation:fadein .75s;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
text-align:center;
border-radius:5px;
-webkit-box-shadow:0 3px 8px rgba(0,0,0,0.7);
box-shadow:0 3px 8px rgba(0,0,0,0.7);
z-index:9999
}
#keyframes fadein{0%{opacity:0}50%{opacity:0}75%{opacity:0}100%{opacity:1}}
#-webkit-keyframes fadein{0%{opacity:0}50%{opacity:0}75%{opacity:0}100%{opacity:1}}
.layer-2 {
display:none;
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.5);
-webkit-animation:fadein .2s;
animation:fadein .2s;
z-index:999
}
.tooltip {
display:none;
position: fixed;
top:140px;
left:100%;
margin-left:-80px
}
.tooltip .tooltiptext {
width: 120px;
background:#000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 30%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pop-regalo">Touch Me
<!--<img src="https://i.pinimg.com/originals/3b/4f/ff/3b4fff9dfb958a180863c56d7fcf6326.jpg">-->
</div>
<div class="note">The tooltip will show upon button click and then hide after 9 seconds.</div>
<div id="hola">Close</div>
<div class="tooltip">
<span class="tooltiptext">A gift for you</span>
</div>
<div class="layer-2"></div>
<div class="wrapper">
<div class="top">
<a class="btn" href="#" id="split-me">Click Me!</a>
</div>
</div>
<div class="hidden">
<h2>I like Nachos!</h2>
</div>
<div class="wrapper">
<div class="bottom"></div>
</div>
html {
overflow-y: scroll;
}
html,body {
height: 100%;
}
.top {
background-image: url(data:image/png;base64,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);
background-color: #3498db;
height: 100%;
position: absolute;
width: 100%;
box-shadow: 0 0 12px rgba(0,0,0,.50);
transition: 25s top ease-in;
}
.bottom {
background-color: #ecf0f1;
height: 100%;
position: absolute;
width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,.45);
transition: .25s top ease-in;
}
.wrapper {
position: relative;
height: 50%;
min-height: 200px;
}
.slide-up {
top: -50%;
transition: .25s all ease-in;
}
.slide-down {
top: 50%;
transition: .25s all ease-in;
}
.hidden {
position: absolute;
height: 50%;
width: 100%;
z-index: -5;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.hidden h2 {
height: 20px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-weight: 700;
font-family: 'Open Sans', serif;
color: #3498db;
}
.btn {
margin: auto;
position: absolute;
top: 100%;
left: 0;
bottom: 0;
right: 0;
background: #FFF;
height: 85px;
width: 145px;
padding-top: 60px;
border-radius: 100%;
text-align: center;
font-weight: 700;
font-family: 'Open Sans', serif;
text-decoration: none;
color: #3498db;
z-index: 100;
transition: .25s all;
box-shadow: 0 0 0 5px #3498db,0px 0 0 10px white,0px 0 10px 0 rgba(0,0,0,.5),0px 0 10px 10px rgba(0,0,0,.25);
transition: .25s all ease-in;
}
.btn:hover {
box-shadow: 0 0 0 10px #3498db,0px 0 0 20px white,0px 0 15px 0 rgba(0,0,0,.5),0px 0 10px 20px rgba(0,0,0,.25);
transition: .25s all ease-in;
}
$('#split-me').click(function(){
$('.top').toggleClass('slide-up');
$('.bottom').toggleClass('slide-down');
});
Code: http://codepen.io/DuzAwe/pen/RazYYW
On click, the tags are toggled to reveal the hidden area creating a split effect. But the transitions on the classes are providing no easing?
Am I using them wrong?
You are animating the top property, but in the .top class there is no top, property, so there is no animation, same for the .bottom class.
Check it here:
http://codepen.io/tomsarduy/pen/MyMqdq
I have a div that features 4 side by side images, along with some text over the images. Rather than shrink the images and text when it's on mobile, I'd like to stack the images on top of each other. However, I'm stuck when I try to do it.
I played with the styles,and was never able to make this happen.
I created this JS Fiddle (https://jsfiddle.net/deadendstreet/pwrd78gv/) with some test images, however, only one image is showing up. This is not a problem on my website. Additionally, I pasted the styles below.
Thank you for your help.
#highlights {
width: 100%;
max-height: 200px;
background: rgba(0, 0, 0, 0.89);
overflow: hidden;
position: absolute;
bottom: 200px;
}
#featured-boxes-light {
width: 100%;
max-height: 200px;
background: rgba(255, 255, 255, 0.03)
}
#highlights .swiper-slide {
position: relative;
cursor: pointer;
}
#highlights .title-top, #featured-boxes .title-bottom {
background: rgba(0, 0, 0, 0.48);
width: 100%;
position: absolute;
padding: 10px 20px 10px;
color: white;
font-size: 22px;
text-align: left;
/* margin-top: -36px; */
left: 0%;
/* margin-left: -35%; */
line-height: 22px;
bottom: 0px;
height: auto;
z-index: 1;
}
.swiper-wrapper {
max-height: 200px;
}
.fb-header {
display: block;
font-size: 16px;
color: rgb(255, 0, 0);
font-weight: 600;
letter-spacing: 2px;
text-shadow: 0px 0px 3px black;
opacity: .9;
width: 25%;
}
.fb-title .title-top:hover {
opacity: .8 !important;
}
.fb-zoom {
max-width: 350px;
width: 100%;
height: 200px;
overflow: hidden;
}
.fb-zoom img {
max-width: 350px;
width: 100%;
height: auto;
}
.fb-swipe-left, .fb-swipe-right {
height: 195px;
width: 40px;
position: absolute;
top: 0px;
z-index: 999;
background-size: contain !important;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.fb-swipe-left:hover, .fb-swipe-right:hover {
background-color: rgba(255, 255, 255, 0.33);
}
.fb-swipe-left {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25);
left: -40px;
}
.fb-swipe-left.fb-hovered {
left: 0;
}
.fb-swipe-right {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25);
right: -40px;
}
.fb-swipe-right.fb-hovered {
right: 0;
}
.swiper-scrollbar {
height: 5px;
position: absolute !important;
width: 100%;
bottom: 0px;
margin: 0 auto;
z-index: 999;
background: rgba(255, 255, 255, 0.14) !important;
}
.swiper-scrollbar-drag {
background: rgba(255, 255, 255, 0.7) !important;
}
https://jsfiddle.net/hon8trkz/
add this media query (width to be adjusted to your requirements):
#media screen and (max-width: 600px;) }
.fb-zoom, .fb-zoom img {
max-width: none;
height: auto;
}
}
It sets the width of the images and their container to 100% on screens below 600px width. The height: auto; is optional - don't know if you want that.
As #Johannes said, you can add a media query with a specific behavior to get the wanted result.
His query works fine, I just corrected your HTML structure for the last picture :
<div class="swiper-slide">
<a class="fb-title" href="">
<div class="title-top">
test </div>
<div class="fb-zoom">
<img width="400" height="224" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSkbgZKjIRwUafNM8Nbo5BwoaJWk7byZbD82LOqVAwku6jC1DM_Ig" class="attachment-small" alt="100 Songs from SXSW mixtape" />
</div>
</a><!--/.swiper-wrapper -->
</div><!--/#swiper-featured -->
Fiddle here
I have a right sidebar.I'm using font awesome angle-left icon to show/hide the sidebar. On click of toggle button side bar pushes the content towards left along with the button & then button(font awesome left-angle) rotates 180 degrees to become (font awesome right-angle) as an animation. It is working fine till here. But when i scroll the page the toggle button is also getting scrolled vertically.
Here I don't want toggle button getting scrolled vertically every time.
I hv tried position: fixed in css by which vertical scrolling is stopped but the sidebar is not pushing the toggle button horizontally. The side bar is getting overlapped on the toggle button (only in firefox).
In chrome its working fine.The vertical scrolling is stopped & the sidebar is pushing the content to left side, but this is not happening in firefox.
css:
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-ms-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background-color: rgba(0, 0, 0, 0.3);
width: 240px;
height: 100%;
}
.content {
width: 100%;
height: 100%;
padding: 10px;
position: relative;
padding-left: 50px;
}
.content #sidebar-toggle {
background: transparent;
color: white;
opacity: 0.5;
border-radius: 1px;
display: block;
position: relative;
padding: 30px 7px;
float: right;
}
.padtop {
line-height: 600px;
color: white;
opacity: 0.5;
position: fixed;
}
.rotate {
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.rotate.side {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
html:
<div class="container">
<div class="col-sm-1">
<a href="#" data-toggle=".container" id="sidebar-toggle">
<i class="fa fa-angle-double-left fa-5x padtop rotate"></i></a>
</div>
</div>
Here is my o/p:
o/p in Firefox
o/p in Chrome
description and example demo for toggle effect..
Demo
HTML
<div class="toggle-button">
<button></button>
</div>
CSS
.toggle-button { background-color: white; margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button button { cursor: pointer; outline: 0; display:block; position: absolute; left: 0; top: 0; border-radius: 100%; width: 30px; height: 30px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: #83B152; border: 2px solid #7DA652; }
.toggle-button-selected button { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
Javascript
$(document).on('click', '.toggle-button', function() {
$(this).toggleClass('toggle-button-selected');
});