Move divs on a html page via CSS\JQuery - javascript

i want to recreate a simple one page web site.
This is a good example of what i want to have in the end:
http://onepagelove.com/demo/?theme=EastJava
I basically have too main divs one is the sidebar and the main container.
By default i want that only the main container is visible. By clicking on the button i want that the sideBar moves in the screen like in the example above.
<html>
<head>
<title>One Page</title>
<meta name="author" content="Me">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="clearfix">
<div class ="sideBar">
</div>
<div class ="mainCon">
<div class ="moreB">
<div class="buttonText">
Learn More
</div>
</div>
</div>
</div>
</body>
</html>
the important css so far:
.sideBar{
width: 20%;
height: 100%;
background-color: #FF0040;
float: left;
}
.mainCon{
height: 100%;
width: 80%;
float: left;
background-color: #F3F781;
}
.moreB{
color: #ffffff;
width: 100px;
height: 50px;
margin-top: 50%;
margin-right: 50%;
margin-left: 50%;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
border: 2px solid #ffffff;
}
I guess i need Jquery or something like this to solve the problem but sadly i have no idea how. Any suggestions? I think it shouldnt be that hard. But i have no idea how i can place a div outside of the screen and then move it in the screen after pressing a button.
MC

You're gonna need to change up your CSS a little so the clearfix can be moved in the first place.
.clearfix{
position: absolute;
left: -20%;
top: 0px;
height: 100%;
width: 100%;
}
As for jQuery, it's pretty simple to use.
function toggleSidebar(){
$('.in').animate({left: '0%'}, function(){
$(this).addClass('out').removeClass('in');
});
$('.out').animate({left: '-20%'}, function(){
$(this).addClass('in').removeClass('out');
});
}
$('.moreB').on('click', toggleSidebar);
One more thing to do is to add a semantic class to clearfix named in
<div class="clearfix in">

You can do this primarily with CSS, and use jQuery to toggle a class on the wrapping element to expand/collapse the sidebar.
http://jsfiddle.net/G7K6J/
HTML
<div class="wrapper clearfix">
<div class ="sideBar">
</div>
<div class="mainCon">
<div class="moreB">
<div class="buttonText">
Learn More
</div>
</div>
</div>
</div>
CSS
.clearfix {
clear:both;
overflow:hidden;
}
.sideBar{
width: 0%;
height: 200px;
background-color: #FF0040;
float: left;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
-o-transition: width 300ms;
transition: width 300ms;
}
.mainCon{
height: 200px;
width: 100%;
float: left;
background-color: #F3F781;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
-o-transition: width 300ms;
transition: width 300ms;
}
.wrapper.expanded .sideBar {
width:20%;
}
.wrapper.expanded .mainCon {
width:80%;
}
.moreB{
color: #ffffff;
width: 100px;
height: 50px;
margin:0 auto;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
border: 2px solid #ffffff;
}
jQuery
$(".moreB").click(function(){
$(".wrapper").toggleClass("expanded");
});

Related

How can I make an HTML box slide on hover and reveal the text underneath it using JS or CSS

I have been for long trying to make an HTML box slide on hover and reveal the text beneath it using CSS or JS. I am new to JavaScript so it would be great if you provide a bit of explanation with the answer if its to be achieved by JS.
I have searched many sites and asked a lot of people but I haven't been able to achieve it.
I have made two DIVs, one being underneath the other
I tried writing some example text, but it appears before the box
.trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="box"></div>
</div>
All you need to do is add a z-index:
.trigger {
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
z-index: 2;
}
.content {
position: absolute;
z-index: 1;
}
.trigger:hover .box {
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="content">Content</div>
<div class="box"></div>
</div>

How to keep the position of second div fixed even when the height of first div is increased

Kindly check this fiddle and tell me how I can keep the second <div> at the same position even when the height of first <div> is increased. If the first <div> overlaps the second it's fine. I just don't want the second div to move at all.
https://jsfiddle.net/7v9dud8u/
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- page content -->
<div id="main-div" style="background-color: #ae2477; width:300px; height: 100px;" onclick="expandHeight();">
Main
</div>
<br/>
<div id="sub-div" style="background-color: #FF0000; width:300px; height: 100px;" onclick="reduceHeight();">
Sub
</div>
<script>
function expandHeight(){
$("#main-div").animate({height:"200px"},400);
}
function reduceHeight(){
$("#main-div").animate({height:"100px"},400);
}
</script>
Thanks.
Using CSS, you can use position: absolute;
<style>
#main-div {
position: absolute;
}
</style>
Doing this will allow the two divs to move freely around the browser window without affecting one another.
If all you want is to keep the second div from moving, then some simple css will do. Just add this to the second div's style attribute:
position:absolute; top:130px;
Try similar answer:
http://fiddle.jshell.net/MvzFC/24/
CSS:
.userWrap {
position: relative;
display: inline-block;
width: 300px;
height: 50px;
overflow: visible;
z-index: 1;
}
.userWrap:hover {
z-index: 2;
}
.user {
position: absolute;
display: inline-block;
width: 300px;
height: 50px;
margin-bottom: 5px;
background: #fff;
transition: width 0.3s, height 0.3s;
}
.user:hover {
width: 350px;
height: 200px;
background: #eee;
transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}
.user img {
float: left;
}
.user .name, .skills {
margin-left: 5px;
}
.user .name {
font-size: 21px;
font-weight: bold;
}

