Jquery-ui resizable on a scrollable div - javascript

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.

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.

How to align text at center over image inside button

I have divided an html page into four sections. I have created four buttons inside it which contain images. I also want text to be displayed at the center of each button. But due to the images the texts are moving below the button. Please tell me how to achieve this.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
}
button img {
width: 100%;
height: 100%;
}
button:hover {
opacity: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nature</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">Himalaya</button>
<button><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<button><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<button><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<script src="script.js"></script>
</body>
</html>
Use background-image: url('https://someurl.com');
instead of placing the image inside the button tag.
See: How to add background image for input type="button"?
You can use the CSS property background-image to set the background of the image for a css property, and you can use your text-align to center the text:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
}
button:hover {
opacity: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nature</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button style="background-image: url('https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')">Himalaya</button>
<button style="background-image: url('https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')"></button>
<button style="background-image: url('https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>
<button style="background-image: url('https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>
<script src="script.js"></script>
</body>
2 possibiities:
1.) Use an element with position: absolute for the text
or
2.) Use the images as background-images
As mentioned above, you could use background-image instead of img elements. But on hover, opacity:0.4 will apply to both image and text. If you want to keep the text at opacity:1 on hover, wrap up the text in a span and position it absolute center it, and apply opacity on hover to img only:
HTML:
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>
CSS:
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
position: relative;
}
button img {
width: 100%;
height: 100%;
}
button span {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
button:hover img {
opacity: 0.4;
}
Example: https://jsfiddle.net/1q879w3p/

How to create a div that scrolls to the bottom and then stays fixed

I am making a page with two main parts, div a on the left half of the screen which will have text, and div b on the right half which will have a really tall image.
Originally, I imagined having the left side fixed so that when the user scrolls down to see the entire image, the text on the left stays visible.
However, I realized sometimes the text may overflow beyond the screen, and the fixed div would not scroll down to show it.
Below is the image of what I'm talking about:
My question is: can I make the left div scroll down until the bottom of the div is revealed, and then stays fixed as the user continues to scroll?
If that didn't make sense, an example is the right bar of the Facebook main page at
https://www.facebook.com
Here is the code I have so far: https://pastebin.com/ZPVEbjX9
html,
body {
padding: 0;
margin: 0;
background-color: #FFF;
color: #000;
display: flex;
font-family: Montserrat;
}
div#a {
position: fixed;
width: 40%;
height: 100%;
}
div#box {
position: absolute;
width: 70%;
height: 100%;
margin: auto 0;
background-color: #FFFAAA;
}
div#b {
position: relative;
width: 60%;
height: 100%;
margin-left: 40%;
background-color: #000;
}
div#backToTop {
position: fixed;
width: auto;
height: 30px;
right: 20px;
bottom: 20px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
a#backToTop {
text-decoration: none;
font-size: 15px;
color: #FFF;
padding: 10px;
vertical-align: middle;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="stylesBig.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<title>G</title>
</head>
<body>
<a name="top"></a>
<div id="a">
<div id="box">
<p>a</p>
</div>
</div>
<div id="b">
<img src="image.png" style="width: 100%;" />
<div id="backToTop"><a id="backToTop" href="#top">back to top</a></div>
</div>
</body>
</html>
What am I doing wrong and how can I fix it?

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

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>

Why won't my nav button or button text move to the center?

So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.

Categories

Resources