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;
}
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>
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.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
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.
I am designing a stat board for a call center and I am having trouble getting 2 elements to size up correctly. I have used an automatic text resizer called FitText(link below). I have gotten every other element to work with FitText except the 100% and 100 listed in the code. I cannot figure out why the 100% and the 100 just stay so small compared to the sizes of the divs they are contained in. Both containers are 100% width. I have played around with hundreds of CSS combinations to no avail. Any help will be greatly appreciated. Via the requests below, here is the JSFiddle link.
http://jsfiddle.net/neggly/57tVW/
CSS
#wrap {
position: absolute;
height:100%;
width:100%;
margin:0 auto;
background-color: black;
}
#statuscolorwrap
{
background-color: aqua;
float: left;
width: 1%;
height: 100%;
}
#numberwrap
{
background-color: #ff0;
float: left;
width: 20%;
height: 100%;
}
#announcementwrap
{
background-color: coral;
float: left;
width: 79%;
height: 100%;
}
#queuewrapper
{
height:40%;
width:100%;
float: top;
background-color: darkorchid;
}
#queuecolors
{
height:40%;
width:100%;
float: top;
background-color: cadetblue;
}
#queuepercentage
{
height: 50%;
width: 100%;
float: top;
background-color: chartreuse;
}
#queueholding
{
height: 50%;
width: 100%;
float: bottom;
background-color: crimson;
}
#topcolor
{
height: 50%;
width: 100%;
float: top;
background-color: darkseagreen;
}
#bottomcolor
{
height: 50%;
width: 100%;
float: bottom;
background-color: moccasin;
}
#datetimewrapper
{
width:100%;
height:5%;
float: top;
background-color: deepskyblue;
}
#messages
{
width: 100%;
height: 60%;
float: top;
background-color: darkorchid;
overflow-y: auto;
}
.messagewrapper
{
width: 100%;
height: 100px;
float:top;
background-color: azure;
}
.messageimportance
{
float:left;
width: 5%;
height: 100%;
background-color: darkslategrey;
}
.messagesubject
{
float:left;
width: 95%;
height: 100%;
background-color: blanchedalmond;
}
h1
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h2
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h3
{
font: Helvetica, sans-serif;
font-weight: bold;
margin:0;
padding:0;
text-align: center;
}
#anpicturewrap
{
float:top;
width:100%;
height:45%;
background-color: darkcyan;
}
#antextwrap
{
float:top;
width:100%;
height:50%;
background-color: darkkhaki;
overflow-y: auto;
}
img
{
max-width: 100%;
max-height: 100%;
display:block;
margin:auto;
}
h4
{
font: Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
#text
{
width: auto;
margin-left: 40px;
margin-right:40px;
margin-bottom: 30px;
}
.subjecttext
{
height: 100%;
width:100%;
margin-left: 10px;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
}
HTML
<html>
<head>
<title>Virginia Summary</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="base.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="numberwrap">
<div id="queuewrapper">
<div id="queuepercentage">
<div class="subjecttext">
<h1 id="fittext1">1</h1>
</div>
</div>
<div id="queueholding">
<h1 id="fittext2">100</h1>
</div>
</div>
<div id="messages">
<div class="messagewrapper">
<div class="messagesubject">
<div class="subjecttext">
<h2 id="fittext3">Enter Subject here</h2>
</div>
</div>
<div class="messageimportance">
</div>
</div>
</div>
</div>
<div id ="statuscolorwrap">
<div id="queuecolors">
<div id="topcolor">
</div>
<div id="bottomcolor">
</div>
</div>
</div>
<div id="announcementwrap">
<div id="datetimewrapper">
<h3 id="fittext4">12/12/2014 18:00</h3>
</div>
<div id="anpicturewrap">
<img src="images/pic.jpg" alt=""/>
</div>
<div id="antextwrap">
<div id="text">
<h4 id="fittext5">sample text</h4>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("h1").fitText(1);
$("#fittext2").fitText(1.2);
$("#fittext3").fitText(1.2);
$("#fittext4").fitText(1.2, {minFontSize: '20px', maxFontSize: '30px'});
$("#fittext5").fitText(1.2);
</script>
</body>
</html>
https://github.com/davatron5000/FitText.js
Default margins on headings and some of the margins you have set are causing some of the alignment issues. If you switched some of that to padding, and used box-sizing:border-box; on some of those divs, it would make things a bit easier to style:
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
In the JS fiddle example, it doesn't look the Javascript to resize the text is actually being called on anything. When I turn on JQuery in the fiddle and then actually call the text-resize stuff on your elements it does work to resize the elements.
$(document).ready( function(){
jQuery("#fittext1").fitText(.2);
jQuery("#fittext2").fitText(.3);
jQuery("#fittext3").fitText(.6);
jQuery("#fittext4").fitText(1, {minFontSize: '20px', maxFontSize: '30px'});
jQuery("#fittext5").fitText(1.2);
});
Edit: I updated some of your CSS so it worked the way you might have expected it to. I moved normalize to the top of your CSS, since it should be the first thing added. You will probably want to add some space and things in some of the boxes, but since I added the border-box, you can just do this with padding on the percentage sized elements.
http://jsfiddle.net/57tVW/2/