Arrows besides bootstrap container - javascript

I have a bootstrap container. As this is common for it, it doesn't take the hole page width, but is centered with a lot of margin on the left and right side.
What I'm trying to achieve is, that on the left and the right side (so besides the div with the container class, there are 2 centered arrows, left side pointing to left and right side pointing to the right.
You wonder, why I want to do that? I try to make something like a Carousel, but with pages, so when I click on the right arrow, there comes the content of the next page, clicking on the left arrow then, I get back to the other page.. I hope you know what I mean...
What I have is this:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Upload</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/dropzone.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
</body>
</html>

You could do it globally as Bootstrap does with the arrow in the carousel :
Having parents containers in each side of the page, fixed to the top AND with the screen's height as fixed height (easy to do with JQuery).
<body>
<div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
<div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
<div class="container"></div>
</body>
You could have a another parent for all of them to have a different structure or anything. (in this case change position fixed to position absolute)
And in css :
.parentofarrow {
position: fixed; // or absolute to a specific parent (relative)
top: 0px;
// height fixed with screensheight using Jquery
width: // as you wish;
text-align: center; // or margin auto on arrows
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { //customize and positionning as you wish }
And in these parents, having a vertical and horizontal align arrow with a specific action linked to change page content as you wish.
Should be enough!
Note that this solution is not the easiest but it offers a certain modularity (change height, parent, position...).

The simplest way without taking your elements position in consideration would be using negative margins. (fiddle here)
html:
<div id="arrow">←</div>
css:
#arrow {
margin-left: -100px;
}
Another viable way is to use position: absolute like this:
#container {
position: relative;
}
#left-arrow {
position: absolute;
top: 40%;
bottom: 40%;
height: 10%;
line-height: 100%;
left: -5%;
}

The easiest solution is too use the grid system.
<div class="container fill">
<div class="row">
<div class="col-xs-1">Left</div>
<div class="col-xs-10 main-stage">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
<div class="col-xs-1">Right</div>
</div>
</div>
</body>

Related

Centering Scroll to Element to via # ? (without modifying the DOM / using refs)

I would like to scroll to a certain element via #:
Element
<div name="element" />
It accomplishes this quite well, but it goes to the very top of the element. However, I'd like the element scrolled to to be centered for the user.
I am hesitant to use Javascript's scrollTo or other, external libraries, since I will need to use this functionality a lot (very, very much). I am using React and don't want to overuse refs and slow down my app. So I'd like to accomplish this with HTML only, preferably. JS is fine too, of course, but most solutions I came across modify the DOM and/or use refs.
There is probably a better/cleaner way to do it, but with only html/css, the only thing that I think about is to use a hidden span under your div element, like so:
html {
scroll-behavior: smooth;
}
.space {
width: 100%;
height: 400px;
background-color: blue;
}
#element {
position: relative;
top: -50vh;
visibility: hidden;
}
<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>Document</title>
</head>
<body>
Element
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<div>
<p>
Your element
</p>
<span id="element">anchor </span>
</div>
<div class="space"></div>
</body>
</html>
AFAIK, no way to achieve your desirable effect without a bit of js. As for "centered", then some calculation is needed.
<html>
<head>
<title>Document</title>
<style>
.placeholder {
height: 1000px;
}
</style>
<script>
function scrollToDest(event) {
var id = event.target.getAttribute("href");
if (id.charAt(0) !== "#") return; // not a valid <a> element
var dest = document.getElementById(id.substr(1));
if (!dest) return; // no destination found;
event.preventDefault();
// calculate the top and bottom margin remained when dest is centered
var margin = window.innerHeight - dest.clientHeight;
// what if the dest's height is larger than viewport?
if (margin < 0) margin = 0;
window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
}
</script>
</head>
<body>
<div class="placeholder">
Let's go!
</div>
<div id="dest">ARRIVAL</div>
<div class="placeholder"></div>
</body>
</html>

How do i reposition my previous slick arrow to become operable?

I am currently creating my webpage using HTML/CSS with the addition of Javascript slick slider. I am currently using the regular slider code for my gallery tab, however, my previous arrow button (.slick-prev:before) is submerged behind my div class "slider_1", with my .slick-next:before arrow working how it should be comfortably sitting outside of the div.
I have added margin and padding to .slick-prev:before however it only pushes the arrow further out of sight within the div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
I would like to be able to have my previous arrow outside of the slider div to become operable. as currently the arrow simply sits behind my images inside the slider not serving any purpose.
Understanding:
Having read your question, I feel your experiencing layer problems, in that your next and previous buttons are hidden behind other web elements.
Solution:
We can write some CSS that tells it to alter the layer position to a higher layering number, to do this we use CSS using the Z-Index property and assign a high number such as 99 to ensure it sits above all other elements on the webpage.
To use z-index we must specify a position property with the value of fixed, absolute or relative.
In my example, I have used the relative value, so that it doesn't tamper with where the arrows were originally positioned.
Code to try:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
However, if you find that the code only affects 1 of your sliders, then you might want to add an ID to the sliders HTML and write your CSS as follows:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
Then alter the affected slider's HTML to have the ID in it also
<div class="slider1" id="slider1">

Slide a hidden bootstrap card from right to left on button click

