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.
Related
I want to show the "hide_show" section when I scroll down and the "three" section appears on the screen. I want to hide the "hide_show" section when I scroll up and the "three" section disappears from the screen. I want to use JS with "fade in / face out" effect. Please help
.hide_show {
height: 50px;
background-color: #cfcfcf;
margin-top: -50px;
}
#two {
background-color: cyan;
}
#three {
background-color: red;
}
#four {
background-color: yellow;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="hide_show">
<div class="container">
<div class="row">
<div class="col-12">
one
</div>
</div>
</div>
</section>
<section id="two">
<div class="container">
<div class="row">
<div class="col-12">
two
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="three">
<div class="container">
<div class="row">
<div class="col-12">
three
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="four">
<div class="container">
<div class="row">
<div class="col-12">
four
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
</body>
https://jsfiddle.net/czyjg2tu/1/
It was a bit difficult to fully understand the question, but this should hopefully get you started.
Let me know if you have any other questions on what each part of this does.
let three = document.querySelector('#three')
let hideShow = document.querySelectorAll('.hide_show')
document.addEventListener('scroll', () => {
// If the user has scrolled to the three section
if (window.pageYOffset >= three.offsetTop) {
hideShow.forEach((item) => {
item.style.display = 'block'
})
// If the user has not reached the three section
} else {
hideShow.forEach((item) => {
item.style.display = 'none'
})
}
})
.hide_show {
/* Force the hideShow section to always be at the top */
position: sticky;
top: 0;
display: none;
height: 50px;
background-color: #cfcfcf;
margin-top: -50px;
}
#two {
background-color: cyan;
}
#three {
background-color: red;
}
#four {
background-color: yellow;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="hide_show">
<div class="container">
<div class="row">
<div class="col-12">
one
</div>
</div>
</div>
</section>
<section id="two">
<div class="container">
<div class="row">
<div class="col-12">
two
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="three">
<div class="container">
<div class="row">
<div class="col-12">
three
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="four">
<div class="container">
<div class="row">
<div class="col-12">
four
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
</body>
I'm trying to get code mirror to read and display the contents of a file into the textarea, but everytime I load a file, it prints the contents as one line, ignoring all line breaks, and if I try to manually enter text into the text field, it automatically tabs every line after the first.
Proper text form file format:
Proper textarea styling:
Unfortunate result of selecting a file (this text format won't function with the compile button):
Full HTML code (with suggested edits; still not working):
<!DOCTYPE html>
<html lang="en_US">
<head>
<title>Phoenix - UMSL's Online Assembly Code Compiler</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/colorforth.css">
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/cobol/cobol.js"></script>
<link rel="stylesheet" href="CSS/styling.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>
<body>
<fieldset>
<!-- Form Name -->
<nav class="navbar navbar-expand-lg navbar-expand-lg" style="border-bottom: 5px solid white;">
<a class="navbar-brand" href="./homepage.html"> <img src="IMGS/phoenix-small.png">PHOENIX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./homepage.html">Home</a>
<a class="dropdown-item" href="./reference.html">Reference</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="./about.html">About Team Phoenix</a>
</div>
</li>
</ul>
</div>
<a style="color:white;">UMSL's Online Assembly Code Compiler</a>
</nav>
<div class="WORKPLEASE" style="max-width: 98%;">
</br>
</br>
</br>
</br>
</br>
<!-- File Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile: </br></label>
<div class="row justify-content-md-center">
<input id="filebutton" name="filebutton" class="input-file" type="file">
<!--File Upload Script -->
<script type="text/javascript" src="fileUploadScript.js"></script>
</div>
</div>
</br>
<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or... </br></p>
</div>
</br>
<!-- Textarea -->
<div class="form-group">
<label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br></label>
<div class="col-md-6 offset-md-3">
<div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid;"></div>
<script>
let editor = CodeMirror(document.getElementById("textarea"),{
lineNumbers: true,
mode: "cobol",
theme: "colorforth"
});
document.getElementById("filebutton").addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
editor.setValue(this.result); // Need to use the setValue method
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
</script>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="singlebutton"></label>
<div class="row justify-content-md-center">
<button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
<script src="assmblyCode.js"></script>
</div>
</div>
</div>
</fieldset>
<!--<div id="footer">-->
<!--<p style="padding-top: 25px;">-->
<!--© Copyright 2019 Team Phoenix-->
<!--</p>-->
<!--</div>-->
</body>
</div>
The styling.css file:
/* Color assignment */
body {
background-image: url("../IMGS/binary.gif");
background-color: #cccccc;
}
.form-group{background-color:black;}
head {background-color: firebrick;}
h1 {color: blue}
h2 {color: snow}
nav {background-color: firebrick;}
a {color: snow;}
div {color: Azure}
/*italicizes and specifies which page you are on with color*/
a:hover{font-style: italic;}
/* alignment and font size */
head { font-size: 20pt}
h1 {text-align: center}
h2 {text-align: center}
h2 {font-size: 22pt}
.argname {font-size: 20px; text-decoration: underline; padding-top: 10px; background-color: black;}
.sides{ width:50%; float:left; padding-left: 20px}
.LI-profile-badge{
width:25%;
float:left;
padding-left: 20px;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background-color: black;
text-align: center;
}
The fileUploadScript.js used to load the file into the text area:
document.getElementById("filebutton").addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
//https://www.youtube.com/watch?v=QI_NClLxnF0
Hopefully someone can spot what's being done wrong.
CodeMirror has several Content manipulation methods. You will need to use the setValue method.
doc.setValue(content: string)
Set the editor content.
Please reference the following block of code for my suggestions.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>
<body>
<!-- File Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile:</label>
<div class="row justify-content-md-center">
<input id="filebutton" name="filebutton" class="input-file" type="file">
</div>
</div>
<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or...</p>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br>
</label>
<div class="col-md-6 offset-md-3">
<div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid; border-width: 1px; border-color: gray"></div>
<!-- This is where I think the problem is -->
<script>
let editor = CodeMirror(document.getElementById("textarea"), {
lineNumbers: true,
mode: "cobol",
theme: "colorforth"
});
document.getElementById("filebutton").addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
editor.setValue(this.result); // Need to use the setValue method
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
</script>
<!-- This is where I think the problem is -->
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="singlebutton"></label>
<div class="row justify-content-md-center">
<button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
</div>
</div>
</body>
</html>
More specifically, editor.setValue(this.result); is what got it working. Take a look at this JS Bin
In your fileUploadScript.js you must use editor.setValue().
document.getElementById("filebutton").addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
editor.setValue(this.result);
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
You can't force the code into the textarea. It just won' work. You have to use the setValue method as shown above.
CodeMirror: Usage Manual.
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 a panel heading and a panel body having a description by default when the page reloads. when I click on the + symbol then there are some contents to be displayed and that description to be removed.
everything is working fine. but when I slideup then the description is appeared but it appears suddenly with a kind of stroke.
I can do it using time unit but it adds fade-in effect to it. which i don't want.
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
$('.add_discount_one_line_description').show();
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
Here is JSFiddle
When you slide up the panel body then the description gets displayed suddenly.
How can i solve it?
Any help would b great.
Thank You.
You don't need to use timeout, it will be hard to match exactly the time it takes to slide. The slideUp() method has a callback function to call once the animation is complete, show your default content there
$('.show_hide_add_discount_panel').slideUp(function(){
$('.add_discount_one_line_description').show();
});
https://jsfiddle.net/hbxqsxjp/2/
Then you should try to add some timeout before you see the default content.
Fiddle : https://jsfiddle.net/qaeed/hbxqsxjp/1/
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
setTimeout(function(){
$('.add_discount_one_line_description').show();
}, 1000);
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
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>