Is there any simple way , on how i can drag an drop without coding in visual studio, while using Bootstrap and Asp.net in Visual Studio .
Drag and drop functionality can be implemented in HTML5 compliant browsers, it's important that you're aware of this.So if you have users who are using old browsers this functionality may not work.
Here's a simple example which let's user drag the red <div> and drop it in one of two destination <div> elements:
<head runat="server">
<title></title>
<script type="text/javascript">
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
<style type="text/css">
#dropBox1,#dropBox2 {
width: 200px;
height: 200px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dragA {
width: 200px;
height: 200px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="dropBox1" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dropBox2" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dragA" draggable="true" ondragstart="dragStart(event);">
</div>
</body>
Related
I'm using recaptcha v.2 for my website, but for some reason, it brakes the layout because it won't size the space of the parent box (div).
Here's my code:
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('recaptcha', {
'sitekey' : 'mysitekey'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
and html:
<div class="form-group">
<div id="recaptcha" required=""></div>
</div>
The form-group is already max-width: 100%; but for some reason, the recaptcha doesn't follow that rule:
Here's an example:
https://careercollege.sehc.com/vancouver/programs/hca-diploma-program/.
Any suggestion?
I do this sometimes:
#recaptcha {
overflow: hidden;
border-right: solid 1px lightgray;
}
Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:
HTML
<div class="offer-detail-image-div"><div>
CSS
.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.
You can use ng-style to dynamically change a CSS class property using AngularJS.
Hope this ng-style example will help you to understand the concept at least.
More information for ngStyle
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
ul{
list-style-type: none;
color: #fff;
}
li{
padding: 10px;
text-align: center;
}
.original{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Edit-1
You can change the background-image: URL by following way.
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
You can use ng-class : documation.
If you want to do it in your directive check directive - attr : attr.
You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]
For example:
<div class="offer-detail-image-div"
[ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>
Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.
enter the size in textbox you can see box changes height and width
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" >
<input ng-model="myCol" type="textbox">
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>
</div>
</body>
</html>
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 am working on a popup window using ngDialog. Here is some code:
<style>
.ngdialog.dialogforpopup .ngdialog-content
{
width : 1100px;
margin-top:-100px;
padding-top:10px;
}
</style>
Template
<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px;
padding-right:5px"
</div>
<div class="ngdialog-buttons" style="margin-top:10px">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="cancel()">Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="save()">Save</button>
</div>
Directive
ngDialog.open({
template: 'editor.html',
controller: 'editorController',
className: 'ngdialog-theme-default dialogforpopup',
closeByDocument: false,
disableAnimation: true
});
I have two questions.
How can center my popup on the screen? Currently I am using margin-top:-100px;
Is it possible to size ngDialog automatically to its content?
Thanks
One can center ngdialog by setting "table-like" styles:
.ngdialog{
padding:0 !important;
}
.ngdialog-content {
padding: 0 !important;
background: transparent !important;
display: table; /*table-like styles for vertical centering*/
width: 100% !important;
height:100%;
}
.ngdialog-holder {
display: table-cell;
vertical-align: middle;
width: 100%;
height:100%;
}
.ngdialog-content > .ngdialog-close{
display:none; /*hide original close button*/
}
.my-dialog{
width:400px;
background:#fff;
border:1px solid #000;
margin:0 auto; /*center dialog horizontally*/
position: relative;
}
Also one need to wrap content of dialog with ".ngdialog-holder" and ".my-dialog" blocks. And finally place ".ngdialog-close" button inside of it.
<div class="ngdialog-holder">
<div class="my-dialog">
Dialog content goes here
<div class="ngdialog-close"></div>
</div>
</div>
Here is live example: ngdialog plunk
I downloaded ngDialog package using bower. so ngDilaog related CSS and JS files are in bower_components.
I added the following CSS and JS files to my html page.
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css">
<script src="../bower_components/ng-dialog/js/ngDialog.js"></script>
In my own JS file I am opening the dialog in the following way:
ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false});
here is the html code:
<script type="text/ng-template" id='dialog'>
<div class="ngdialog-message">
Hello!!
</div>
</script>
With the above changes I am able to show the pop up on the center of the screen.
can use of the following class for pop up.
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
I hope this will help!
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.