I am very very new to javascript/Html/CSS and have to use it to add small functionality in one of the existing websites. I am planning to have a resizable division so that if we have a bigger image/drawing on the left side of division it can be resized. The right side of the division is text.
I have used resizable() function and when I resize the first division the other division goes into a new line. I am not sure how to fix this. When the page loads, I need the background division to have 50% width and textfield to have 47.5%. But, on resizing background division - the textfield should auto resize it's width.
Edit: fixed the html typo issue.
Code: https://jsfiddle.net/yguw/t3e9xgbg/
Please suggest as to how I fix this problem.
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="../css/test.css">
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.11.4.min.css">
<link rel="stylesheet" type="text/css" href="../css/menu.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#background").resizable();
});
</script>
</head>
<body>
<!-- Code block start - NT -->
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
<!--<script type="text/javascript" src="../js/testYG.js"></script> -->
</body>
<div class="mainDiv">
<div id="resizable" class="background" id="background"></div>
<div id="resizable" class="textField" id="textDivField">
</div>
</div>
</html>
instead float, you may use display: table or flex to draw a row.
$(function() {
$("#background").resizable();
});
.mainDiv {
height: relative;
display:table;
width:100%;
}
:root {
background: 900px;
position: relative;
}
#background {
background-color: rgb(255, 200, 240);
height: 50vh;
width:50%;
display:table-cell;
margin: 0;
}
#textField {
background-color: rgb(240, 240, 200);
display:table-cell;
padding: 1%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
$(function() {
$("#background").resizable();
});
.mainDiv {
height: relative;
display: flex;
}
:root {
background: 900px;
position: relative;
}
#background {
background-color: rgb(255, 200, 240);
height: 50vh;
width: 50%;
margin: 0;
}
#textField {
background-color: rgb(240, 240, 200);
position: relative;
flex: 1;
padding: 1%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
Related
I need a quick fix here, How do I make the element with sticky class actually sticky within the container but outside it's parent row as well. Can anyone suggest me any quick fixes with HTML css and javascript? Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Element</title>
<style>
.sticky{
position: sticky;
top: 120px;
height: 200vh;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="sticky">
<h1>Sticky element</h1>
</div>
</div>
<div class="col-lg-10">
</div>
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
</div>
</body>
</html>
position: absolute is working for sticky, but sticky must be under the parent element (so in your case it must be exactly inside the container).
.row {
background: #CCC;
border-bottom: 1px solid black;
}
.sticky {
position: absolute;
}
.row>div {
padding: 40px;
}
.container {
margin-top: 40px;
margin-bottom: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="sticky">
<h1>Sticky element</h1>
</div>
<div class="row">
<div class="col-lg-2">
Cell 1
</div>
<div class="col-lg-10">
Cell 2
</div>
</div>
<div class="row">
<div class="col-lg-2">
Cell 3
</div>
<div class="col-lg-10">
Cell 4
</div>
</div>
<div class="row">
<div class="col-lg-2">
Cell 5
</div>
<div class="col-lg-10">
Cell 6
</div>
</div>
</div>
Comment if something is not correct.
I have a problem with a button inside a div that affects a different div. Here's the basic outline:
<div>
<div>
<div>
<div>
<button>THIS BUTTON</button>
<div></div>
</div>
</div>
</div>
<div>
<table>THIS TABLE</table>
</div>
</div>
Intuitively, I would say that adding or removing that button should have no effect on the table and the div containing the table.
I want this table to be as wide as possible.
And without the button it looks like this:
But then I added JavaScript code that exports the table contents into a CSV file.
Once I added the button to do this action, the table becomes narrower:
Here's is the sample code as a standalone HTML file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.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>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
alert('ok?');
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
Login
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
I copied your code into JS snippet. The button doesn't seem to cause any problems.
Quick update: it behaves differently on full screen.
A quick workaround is to add width: 100% to your table's container.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.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>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
Login
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row" style="width: 100%">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
In the code shown below, I have a post and in there is a comment button that will slide the comment box into view from the right. I'm resizing the main post element from 100% of the parent to 67% of the parent (col-lg-12 to col-lg-8). Although I'm trying to get the post element to simultaneously move with the entrance of the comment element.
Also in my fiddle i can't seem to fix how the comment slides all the way across the entire post element, rather than just a portion of it. Additionally, I can't fix the animation where it just appears rather than slides in, although the slide out animation works.
This is my JSFiddle
The code snippet below oddly doesn't work like jsfiddle does.
$('body').on('click', '#comments', function(e) {
var name = $(this).attr('name');
var style = $("#comments-body-" + name).prop('class');
if (style == "col-lg-4 hide") {
$("#post-card-" + name).prop('class', 'col-lg-8');
$("#comments-body-" + name).show("slide", {
direction: "right"
}, 1000, function() {
$("#comments-body-" + name).prop('class', 'col-lg-4 show');
});
} else if (style == "col-lg-4 show") {
$("#comments-body-" + name).hide("slide", {
direction: "right"
}, 1000, function() {
$("#post-card-" + name).prop('class', 'col-lg-12');
$("#comments-body-" + name).prop('class', 'col-lg-4 hide');
});
}
});
.quantity {
border-radius: 100px;
background: #dc3545;
color: white;
padding: 1px 6px;
}
span #comments {
cursor: pointer;
}
span #comments:hover {
color: blue;
}
.divider {
position: relative;
Float: left;
height: 100%;
width: 1px;
background-color: rgba(0, 0, 0, .125)
}
.comment-body {
padding: 0.75rem !important;
}
.show {
display: block;
}
.hide {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" media="all">
<link href="https://nofile.io/f/RA9FgtoD8yG/master.css" rel="stylesheet" media="all">
<body>
<div id="main-content" class="main-content">
<div id="notices" class="section__content section__content--p30">
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">Notices</h2>
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#newPostModal">
<i class="zmdi zmdi-plus"></i>new post</button>
</div><br />
<div id="$id" class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-8">
<strong class="card-title">
yeet
</strong>
</div>
<div class="col-lg-4">
<span style="cursor:pointer;" class="float-right">
<a id="remove-notice">
<i class="fas fa-times"></i>
</a>
</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<span>
<small><span class="float-right" id="comments" name="1">Comments <span class="quantity"><bold>1</bold></span></span>
</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div id="post-card-1" class="col-lg-12" style="position:relative;">
xdxddxd
</div>
<div class="col-lg-4 hide" id="comments-body-1">
<div class="divider"></div>
<div style="margin-left:2vw;">
<div style="vertical-align:middle;">
<strong>Comments</strong>
<button class="au-btn au-btn-icon au-btn--blue" style="line-height:25px!important;padding:0 5px!important;float:right;"><i class="zmdi zmdi-plus"></i>comment</button>
</div>
<br />
<div class="card">
<div class="card-body comment-body" style="position:relative;">
<strong> User </strong><br/>
<p>
shfashfihgliahgal
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Okay, I hope you are still watching this question.
First, why your show("slide" is failed. Let's watch this code.
$(function() {
$("#button1").on("click", function() {
// fade in. (but it doens't show due to priority problem.)
$("#target1").fadeIn("slow", function() {
// It shows at this timing.
$("#target1").prop("class", "col-sm-4 show");
});
});
$("#button2").on("click", function() {
// fade in.
$("#target2").fadeIn("slow");
});
});
.hide {
display: none !important;
}
.display-none {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target1" class="col-sm-4 hide">
Hello my name is col-sm-4! for display:none !important;
</div>
<div id="target2" class="col-sm-4 display-none">
Hello my name is col-sm-4! for display:none;
</div>
<input type="button" class="button" value="show col-sm-4" id="button1">
<input type="button" class="button" value="show col-sm-4" id="button2">
Next, you want to move the entire post element.
Maybe I'm misunderstanding.
But I did fix some problem that what I thought.
Can you have a look? if anything, feel free to question me.
For Example.
I'm a beginner working on a project in the MEAN stack. I'm getting inconsistent HTML previews when I render it by itself and when I run it from the project.
What it's supposed to look like (when I preview it by itself):
imgur
and here's what it looks like when I build the project:
imgur
I'd like the partial view to sit under the header and fill the remaining space on the screen.
Here's my index.html
<!doctype html>
<html ng-app="angulobby">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="css/text" href="./stylesheets/style.css">
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./main.js"></script>
<script src="./services.js"></script>
<script src="./controllers.js"></script>
<base href="/">
</head>
<body data-ng-controller="IndexController">
<!-- HEADER AND NAVBAR -->
<div class="box">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AnguLobby Prototype</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Login</li>
<li><i class="fa fa-comment"></i> Register</li>
<div ng-controller="logoutController">
<a ng-click='logout()' class="btn btn-default">Logout</a>
</div>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where the content will be injected -->
<div data-ng-view></div>
</div>
</div>
</body>
</html>
and here is the partial view home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script></script>
</body>
</html>
and finally styles.css
html, body{
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
#main {
background-color: aliceblue;
flex-grow: 1;
}
#ng-view {
height: 100%;
}
#container {
height: 100%;
width: 100%;
}
#left, #middle, #right {
height: 100%;
width: 33%;
}
#chat-container {
display: flex;
flex-direction: column;
background-color: lightblue;
height: 100%;
width: 100%;
}
#messages-box {
flex-grow: 1;
}
You have an HTML page in the div of another HTML page. The inner page is 100% height of the div (which is only as high as the content)
Just remove the html and body tags from the home.html partial. You may want to examine how you are including your js scripts as well...
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
I have problem with carousel,
I have tried a lot, but I am not able to solve
I have one carousel with 4 images.Here i want to like in 1st iteration:
1-2-3-4
2nd iteration: 4-5-6-7
3rd iteration:7-8-9-10
this will when we click on corousel.
here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CustomStyles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: false
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-inner .active.left { left: -25% ; }
.class-inner .active.right{left : 25%;}
.carousel-inner .next { left: 25% ; }
.carousel-inner .prev { left: -25% ; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}
</style>
</head>
<body>
<div class="col-xs-12 text-center" style=" direction: ltr">
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3"><img src="1.jpg" href="sa.html" class="img-responsive">1</div>
</div>
<div class="item">
<div class="col-md-3"><img src="2.jpg" class="img-responsive">2</div>
</div>
<div class="item">
<div class="col-md-3"><img src="3.jpg" class="img-responsive">3</div>
</div>
<div class="item">
<div class="col-md-3"><img src="4.jpg" class="img-responsive">4</div>
</div>
<div class="item">
<div class="col-md-3"><img src="5.jpg" class="img-responsive">5</div>
</div>
<div class="item">
<div class="col-md-3"><img src="6.jpg" class="img-responsive">6</div>
</div>
<div class="item">
<div class="col-md-3"><img src="7.jpg" class="img-responsive">7</div>
</div>
<div class="item">
<div class="col-md-3"><img src="8.jpg" class="img-responsive">8</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>
I think it would be better to use a different carousel:
http://bxslider.com/examples/carousel-dynamic-number-slides
It's easy to use and responsive ;)
Here you find exactly what you want.
http://kenwheeler.github.io/slick/
Please find below working demo.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>