I am a bit new to the whole part of Javascript, CSS and HTML.
I'm trying to attach a div to the bottom and center of a parent div.
There is a background image in the parent div which is responsive. My fa fa-arrow is attached to the bottom, and responsive in the vertical direction, not horizontal and neither centered.
Could any kind soul please explain how to solve this or tell me if I started off wrong!
Thanks in advance.
Here is my code:
HTML:
<div class="content-1">
<div id="to-first">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS:
.content-1 {
position: relative;
}
#to-first {
position: absolute;
margin-right: 50%;
bottom: 10;
color: #000;
font-size: 50px;
text-align: center;
cursor: pointer;
display: none;
}
Javascript:
var main = function() {
$(document).ready(function() {
$('#to-first').show();
});
$('#to-first').click(function() {
$('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});
};
$(document).ready(main);
And here is a jsfiddle:
https://jsfiddle.net/804jeg82/330/
Position your to-first in absolute, at the bottom of the content, and give it a width of 100%;
Give a height to your content, else it is empty with an element in absolute inside.
.content-1 {
position: relative;
height: 500px;
border: 1px solid red;
}
#to-first {
position: absolute;
width: 100%;
bottom: 10px;
color: #000;
font-size: 50px;
text-align: center;
cursor: pointer;
border: 1px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-1">
<div id="to-first">
<i class="fa fa-angle-down"></i>
</div>
</div>
Related
I have an HTML page with 2 containers.
One of the containers, contains a transparent button with a question mark icon.
When ever I'm resizing the page, I would like the icon to be resized accordingly.
this is my div declaration in the HTML file:
<div class="container button">
<div class="col-xs-10 col-sm-70">
<i class="fa fa-question-circle fa-4x" aria-hidden="true" title="How does it work"></i>
</div>
</div>
this is how I set the container in the css:
section#analyze .container.button {
border: 2px solid black; /*delete'*/
position: relative;
margin-right: 10%;
width: 5%;
display: none;
height: 120%;
}
and this is how I set the button in the css:
section#analyze .container.button .btn-primary {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-size: 100%;
width: 100%;
height: 100%;
left: 20%;
margin-top: 20%;
position: initial;
}
What do I need to change in order for the ICON to be smaller or bigger when ever Im resizing the page itself?
You could use the screen with and height properties in css. vw and vh: https://css-tricks.com/viewport-sized-typography/
I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>
The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.
You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>
For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>
not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle
It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>
How to bring square shape using div and and align text right using css?
I want to display like chart legend
squareshapeimage(Using div) Legend Text
I have tried below way but font is coming in below
<div> <div vertical-align: middle; margin-bottom: 0.75em; style="width:5%; height:5%; margin-top:4%; margin-left:3%; padding-bottom:5%;background-color:red"> </div> <span>Present</span> </div>
are you looking for something like this ?
.a {
position: relative;
width: 200px;
height: 200px;
border: 1px solid rgb(0, 0, 0);
}
.a span {
position: absolute;
right: 10px;
top: -10px;
display: block;
background-color: #FFF;
padding: 0 5px;
}
<div class="a">
<span>Present:</span>
</div>
I have a situation where I am loading content into a overlay window and sometimes it will have a scroll applied with overflow-y: auto; and if users scroll and then click the button again I would like the scroll to go back to the top, not where they last left it.
This works fine without using Bootstrap, but once you start using bootstrap methods to show/hide a overlay window it doesn't work.
Specifically this is what doesn't work:
$('#preview .main').scrollTop(0);
However, for whatever reason this does work:
$('#preview .main').scrollTop(1);
I have read this question but I am not using bootstrap modals, so it doesn't really apply to me; I also read this question but the accepted answer didn't work for me.
Sample code:
HTML
<section class="row collapse" id="preview">
<div class="wrapper">
<div class="side col-xs-2">
</div>
<div class="main col-xs-4">
<div class="content_wrapper">
<div class="loader">
loading...
</div>
<div class="content post">
</div>
</div>
</div>
</div>
</section>
<input type="button" id="btn" value="Click Me!" data-toggle="collapse" data-target="#preview">
<input type="button" id="hide" value="Hide Content" data-toggle="collapse" data-target="#preview">
CSS
#preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
z-index: 2000;
background-color: #fff;
}
#preview .wrapper {
display: table;
width: 100%;
padding: 0 !important;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
}
#preview .side {
display: table-cell;
text-align: center;
height: 200px;
padding: 10px 30px 15px 30px;
vertical-align: top;
background-color: #FAFAFA;
}
#preview .main {
display: table-cell;
height: 200px;
max-height: 200px;
padding: 10px 13px 16px 13px;
vertical-align: top;
overflow-y: auto;
}
#preview .main .content_wrapper {
padding-bottom: 32px;
line-height: 1.5;
}
#preview .main .content_wrapper .loader {
text-align: center;
}
#preview .main .content_wrapper .loader p {
margin-top: 15px;
font-weight: bold;
}
#preview .main .content_wrapper .content {
display: none;
}
#btn {
margin-top: 210px;
}
JS
$('#btn').click(function() {
var content_el = $('#preview .main .content_wrapper .content');
var loader_el = $('#preview .loader');
content_el.hide();
loader_el.show();
// Set the content
content_el.html('some content here...');
loader_el.hide();
// Show the content area
content_el.show();
// Reset the scroll position of preview window
$('#preview .main').scrollTop(0);
});
CodePen: http://codepen.io/anon/pen/rVzppz
Having to set it to 1 and not 0 isn't a big deal, so I guess just wondering why it works on 1 and not 0?
I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});
use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position
The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/
Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"