Grid system extra space right side

I am trying to make a grid system using jquery masonry. But i have space problem.
I crated this DEMO from codepen.io
If you are using a widescreen computer please narrow browser. When you narrow your browser then a large gap on the right side emerges. Anyone can help me about that problem ?
HTML
<div class="kesif-wrp">
<div class="kesif-alani">
<div class="kesif-gonderiler">
<div class="posts-holder">
<div class="kesif-gonderi-alani" style="height:300px;">1</div>
<div class="kesif-gonderi-alani" style="height:400px;">2</div>
<div class="kesif-gonderi-alani" style="height:400px;">3</div>
<div class="kesif-gonderi-alani" style="height:200px;">s4</div>
<div class="kesif-gonderi-alani" style="height:250px;">5</div>
<div class="kesif-gonderi-alani" style="height:150px;">6</div>
<div class="kesif-gonderi-alani" style="height:200px;">7</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color:#323949;
font-family: 'mstfont' !important;
margin: 0px ;
padding: 0px;
min-width:100%;
float:left;
height: 100%;
-webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
background-color:blue;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
padding: 0 10px;
background-color:red;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin-right:20px;
margin-bottom:20px;
position: absolute;
top: 0px;
left: 0px;
}
.posts-holder {
box-sizing: border-box;
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
}
I solved the problem as follows.
CSS:
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
width:300px;
background-color:#ffffff;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
margin:10px;
}
.posts-holder {
position:relative;
margin: 10px auto;
}
JavaScript
$( function() {
var $container = $('.posts-holder');
$container.masonry({
isFitWidth: true,
itemSelector: '.kesif-gonderi-alani'
});
});
Working DEMO
The large gap in right because of the position : absolute and top,left css property. All the containers are placed as per their applied classes by following the top,left properties.
Well - you need to change the style sheet completely to fix it once for all.
First of all - set the width of your container where you want to put them all say 1000px then, place your child containers(div's) by using setting the position and left,top properties. And if you need a responsive design then go for media queries.
Hope this helps..

Remove right and bottom margin on infowindows

I'm playing around with the google InfoWindow.
And almost everything is perfect. I'm Just missing something on the windows.
I always have a right and bottom white space.
I don't mind that much for the bottom one but I'd like to get rid of the right one.
Any idea how to do that ?
EDIT, here is the code:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
<div class="" style="overflow: auto;">
<div class="infoBox">
<div style="max-width: 352px; padding: 0px;">
<div id="info-map-element">
<div class="street">
<img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&location=37.7831059,-122.4446528&fov=90&heading=235&pitch=10&sensor=false" alt="">
<div class="shadow"></div>
<div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>
</div>
<div class="wrap clearfix">
<div class="item clearfix">
<small>2013-09-11</small>
<p>This is the a test of customer history purchases.</p>
<div class="row clearfix">
<div class="col-lg-5"> Cost Estimate <span>$11000</span></div>
<div class="col-lg-7"> Purchase No. <span>123456789</span></div>
</div>
<div class="row clearfix">
<div class="col-lg-12"> Sell by My Online seller dot com</div>
</div>
</div>
<div class="row clearfix"></div>
</div>
</div>
</div>
</div>
</div>
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
font-size: 13px;
font-weight: normal;
}#info-map-element .row > div {
font-size: inherit;
font-weight: inherit;
}
#info-map-element .shadow {
width: 100%;
height: 100%;
bottom: 0;
-webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
position: absolute;
font-style: normal;
font-weight: normal;
z-index: 1;
}
#map .gm-style {
font-family: inherit;
}#info-map-element .pagination {
margin: 10px 0 0;
}
.infoBox > img {
position: absolute;
top: 0px;
right: 25px;
display: block;
z-index: 3;
}
#info-map-element .pointer {
width:23px;
height:19px;
top: 99%;
left: 41%;
position:absolute;
display:block;
background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png');
}#info-map-element .wrap {
padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
background: #ececec;
}
#info-map-element .wrap .item {
padding: 10px;
}#legend strong {
float: left;
margin: 0 10px 0 0;
display: block;
}
EDTI #2:
So I can change the dom the way I want it with Jquery. Those 3 lines work"
$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');
But for some reason only the first line get executed.
The padding is caused by the scroll applied to the .gm-style-iw-d div, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.
.gm-style-iw-d {
overflow: hidden !important;
}
You need to first remove the infowindow background & shadow, then apply your own css.
JS part
/*
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
});
CSS part (example)
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
Source
For those who are still looking for solution. Angular 8, helped the code below to remove the paddings and hide the close button for agm-info-window.
Basically, overflow: scroll in .gm-style-iw-d element creates that space.
/* hide close button in info-window */
::ng-deep button.gm-ui-hover-effect {
visibility: hidden;
}
/* clear the paddings */
::ng-deep .gm-style .gm-style-iw-c {
padding: 0;
}
/* remove the white space */
::ng-deep .gm-style-iw .gm-style-iw-d {
overflow: auto !important;
}
You should stop to try fix height/width and set it auto.
Try to change this line:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
To this:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: auto; height: auto;">
In the Css change:
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
To:
#map_newsfeed .gm-style-iw {
width: auto!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
It should solve your problem, if not, please show the full code (html/css).

Opacity or Page Background is showing on half page on Pop Up

I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.

Categories