I'm trying to modify an OpenLayers example to add my custom button but I can't click this button. I've tryied everything but it is as if the click event couldn't be attached to the button....Where is the problem? I'm getting mad. Any help will be appreciated! Here is my code (sorry to post a full example but I can't shorten it):
<html>
<head>
<title>OpenLayers Editing Toolbar Example</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<style type="text/css">
#btnHiLite {
top: 50%;
left: 3%;
height: 10px;
z-index: 3000;
background: url('http://s11.postimg.org/s3u0s4pjj/marker.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function rotate_image() {
alert("Button clicked!");
}
function init(){
var btnHiLite = new OpenLayers.Control.Button({
title: "click it to rotate image 90º",
id: 'btnHiLite',
trigger: rotate_image,
type: OpenLayers.Control.TYPE_BUTTON
});
var graphic = new OpenLayers.Layer.Image(
'Document Page',
"http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
new OpenLayers.Bounds(-250, -100, 250, 100),
new OpenLayers.Size(250, 100)
);
map = new OpenLayers.Map( 'map', {
controls: [new OpenLayers.Control.PanZoom(), btnHiLite]
});
map.addLayers([graphic]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Editing Toolbar Example</h1>
<div id="tags">
digitizing, point, line, linestring, polygon, editing
</div>
<p id="shortdesc">
Demonstrate polygon, polyline and point creation and editing tools.
</p>
<div id="panel"></div>
<div id="map" class="smallmap"></div>
</body>
</html>
Ok...I answer my own question. I basically needed:
1.- Create a panel to add buttons in it
var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});
2.- Add the button to the panel
panel.addControls([btnHiLite]);
3.- Add the panel to the map
map = new OpenLayers.Map( 'map', {
controls: [
new OpenLayers.Control.PanZoom(),
panel]
});
Here is the right code: jsfiddle.net/gilan/wR4Ee
I don't like the OpenLayer's own control framework. It's way much simpler to use your own, written in plain html and jquery.
For example: http://jsfiddle.net/wR4Ee/111/
<div id="map"></div>
<div id="panel"><button id="testButton" class="btn btn-primary">TEST BUTTON</button></div>
$('#testButton').click(function(){
console.log('click');
map.getView().setZoom(map.getView().getZoom()+1);
});
Related
I am very new to CSS.
I was working on this little chat site, but I noticed that the latest message was always missing. It seems my message box cuts off the last message but I can't fix it.
I tried changing the height value of the messages div but that didn't help.
So, this code gives you my HTML and the styling (in the <style> tag) but I really don't know what to do now. I don't want to resize the box or it'll look ugly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/socket.io/socket.io.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: 0.5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages div {
padding: 5px 10px;
}
#messages div:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body>
<h1>Hi</h1>
<form id="msgForm" action="">
<input type="text" name="msg">
<button>Send</button>
</form>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<div id="messages">
</div>
<script defer>
const socket = io("localhost:3000")
const messages = document.getElementById('messages')
const msgForm = document.getElementById('msgForm')
const nick = document.getElementById('lolz')
socket.on('message', (nick, msg) => {
appendMessages(nick, msg)
})
socket.on('output-messages', data => {
console.log(data)
if (data.length) {
data.forEach(message => {
appendMessages(message.nick, message.msg)
})
}
})
msgForm.addEventListener('submit', e => {
e.preventDefault()
if (msgForm && msgForm.msg && msgForm.msg.value && nick && nick.value) {
socket.emit('chatmessage', nick.value, msgForm.msg.value)
}
msgForm.msg.value = ''
})
function appendMessages(nick, message) {
const html = `<div><strong>${nick}</strong>: ${message}</div>`
messages.innerHTML += html
}
</script>
</body>
</html>
Here, you can see what it looks like:
It's supposed to show this message:
"e: I hate this box!"
The problem is the position: fixed property for the form element.
Quoting from MDN
fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout.
Basically it means that the element is in a different layer, so it will overlap the rest of the content on the page and can possibly hide elements under it.
What you want is position: sticky.
I suggest you to read more on the great MDN documentation site:
CSS: position
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Sticky footers
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
The stacking context
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
I've been trying to remove the outer borders of my calendar, however the best I've managed is to get all the borders removed (or just horizontal/vertical borders removed). I only need the outer borders gone (the picture shows what I need gone; the bottom of the calendar isn't in the screenshot https://i.stack.imgur.com/hXAYP.png). So far, I've spent a long in chrome dev tools trying to figure out exactly where I can do this, but I cannot seem to find a solution.
For reference, I'm using a css file to override the fullcalendar css. I don't think my code is necessary, as I can't even find the right element that would only remove the outer borders. I am using border-style: none !important; I have tried border: 0px !important; as well.
The element I am looking for is probably in the cdn for the css aspect of fullcalendarv5: https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css
EDIT: Code
cal.html sample:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
events: '/event_view/',
headerToolbar: {
left: 'dayGridMonth,timeGridWeek,timeGridDay, listWeek',
},
height:'97vh',
});
calendar.render();
});
</script>
{% load static %}
<link rel="stylesheet" href="{% static 'calendar_app/cal.css' %}" type="text/css">
<!-- Event making stuff; not relevant-->
<div class="content-calendar" id="content", name="content-calendar">
<div id='calendar'></div>
</div>
cal.css sample:
.fc {
color: green;
}
./*THE ELEMENT I CURRENTLY CANNOT FIND WOULD GO HERE*/ {
border-style: none !important;
}
You can simply use border:none on this .fc-scrollgrid class to remove border from top and left
To remove border from the side we need to use last-of-type pseudo-class to only remove border-right from td using .fc-scrollgrid td:last-of-type
Working Fiddle Demo: https://jsfiddle.net/alwayshelping/hte2pz0f/
Run snippet below to see it working. There are no borders as exactly as you wanted in the picture.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
/*events: '/event_view/',*/
headerToolbar: {
left: 'dayGridMonth,timeGridWeek,timeGridDay, listWeek',
},
height: '97vh',
});
calendar.render();
});
.fc-scrollgrid {
border: none !important;
}
.fc-scrollgrid td:last-of-type {
border-right: none !important;
}
<!-- Event making stuff; not relevant-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.js"></script>
<div class="content-calendar" id="content" , name="content-calendar">
<div id='calendar'></div>
</div>
use this scss styles (hide all out borders)
.calendar-wrapper {
.fc-scrollgrid {
border-color: transparent !important;
}
.fc-scrollgrid td:last-of-type {
border-right-color: transparent !important;
}
.fc-scrollgrid-section.fc-scrollgrid-section-body td[role='presentation'] {
border-bottom-color: transparent !important;
}
[role='row']:last-of-type td {
border-bottom-color: transparent !important;
}
th[role='presentation'] {
border-right-color: transparent !important;
}
}
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>
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'm using wow.js, and it works only on page load and one time when scroll,
I would like it to trigger each time when I scroll to the div position and not only once when page is load.
<div class="wow rotateIn animated" data-wow-delay="0.3s" data-wow-duration="0.5s"></div>
Try this
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
.box {
display: block;
width: 200px;
background: rgba(255, 255, 255, 0.7);
color: #eb3980;
font-family: "Comic Sans MS", "Comic Sans";
border: 3px dashed pink;
margin: 30px auto;
text-align: center;
}
.doge {
display: block;
width: 200px;
height: 200px;
position: fixed;
bottom: 10px;
right: 10px;
background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}
body {
background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<div class="box">
<h1 class="wow slideInLeft">Hello</h1>
<h1 class="wow slideInRight">World</h1>
<h2>🤗 🌎 </h2>
</div>
<div class="doge wow bounceIn"></div>
<!-- First load wow.js and other libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!-- scrollSpy plugin see https://github.com/thesmart/jquery-scrollspy -->
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<!-- Modify after -->
<script>
</script>
WowJs not provide functionality every time scroll animation is apply. In WowJs Animation apply once's when first time you scroll page. if you want to apply that type of functionality instead of WowJs you can used ScrollRevealJs library. ScrollRevealJs have reset option that provide every time you scroll page animation is apply.
Refer this link :- http://scrollrevealjs.org/
try this
window.addEventListener('scroll', function(e) {
if( $(window).scrollTop() <= 50) {
$('.wow').removeClass('animated');
$('.wow').removeAttr('style');
new WOW().init();
}
});