I would like to develop a website that has a div element which is content editable, and where the div element is able to be dragged around. I found the solution here, but after I coded it, it seems like I am missing some plugin, and I failed to find the plugin or framework that needed to be added into my code. Can anyone please help?
<div contenteditable="true" id="d">
<span>Text to edit</span>
</div>
$("#d").draggable()
.click(function () {
$(this).draggable({
disabled: false
});
}).dblclick(function () {
$(this).draggable({
disabled: true
});
});
Related
I'm using the bootstrap-vue overlay on a page that has long content scrolled via the browser window.
<b-overlay :show="loading">
The overlay correctly covers all of the content, even the part below the viewport, but the overlay's built-in spinner is centered on the content rather than the viewport, so the spinner ends up near or below the bottom of the viewport when the content is long enough.
I've tried custom content via a slot, like this...
<b-overlay :show="loading">
<template v-slot:overlay>
<div style="???" class="text-center">
<p style="???">Make me a spinner and center me on the viewport</p>
<b-button
</div>
</template>
...with dozens of ideas for style="???", including position:absolute with different tops, including top=50vh, including !important strewn around, etc., but the content doesn't budge.
// Note that this snippet doesn't run, because I don't see a way to get
// bootstrap-vue via CDN
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'Hello Vue!',
messages: []
}
},
mounted() {
for (let i=0; i<50; i++)
this.messages.push(i)
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<b-overlay :show="true">
{{ message }}
<!-- long content below extends the overlay size -->
<!-- this moves the spinner down and off the viewport -->
<ul>
<li v-for="m in messages" :key="m">{{m}}</li>
</ul>
</b-overlay>
</div>
I think key to solving this is finding the CSS selector that allows me to change the spinner's position to "fixed" as opposed to "absolute" which seems to be what bootstrap generates.
To get spinner on center of screen you need to make it as direct child of body.
If it is nested it will have restrict area inside immediate parents area.
Try to add that separately or once your DOM ready detach overlay and append to body tag.
I ran into the same issue. Adding this line of CSS on the component resolved it for me:
<style>
.position-absolute {
position: fixed !important;
}
</style>
Note: make sure to not include the scoped keyword in your <style> tag, as this will not work for Bootstrap classes.
I have a working ionicPopup which closes on a time limit. Is it possible to make it close on a single/double tap on anywhere on the screen? I know I can set a close button, but thats not really what I need. I need a simple dismiss method, and a tap on the screen I think is the more practical.
Code:
var errorPopup = $ionicPopup.show({
scope: $scope,
title: 'Unexpected Error',
templateUrl: 'error.html'
});
$timeout(function() {
errorPopup.close();
}, 3000);
}
And another question, I have a bunch of hyperlink tags within my html code. But when I run my app ionic puts a 1px border around each hyperlink. Is it possible to remove somehow the "" tag border. I know it should be a CSS thing, but I don’t want to modify the original ionic style, but would prefer to override that segment with another. Any gurus out there can help?
Solution: (Link)
<div class="col text-center">
<a class="item dash-link" id="link" href="#" onclick="window.open('http://www.example.com', '_blank', 'location=no'); return false;">
<img ng-src="img/icons/example.png" height="80" width="80"></a>
<br>
GMail
</div>
CSS:
#link {
text-decoration:none;
border:0;
outline:none;
}
This is a service to achieve this behavior.
Install
Install it with bower
$ bower install ionic-close-popup
Include the ionic.closePopup module in your app's dependencies:
angular.module('app', ['ionic', 'ionic.closePopup'])
Usage
Register your newly created popup to the closePopupService service :
var alertPopup = $ionicPopup.alert({
title: 'Alert popup',
template: 'Tap outside it to close it'
});
IonicClosePopupService.register(alertPopup);
It seems a very z-index issue, but I am not able to get a solution.
I am trying to get an element in ion-view to come above $ionicBackdrop.
Example Pen: http://codepen.io/ankitjain11/pen/grwZav
JS:
angular.module('myApp', ['ionic'])
.controller('IonicBackdropCtrl', function($scope, $ionicBackdrop, $timeout) {
$scope.show = function() {
$scope.back = true;
$ionicBackdrop.retain();
};
$scope.hide = function () {
$scope.back = false;
$ionicBackdrop.release();
}
});
HTML:
<body ng-controller="IonicBackdropCtrl">
<ion-view>
<ion-content>
<button class="button" ng-click="show()">
Show Backdrop
</button>
<button class="button" ng-click="hide()" ng-show="back">
Hide Backdrop
</button>
</ion-content>
</ion-view>
</body>
Here, the Hide Backdrop button, would come over the backdrop. Once, the backdrop is visible.
Though, my implementation is not as straight forward as the Pen, but still would serve my purpose.
Here is a discussion about same problem. And there is workaround for what you want as described in this discussion. Make the buttons direct child of body and then z-index changing would work. Look here http://codepen.io/anon/pen/EKNvrZ
I’ve been searching for some time and read about ng-repeat creating it’s own scope, but still did not find a solution.
I would like to have a mouseover event fired on each .event-window element. Using ng-mouseover="hoverIn()" doesn’t work. I expect because of trying to call a function that is not part of the scope, but only part of the parent (parent’s) scope, since the call works fine in elements that are not created with ng-repeat.
<div class="day-window" ng-repeat="day in weekObject['days']">
<div ng-repeat="event in day.events track by $index">
<div class="event-window" ng-style="{'height': (event.length)+'px',
'position': 'absolute',
'top':(1565/24)*(event.offsetTop-1) +'px',
'left': getLeftCoords(event.colliding)+'%',
'width': 100/event.colliding+'%',
'background': event.color,
'opacity': 0.8}" ng-mouseover="hoverIn()">
<p>{{event.title}}</p>
<p>[{{event.startTime |date:'H:mm'}} - {{event.endTime |date:'H:mm'}}]</p>
</div>
</div>
Controller
$scope.hoverIn = function() {
alert('hoverIn');
}
The hover in my css doesn’t work as well. Is it overridden by ng-style?
.event-window:hover {
opacity: 1.0 !important;
}
You can find a demo here, but I'm not able to replicate the problem. There must be some error in my code.
I have a div that I want login error messages to go into:
<div id="loginMessage" class="blankBox"> </div>
When there are validation errors, I want the class of this div to be 'errorBox'. When there are no validation errors, I want the css to be 'blankBox'.
And I have the following jQuery validation:
<script>
$(function() {
$("#loginForm").validate({
rules: {
username: "required",
password: "required"
},
messages: {
username: "Please enter a username",
password: "Please enter a password",
},
errorLabelContainer: "#loginMessage",
wrapper: "li",
highlight: function(element) {
$(element).addClass('errorBox');
},
unhighlight: function(element) {
$(element).removeClass('errorBox');
},
});
});
</script>
Unfortunately, what's happening is that the errorBox css is being applied to the input fields. ?!? I cannot get this to work.
Any ideas?
Based on your comment from another answer:
"I want the css to be neutral until errors appear in it, and then reset
to neutral when errors leave it."
I have no idea what "neutral" means, but by default when all errors leave the container, the plugin makes the container "hidden". In other words, all that matters is the style of the container when it contains errors since it's only going to be seen when there are errors inside of it. Otherwise, it's simply hidden. To achieve this initial state, set the style to display: none;. You may also set your other properties for when it will be seen with errors. (refer to the jsFiddle example).
Despite the other answers, errorPlacement is no good in this scenario. It's only used for placing the individual messages. It has nothing to do with the messages inside the error container.
I also removed your highlight and unhighlight callback functions as those are fired off on a field-by-field basis and also would have nothing to do with your error container. (You've also broken their default functionality by over-riding them with your own functions.)
DEMO: http://jsfiddle.net/6dCB7/
jQuery:
$(document).ready(function () {
$('#loginForm').validate({ // initialize the plugin
errorLabelContainer: "#loginMessage",
wrapper: "li",
rules: {
// your rules
}
});
});
HTML:
<div id="loginMessage"></div>
<form id="loginForm">
....
</form>
CSS:
#loginMessage {
display: none;
/* also set the properties for when it displays with errors */
}