Why is the Android browser NOT hiding URL bar after scrolling? - javascript

The internet says window.scroll(0,100) will hide the URL bar, if one is allowed to scroll down. However, NO address bar is hidden via code on Android chrome. Any ideas?
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class=one>hello<div>
<style>
body{
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
.one{
display: block;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background: black;
color: white;
}
</style>
<script>
window.onload = ()=>{
window.scrollTo(0, 100)
}
</script>

Related

How to get image to be placed on the left side of text input?

I have been trying to fit an image inside of the text input to the left, i have tried using float, i have tried making it a div and wrapping it, i have tried making the background image to the image, and it either breaks it or doesn't make an difference. Not sure what to do.
body {
background-color: #141c2f;
}
.search {
background-color: #1d2c4c;
border: none;
border-radius: 10px;
text-align: center;
width: 500px;
height: 50px;
text-decoration: none;
}
.infoBox {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/css/app.css">
<title>Github User Search App</title>
</head>
<body>
<div class="infoBox">
<input class="search" type="text" placeholder="Search..">
</div>
</body>
</html>
Assuming you want to put the image above input to the left (if you just want them side by side, use display: flex in class .infoBox). So You can use :before to get that, add this code to your:
.infoBox {
position: relative;
}
.infoBox:before {
content: '';
background: url('your image url') center center no-repeat;
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 10px 0 0 10px;
}
.search {
padding-left: 65px;
}
All attributes can be modify to your liking.

Showing the cropped image over the original using css

the output that I want
the one that I have implemented so far
The grey colour background is the background colour of the lined div which is in absolute position to show the crop selection. I want the area inside the line without any colour so that part of the image would be visible and rest should be of grey background as it is.
.bounded-image {
width: fit-content;
position: relative;
}
img {
width: 292px;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
box-sizing: border-box;
width: 140.816px;
height: 260.12px;
top: 71.2428px;
left: 76.4561px;
background: transparent;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: black;
opacity: 0.4
}
<div className="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div className="bg-image"></div>
<div className="bordered-image" ></div>
</div>
I have prepared a possible solution to your problem. However, the question is whether the inner <div class="bordered-image"> is a fixed size? Because otherwise you need to adjust the value of the background-size: calc(170%); property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bounded-image {
width: fit-content;
position: relative;
width: 500px;
height: 700px;
}
img {
width: 100%;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
width: 300px;
height: 450px;
top: 130px;
left: 100px;
background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a);
background-position: center;
background-size: calc(170%);
background-repeat: no-repeat;
z-index: 5;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div class="bordered-image"></div>
<div class="bg-image"></div>
</div>
</body>
</html>

container auto hide when clicked outside the container

I'm trying to make my own custom UI for a video player. It will include a options toggle button which will open a options container. The options container should not close when the user clicks anything within the container and the options toggle should toggle correctly. How can I make the options container hide when the user clicks else where on the screen? Thanks
I will also be inserting a number of video players in a single document.
var oc = document.querySelector(".options_container"),
ot = document.querySelector(".options_toggle");
oc.style.visibility = "hidden";
ot.onclick = function() {
if (oc.style.visibility == "hidden") oc.style.visibility = "visible";
else oc.style.visibility = "hidden";
};
body {
margin: 0;
padding: 0;
}
.container {
width: 95%;
height: 250px;
border: 1px solid black;
display: block;
margin: 15px;
position: relative;
}
.container .options_container {
width: 200px;
height: 150px;
background-color: skyblue;
position: absolute;
bottom: 50px;
right: 5px;
}
.container .bar {
width: 100%;
height: 45px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
.container .bar img {
width: 30px;
height: 30px;
float: right;
margin: 7.5px 20px;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<div class="options_container"></div>
<div class="bar">
<img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png">
</div>
</div>
</body>
</html>
You may try like this:
$(document).ready(function(){
$('.options_toggle').click(function(event){
event.stopPropagation();
$(".options_container").slideToggle("fast");
});
$(".options_container").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".options_container").hide();
});
body {
margin: 0;
padding: 0;
}
.container {
width: 95%;
height: 250px;
border: 1px solid black;
display: block;
margin: 15px;
position: relative;
}
.container .options_container {
width: 200px;
height: 150px;
background-color: skyblue;
position: absolute;
bottom: 50px;
right: 5px;
display:none;
}
.container .bar {
width: 100%;
height: 45px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
.container .bar img {
width: 30px;
height: 30px;
float: right;
margin: 7.5px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<div class="options_container"></div>
<div class="bar">
<img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png">
</div>
</div>
</body>
</html>
You can register a function to listen on click event. If the user clicks anywhere on the screen which is not container then it will close all the containers. You can further modify the function to implement more complex validation.
function closeContainers() {
// Get all the containers
let containers = document.getElementsByClassName("container");
// If the user hasn't clicked on the current container then remove the visibility
containers.forEach(function (container) {
if (container.classList.contains('visible')) {
container.classList.remove('visible');
}
})
}
// Close the container if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.container')) {
closeContainers();
}
}

Split screen more than twice button

I want a button that splits the screen when clicked. The button is on a html page called PF1.1.html and when the button is click i want it to spilt the screen but the new screen created to be a page named PF1.html and so on. No matter how many times u click the button it keeps creating split screen pages with the PF1.html.
This is the split screen test: https://jsfiddle.net/v1p5h9g7/1/
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: white;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
<div class="split left">
<div class="centered">
<h2>Don't know how to make it open PF1.HTML and how to resize it after</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<p>Test</p>
</div>
</div>
Here it is, i think you want something like this - here is the code mentioned and also you can check out this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Split screen on click</title>
<!--added text to remove the answer-->
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
width: 100%;
/* height: auto; */
height: auto;
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
#child{
width: 200px;
height: 200px;
border: 2px solid #000000;
border-radius: 3px;
}
#clicker{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
<button id='clicker' onclick="spliter()">Click me to create a new element</button>
<script>
function spliter(){
var sec = document.createElement("DIV");
sec.setAttribute("id", "child");
document.getElementById("container").appendChild(sec);
}
</script>
</body>
</html>

Jquery-ui resizable on a scrollable div

Im trying to have resizable/draggable objects contained inside a div with overflow : auto. (so that the objects stay on page like div and scroll up and down with the div)
To do that, I must set the position of the item to relative; unfortunately that will affect things when I resize because the resizing affects all previous objects.
HERE IS A SAMPLE I MADE FOR TESTING:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery-ui.css">
<style>
.dropZone {
width: 750px;
height: 750px;
padding: 0;
overflow:hidden;
margin: 0;
background: #aaa;
}
.forCanvas {
height: 500px;
width: 500px;
overflow: hidden;
overflow: auto;
padding: 20px;
background: white;
border: 1px solid #d9d9d9;
border-radius: 5px;
}
.block {
width: 80px;
height: 60px;
background: #d9d9d9;
box-sizing:border-box;
position: relative;
align-content: center;
overflow: hidden;
}
.block h3 {
text-align: center;
margin: 0;
font-size: 15px;
background: #d9d9d9;
border: none;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="forCanvas" >
<div class='block'><h3>Object1</h3></div>
<div class='block'><h3>Object2</h3></div>
<div class='block'><h3>Object3</h3></div>
<div class="dropZone ">
</div>
</div>
<script>
$(function(){
$(".block")
.draggable()
.resizable();
});
</script>
</body>
</html>
You also need to have the jquery-ui.css to see the resizing handles:
This is the link to download the jquery zip that has the jquery.css file
I know that setting the .block position to absolute will fix the resizing problem, but they won't stay on div when I scroll.

Categories

Resources