I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/
Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
Related
I want to create a script in which i want to increase the margin-top of the image on scrolling down the page and vice-versa, but i cant understand where to put the event listener.
So,That when scrolling down the page, the image moves with the scroll and stops before the green div.
document.getElementById("body").addEventListener("scroll", myFunction);
function myFunction()
{
console.log('scrolled');
}
#body{
width:100%;
height:3000px;
}
#yellowdiv
{
width:100%;
height:1000px;
background-color: yellow;
}
#image
{
width:50%;
height:500px;
border: 10px solid black;
}
#bluediv
{
width:100%;
height:1000px;
background-color: blue;
}
#pinkdiv
{
width:100%;
height:1000px;
background-color: pink;
}
#greendiv
{
width:100%;
height:1000px;
background-color: green;
}
<div id="body">
<div id="yellowdiv">
<img id="image"src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
P.S - new to JS
Thanks in Advance.
You are trying to attach the event handler to the #body div but you are not scrolling the div, you are scrolling the window.
If you want to attach a scroll-event handler to the div, it must be scrollable. Below you can find an example with a wrapper div #scrollable and the event handler is attached to it.
document.getElementById("scrollable").addEventListener("scroll", myFunction);
function myFunction() {
console.log('scrolled');
}
#scrollable {
height: 100px;
overflow-y: auto;
}
#body {
width: 100%;
height: 3000px;
}
#yellowdiv {
width: 100%;
height: 1000px;
background-color: yellow;
}
#image {
width: 50%;
height: 500px;
border: 10px solid black;
}
#bluediv {
width: 100%;
height: 1000px;
background-color: blue;
}
#pinkdiv {
width: 100%;
height: 1000px;
background-color: pink;
}
#greendiv {
width: 100%;
height: 1000px;
background-color: green;
}
<div id="scrollable">
<div id="body">
<div id="yellowdiv">
<img id="image" src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
</div>
I have a simple flexbox layout like this...
html, body {
margin:0;
padding:0;
}
.container {
display:flex;
flex-direction:row;
}
.section1 {
width:50%;
}
.section2 {
width:50%;
}
.img_16x9_holder {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
img {
max-width:100%;
}
<div class="container">
<div class="section1">
<div class="img_16x9_holder">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
<div class="section2">
<div class="img_matchheight_holder">
<img src="http://lorempixel.com/g/300/650/" alt="300x650image">
</div>
</div>
</div>
I am trying to set the left image to a 16x9 ratio and then the right hand one should crop and fill to match the height of the left.
This is what I am trying to achieve..
Can I do this using CSS alone, or am I best off looking at a javascript height matching solution?
You can have more info here
Here is an example:
html, body {
margin:0;
padding:0;
}
.container {
display:flex;
}
.section img{
height:100%;
}
#sec-1 img{
/*resize image with % or fixed width depending on the image size*/
width:50%;
}
#sec-2 img{
/*resize image with % or fixed width depending on the image size*/
width:50%;
}
<div class="container">
<div id="sec-1" class="section">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
<div id="sec-2" class="section">
<img src="http://lorempixel.com/g/300/650/" alt="300x650image">
</div>
</div>
You can consider background for the second image:
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
}
.section1 {
width: 50%;
}
.section2 {
width: 50%;
}
.img_16x9_holder {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.img_matchheight_holder {
background-size: cover;
background-position: center;
flex-grow:1;
margin-left:5px;
}
img {
max-width: 100%;
}
<div class="container">
<div class="section1">
<div class="img_16x9_holder">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
</div>
<div class="img_matchheight_holder" style="background-image:url(http://lorempixel.com/g/300/650/)">
</div>
</div>
I have some weird problem with my webpage.
I made a simple website, where there is a background image, covering the webpage, header on it with logo and menu icon... the menu icon and the menu worked, until now... I made two divs, with height:100vh; and they are 100vh from the top of the webpage... it looks great, but the menu is not working.. how, why?
for better understanding.. here is link to the site: http://david.addagio.cz/own/
ok.. so there is the code:
css:
html {
background: url(bistro2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {margin: 0;
padding: 0;
}
a{
text-decoration:none;
z-index:10;
}
#header {
background-color: none;
height: 110px;
width: 100%;
top:0px;
position: fixed;
}
h1 {
z-index:10;
color:white;
font-size: 35px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
padding-bottom:10px;
}
h2 {
color:white;
font-size: 22px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
line-height:50px;
z-index:10;
}
#head{
border-bottom:2px solid white;
margin-bottom:50px;
}
#menu{
margin-bottom:10px;
}
#social_icons{
height:570px;
background-color: rgba(0,0,0,0.1);
}
#main{
float: left;
}
#main img {
width:60px;
height:27px;
padding:45px;
}
#share{
float: right;
}
#share img {
padding:45px;
width:30px;
height:16px;
padding-top:50px;
}
.menu {
background-color: rgba(0,0,0,0.7);
top:0;
right: -400px;
height: 100%;
position: fixed;
width: 400px;
z-index:-10;
}
#third {
background-color:#E8E8E8 ;
}
#second, #third {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
}
#second {
background-color:#F0F0F0 ;
margin-top:100vh;
}
html:
<!DOCTYPE html>
<html>
<head>
<title>UX design</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head
<body>
<div class="menu">
<div id="wrapper">
<div id="head">
<h1>Menu</h1>
</div>
<div id="menu">
<h2>O mě</h2>
<h2>Proč si mě vybrat</h2>
<h2>Portfolio</h2>
<h2>Ukázky prací</h2>
<h2>Objednávkový formulář</h2>
</div>
<div id="head">
<h1>Sociální sítě</h1>
</div>
<div id="social_icons">
</div>
</div>
</div>
<div id="header">
<div id="main">
<img src="my_logo.png">
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
The menu script is working properly. You have to set a top property for the .menu class:
.menu{
...
top: 0;
...
}
One of those added, new divs is now covering up the menu but you have changed the markup as I write this and can't help with the answer. However, this is a typical problem when floated or absolutely positioned elements rise up into a position that covers up another element.
EDIT: In fact, that's the case. position:fixed for the header is the same as being absolutely positioned. Then your menu and logo are both floated. These all take those items out of the normal flow which is allowing your new divs to cover them up.
**HTML**
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
**CSS**
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
}
.bimage:hover{
background-size:120%;
}
.fimage {
width: 200px;
margin: auto;
}
Here I can zoom in image when mouse over on that image. But I need centerally zoom in image and animation effect with out increasing div width and height.
JSFIDDLE
You can add background-position:center along with background-size
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
transition:1s all;
background-position:center;
}
.bimage:hover{
background-size:200%;
}
.fimage {
width: 200px;
margin: auto;
}
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?
Any help would be greatly appreciated.
Try this out:
<style type="text/css">
.scrollable {
width: 200px;
height: 200px;
background: #333;
overflow: scroll;
}
.fixed {
position: absolute;
top: 180px;
width: 200px;
height: 20px;
background: #fa2;
}
</style>
<div class="scrollable">
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
<div class="fixed">and I'm fixed</div>
</div>
I would recommend absolutely positioning the div over the scrollable div. It wont be in the scrollable div, because it doesn't need to be.
Fixed div in scrollable div
#container {
position:absolute;
top:150px;
left:150px;
width:600px;
height:500px;
overflow:hidden;
border:3px dashed #ffff00;
padding:0px;
}
#this_scroll {
position:absolute;
top:0px;
right:0px;
width:99%;
height:99%;
overflow:scroll;
border:2px solid #000;
margin:1px;
background:#B0BDCE;
}
#fix_close {
position:absolute;
top:2px;
right:21px;
width:90px;
height:30px;
overflow:hidden;
border:2px solid #660099;
z-index:10;
background:#8C8C8C;
}
<div id="container">
<div id="this_scroll">
<p>some yxyxyx</p><p>some yxyxyx</p>
</div>
<div id="fix_close">
close
</div>
</div>