I want to change the markdown height to fill div height but I can't make it.
I have the following files -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-markdown.min.css" rel="stylesheet">
<link href="admin.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="md-editor active half-width">
<textarea id="target-editor" class="target-editor-twitter md-input"> </textarea>
</div>
<div id="result" class="half-width">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-markdown.js"></script>
<script src="assets/js/markdown.js"></script>
<script src="assets/js/to-markdown.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
e.hideButtons("cmdPreview");
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
admin.css
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
and the output is -
How to change markdown height to fill div height?
Look at snippet
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
//e.hideButtons("cmdPreview");
e.$textarea.css('resize','vertical');
e.$textarea.css('height', ($(".md-editor").height()-90)+'px');
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
$(window).resize(function(){
$("#target-editor").height(($(".md-editor").height()-90)+'px');
});
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
.md-editor>.md-header {
margin-left: 5px;
}
.md-editor {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/js/bootstrap-markdown.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/css/bootstrap-markdown.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="half-width">
<textarea id="target-editor" class="target-editor-twitter md-input" data-provide="markdown-editable" rows="20"> </textarea>
</div>
<div id="result" class="half-width">
</div>
Related
I can't seem to find the problem in my code. It seems that the #fullpage section selector doesn't work for some reason.
I made sure all my sections have a set position, and it still doesn't work as expected.
My HTML and my CSS...
body {
margin:0;
padding:0;
font-family:verdana;
}
#fullpage {
height:100vh;
}
#fullpage section {
height:100vh;
}
#fullpage section h1 {
margin:0;
padding:0;
line-height:100vh;
}
#fullpage section:nth-child(1) {
background-color:red;
}
#fullpage section:nth-child(2) {
background-color:blue;
}
#fullpage section:nth-child(3) {
background-color:green;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fullpagecss.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js">
</script>
<script src="http://code.jquery.com/jquery-3.4.1.js">
</script>
<script src="jquery.fullpage.js">
</script>
</head>
<body>
<div id="fullpage">
<section><h1>Section 1</h1></section>
<section><h1>Section 2</h1></section>
<section><h1>Section 3</h1></section>
</div>
<script type="text/javascript">
FastClick.attach(document.body);
$('#fullpage').fullpage();
</script>
</body>
</html>
Really confused why it isn't working.
Not sure it is the selector. Might be the markup. The fiddle was not working for me. Edited things a little:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" integrity="sha256-l0tJvh77claYa8GowKaFNxtuRWZICtwHTk7+0tgsiZY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js" integrity="sha256-SjXUPmxobD+vLCws0crIzpdBrHgDjs8jamhUMv0eRac=" crossorigin="anonymous"></script>
</head>
<body>
<div id="fullpage">
<section class="section"><h1>Section 1</h1></section>
<section class="section"><h1>Section 2</h1></section>
<section class="section"><h1>Section 3</h1></section>
</div>
</body>
</html>
No change to the CSS:
JS:
$(document).ready(function() {
FastClick.attach(document.body);
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
navigation: true,
navigationPosition: 'right',
});
});
Not even sure that is the fullpage library you are using. There are a ton of options when initializing. With this one, the sections apparently need to have class="section" .
I got an issue when using ckeditor which is ckeditor change some css setting.
Original textarea: Original textarea
Using ckeditor: ckeditor
As you can see, the textarea field color become same as my background color.
Also, input text become text-align:center. It should be default as 'left' which same as the original one, doesn't it?
Here is my code,
html head:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Development</title>
<!--Font Awsome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href = "index.css" rel = "stylesheet">
<link href = "post_form.css" rel = "stylesheet">
<!-- Editor for Content Field -->
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
</head>
form part:
<div class="form-group col-xs-12">
<label for="post_content" class="text_side">Content:</label>
<br>
<!-- id for using Editor -->
<textarea class="form-control" name="" rows="10" cols="30" id="editor" required></textarea>
</div>
bottom part:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Javascript-->
<script src="js/bootstrap.min.js"></script>
<!-- CKEditor -->
<script type="text/javascript" src="ckedit.js"></script>
my css:
.text_side
{
float: left;
font-size: 130%;
font-family: Comic Sans MS;
font-style: italic;
}
my javascript(only the ckeditor activate code):
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
Doesn't know why those issues exist, hope can get help.
Just add one more div with id="ckeditor_bar", then put textarea with id="editor" inside div...
https://jsfiddle.net/c298oqhw/17/
Add to css:
#ckeditor_bar
{
background-color: white;
}
I am trying to figure out a way I can have a toggle for my menu icon at the top of my web app. Basically a user can click the menu icon and it opens up an off-canvas panel and the menu icon turns to an close(x) icon giving the user a choice to close the panel. So far I have got the panels to open the way I want them to but I can't get the icons to change and function properly. Here is what I have so far.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<link rel="manifest" href="manifest.json">
<!-- Tags to allow users to save to phone in fullscreen -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- /// -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pwrpg.css">
<title>Hello, world!</title>
</head>
<body>
<header id="header" class="bg-success">
<div class="left-head">
<div class="navbutton"><span class="icon-menu"></span> | Close</div>
</div>
<div class="logo-head">
Logo
</div>
<div class="right-head">
<div class="chatbutton">Open | Close</div>
</div>
</header>
<div id="wrapper">
<div id="sidebar-left">
<ul>
<li>Index</li>
<li>Page</li>
</ul>
</div>
<div id="sidebar-right">right sidebar</div>
<div id="main">
Page 1 Back
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/pwrpg.js"></script>
</body>
</html>
CSS
#header {position: relative;height:50px; display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;}
.left-head, .logo-head, .right-head { -ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;}
.left-head{text-align: left;max-width: 20%;}
.logo-head{text-align: center;max-width:60%;}
.right-head{text-align: right;max-width:20%;}
.navbutton {display:none;}
.chatbutton {display:none;}
.navbutton {display:block;padding: 5px 10px;}
.chatbutton {display:block;padding: 5px 10px;}
.icon-menu {font-size:36px;}
JS
/* Main Navigation on Handheld Devices */
function openNav() {
document.getElementById("sidebar-left").classList.add("transition-in");
document.getElementById("sidebar-right").classList.remove("transition-in");
}
function closeNav() {
document.getElementById("sidebar-left").classList.remove("transition-in");
}
/* Chat Box on Handheld Devices */
function openChat() {
document.getElementById("sidebar-right").classList.add("transition-in");
document.getElementById("sidebar-left").classList.remove("transition-in");
}
function closeChat() {
document.getElementById("sidebar-right").classList.remove("transition-in");
}
window.addEventListener('click', function(e){
if (document.getElementById('main').contains(e.target)){
document.getElementById("sidebar-left").classList.remove("transition-in");
document.getElementById("sidebar-right").classList.remove("transition-in");
} else{
}
})
https://jsfiddle.net/23Lu2k8m/
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.