I have a bootstrap4 `card' which is hidden and I want to display it with slide right to left slow animation on button click. Below is the markup
<div class="card" id="setup" style="display:none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
Below is click event
$("#Finalize").click(function () {
$('#setup).show();
$("#setup").animate({ left: '0' }, 'slow');
});
With the above jquery code, I am just able to display the card, its animation effect is not working? What's wrong and how to make it work?
This worked for me:
$(function(){
$("#Finalize").click(function () {
$(".cardcontainer").show();
var left = $('#card').offset().left;
$("#card").css({left:left}).animate({"left":"0px"}, "slow");
});
});
.cardcontainer{
position:relative;
height: 220px;
display:none
}
.card{
position:absolute !important;
width:200px;
right:0px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="cardcontainer">
<div class="card" id="card">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
</div>
<div>
<a id="Finalize" href="#" class="btn btn-primary">Go somewhere</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Ok, here is the html:
<div class="card animatable" id="setup" style="display: none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
here is the CSS (we need to define a width for the card. I just put 500px, you can make it however big you want it obviously)
#setup {
width: 500px;
}
And here is the javascript.
$("#Finalize").click(function () {
if ($('#setup').hasClass('animatable')) {
$('#setup').show();
$('#setup').css('margin-left', $(window).width());
$("#setup").animate({ right: "+=" + $(window).width()}, 'slow');
$('#setup').removeClass('animatable');
}
});
Note I know you said you didn't want a margin. According to the HTML code you posted, the card will appear on the left side of the screen with the DOM loads. So if you run the animation, it will fly off the screen because it's going to move to the left when it's already placed at the left. So we need to move it to the right, hence my margin-left. Now if you absolutely cannot have a margin, you can give the card an absolute position, and just left it over to the right side of the screen. Also, we need to give it a width so that the card won't crumple up when we move it to the right side of the screen.
I hope this helps!

After page load bootstrap always changes position of elements with absolute position on phones

Concrete problem is that I want have a page on server with structure of elements with nice positioning, but I couldn´t get it into desired shape, but only with setting them absolute position counted by screen resolution on mobile phones with jquery. After page load bootstrap will move my elements with absolute path more up. All those elements are at the bottom of page. I know that it is bootstrap, because when I will not add bootstrap server links, everything is fine as far as position of my elements is concerned. But naturally I need bootstrap there.
I tried to figure it out in many ways, but I ended with tryings to wait with jquery till the page load and after that try to set position. But no, after all moving in function that is called after page load, bootstrap starts doing it´s job later as last and don´t know how and why, but it trim my elements and push all my circles all up with bad height positions.
$(document).ready(function () {
// script for setting bubble circles in right place on whatever screen
// this is updated question for correct answer below, id=allCircles is id of global div for circles
$width = $('#allCircles').width();
$circleWidth = parseInt($('.circle').css('width'),10);
$circlesDistance = 60;
$leftCircles = ($width)/2 -(($circlesDistance/2)+$circleWidth);
$rightCircles = ($width)/2 + ($circlesDistance/2);
$('.left-circle').css('left', $leftCircles+'px' );
$('.right-circle').css('left', $rightCircles +'px');
$actPosition = $("#leftDownCircle").position();
$heightMargin= $actPosition.top + $circleWidth/2;
$('#leftDownCircle').css('top', $heightMargin+'px' );
$('#rightDownCircle').css('top', $heightMargin+'px' );
$leftMargin = ($width)/2 - ($circleWidth/2);
$heightMargin = ($heightMargin) -($circleWidth/2)-($circleWidth/4);
$('#middleCircle').css('position','absolute');
$('#middleCircle').css('left', $leftMargin +'px' );
$('#middleCircle').css('top', $heightMargin +'px' );
});
* {margin:0;}
.circle {
width: 100px;
height: 100px;
background: lightgrey;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-circle {
position: absolute; left: 15%;
}
.right-circle {
position: absolute; left: 60%;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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="left-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div id="middleCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle">
<div class="circle" >
<h1>9</h1>
<p>Level</p>
</div>
</div>
</body>
</html>
When I will add in this code to html header this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Then on phone it will result to this:
Could someone help me to answer how this can be done programmatically correctly? (maybe why this not work or what is better practice to make the desired result as in snippet, thanks in advance for any help and your time!)
Now concrete site whith its code in it. Web emulator looks:
http://mobiletest.me/htc_one_emulator/?u=https://stackoverflowtest.000webhostapp.com/
Concrete site to test with your mobile device:
https://stackoverflowtest.000webhostapp.com/
Notice left-down waiting for bootstrap and after reload:
The basic problem you are having is that by making the elements absolute, they are positioned in relation to the nearest non-static parent element. I don't see any non-static parent elements on your page, so in your case they will be positioned relative to the body. This causes a problem as you have lots of other elements that can be different sizes (e.g. because of text wrapping over multiple lines on mobile screen that would only take one line on desktop size) before you get to the circles so determining the right top value in relation to body is not possible.
Note, two of your circles don't have a top value set, so they are placed in their default static places, which is why you are getting the overlaps.
To fix it, you need to place a non-static element around your absolute elements (e.g. by giving it a position:relative style). Position top and left values the circles in relation to that element and give the element a height that will give the circles enough space.
e.g.
<div style="min-height: 550px;position:relative;">
<div class="left-circle" style="left: 30px;">
<div class="circle">
<h2>345</h2>
<p>Bodov</p>
</div>
</div>
<div class="right-circle" style="left: 190px;">
<div class="circle">
<h2>11</h2>
<p>Best of</p>
</div>
</div>
<div id="middleCircle" style="position: absolute;
left: 110px;
top: 100px;">
<div class="circle">
<h1>9</h1>
<p>Uroven</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle" style="left: 30px;
top: 198px;">
<div class="circle">
<h2>1622</h2>
<p>Zaradenych knih</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle" style="left: 190px;
top: 198px;">
<div class="circle">
<h2>124</h2>
<p>Citatelov</p>
</div>
</div>
</div>
The key things to note here are:
I have put all your circles inside a div with a position:relative and a height:550px;
I have changed the top values of the circles to position themselves in relation to this new parent div.

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}

Categories

Resources