I'm editing a website for use on tablet, but obviously none of my :hover pseudo-classes will work.
I want to move a div up to reveal text by the same amount as when I hover, but I want it to happen when I click "up_down_icon.png".
Here is my html:
<div class="home_1">
<div class="h_1_text_box">
<h3>Our Concept</h3>
<img class="icon" src="up_down_icon.png">
<p>Text here</p>
</div>
</div>
And the CSS:
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}
.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
Literally all I need to know is how to apply a change of position to .h_1_text_box, to be specific, moving it up 84px.
The answer is probably going to be really simple and I feel a little silly for asking, but my code is a bit long for me to get my head around applying JS. I haven't been able to find anything specific enough to help me out. If I have to change the order of anything in my HTML I don't mind.
Thanks for your help.
Just add an event listener to your icon which will listen for click events.
Then you would just need to add a css class to the parent element. You already have everything you need in your css defined.
Here is an example.
var upDownIcon = document.getElementsByClassName('icon').item(0);
upDownIcon.addEventListener('click', function(e) {
e.target.parentNode.classList.toggle('move_up_down');
}, false)
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 100px;
transition: 0.5s ease;
}
.h_1_text_box.move_up_down {
position: relative;
top: 0px;
background-color: rgba(0, 0, 0, 0.9);
}
/*
.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
*/
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
/* this is just for the span*/
font-size: 26px;
cursor: pointer;
}
.h_1_text_box.move_up_down > .icon {
transform: rotate(-180deg);
}
/*
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
*/
<div class="home_1">
<div class="h_1_text_box">
<h3>Our Concept</h3>
<span class="icon">⇅</span>
<!--<img class="icon" src="up_down_icon.png">-->
<p>Text here</p>
</div>
</div>
you can set top and left according to your requirement using simple JS -
document.getElementById("myBtn").style.left = "100px";
document.getElementById("myBtn").style.top = "100px";
This snippet is one of thousand ways ways you can do this using JS:
function toogleClass() {
var divhasClass = document.getElementById("onlyTouchDevices").classList;
if (divhasClass.contains("showMore")) {
divhasClass.remove("showMore");
} else {
divhasClass.add("showMore");
}
}
.home_1 {
width: 600px;
height: 300px;
margin: 0px 0px 96px 0px;
overflow: hidden;
background-color: lightblue;
background-size: 600px 300px;
border-radius: 8px;
}
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}
.showMore {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
h3 {
margin: 0 0 18 0;
font-weight: lighter;
-webkit-margin-before: 0px;
-webkit-margin-after: 18px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
<div class="home_1">
<div class="h_1_text_box" id="onlyTouchDevices">
<h3>Our Concept</h3>
<img class="icon" src="up_down_icon.png" onclick="toogleClass()" />
<p>Text here</p>
</div>
</div>
What I have done here is just toggled the class that added/reset the top spacing which you have used when you hover that element.
may be this will help you, run my code snippet and check it out
$('.icon').click(function(){
$('.h_1_text_box').css('position','relative');
$('.h_1_text_box').css('top','171px');
$('.h_1_text_box').css('background-color','rgba(0, 0, 0, 0.9)');
})
.home_1 {
width: 600px;
height: 300px;
margin: 0px 0px 96px 0px;
overflow: hidden;
background-color: lightblue;
background-size: 600px 300px;
border-radius: 8px;
}
.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
h3 {
margin: 0 0 18 0;
font-weight: lighter;
-webkit-margin-before: 0px;
-webkit-margin-after: 18px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="home_1">
<div class="h_1_text_box">
<h3>Our Concept</h3>
<img class="icon" src="up_down_icon.png">
<p>Text here</p>
</div>
</div>
Related
I have the following code:
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("margin-left", "0px");
$("#plus").css("margin-left", "-425px");
});
$("#close").click(function() {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
margin-left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
margin-left: -425px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
left: 4px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-left: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
margin-left: -425px;
}
#plus {
margin-left: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
How would I move the to the opposite side of the page? Instead of it appearing at the far left of the page, how would I make it appear at the far right? I have tried changing the margin-left in the js but I am not quite getting it right, as it does not output the expected output. Any suggestions?
When using fixed positioning of elements, I advise you to use the right / left rule for offset.
In jquery I changed all margin-left to right. I did the same in css. It was with those rules that dealt with displacement. Also, to rotate the triangle, I adopted rule border-right: 55px solid #1c8dc4 for #plus::after.
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("right", "0px");
$("#plus").css("right", "-425px");
});
$("#close").click(function() {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
right: -425px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
right: 0px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
right: 2px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-right: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
right: -425px;
}
#plus {
right: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
i need a navigation menu in my website so I was searching for some option online , i found a one in codepen,i copied pasted in my my text editors and saw the preview but the code was not running properly in the preview.
Here am attaching the link for the codepen editor :
I want the same output from code pen in my previews in the text editors
html,
body {
font-family: sans-serif;
font-size: 14px;
color: #555555;
height: 100%;
width: 100%;
margin: 0;
}
.container {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.selector {
padding: 0.25rem;
background-color: #efefef;
width: min-content;
border-radius: 12px;
position: relative;
}
.selector-item {
white-space: nowrap;
padding: 0.75rem 1.5rem;
cursor: pointer;
z-index: 2;
user-select: none;
transition: color 0.2s ease;
}
.selector-item--active {
color: white;
}
.highlight {
background-color: #ff4757;
border-radius: 8px;
position: absolute;
left: 0.25rem;
width: 4.75rem;
height: 2.6rem;
z-index: 1;
box-shadow: 0px 0px 12px -2px rgba(255, 71, 86, 0.9);
transition: left 0.2s ease,
width 0.2s ease;
}
<div class="container">
<div class="selector" self="size-x1" layout="row center-left">
<div class="highlight"></div>
<div class="selector-item" onclick="selectItem(event)">Chapter-wise</div>
<div class="selector-item" onclick="selectItem(event)">Year-wise</div>
<div class="selector-item" onclick="selectItem(event)">Others</div>
</div>
</div>
You need to add following reference in your page.
https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css
<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
So I'm trying to do this typography transformation. I have the letter in all white. When I hover the mouse on top, the top half of the letter should flip down exposing a different color. The problem is that it's flipping down the wrong div.
tback is the lower part of letter A.
tfront is the upper part of letter A.
HTML code:
<div id="letter-container" class="letter-container">
<h2><a href="#">
<div class="twrap">
<div class="tup">
<div class="tback"><span>A</span></div>
<div class="tfront"><span>A</span></div>
</div>
<div class="tbg"><span>A</span></div>
<div class="tdown"><span>A</span></div>
</div></a></h2>
</div>
HERE IS THE CSS:
.letter-container h2 .twrap{
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
box-shadow: 1px 1px 4px #000;
}
.letter-container h2 .tbg{
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
z-index: -10;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tdown{
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
display: block;
margin-top:-60px;
}
.letter-container h2 .tup{
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
}
/*Drop down part*/
.letter-container h2 .tup .tback{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
color: #f2c200;
}
.letter-container h2 .tup .tdown{
background: red;
color: red;
}
.letter-container h2 .tup .tback{
-webkit-transform: rotateX(180deg);
}
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(180deg);
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/g4zja/
Not sure what exactly is the desired effect. Maybe this?
fiddle
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(90deg);
}