I am trying to make a website with a sidebar with settings and such, and I want the sidebar to slide out and the content should just resize. I am trying to make it look like a clean animation. Although when I try it, the content just slides down below the sidebar. I have no idea why. Here is my code.
Links
<!-- Latest Bootstrap V4 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<!-- Font Awesome V4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- JQuery V2.1.4 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Bootstrap V4 Javascript -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
HTML
<div class="row all">
<div id="infobox" class="col-md-4">
test
</div>
<div id="content" class="col-md-8">
<nav id="bar">
<i class="fa fa-bars" id="info" title="Info"></i><div id="title" class="text-center">test</div>
</nav>
<div id="chat">
t
</div>
<div id="input">
<input type="text" class="form-control" id="text" placeholder="Enter chat here">
<button type="button" class="btn btn-success" id="send">Send</button>
</div>
</div>
</div>
CSS
html, body{
height: 100%;
width: 100%;
}
.ui-effects-wrapper{
float: right;
}
#text, #send{
border-radius: 0px;
float: left;
}
#text{
width: 90%
}
#send{
width: 10%;
}
#bar{
background-color: #F0F0F0;
padding: .5rem 1rem;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
display: inline;
}
#bar #title{
color: rgba(0,0,0,.8);
font-size: 1.25rem;
padding-top: .25rem;
padding-bottom: .25rem;
text-decoration: none;
text-align: center;
display: inline;
margin-left: 45%;
margin-right: 45%;
}
#chat{
position: absolute;
top: 8%;
bottom: 5%;
left: 0%;
right: 0%;
overflow: auto;
min-height: 87%;
}
#input{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
// min-height: 5%;
}
#content{
position: relative;
height: 100%;
float: left;
/*width: auto;*/
}
#infobox{
background-color: #D9D9D9;
/*position: relative;*/
height: 100%;
}
.all{
height: 100%;
width: 100%;
margin: 0;
}
Javascript
$(function () {
$("#send").click(function () {
alert("test");
$("#chat").html(document.getElementById("text").value);
document.getElementById("text").value = "";
return false;
});
$("#info").click(function () {
if($("#infobox").is(":visible")){
$("#infobox").hide("slide", { direction: "left" }, 1000);
$("#content").animate({
width: "100%",
float: "left"
}, 1000, "", function () {
// alert("all done");
});
}else{
$("#content").animate({
width: "66.666667%",
float: "left"
}, 1000, "", function () {
// alert("all done");
});
$("#infobox").show("slide", { direction: "left" }, 1000);
}
});
});
Example: http://jsbin.com/zivuzipoju/
Thanks to Rudy Setiady I was able to have an idea of what to do, then I was stumped because for some odd reason there was some sort of padding or something that chrome was not able to find. So I just set the initial width to 150% so that it looked like it was full screen. Then when the sidebar came out, I would set it to 100%. When I did this, of course there would be a scrollbar. So to fix that, I just set overflow: hidden on body.
Related
For anyone that can help with CSS on IE-11. I cannot figure out why this code is not working. Only if I comment out the CSS .container_main_box {/*position: relative;*/... does the page load correctly and then the link on the left call the javascript function. I inherited this code and trimmed it down until I can recreate the issue which is what you see here. I have searched and tried everything I could find on the Internet and nothing works. I am really not good with CSS or any front-end stuff so I am really struggling with this. Can anyone help?
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Temporary</TITLE>
<SCRIPT type="text/javascript">
function openMenu() {
console.log("Called the Javascript function successfully.")
}
</SCRIPT>
<style>
.sidebar {
margin: 0;
padding: 0px 0px;
top: -15px;
width: 180px;
height: 417px;
float: left;
background-color: #2a2e43;
position: relative;
overflow: hidden;
text-align: left;
overflow-y: hidden;
border-bottom-color: #f7f6fa;
}
.sidebar a {
display: block;
text-decoration: none;
text-align: left;
font: Regular 11px/13px Helvetica;
letter-spacing: 0;
color: #ffffff;
padding: 8px;
font-size: 16px;
overflow-y: hidden;
border-bottom-color: #f2f2f7;
}
.box_size {
width: 100%;
}
.container {
padding: 0.2em 0.4em;
width: 100%;
height: 100%;
position: absolute;
margin-top: 20px;
}
.container_main_box {
position: relative;
float: left;
width: 100%;
height: 75%;
min-width: 50%;
max-width: 100%;
top: -432px;
}
</style>
</HEAD>
<BODY>
<DIV class="container">
<DIV class="sidebar">
<DIV>
<A onclick="openMenu()" href="#"><span>First Link</span></A>
</DIV>
<DIV>
<A onclick="openMenu()" href="#"><span>Second Link</span></A>
</DIV>
</DIV>
<DIV class="container_main_box">
<DIV>
<DIV class="box_size"><SPAN>Just some content...</SPAN></DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
I am trying to create a loader for my website using css and javascript and it has to look something like
so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.
Edit- Sorry if was not clear but I want the orange slider as an animated loader
HTML -
<div style="margin-left:400px; margin-right:400px " class="progress-wrap
progress" data-progress-percent="20">
<div class="progress-bar progress"></div>
</div>
CSS -
#import "compass/css3";
.red{
background:black;
margin-left:300px;
top:100px;
}
.box{
width:100px !important;
height:100px !important;
z-index:-1;
}
.progress {
width: 100%;
height: 10px;
}
.progress-wrap {
background: #f80;
margin: 200px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: white;
left: 0;
position: absolute;
top: 0;
}
}
Javascript-
moveProgressBar();
$(window).load(function() {
moveProgressBar();
});
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 6500;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?
One solution is to set the progress bar to position: absolute and position it over the boxes.
As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.
Live demo: http://jsfiddle.net/rg0bq23p/45/
Javascript
var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';
HTML
<div class="wrapper">
<div id="progress" class="progress" data-progress="20">
<div class="bar"></div>
</div>
<div class="box dark-gray"></div>
<div class="box gray"></div>
</div>
SCSS
.wrapper {
width: 400px;
margin: 0 auto;
display: flex;
position: relative;
.progress {
position: absolute;
top: 150px;
left: -100px;
z-index: 1;
width: 90%;
background-color: #fff3e2;
.bar {
width: 0;
height: 15px;
background-color: #ffa41c;
transition: width 1s;
}
}
.box {
width: 200px;
height: 200px;
&.gray {
background-color: #bbb;
}
&.dark-gray {
background-color: #888;
}
}
}
I solved the problem using only HTML and CSS:
The result will be exactly as you want in the example you mentioned
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 268px;
height: 11px;
background: #f26522;
}
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>
For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
width: 100%;
border: 1px solid black;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 5%;
height: 11px;
background: #f26522;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
<script>
var width = 5;
var progress;
progress= setInterval(function(){
$('.progress-bar').css("width", width + "%");
width += 5;
if(width>=105){
clearInterval(progress);
}
}, 200);
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/21jdo8q7/1/
I am trying to scrollTop my left side div but due to some reason, it is not working.
So the following is my CSS, HTML and jquery code. I had tried many things but was failed. Now if you please help me to solve this, then it will be great.
$('#leftside').click(function(e) {
$("html, body").animate({
scrollTop: 0
}, 600);
e.preventDefault();
});
html,
body {
height: 100% !important;
}
body {
background-color: #ffffff;
font-weight: 400;
font-size: .79em;
line-height: 1.6em;
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', sans-serif;
color: #000;
height: auto;
}
#content-wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow-x: hidden;
padding-top: 39px;
box-sizing: border-box;
}
#leftside {
width: 240px;
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 5px;
background-color: #364150;
position: relative;
}
#rightside {
position: fixed;
height: 100%;
width: 100%;
padding-bottom: 50px;
top: 39px;
right: 0;
left: 239px;
background-color: #fff;
}
.right-content {
overflow: auto;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
..... head code
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
nav..... code
</nav>
<div id="content-wrapper">
<div id="leftside">
<ul class="page-sidebar-menu">
<li>....</li>
<li>....</li>
</ul>
</div>
<div id="rightside">
<div class="right-content">
Right side content
</div>
</div>
</div>
Would you please help me why the above is not working or what wrong I am doing.
You use jQuery, but forget to add your code within document ready:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
... //your codes come here
});
</script>
And if you don't like jQuery use this as Event Handler:
document.getElementById("yourid").addEventListener("click", function( event ) ...
You are trying to scroll the main body/html in your code, change "html, body" to "#leftside".
$('#leftside').click(function(e){
$("#leftside").animate({ scrollTop: 0 }, 600);
});
You should also set the overflow of the left div to 'scroll':
#leftside {
width: 240px;
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 5px;
background-color: #364150;
position: relative;
overflow: scroll;
}
A part of a webpage i am designing consists of several div elements placed side by side. Each one contains an image. I want to summon a drop-down menu when the user's mouse enters the div. However, testing it with a simple "print hello" function didn't yield the results i was expecting.
At this point, the images are placed properly, and their size is adjusted just like i specified. However, the cursor is not pointerand the function test doesn't run when the mouse enters the div. I've had this problem with click events in the past and i always tried to find a way around it. Can someone explain why it won't work?
Here's the html
#container {
background-color: black;
border-radius: 20px;
display: inline-block;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
}
#icon {
background-color: burlywood;
border-radius: inherit;
border-radius: 20px;
}
#menu a {
font-size: 30px;
font-family: "Arial";
color: white;
text-decoration: none;
margin-left: 50px;
}
#flag {
width: 50px;
height: 50px;
}
#menu a:hover {
color: #e55d00;
}
body {
height: 2000px;
background-image: url("background.jpg");
}
#btt {
bottom: 0;
color: white;
position: fixed;
text-decoration: none;
}
#contain {
display: inline-block;
height: 1000px;
width: 100%;
max-width: 100%;
position: absolute;
}
#sidemenu {
width: 0;
height: 100%;
z-index: 1;
background-color: black;
transition: width 1s;
padding-top: 200px;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
}
#sidemenu a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
#sidemenu a:hover {
color: red;
}
#language {
margin-left: 250%;
}
#title a {
color: #e55d00;
text-decoration: none;
}
#title {
font-size: 50px;
text-align: center;
border-radius: 20px;
display: inline-block;
padding: 10px;
}
#projects {
margin-top: 200px;
}
#current {
width: 210px;
height: 200px;
cursor: pointer;
}
#current img {
width: inherit;
height: inherit;
}
#progress {
margin-left: 200px;
width: 210px;
height: 200px;
cursor: pointer;
}
#progress img {
width: inherit;
height: inherit;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects</title>
<link type="text/css" rel="stylesheet" href="projects.css">
</head>
<body>
<div id="container">
<table>
<tr>
<td>
<div id="icon">
<img src="img.png">
</div>
</td>
<td>
<div id="title" title="Home">
Electrocats
</div>
<div id="menu">
News
Projects
About Us
menu item 4
</div>
</td>
<td>
<div id="language">
<a href="#" title="Translate to Greek">
<img id="flag" src="Greece-icon.png">
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="contain">
<div id="sidemenu" onmouseleave="hideMenu()">
contact
Films
</div>
</div>
<!-- here is the code with the problem -->
<div id="projects">
<table>
<tr>
<td>
<div id="current" onmouseenter="test">
<img src="high-voltage.png">
</div>
</td>
<td>
<div id="progress" onmouseenter="test">
<img src="engineering1.jpg">
</div>
</td>
</tr>
</table>
</div>
<a id="btt" href="#top">Back to top</a>
<script>
function summonMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "400px";
}
function hideMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "0";
}
function test() {
console.log("hello");
}
</script>
</body>
</html>
Hello See the below Fiddle Here I did this using alert but you can do the same using console.log Hope It helps you .
Div Hover Fiddle
also Added a fiddle with a dropdown list visible on mouse enter event what are you trying to made i guess so .
dropdown Fiddle
In the end, setting the position of the div that contains the images to absolutesolved the issue. I've yet to understand why, but i believe it has something to do with the z-index values specified in the css file. I would really appreciate it if someone could explain why the issue was solver this way.
The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/
I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="hero">
<div class="hero-carousel">
<article>
<img src="images/deadmau5/slide1.jpg" />
</article>
<article>
<img src="images/deadmau5/slide2.jpg" />
</article>
<article>
<img src="images/deadmau5/slide3.jpg" />
</article>
<article>
<img src="images/deadmau5/slide4.jpg" />
</article>
</div>
</div>
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
Javascript
jQuery.fn.heroCarousel=function(a){a=jQuery.extend({animationSpeed:1000,navigation:true,easing:"",timeout:5000,pause:true,pauseOnNavHover:true,prevText:"Previous",nextText:"Next",css3pieFix:false,currentClass:"current",onLoad:function(){},onStart:function(){},onComplete:function(){}},a);if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)<7){a.animationSpeed=0}return this.each(function(){var k=jQuery(this),b=k.children();currentItem=1;childWidth=b.width();childHeight=b.height();if(b.length>2){b.each(function(m){if(a.itemClass){jQuery(this).addClass(a.itemClass)}});b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));var d=Math.round(childWidth*k.children().length),l="-"+Math.round(childWidth+Math.round(childWidth/2))+"px";k.addClass("hero-carousel-container").css({position:"relative",overflow:"hidden",left:"50%",top:0,"margin-left":l,height:childHeight,width:d});k.before('<ul class="hero-carousel-nav"><li class="prev">'+a.prevText+'</li><li class="next">'+a.nextText+"</li></ul>");var e=k.prev(".hero-carousel-nav"),h;if(a.timeout>0){var j=false;if(a.pause){k.hover(function(){j=true},function(){j=false})}if(a.pauseOnNavHover){e.hover(function(){j=true},function(){j=false})}function c(){if(!j){e.find(".next a").trigger("click")}}h=window.setInterval(c,a.timeout)}e.find("a").data("disabled",false).click(function(p){p.preventDefault();var m=jQuery(this),n=m.parent().hasClass("prev"),o=k.children();if(m.data("disabled")===false){a.onStart(k,e,o.eq(currentItem),a);if(n){f(o.filter(":last"),"previous")}else{f(o.filter(":first"),"next")}m.data("disabled",true);setTimeout(function(){m.data("disabled",false)},a.animationSpeed+200);if(a.timeout>0){window.clearInterval(h);h=window.setInterval(c,a.timeout)}}});function f(m,q){var o=parseFloat(k.position().left),n=parseFloat(k.css("margin-left"));if(q==="previous"){m.before(m.clone().addClass("carousel-clone"));k.prepend(m);var p=Math.round(n-childWidth);var r="+="}else{m.after(m.clone().addClass("carousel-clone"));k.append(m);var p=l;var r="-="}if(a.css3pieFix){g(jQuery(".carousel-clone"))}k.css({left:o,width:Math.round(d+childWidth),"margin-left":p}).animate({left:r+childWidth},a.animationSpeed,a.easing,function(){k.css({left:"50%",width:d,"margin-left":n});jQuery(".carousel-clone").remove();i()})}function g(n){var m=n.attr("_pieId");if(m){n.attr("_pieId",m+"_cloned")}n.find("*[_pieId]").each(function(o,p){var q=$(p).attr("_pieId");$(p).attr("_pieId",q+"_cloned")})}function i(){var m=k.children();m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);a.onComplete(k,k.prev(".hero-carousel-nav"),m.eq(currentItem),a)}if(jQuery.browser.msie){e.find("a").attr("hideFocus","true")}a.onLoad(k,e,k.children().eq(currentItem),a)}})};
You have to change the mark-up to:
<div class="hero">
<div class="hero-carousel">
<article>
<img src="slide-1.jpg" />
<div class="contents">text goes here</div>
</article>
<article>
<img src="slide-1.jpg" />
<div class="contents">text goes here</div>
</article>
</div>
</div>
Do not forget to add the jQuery mark-up like:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
This should work for you.
EDIT - Try to use inspect element or view source to help you solve similar issues.