The media query with min-width 845px and max-width 930px isn't loading up in browser.
Am i Doing anything wrong below ?
#media screen and (max-width:845px){
.btn{
margin-top: 15px !important;
}
}
#media screen and (min-width:845px) and (max-width:930px){
.btn{
margin: auto !important;
}
}
Below is the HTML Code :
Its a simple angularjs page which checks for prime number after a number is entered.
Note: my2.css has nothing.
<html>
<head>
<title>Is It A Prime Number ?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/my.css"/>
<link rel="stylesheet" href="css/my2.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body ng-app="myapp">
<h1 class="display-1" align="center">Angular JS - Prime Number</h1>
<hr/>
<div class="col-md-offset-5 col-md-4 col-lg-4" ng-controller="mycontroller">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="numberinput">Email number</label>
<input type="text" class="form-control" id="numberinput" ng-model="no">
<input type="button" style="margin: 2px" class="btn btn-primary" ng-click="isitprime()" value="Check">
</div>
</form>
<br><br>
<span class="lead" id="spanid" style="color: {{str}}">
{{no1}}{{message}}
</span>
</div>
</body>
</html>
Below is the javascript I am using :
var obj = angular.module('myapp', []);
obj.controller('mycontroller', function ($scope) {
$scope.no = '';
$scope.message = '';
$scope.str = 'black';
$scope.isitprime = function () {
var isPrime = true;
if ($scope.no == 1)
{
isPrime = false;
} else if ($scope.no == 2)
{
isPrime = true;
} else
{
for (var x = 2; x < sqrt($scope.no); x++)
{
if ($scope.no % x == 0)
{
isPrime = false;
}
}
}
if (isPrime)
{
$scope.message = ' is a prime number';
$scope.str = 'green';
} else
{
$scope.message = ' is not a prime number';
$scope.str = 'red';
}
};
});
Below is the screenshot :
Your media query is fine, but your margin: auto !important; will overwrite margin-top: 15px !important;. Look below for a fix.
#media screen and (max-width:845px){
.btn{
color: blue;
margin-top: 15px;
}
}
#media screen and (min-width:845px) and (max-width:930px){
.btn{
color: red;
margin-right: auto;
margin-left: auto;
}
}
<button class="btn">Hello</button>
Related
I currenly utilize this function to randomly fetch an image
<script>
window.onload = choosePic;
var myPix = new Array(
"https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif",
"https://ptgmedia.pearsoncmg.com/images/chap4_9780321996701/elementLinks/04fig15.jpg");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];}
</script>
<style> body {background-image: url(myPicture);}</style>
<!--<img src="https://pt" width="305" height="312" id="myPicture">-->
However it won't load into the bg as part of the css.
Got it:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#random{
width: 100%;
height: 100%;
//border: 1px solid black;
background-image: url('');
//background-position: center center;
//background-size: cover;
//background-repeat: no-repeat;}
</style>
<body>
<body onload="randombg()"><div id="random" ></div>
<script>
function randombg(){
var random= Math.floor(Math.random() * 6) + 0;
var bigSize = ["url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
"url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')"];
document.getElementById("random").style.backgroundImage=bigSize[random];}</script>
Option #2
<style>
.random_bg{
height: 100%;
width: 100%;
position: relative;}
</style>
<section><div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<div class="random_bg"></div>
</section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script>function pic() {var bgm = ['https://i.ibb.co/9mxH8pL/Castillo.gif',
'https://i.ibb.co/fkK7bK2/Elec-Tower.gif',
'https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif',
'https://i.ibb.co/3C8pd4h/Standart-Comp-EXE3.gif',
'https://i.ibb.co/LJKnfhh/Scilab.gif'];
$('.random_bg').css({
'background' : 'url('+ bgm[Math.floor(Math.random()*3)] + ') repeat',
'background-position' : '100%',
'background-size' : 'repeat'});}pic();</script>
Option #3
<style type="text/css">
#banner {
height:100%;
background:transparent url(https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif) repeat cover cover;
}
</style>
<script type="text/javascript">
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")";
}
</script>
</head>
<body >
<div id="banner"></div>
</body>
I have a list of messages, when the user scroll to the top of the list, the app loads more messages. This part is working fine.
But the scroll position is kept unchanged, it's not scrolling to the previously shown element, the scroll position is always on top (so we could load more messages again).
This behavior happens only when user has scrolled to the very top. If we load more message but user has scroll down even a very little bit, it keeps the same position.
Is there a css solution ?
Or should I programmatically scroll down user to the previous message ?
Or should I programmatically scroll down a very little bit juste before adding messages to the list ?
function addElement(id) {
const $element = $($('#TemplateItem').html().replace('{id}', id));
$('.list').prepend($element);
}
var loadCount = 0;
function loadMore() {
loadCount++;
for(let i=0; i < 5; i++) {
addElement(loadCount + '-' + (i+1));
}
}
$('button').click(() => {
loadMore();
});
loadMore();
.list {
width: 50%;
height: 20rem;
background: yellow;
overflow-y: auto;
}
.item {
background: lime;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn btn-primary mt-3" type="button">
Load more
</button>
<div class="list mt-3 p-2"></div>
<template id="TemplateItem">
<div class="item mt-1 p-2">I am fantastic item #{id} !</div>
</template>
</div>
Refering to this answer, I have created my own solution.
Once the nodes has been added, update the scroll top of the container to the last node that existed before adding the new nodes.
Working example.
function addElement(id) {
const $element = $($('#TemplateItem').html().replace('{id}', id));
$element[0].id = `list-node-${id}`;
$('.list').prepend($element);
}
var loadCount = 0;
var incrementer = 5;
function loadMore() {
loadCount++;
for (let i = 0; i < incrementer; i++) {
addElement(loadCount + '-' + (i + 1));
}
if (loadCount > 1) {
initialNode = $(`#list-node-${loadCount - 1}-${incrementer}`);
$('#wrapper').animate({
scrollTop: initialNode.offset().top - $('#wrapper').offset().top + $('#wrapper').scrollTop()
}, 1000);
}
}
$('button').click(() => {
loadMore();
});
loadMore();
.list {
width: 50%;
height: 20rem;
background: yellow;
overflow-y: auto;
}
.item {
background: lime;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn btn-primary mt-3" type="button">
Load more
</button>
<div class="list mt-3 p-2" id="wrapper"></div>
<template id="TemplateItem">
<div class="item mt-1 p-2">I am fantastic item #{id} !</div>
</template>
</div>
First of all: a mayor thanks to anyone who answers to these type of questions. You have an immense influence to newbie coders who try to make their first solo projects. Much love!
To the point now, I've tried to make my tiny project's Bootstrap layout to behave the way I want for days now, and am admitting defeat. It's a timetable generator for a magic school, and the timetable appears if you click on a year and a subject. It appears on the right side (via JS), but on mobile width it moves underneath instead of staying on the right side.
Both columns are in a container and I've set each of their classes col-xs-6 col-sm-6 col-md-6, which by my logic should invade half of the container regardless of device width, but the right side still behaves as if it needs all 12 slots on mobile and moves underneath.
Issue illustrated with a picture:
How can I modify the Bootstrap column/row behaviour so that regardless of device width, the left buttons and right side with timetable would remain next to each other?
Here is my codepen: and snippet below:
const ari = "Arithmancy";
const alc = "Alchemy";
const md = "Magical Defence";
const herb = "Herbology";
const invo = "Invocation";
const run = "Runic Magic";
const cs = "Conflux Studies";
const beast = "Beastology";
const mm = "Mind Magic";
const mt = "Magical Theory";
const rm = "Ritual Magic";
const tech = "Technomancy";
//function to show #classResult. Couldn't figure out how to make a conditional to make it appear once year and path are chosen, so injecting it manually toe very timetable conditional instead
function show() {
document.querySelector("#intro").style.display = "none";
document.querySelector("#classResult").style.visibility = "visible";
}
$(document).ready(function () {
$('input[type="radio"]').on("change", function () {
//making chosen radio options to variables
const $year = $('input[name="year"]:checked');
const $path = $('input[name="path"]:checked');
//updating html in #classResult
//JUNIOR
if ($year.val() == "junior" && $path.val() == "artificer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(md);
$("#lesson2").html(ari);
$("#lesson3").html(mt);
$("#lesson4").html(tech);
$("#lesson5").html(run);
$("#lesson6").html(cs);
} else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(invo);
$("#lesson2").html(ari);
$("#lesson3").html(mt);
$("#lesson4").html(rm);
$("#lesson5").html(run);
$("#lesson6").html(cs);
} else if ($year.val() == "junior" && $path.val() == "crypto") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(invo);
$("#lesson2").html(beast);
$("#lesson3").html(herb);
$("#lesson4").html(rm);
$("#lesson5").html(mm);
$("#lesson6").html(alc);
} else if ($year.val() == "junior" && $path.val() == "healer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(md);
$("#lesson2").html(beast);
$("#lesson3").html(herb);
$("#lesson4").html(rm);
$("#lesson5").html(mm);
$("#lesson6").html(alc);
} else if ($year.val() == "junior" && $path.val() == "guardian") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(md);
$("#lesson2").html(beast);
$("#lesson3").html(mt);
$("#lesson4").html(tech);
$("#lesson5").html(mm);
$("#lesson6").html(cs);
//SOPHOMORE
} else if ($year.val() == "sophomore" && $path.val() == "artificer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(run);
$("#lesson2").html(cs);
$("#lesson3").html(md);
$("#lesson4").html(ari);
$("#lesson5").html(mt);
$("#lesson6").html(tech);
} else if ($year.val() == "sophomore" && $path.val() == "cursebreaker") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(run);
$("#lesson2").html(cs);
$("#lesson3").html(invo);
$("#lesson4").html(ari);
$("#lesson5").html(mt);
$("#lesson6").html(rm);
} else if ($year.val() == "sophomore" && $path.val() == "crypto") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mm);
$("#lesson2").html(alc);
$("#lesson3").html(invo);
$("#lesson4").html(beast);
$("#lesson5").html(herb);
$("#lesson6").html(rm);
} else if ($year.val() == "sophomore" && $path.val() == "healer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mm);
$("#lesson2").html(alc);
$("#lesson3").html(md);
$("#lesson4").html(beast);
$("#lesson5").html(herb);
$("#lesson6").html(rm);
} else if ($year.val() == "sophomore" && $path.val() == "guardian") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mm);
$("#lesson2").html(cs);
$("#lesson3").html(md);
$("#lesson4").html(beast);
$("#lesson5").html(mt);
$("#lesson6").html(tech);
//SENIOR
} else if ($year.val() == "senior" && $path.val() == "artificer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mt);
$("#lesson2").html(tech);
$("#lesson3").html(run);
$("#lesson4").html(cs);
$("#lesson5").html(md);
$("#lesson6").html(ari);
} else if ($year.val() == "senior" && $path.val() == "cursebreaker") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mt);
$("#lesson2").html(rm);
$("#lesson3").html(run);
$("#lesson4").html(cs);
$("#lesson5").html(invo);
$("#lesson6").html(ari);
} else if ($year.val() == "senior" && $path.val() == "crypto") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(herb);
$("#lesson2").html(rm);
$("#lesson3").html(mm);
$("#lesson4").html(alc);
$("#lesson5").html(invo);
$("#lesson6").html(beast);
} else if ($year.val() == "senior" && $path.val() == "healer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(herb);
$("#lesson2").html(rm);
$("#lesson3").html(mm);
$("#lesson4").html(alc);
$("#lesson5").html(md);
$("#lesson6").html(beast);
} else if ($year.val() == "senior" && $path.val() == "guardian") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mt);
$("#lesson2").html(tech);
$("#lesson3").html(mm);
$("#lesson4").html(cs);
$("#lesson5").html(md);
$("#lesson6").html(beast);
}
});
});
body {
background-image: url(https://t-ec.bstatic.com/images/hotel/max1024x768/106/106458589.jpg);
background-size: cover;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
font-family: 'Poppins', serif;
}
/* background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );
}*/
.container.main {
width: 60%;
min-width: 300px;
background-color: #fffef5;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
padding-bottom: 2%;
}
h1 {
font-size: 4em;
padding-top: 2%;
text-align: center;
/* color:white !important; */
font-family: 'Cinzel', serif;
}
#classResult {
visibility: hidden;
padding: 20px 0px;
/* background-color: rgba(255,255,255, 0.7); */
flex: 50%;
text-align: center;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 1.1rem;
}
#intro {
visibility: visible !important;
}
.time {
color: gray;
font-size: 0.8rem;
}
#lunch-wrapper .time {
padding-top: 5%;
}
.lesson {
margin-bottom: 6%;
margin-top: -3%;
font-weight: 500;
color: rgb(52, 58, 85);
}
#lunch-wrapper {
border: 1px rgba(195, 185, 185, 0.445) solid;
border-radius: 15px;
margin-right: 10%;
margin-bottom: 6%;
}
.btn:focus {
background-color: #8D69AD;
}
.btn {
width: 150px !important;
}
.btn-secondary:not(:disabled):not(.disabled).active {
background-color: #8D69AD !important;
}
/* #classResult{
margin-top: 5%;
} */
/* making content 100% wide on mobile */
#media only screen and (max-width: 720px) {
.container.main {
width: 100%;
}
.lesson {
margin-bottom: 3%;
margin-top: -1%;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- My CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="favicon.png">
<link href="https://fonts.googleapis.com/css?family=Cinzel|ZCOOL+XiaoWei|Poppins" rel="stylesheet">
<title>Czocha Timetable</title>
</head>
<body>
<div class="container main">
<h1>Czocha Timetable</h1>
<div class="col-container">
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
<div class="year-sample" style="background: none">
<p>Select your year:</p>
<div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary rounded">
<input type="radio" name="year" id="junior" value="junior"> Junior
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="year" id="senior" value="senior"> Senior
</label>
</div>
</div>
<div class="path-sample" style="background: none">
<p>Select your path:</p>
<div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary rounded">
<input type="radio" name="path" id="artificer" value="artificer"> Artificer
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="healer" value="healer"> Healer
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="guardian" value="guardian"> Guardian
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
</label>
</div>
</div>
</div>
<!-- Timetable display #classResult -->
<div class="col-md-6 col-sm-6 col-xs-6" id="classResult">
<div id="intro">Summon your classes!</div>
<div class="time">9:15 - 10:00</div>
<div class="lesson" id="lesson1"></div>
<div class="time">10:15 - 11:00</div>
<div class="lesson" id="lesson2"></div>
<div class="time">11:15 - 12:00</div>
<div class="lesson" id="lesson3"></div>
<div id="lunch-wrapper">
<div class="time">12:00 - 14:00</div>
<div class="lesson">DAY BREAK</div>
</div>
<div class="time">14:15 - 15:00</div>
<div class="lesson" id="lesson4"></div>
<div class="time">15:15 - 16:00</div>
<div class="lesson" id="lesson5"></div>
<div class="time">16:15 - 17:00</div>
<div class="lesson" id="lesson6"></div>
</div>
</div>
</div>
<!-- My JS -->
<script src="javascript.js"></script>
<!-- jQuery & 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<!-- ends content-->
</div>
</body>
</html>
Many thanks for anyone who takes time our of their day to look at this larping nerd's tiny project efforts!
It seems that "col-xs-6" dosen't exist in Bootstrap 4.
Instead of "col-xs-6" you have to put "col-6".
Here are the grid options from Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
This code should work for your columns.
<div class="col-6 col-md-6 col-sm-6">
It is also enough to write this code:
<div class="col-6">
I am using CKEditor 4.5 in classic mode (Iframe) with sharedspace plugin.
ckeditor4 automatically create a div (#cke_mytextarea1) just below each textarea and inside that div, a iframe is created too.
The css for this div is also created automatically.
How do i append a css class to div, using ckeditor API?
I try use contentsCss configuration http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
but the css is applied on iframe and not div
Example:
From this code:
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true"></textarea>
<textarea id="mytextarea2" data-ckenable="true"></textarea>
<textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>
and after i start ckeditor instances, result in this generated code:
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true" style="visibility: hidden; display: none;"></textarea>
<!-- i need append css class to this ("#cke_mytextarea1") div using ckeditor API -->
<div id="cke_mytextarea1" class="cke_1 cke cke_reset cke_chrome cke_editor_mytextarea1 cke_ltr cke_browser_webkit"
dir="ltr" lang="pt-br" role="application" aria-labelledby="cke_mytextarea1_arialbl"><span
id="cke_mytextarea1_arialbl" class="cke_voice_label">Editor de Rich Text, mytextarea1</span>
<div class="cke_inner cke_reset" role="presentation">
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span
id="cke_101" class="cke_voice_label">Pressione ALT+0 para ajuda</span>
<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Editor de Rich Text, mytextarea1"
aria-describedby="cke_101" tabindex="0" allowtransparency="true"
style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
<!-- ... -->
</form>
Full sample code preview here: http://jsfiddle.net/luzfcb/ymoc2r1w/2/
Same code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-loading-bar.css"
rel="stylesheet">
<style>
.body {
background: rgb(204, 204, 204);
}
.maindiv {
/*
the content is hidden by default,
and will be shown only after
completed page load and
finalized ckeditor startup
*/
display: none;
}
.content-section {
margin-bottom: 100px;
}
article {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
padding: 30px;
font-size: 11pt;
line-height: 22pt;
}
article form {
height: 100%;
}
#media print {
body, article[size="A4"] {
margin: 0;
box-shadow: 0;
background: transparent;
}
.cke_pagebreak {
display: block;
page-break-before: always;
}
.content-section {
margin-bottom: 0;
padding-top: 0;
}
.no-print {
display: none;
}
}
</style>
</head>
<body class="body">
<div class="maindiv">
<div id="top-bar" class="navbar-fixed-top no-print">
<div id="top-ck-toolbar">
<!-- ckeditor top toolbar is rendered here -->
</div>
</div>
<div id="content-section" class="content-section">
<article>
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true"></textarea>
<textarea id="mytextarea2" data-ckenable="true"></textarea>
<textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>
</article>
</div>
<div id="bottom-bar" class="navbar-fixed-bottom no-print">
<div id="bottom-ck-toolbar">
<!-- ckeditor bottom toolbar is rendered here -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.2/full-all/ckeditor.js"></script>
<script>
//get the id's of elements that contains "data-ckenable" attribute
function get_ckenable_element_ids() {
return $("[data-ckenable]").map(function () {
return this.id;
}).get();
}
var ckenable_element_ids_list = get_ckenable_element_ids();
var ckeditor_config = {
extraPlugins: [
"sharedspace",
].join(),
sharedSpaces: {
top: "top-ck-toolbar",
bottom: "bottom-ck-toolbar"
}
};
//start ckeditor
ckenable_element_ids_list.map(function (id_element) {
CKEDITOR.replace(id_element, ckeditor_config);
});
function fix_content_padding() {
var top_menu = $('#top-ck-toolbar');
var content_div = $('#content-section');
var current_top_menu_height = parseInt(top_menu.css('height').replace(/[^-\d\.]/g, ''));
var new_padding_value_to_content = "".concat(current_top_menu_height + 130).concat("px");
content_div.css('padding-top', new_padding_value_to_content);
console.log("fixxxx: ", new_padding_value_to_content);
}
window.addEventListener('resize.fix_content_padding', fix_content_padding, false);
var paceOptions = {
"ajax": false,
"restartOnRequestAfter": false,
"document": false
};
window.paceOptions = paceOptions;
Pace.on('hide', function () {
$(".maindiv").fadeIn("fast");
fix_content_padding();
});
</script>
</body>
</html>
Are you using it with Django or directly as JS component?
Because I use CKEditor with Django (django-ckeditor==4.5.1) and it's working very well.
Ping me if your case is using Django and I could give more details how it's working so far.
I want to make something like iGoogle in WordPress, in which I can drag and drop the widgets. How could that be done with HTML 5?
Take a look at the following link:
http://ljouanneau.com/lab/html5/demodragdrop.html
Here is the page code for the example:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>HTML5 Drag and drop demonstration</title>
<style type="text/css">
#boxA, #boxB, #boxC {
float:left; width:200px; height:200px; padding:10px; margin:10px;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }
#boxC { background-color: yellow; }
#drag, #drag2, #drag3 {
width:50px; height:50px; padding:5px; margin:5px;
-moz-user-select:none;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
#drag3 { background-color: purple; border:3px brown solid;}
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
//ev.dataTransfer.dropEffect='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
var idelt = ev.dataTransfer.getData("Text");
return true;
}
function dragOver(ev) {
var idelt = ev.dataTransfer.getData("Text");
var id = ev.target.getAttribute('id');
if( (id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2'))
return false;
else if( id =='boxC' && idelt == 'drag3')
return false;
else
return true;
}
function dragEnd(ev) {
ev.dataTransfer.clearData("Text");
return true
}
function dragDrop(ev) {
var idelt = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(idelt));
ev.stopPropagation();
return false; // return false so the event will not be propagated to the browser
}
</script>
</head>
<body>
<h1>Drag and drop demo in a HTML document, using the HTML5 drag and drop API</h1>
<div> The red box and the orange box can be dragged and dropped between
the blue and the green boxes.
The purple box can be dragged and dropped only to the yellow box.
</div>
<div id="boxA"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
<div id="drag" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
<div id="drag2" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
<div id="drag3" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
</div>
<div id="boxB"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
<div id="boxC"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
<div style="clear:both">Example created by Laurent Jouanneau.</div>
</body>
</html>