I added a custom style in my variables.scss to change my alert but I'm not sure how I can apply this. I already saw this question but it did not help me. Do I have to put this in my typescript? If yes, how?
my variabless.scss
.alert-wrapper {
border-radius: 13px;
overflow: hidden;
max-width: 270px;
background-color: #f8f8f8;
-webkit-box-shadow: none;
box-shadow: none;
}
my html calling the alert
<button ion-button color="babydanger" (click)="showCheckbox()">SIGN UP</button>
my .ts
showCheckbox() {
let alert = this.alertCtrl.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
});
alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
});
Related
Sice i managed to implement Fullcalendar's functionality into my Django app, I have another question.
Is it possible to render more than one Fullcalendar into my html page, depending of how many Calendars are made inside the database. And, i need them to be rendered HORIZONTALLY.
I suppose that i need to change my div's id to 'calendar2' for example. But what should i change inside the initializer?
This is full script and style from my calendar.
<script>
document.addEventListener('DOMContentLoaded', function () {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
minTime: "07:00:00",
maxTime: "22:00:00",
businessHours: {
startTime: '08:00', // a start time (10am in this example)
endTime: '21:00', // an end time (6pm in this example)
},
height: 'auto',
locale: 'sr',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
defaultView: 'timeGridDay',
header: {
left: 'today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: false, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{% for i in events %}
{
title: "{{ i.event_name}}",
start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i" }}',
end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
},
{% endfor %}
]
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<body>
<div id='calendar'></div>
</body>
I'll pass the answer from the comment section.
Just create as many div elements as you need, and attach a calendar to each one (let calendarEl = document.getElementById('calendar'); controls which element the calendar is attached to, so you just need that to be dynamic, or repeated).
And flex style helped me to put the next to each other, horizontally
I'm trying to test a simple header component that has a button and when being focused - opens a dropdown using just css visibility property.
This is the html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
This is the scss style:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
And this is the test:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
When I run the test I can see that console.log(dropdownElement) exists and that console.log(button.nativeElement) returns the CSSStyleDeclaration object - but ALL the properties have an empty string as a value:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
So basically what I need is to trigger the focus event on the button and then see if the value of the dropdown's css/style property "visibility" is "visible".
I can't figure what's wrong, cause i can see that everything is rendering fine in Karma-Debug but all the style properties are empty... any idea what's the problem?
I've had similar problem in runtime (not tests).
Style property is static and based on initial style attribute on html element so this is not updated dynamically.
Solution is to use Window.getComputedStyle(). This function calculates (current!) styles from stylesheets.
I am new to Ember. I want when i hover the mouse over a .png file to be transparent and to exist there on the right corner an 'X' button and when you press it, it will be removed from the store. Any ideas or any example? I have these files:
showactivecamp.hbs
<style type="text/css">
.image {
width: 190px;
height: 190px;
opacity: 1;
}
.image:hover {
opacity: 0.3;
}
i.fa-remove {
#extend . image : hover;
color: #fff;
background-color: #808080;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 8px;
right: 8px;
padding: 2px;
z-index: 1;
cursor: pointer;
}
</style>
<div class="thmb-prev">
<button type="button" class="fa fa-remove" {{action "removeCampaign" on="click"}}>
</button>
<img src="/assets/images/photos/media2.png" class="image" alt="">
</div>
controllers\showactivecamp.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
needs: ['campaign'],
actions: {
removeCampaign: function (campaign) {
var camp = this.get('model');
camp.deleteRecord();
camp.save();
}
},
getactivecamp: function () {
return this.store.findAll('campaign');
}.property()
});
views\showactivecamp.js
import Ember from 'ember';
export default Ember.View.extend({
click: function (evt) {
this.get('controller').send('click', this.get('campaign'));
}
});
I believe something like this would be best handled with a CSS solution rather than creating the unnecessary views in Javascript
http://emberjs.jsbin.com/jecew/1
You posted your code but not mentioned about the issue. I am not sure what is the issue you are getting.
Have a look into this jsbin http://jsbin.com/xumomu/1. I have used FixtureAdapter.
UPDATE:
http://jsbin.com/xumomu/2/
I have wrapped image and close icon in a view called 'image'. X icon will be shown on mouse enter and will be hidden on mouse leave using jQuery.
As Ember guide says, Use View when you need sophisticated handling of user events.
I suggest you to go through documentation to get clear idea about View and Event handling in ember.
The default behavior of the tooltip on google chart's legend is showing only when the word is broken for being too long.
What I want to do is to always show the tooltip regardless of the word being complete or not. Is this possible?
You could try to overwrite the tooltip functionality to display the text. Made an example using jquery, however it also makes tooltips for title and axis ticks, but should be close to what you want:
function myReadyHandler(){
$('g text').mouseenter(function(e){
if($(this).text().indexOf('...')!= -1) return;
$('.charts-tooltip').hide();
$('body').append('<div style="position: absolute; visibility: visible; left: '+(e.pageX-50)+'px; top: '+(e.pageY+20)+'px;" class="charts-tooltip"><div style="background-color: infobackground; padding: 1px; border: 1px solid infotext; font-size: 14px; margin: 14px; font-family: Arial; background-position: initial initial; background-repeat: initial initial;">'+$(this).text()+'</div></div>');
})
$('g').mouseleave(function(e){
$('.charts-tooltip').hide();
})
}
google.visualization.events.addListener(chart, 'ready', myReadyHandler);
Here is a working example: http://jsfiddle.net/Lwkorqn9/
I have this code to show google maps in my django template and it's working fine. But I'd like to have a button on the google map that opens the map in a new google maps tab. Similar to the image below
<script>
function initialize() {
var myLatlng = new google.maps.LatLng({{doctor.clinic.geolocation}});
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ''
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
EDIT:
At time of a writing my answer, I had not seen that button in any of Google Maps JavaScript API so I decided to provide an possible implementation for it. However, only after that I found that it is actually a functionality of Google Maps Embed API.
Therefore, if you are not using Google Maps JavaScript API but wan't to use Google Maps Embed API instead, I recommend checking out: Google Maps Embed API (Viewmode)
Solution for Google Maps Embed API:
<iframe
width="300"
height="250"
frameborder="0"
style="border:0"
src="https://www.google.com/maps/embed/v1/view?key=<PLACE_HERE_YOUR_API_KEY>¢er=-33.8569,151.2152&zoom=18">
</iframe>
Solution for Google Maps JavaScript API:
However, because the question is tagged with google maps api 3. The solution explained below is also provided.
You can make either normal css button (or link) which you just lift over your map and a function which will open that map in correct url or make a custom button similar than google uses.
As an example, I ended up making normal css button which is sitting above the map, and once you click it it takes current location of the map (center) and zoom level - makes the url and opens it at the other tab.
Here is working js fiddle example.
Full code also below.
JavaScript and relevant part of the HTML:
<script type="text/javascript">
// Handle to our map
var map;
/**
* Method for initializing the map
*
*/
function initialize() {
var myLatlng = new google.maps.LatLng(-31.397, 150.644);
var mapOptions = {
zoom: 10,
center: myLatlng
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ''
});
}
/**
* Method for opening google at other tab, based on current location at map and zoom
*
*/
function openGoogleMap() {
// find out current zoom level
var zoom = map.getZoom();
// making the url
var url = "http://maps.google.com/maps/place/" +
map.getCenter().lat() + "," +
map.getCenter().lng() + "/#" +
map.getCenter().lat() + "," +
map.getCenter().lng() + "," +
zoom + "z";
// opening map in new tab
window.open(url);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="content">
<div id="map-canvas"></div>
<button onclick="openGoogleMap()" class="button">View on google maps</button>
</div>
CSS: (I tried to style the button to look like same as with Embed API).
html, body, #map-canvas, #content {
height: 600px;
width: 600px;
margin: 0px;
padding: 0px
}
.button {
padding: 1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: white;
font-size: 12px;
font-family: Roboto, Arial;
color: #3a84df;
padding-bottom: 5px;
padding-left: 14px;
padding-right: 14px;
padding-top: 5px;
border: 1px solid #CCCCCC;
position: absolute;
cursor: pointer;
top: 4px;
left: 4px;
}
.button:hover {
text-decoration: underline;
}
For further reading:
Custom google controllers (How to make similar button than google uses).
How to construct google maps url
Cheers.