I need something like this. http://jsfiddle.net/2fAxv/1/
But the second div #hideshould be on the top left of the screen with some margin. Can't figure that out. Also, once the image is clicked on the youtube video shrinks to a default size.Is there a way to fix it's size in the same code without using <iframe>
html
<div class="vid">
<img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
<div id="hide1">
<h3>johnny Depp<br><span>Acting Technique</span></h3>
</div>
</div>
css
.vid {
width: 350px;
height: 298px;
float: left;
margin: 20px 25px 70px 70px;
background-size: cover;
background-position: 0px -50px;
background-repeat: none;
}
.vid div {
overflow: hidden;
height: 298px;
width: 300px;
background-color: rgba(255, 255, 255, 0.32);
}
.vid div h3 {
position: absolute;
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
padding: 10px;
background-color: rgba(255,255,255,0.8);
margin-left: 30px;
max-width: 450px;
}
.vid div h3 span {
color: black;
text-align: center;
width: 300px;
font-family: 'Source Sans Pro', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
}
function
$('#hide').click(function() {
video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>';
$(this).replaceWith(video);
$('#hide1').hide();
});
As to the sizing problem, I'd suggest:
$('img').click(function () {
// creating an <iframe> element:
var video = $('<iframe />', {
// setting its properties,
// this.dataset.video returns the
// value of the 'data-video' attribute:
'src': this.dataset.video,
// retrieves the height/width:
'height': this.clientHeight,
'width': this.clientWidth
});
$(this).replaceWith(video);
});
JS Fiddle demo.
The positioning can be solved, depending on where you want the element to be positioned, by simply using position: absolute on the element to position (the #hide1 element, with position: relative on the parent .vid element):
.vid {
/* other (unchanged) styles omitted for brevity */
position: relative;
}
.vid div {
/* other (unchanged) styles removed for brevity */
position: absolute;
top: 10%;
left: 10%;
}
/* some minor changes follow,
just for tidying up/aesthetics;
but irrelevant to the 'positioning'
aspect */
JS Fiddle demo.
References:
CSS:
position.
JavaScript:
Element.clientWidth.
Element.clientHeight.
HTMLElement.dataset.
jQuery:
click().
replaceWith().
Related
I am building a website and for the landing page, I need to build something like below as a first section.
but it looks like this
and
when resizing
The code is this one :
import React from 'react';
import HomeCurated from '../components/sections/HomeCuratedSection';
import HomeTrend from '../components/sections/HomeTrendSection';
import NearbyYou from '../components/sections/HomeNearbySection';
import VillageBanner from '../assets/images/village-banner-icon.png';
import DiscoverImage from '../assets/images/discover-home.jpg';
import WhiteButton from '../components/materialdesign/WhiteButton';
import TextContents from '../assets/translations/TextContents';
import './Home.css';
class Home extends React.Component {
render() {
return (
<div className="discover-tile">
<div className="background">
<img
src= { DiscoverImage }
className= "background"
alt="Village"
/>
</div>
<div>
<div className="text-tile">
<h1>{TextContents.ThinkOfUs}</h1>
<p>{TextContents.TheWorldIsYours}</p>
<div className="button">
<WhiteButton textSize="14" link_href="/discover" text={TextContents.DiscoverBtn} />
</div>
</div>
<div>
<img
src= { VillageBanner }
className = "banner"
alt="Village"
/>
</div>
</div>
</div>
);
}
}
export default Home;
and css :
.discover-tile {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.background {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.text-tile {
width: 370px;
position: absolute;
text-align-last: left;
top: 25%;
bottom: 0;
left: 20%;
right: 0;
}
.text-tile h1 {
position: absolute;
width: 370px;
font-family: Fredoka One;
font-size: 39px;
font-weight: bold;
line-height: 1;
text-align: left;
color: #ffffff;
}
.text-tile p {
position: absolute;
width: 200px;
font-family: Source Sans Pro;
top: 28%;
bottom: 0;
left: 0;
right: 0;
font-size: 22px;
font-weight: normal;
text-align: left;
color: #ffffffff;
}
.banner {
width: 54px;
height: 82px;
position: absolute;
text-align: left;
top: 25%;
bottom: 0;
left: 15%;
right: 0;
}
.button {
position: absolute;
text-align: left;
top: 32%;
}
Any idea how to make sure the style/position of text remain the same when changing the screen or at leat adapt a little ?
I recommend you to add Media query into the end of css file and you should apply position:absolute only on .text-tile' container not it's descendants, because the container .text-tile is on absolute position already, so you just add/change margin/padding property if you want to change space of it's descendants (here is h1 and p). You can take a look on this article for more information about grid table: https://www.w3schools.com/css/css_grid.asp. I don't know if this code work for you or not, you should try this:
.discover-tile {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.background {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.text-tile {
width: 370px;
position: absolute;
text-align-last: left;
top: 25%;
bottom: 0;
left: 20%;
right: 0;
}
/* change position:absolute -> position:relative for your desktop version */
.text-tile h1 {
position: relative;
width: 370px;
font-family: Fredoka One;
font-size: 39px;
font-weight: bold;
line-height: 1;
text-align: left;
color: #ffffff;
}
.text-tile p {
position: relative;
width: 200px;
font-family: Source Sans Pro;
/* with relative position property, it's naturally lay next to each other, so now if you just need to add padding/margin to h1 and p for spacing
top: 28%;
bottom: 0;
left: 0;
right: 0; */
font-size: 22px;
font-weight: normal;
text-align: left;
color: #ffffffff;
}
/* tablet, ipad version (change font-size here if needed)*/
#media (min-width: 768px) and (max-width: 1024px){
.text-tile h1 {
font-size: 34px;
}
.text-tile p {
font-size: 22px;
}
}
/* mobile version (change font-size here if needed)*/
#media (max-width: 600px) {
.text-tile, .text-tile h1, .text-tile p{
width: calc(100% - 20%); /* subtract the left:20% of .text-tile in desktop-version and set full width */
}
.text-tile h1 {
font-size: 22px;
}
.text-tile p {
font-size: 18px;
}
}
<div class="discover-tile">
<div class="background">
<img
src= "https://via.placeholder.com/720"
class= "background"
alt="Village"
/>
</div>
<div>
<div class="text-tile">
<h1>Think of us as smart friend that takes you to do cool stuff</h1>
<p>The world is yours</p>
<div class="button">
<button>
Discover
</button>
</div>
</div>
</div>
</div>
There are some changes needed, but the biggest mistake you have done here is using these two css rules together,
width: 100%;
height: 657px;
If you set the with to 100%, it would fit the viewport, but the height is fixed. So, on all smaller screens, the width would get less, but the height would still remain the same. This will not conserve the aspect ratio of the image, and thus the image would be stretched vertically. Which is clear in the question images.
The fix for this, if you want a full width image is too set
width: 100%;
height: auto;
Now, the image height would auto adjust and the image won't be distorted. Once you fix that, the positioning of text is straight forward. Hope it helps!!!
I'm new at jQuery and I need help. I want to make the text move up and static box slowly disappear when you scroll website down.
Something like this: http://eliastinchon.com/
p,
body {
margin: 0;
padding: 0;
}
body {
height: 3000px;
font-family: sans-serif;
background-color: #282828;
}
#slide {
color: #ffffff;
font-weight: 600;
font-size: 80px;
position: absolute;
top: 180px;
left: 40px;
z-index: 10;
}
#static {
width: 400px;
height: 200px;
background-color: orange;
float: right;
margin-top: 150px;
margin-right: 80px;
color: #ffffff;
text-align: right;
font-size: 12px;
}
<div id="box">
<p id="slide">Some text</p>
<!-- This slideUp when scrolling down -->
<div id="static">This box is static</div>
How about this approach:
$(document).on('scroll', function() {
$("#slide").css("top", Math.max(180 - 0.2*window.scrollY, 0) + "px");
$("#static").css("opacity", Math.max(1 - 0.004*window.scrollY, 0));
})
Here is the updated Fiddle.
I would of course recommend changing the functions if you dont like the linear transitions.
so in a previous post I asked how to remove a gap so that the body takes up the entire height of the browser window. This was solved using:
margin: 0;
However, I need (or the only way I know to) style my text using margins. As soon as I apply something like
margin-top: 50px;
the body doesn't fit the 100% height of the browser. I know all of the contents of the div have to use margin 0 in order for it work, but how am I supposed to style things using a margin.
Are there any other ways I can make the body 100% of the browser height?
https://jsfiddle.net/fveb8wsu/
body{
margin:0;
padding:0;
}
Did the trick for me, the body has some default paddings. So since the content of the mid was 100vh + padding this would be greater than 100vh
Is that what you need ? DEMO
#content-mid {
background-color: #000000;
opacity: 0.9;
height: 100vh;
width: 750px;
margin-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width: 725px;
}
/* Content Text */
#sv_title {
font-family: BebasNeue;
font-size: 60px;
color: #FFFFFF;
text-align: center;
margin-top: 50px;
}
#sv_sub {
font-family: 'Quicksand', sans-serif;
font-size: 25px;
color: #FFFFFF;
text-align: center;
margin: 0;
margin-top: -20px;
}
<div id="content-mid">
<div id="basics">
<div id="sv_title">Community Name</div>
<div id="sv_sub">Your sub title here!</div>
</div>
</div>
i agree with everyone, instead of margin use padding, take a look:
#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}
https://jsfiddle.net/keinchy/5up22vom/1/
-cheers
What you have here is collapsing margins between parent and child element because parent has no margin-top and child has margin-top: 50px Demo
So now parent element has height: 100vh and margin-top: 50px and that is why body doesn't fit the 100% height of the browser.
There are couple options how you could prevent collapsing margins
Use display: inline-block Demo
Use display: flex Demo
Use float: left Demo
Or if you want to keep margin on parent but you don't want height to be more then window height you could use calc(100vh - marginofchildren) like this Demo
I have a youtube video with only the image showing http://jsfiddle.net/308dctdd/1/
and the video loads on click.There is a <span> element over both <div>s that should hide on click. With my code the first <span> element does hide but not the second one.
html
<div class="vid">
<img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
<div id="hide1">
<h3>Johnny Depp<br /><span>Acting Technique</span></h3>
</div>
</div>
<div class="vid">
<img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
<div id="hide1">
<h3>Johnny Depp<br /><span>Acting Technique</span></h3>
</div>
</div>
JS
$('img').click(function () {
var video = $('<iframe />', {
'src': this.dataset.video,
'height': this.clientHeight,
'width': this.clientWidth
});
$(this).replaceWith(video);
$('#hide1').hide();
});
css
.vid {
width: 350px;
height: 298px;
float: left;
margin: 20px 25px 70px 70px;
background-size: cover;
background-position: 0px -50px;
background-repeat: none;
position: relative;
}
.vid div {
overflow: hidden;
width: 300px;
background-color: rgba(255, 255, 255, 0.32);
position: absolute;
top: 10%;
left: 10%;
}
.vid div h3 {
color: black;
font-family:'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.8);
max-width: 450px;
padding: 0.2em 0.3em;
}
.vid div h3 span {
color: black;
text-align: center;
width: 300px;
font-family:'Source Sans Pro', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
}
Replace the JS :
$('img').click(function () {
$t = $(this).next("#hide1");
var video = $('<iframe />', {
'src': this.dataset.video,
'height': this.clientHeight,
'width': this.clientWidth
});
$(this).replaceWith(video);
$t.hide();
});
Here is JSFiddle
How about this?
$('#hide1').click(function() {
$(this).hide();
});
I have a div container which has 3 sub divs as columns.
There is a background image into the container and i would like when i mouseover on each sub div ,the background of this div to change with a specific image.I wish on mouse out the image to be removed and be in the previous status.
i did this with css using hover, but as i said before it doesn't work in IE9(as custom view within intranet ).The error in console says SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited. but i do not use :visited or :link.
Im new in javascript and i would really appreciate your assistance.
Thank you in advance.
My code is :
#container {
width:500px;
height:350px;
border: 1px solid #092D53;
margin-left:1cm;
margin-top:1cm;
border-radius:5px;
background-image: url('image.png');
}
#column1 {
position: relative;
float: left;
width: 32%;
height: 100%;
border-right: 1px solid #092D53;
}
#column2 {
position: relative;
float: left;
width: 34%;
height: 100%;
border-right: 1px solid #092D53;
}
#column3 {
position: relative;
float:left;
width:32%;
height:100%;
}
#button1 {
align: middle;
margin-bottom: -45px;
display: table-cell;
position: absolute;
width: 95%;
height: 40px;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: #092D53;
font-family: Verdana;
font-size: 14px;
}
#button2 {
position: absolute;
margin-left: 3px;
margin-bottom: -45px;
width:95%;
align:middle;
text-decoration: none;
height: 40px;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: #092D53;
font-family: Verdana;
font-size: 14px;
}
#button3 {
position: absolute;
margin-left: 5px;
margin-bottom: -45px;
width: 98%;
height:40px;
align:middle;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #092D53;
font-family: Verdana;
font-size: 14px;
}
#column1:hover {
background-image: url('one.png');
opacity:0.2;
}
#column2:hover {
background-image: url('two.png');
opacity:0.2;
}
#column3:hover {
background-image: url('three.png');
opacity:0.2;
}
Workflow 1
Workflow 2
Workflow 3
jQuery example:
$('#column1').hover(function() {
$(this).css('background-image', 'url("one.png")');
$(this).css('opacity', '0.2');
}, mouseOutHandler);
$('#column2').hover(function() {
$(this).css('background-image', 'url("two.png")');
$(this).css('opacity', '0.2');
}, mouseOutHandler);
$('#column3').hover(function() {
$(this).css('background-image', 'url("three.png")');
$(this).css('opacity', '0.2');
}, mouseOutHandler);
function mouseOutHandler() {
$(this).css('background-image', 'inherit');
$(this).css('opacity', 'inherit');
}
jQuery API Documentation of the .hover() function:
http://api.jquery.com/hover/
First function of .hover() is the mouse enter event function, same as :hover would do in CSS. Second function is the mouse leave event function, which puts the applied CSS back to normal.
Try this:
$("#DivID").hover(function(){
$("#DivID").css("color","yellow");
});
Hope it helps.....