Remove height in DOM while using jQueryUI resizable - javascript

I'm using flex to make a responsive layout for my web-app.
I'm using jQuery UI on my navigator panel to be able to resize it. Unfortunately, when the resize event is triggered, jQuery UI inserts in the DOM a hard-coded height for my element, even if I specify the handles in the resizable settings.
Here's what I get in the DOM when the resize event is triggered:
<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">
I want to get rid of all the the other styles except the width.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
.mainWrapper_1
{
display: flex;
backgound: gold;
height:100%;
}
.mainWrapper_1 .navigatorManager
{
background: tomato;
flex: 0 0 30px;
}
.mainWrapper_1 .mainWrapper_2
{
background: gray;
flex: 1;
display: flex;
flex-direction: column;
}
.topSideBar
{
height:50px;
background: yellow;
}
.mainWrapper_3
{
flex: 1;
background: cyan;
display:flex;
}
.navigator
{
flex: 0 0 auto/*100px*/;
background-color: green;
}
.mainWrapper_4
{
flex: 1;
display:flex;
flex-direction: column;
background: red;
}
.tabs
{
height:50px;
background: pink;
}
.mainWrapper_5
{
flex: 1;
background: magenta;
}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<body>
<div class="mainWrapper_1">
<div class="navigatorManager">side</div>
<div class="mainWrapper_2">
<div class="topSideBar">
top side bar
</div>
<div class="mainWrapper_3">
<div class="navigator">
navigator
</div>
<div class="mainWrapper_4">
<div class="tabs">
TABS
</div>
<div class="mainWrapper_5">
MAIN
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"});
});
</script>
</html>

