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>
Related
I cannot get the image to show over my webcam, I am a total newbie here so I have no clue what I am doing to get it positioned properly. I dont know where to put the div reference in the html and I don't understand positioning. The webcam starts with a button, then captures an image. I want some way of centering an overlay on the preview before the capture is taken.
I have included the html and the css at the bottom
Thank you in advance!!
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Name of your awesome camera app -->
<title>Measurement</title>
<!-- Link to your main style sheet-->
<link rel="stylesheet" href="StyleSheet1.css">
</head>
<body>
<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
<div class="wrap">
<video id="video"></video>
<div class="overlay">
<img src="https://i.imgur.com/A9J4iWz.png" alt="">
</div>
</div>
<script>
let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
camera_button.addEventListener('click', async function () {
let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
});
click_button.addEventListener('click', function () {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
let image_data_url = canvas.toDataURL('image/jpeg');
// data url of the image
console.log(image_data_url);
});
</script>
</body>
</html>
.wrap {
position: relative;
}
video {
width: 320px;
height: 240px;
z-index: 1;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
z-index: 2;
text-align: center
}
img {
display: inline-block;
}
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>
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.
Is there a way to change color off a parent when an input gets focus
Check out the demo. I want the div to be red instead of blue when input has focus.
Demo
Here's a bit of a cheaty way of doing it using CSS only...
DEMO: http://jsfiddle.net/gvee/6fRUd/
HTML
<div>
<input type="text" />
</div>
CSS
div {
overflow: hidden;
background-color: blue;
}
div * {
position: relative;
z-index: 10;
}
div input[type=text]:focus {
background-color: red;
box-shadow: 0 0 10000px 10000px lime;
z-index: 5;
}
I think you can't do that in pure CSS, but you can use Javascript:
http://jsbin.com/uvon/1/edit?html,js,output
var input = document.getElementById('input');
var div = document.getElementById('div');
input.onfocus = function(){
input.style.backgroundColor = "red";
div.style.backgroundColor = "red";
}
input.onblur = function(){
input.style.backgroundColor = "white";
div.style.backgroundColor = "blue";
}
A jQuery approach would be using .parent()
<script>$("p").parent(".selected").css("background", "yellow");</script>
http://api.jquery.com/parent/
CSS Only Approach
Fiddle
http://jsfiddle.net/GT5sT/
CSS
input {
position: relative;
z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
position: relative;
background-color: blue;
}
div.background-hack {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
HTML
<div>
<input />
<div class="background-hack"></div>
</div>
You will have to use javascript.
Here is a short script using jquery.
$('#input').focus(function(){
$('#box').css('background-color','red');
});
This is assuming your input has an id of input and blue box has an id of box.
javascript also works here look at the code below,it is more flexible than just using css
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById('box').style.background="red";
}
</script>
<title>JS Bin</title>
</head>
<body>
<div id="box" style="background-color:blue">
<input onfocus="myFunction()" />
</div>
</body>
</html>
i created dynamically a table with 3 rows not by using table tag, .... i need to find these rows in scripting...in button click, if any of these rows is empty then need to generate an alert message like enter current row..... how can i do this...
please suggest me...
I have created a very simplistic example. You can modify it to suite your situation.
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
var button = document.getElementById('row_check');
var tableDiv = document.getElementById('container');
var tableHTML = "<div id='mytable'><div id='row_one'>I am not empty</div><div id='row_two'></div><div id='row_three'></div></div>"
tableDiv.innerHTML = tableHTML;
button.onclick = function(){
if(document.getElementById('row_one').innerHTML == '') alert('Row 1 empty');
if(document.getElementById('row_two').innerHTML == '') alert('Row 2 empty');
if(document.getElementById('row_three').innerHTML == '') alert('Row 3 empty');
}
}
</script>
<style type="text/css">
#mytable {
width: 305px;
height: auto;
border: 1px solid black;
padding:5px;
margin-top:10px;
}
#mytable div{
width: 290px;
height: 100px;
margin:5px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="Check Rows" id="row_check"/>
<div id="container">
</div>
</body>
</html>