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>
Related
I have a working preloader that shows a lottie animation when the page is loaded. But I want it to show up only one per session. So that it doesn't show up every time someone opens or loads the page.
Current code:
<style>
.hidden {
display: none;
}
.visuallyhidden {
opacity: 0;
}
</style>
<div id="preloader" class="preloader-container">
<div class="animation">
<div class="player">
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<lottie-player src="https://lottie.host/9fd6c66b-4984-4b99-a7d6-b44856d4c4de/1ZusfoGYH2.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>
<a id="skip">Skip</a>
</div>
</div>
<script>
let box = document.querySelector("#preloader"),
btn = document.querySelector("#skip");
function fadeOut() {
box.classList.add("visuallyhidden");
box.addEventListener(
"transitionend",
function (e) {
box.classList.add("hidden");
},
{
capture: false,
once: true,
passive: false
}
);
}
btn.addEventListener("click", fadeOut, false);
setTimeout(fadeOut, 6000);
</script>
I have div in that there is a textbox.before textbox, there is some text.
on keyup of the textbox, list suggestions are popping up. What I want is this suggestion list should be based on the position of the textbox. like if the text is extreme right then the list should pop up just below that textbox not the way its currently popping up.
Here is code snippet of it
function getval()
{
textval = document.getElementById("srval").value;
if(textval.length>0)
{
document.getElementById("list").style.display="block";
}
else
{
document.getElementById("list").style.display="none";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div style="border:1px red solid;width:250px;height:20px">
Coffeee Teat MIlk
<input type="text" id="srval" onkeyup="getval()" style="position:absolute">
<ul style="display:none;position:relative;top:5px" id="list">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</body>
</html>
I hope this helps
function getval() {
textval = document.getElementById("srval").value;
if (textval.length > 0) {
document.getElementById("list").style.display = "block";
} else {
document.getElementById("list").style.display = "none";
}
}
label {
border: 1px red solid;
width: 250px;
height: 20px
}
input {
position: absolute
}
#list {
display: none;
}
#list,
#list li {
position: relative;
left: 50px
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<form>
<label style="border:1px red solid;width:250px;height:20px">
Coffeee Teat Milk</label>
<input type="text" id="srval" onkeyup="getval()" style="">
<ul id="list">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</form>
</body>
</html>
I am trying to control the attribute value of webcomponent from polymer paper input.
I am able to change values with two binding of paper input but not able to control the attribute value
I created below example and trying to change resizable-panels attribute to vertical
<resizable-panels [[text]]>
to
<resizable-panels vertical>
using paper-input
Codepen code for reference
https://codepen.io/nagasai/pen/QMjjQw
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="resizable-panels/resizable-panels.html">
<link rel="import" href="paper-input/paper-input.html"
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
.p1 { background-color: #673AB7; }
.p2 { background-color: #E91E63; }
.p3 { background-color: #00BCD4; }
.p4 { background-color: #FB8C00; }
.p5 { background-color: #607D8B; }
.p6 { background-color: #4CAF50; }
</style>
<paper-input value="{{text::input}}"></paper-input>
<resizable-panels id="rp-2">
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p2">Second panel</div>
</resizable-panels>
<br>
<resizable-panels [[text]]>
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p1">Second panel</div>
<div class="panel p1">Third panel</div>
</resizable-panels>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
Thats not how its supposed to work, you cant just slap a tag like and expect this to work - since this is not server side building - you are not supposed to treat your templates like this.
Here is a working demo: https://codepen.io/anon/pen/rzOgQX
You should be toggling a boolean property vertical between true/false to archieve what you want. Hope this helps.
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 have realized show/hide function in css. But it's not what i need. i want to expand the content layer by layer and hide them all in one click. And now i can't expand layer by layer.
Can you help me with that? Thanks a lot. :)
here is the code and it's tested:
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
<style type="text/css">
#main{
position:relative;
top:20px;
left:20px;
width:200px;
background: lightblue;
}
#hidden {
position:relative;
top:0px;
left:280px;
width:200px;
background: lightgrey;
display: none;
}
#hidden2 {
position:relative;
top:-20px;
left:580px;
width:200px;
background: lightgreen;
display: none;
}
#hidden3 {
position:relative;
top:100px;
left:0px;
width:200px;
background: lightpink;
display: none;
}
</style>
<div id="main" onclick="toggle('hidden');toggle('hidden2');toggle('hidden3');">
1
</div>
<div id="hidden" onclick="toggle('hidden2');toggle('hidden3');">
1.1
</div>
<div id="hidden2"onclick="toggle('hidden3');">
1.1.1
</div>
<div id="hidden3">
1.1.1.1
</div>
Have you considered using a plugin from a framework like jQuery, Mootools, or ExtJS instead of trying to reinvent the wheel?
It looks like you want a treeviewer.
btw, you are using javascript, it's not only CSS... please tag javascript as well.