Try removing only the height attribute, the other attributes: top and left are responsible for positioning the .navigator and is probably essential for the resize feature to function. To remove an attribute you can try removeAttr() jQuery method or .removeAttribute() JavaScript method. The example below is using .removeAttr() and has .removeAttribute() commented out. If you prefer the latter just swap the comment marks to the other line.
BTW, your code had some weird placements like...
...the <script> tags being placed after the closing </body> tag.
<script> tags should either be situated at the <head> after <link> and <style> tags.
OR
<script> tags can be placed before the closing </body> tag.
Also there was a <link> tag outside of the <head>.
Although I believe it's ok to place a <link> tag outside of the head, it should be in the most possibly highest position possible (i.e. the head under any <meta> tags.). This is because the browser will render styles as they discovered along the way and you want the DOM finished as early as possible.
$(document).ready(function() {
$(".navigator").resizable({
handles: "e"
}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
Live Demo: PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css">
<style>
html, body { margin: 0; height: 100%; }
.extLayer { display: flex; backgound: gold; height: 100%; }
.extLayer .navMgr { background: tomato; flex: 0 0 30px; }
.extLayer .endoLayer { background: gray; flex: 1; display: flex; flex-direction: column; }
.topSideBar { height: 50px; background: yellow; }
.intLayer { flex: 1; background: cyan; display: flex; }
.navigator { flex: 0 0 auto/*100px*/; background-color: green; }
.auxLayer { flex: 1; display: flex; flex-direction: column; background: red; }
.tabs { height: 50px; background: pink; }
.coreLayer { flex: 1; background: magenta; }
</style>
</head>
<body>
<div class="extLayer">
<nav class="navMgr">side</nav>
<div class="endoLayer">
<header class="topSideBar"> top side bar </header>
<div class="intLayer">
<nav class="navigator"> navigator </nav>
<section class="auxLayer">
<div class="tabs"> TABS </div>
<main class="coreLayer">
MAIN
</main>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
</script>
</body>
</html>

Related

Positioning an image on top of text

How can I position an image on top text. Like in the image given
Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.
.row {
display: flex;
flex-direction: column;
border: solid 1px black;
width: 200px;
height: 80px;
padding: 20px;
background-color: #1e3f5a;
}
p {
margin: 0; /* removes default p margin */
text-align: center;
font-size: 30px;
color: white;
}
img {
align-self: flex-end;
margin-right: 1.5rem; /* optional */
}
<div class="row">
<img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
<p>Dex Activity</p>
</div>
You can also use the position css property for this, you can wrap these two tags with a div and use the css flex methods.
CSS Flex Example:
<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
There is more than one technique.
Here's one, borrowed from w3schools:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>

Sticky position of nav change background at scroll position

I want the <nav> to be fixed with the 3 numbers. When it reaches the green square, it should go OVER the numbers and stay fixed and turn red. And when you go back to the top, it should go back to it's original position and go back to green. How would I achieve this?
.container {
height: 1000px;
}
nav{
display: flex;
justify-content: space-around;
}
.square{
background-color: green;
width: 100px;
height: 100px;
margin: auto;
display: block;
position: sticky;
}
<div class="container">
<header>
<nav>
<p>1</p>
<p>2</p>
<p>3</p>
</nav>
</header>
<div class="square"></div>
</div>
you can use javascript to detect scroll and use window.onscroll to add sticky class to your element, also note that when using sticky CSS attribute value for display you should also adjust the location, I used calc to calculate the left value, here is a working snippet:
window.onscroll = function() {myFunction()};
var header = document.querySelector(".square");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
.container {
height: 10000px;
}
nav {
display: flex;
justify-content: space-around;
}
.square {
background-color: green;
width: 100px;
height: 100px;
margin: auto;
display: block;
}
.sticky {
position: fixed;
top: 0;
background-color:red;
left: calc((100% - 100px)/2);
}
.sticky + .content {
padding-top: 102px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<header>
<nav>
<p>1</p>
<p>2</p>
<p>3</p>
</nav>
</header>
<div class="square"></div>
</div>
</body>
</html>
For changing backgroung-color, you need to look in the animation way, but, according the positioning, you need to add something like top: 0 to set in what position you component will be sticky.

How can I link button onclick to slide to the next panel horizontally

Right now my webpage has vertical snap to scroll to each of the three 100vh sections.
In the second section, I have 3 100vw divs lined up horizontally with { overflow-x: scroll }. So I went ahead and try to link the my button that would help translate x using the following code:
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('wrapper').scrollLeft += 20;
};
I guess right now the numbers doesn't matter. I just want to see it moving, but I can't get it to move on-click. Any ideas?
codepen.io/brandoniscool/pen/vYBMZyM
300% width is set on the wrapper, so it is the wrapper parent (id special) which needs to scroll.
Setting scrollLeft on the special element works as expected. document.getElementById('special').scrollLeft += 20;
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('special').scrollLeft += 20;
};
* {
margin: 0;
font-family: 'Montserrat', sans-serif;}
body {
scroll-snap-type: y mandatory;
overflow-x: hidden;
width: 100vw;
height: 100%;
}
section {
scroll-snap-align: start;
height: 100vh;
outline: 1px dashed lightgray;
background-color: #c1d37f;
overflow-x: scroll;
}
.verticalSection {
display: flex;
justify-content: center;
flex-direction: row;
height: inherit;
border: 0.5px dashed #664e4c;
box-sizing: border-box;
/* so the border doesnt increase over the 100% width and heights */
}
#wrapper {
height: 100%;
width: 300%;
display: flex;
}
.horizontalSection {
background-color: #f9d4bb;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
border: 0.5px dashed #664e4c;
box-sizing: border-box; /* so the border doesnt increase over the 100% width and heights */
}
h1 {
color: #664e4c;
font-size: 3em;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>vertical snap and horizontal snap integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<section>
<div class="verticalSection"> <h1> BOX 1</h1> </div>
</section>
<section id="special">
<div id="wrapper">
<div class="horizontalSection"> <h1> BOX 2.1</h1> <button id="slide" type="button">Next</button></div>
<div class="horizontalSection"> <h1> BOX 2.2</h1> </div>
<div class="horizontalSection"> <h1> BOX 2.3</h1> </div>
</div>
</section>
<section>
<div class="verticalSection"> <h1> BOX 3</h1> </div>
</section>
</body>
</html>

Contain a large draggable child div inside smaller parent div

I would like to prevent a larger div from being dragged out of smaller div, like facebook does with it's profile images.
Does anyone have an idea of how I would go about to do this?
All the best, Laurens
In the following link I give an example of what i mean.
draggable_outside
PS: I'm sorry, I didn't get the JS section to work in the code snippet, it's my first post. I wrote it as a script in the HTML section.
.wrapper {
width: 400px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
background: gray;
display: block;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
display: block;
background: blue;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.child').draggable();
});
</script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
</div>
</div
You can use jQuery draggable function as follows.
Here in drag event we reset x and y if they cross the boundaries.
See the fiddle here
.wrapper {
width: 400px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
background: gray;
display: block;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
display: block;
background: blue;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.child').draggable(
{
drag: function(event, ui) {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
// console.log(xPos);
// console.log(yPos);
if(ui.position.left>250)
{
ui.position.left=250;
}
if(ui.position.left<-40)
{
ui.position.left=-40;
}
if(ui.position.top<-90)
{
ui.position.top=-90;
}
if(ui.position.top>200)
{
ui.position.top=200;
}
}
});
});
</script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
</div>
</div

Resizing Div and its content dynamically to fit the browser height

I am trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling
CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>

Categories