I'm using google places autocomplete to show location suggestions for users. I have added a custom result to the autocomplete suggestions using the following code -
$timeout(function(){
var el = angular.element('<div id="cantFind" class="pointer m-b-5">Can\'t find your location?</div>');
angular.element(".pac-container").append(el);
el.bind("mousedown", function() {
$scope.setEnterManualView(true);
});
}, 2000);
Problem here is the "Can't find your location?" option comes at random order in suggestions. I want it to come at the end only as the last suggestion. Something like this -
After searching quite a lot, it looks like there is no such direct way to do this. The only way I could do this is by modifying the CSS such that "Can't find your location?" comes at the bottom. Here is the CSS I used :
.location-autocomplete-container{
&:after{
padding-top:47px;
}
.cant-find-location{
font-size: 13px;
position:absolute;
width: 100%;
bottom:16px;
left:0;
i{
font-size: 1.2em;
margin-right: 5px;
}
}
}
Related
I'm modifing an existing script to genearte an HTML file. Script puts a location (system path) under a hyperlink. But when I try to copy it from the html file, I get additional "https://" at the front of the text.
As example I see this printed in .html file
<td> ERROR massage. Please find the log here </td>
But when I do a right click -> copy link address from chrome I get this:
https://home/user/log
I'm not a web developer, so dont know if I use correct tags to get the job done. So, how can I get exactly the text I need?
Thanks
Probably a very farfetched solution, but in case you want to copy to clipboard the exact value of the href attribute of an anchor element, regardless of any uri schema where the page is getting loaded from and ignoring upfront the fact that probably such url should be encoded as file:// since it's clearly a filesystem path anyway,
a strategy to adopt could be to have an event triggering the appearence of an overlay that will show such information on top of the whole document and that will expect the click of the close button to return to the previous state.
The problem is that it's quite temerarious to change the clipboard data programmatically since there are security rules engaged that depends on too many conditions that we want to ignore here.
So all you would need to do if you are interested to such strategy, would be to add this code somewhere at the end of your document inside a <script> tag (and as long as js will be allowed to run in your page).
Here you have to hold the CTRL key while clicking the link, and an overlay will showup echoing the exact value coming from the href attribute of the link clicked. So that you can just copy by yourself in the clipboard. Of course you have to give focus to the document before trying to hold the CTRL key.
let ctrlKeyPressed = false;
document.querySelectorAll('a')
.forEach(anchor => {
anchor.addEventListener('click', e => {
if(ctrlKeyPressed){
e.preventDefault();
const overlay = document.createElement('div');
overlay.classList.add('overlay');
const container = document.createElement('div');
const urlSpan = document.createElement('span');
urlSpan.innerText = e.target.getAttribute('href');
container.appendChild(urlSpan);
container.innerHTML += '<br>';
const close = document.createElement('a');
close.innerText = 'close';
close.href = "#";
container.appendChild(close);
close.addEventListener('click', event=>{
event.target.closest('.overlay').remove();
});
overlay.appendChild(container);
document.body.appendChild(overlay);
}
});
});
document.addEventListener('keydown', e => {
if (e.ctrlKey && !ctrlKeyPressed){
ctrlKeyPressed = true;
console.log('holding ctrl key');
}
});
document.addEventListener('keyup', e => {
if (ctrlKeyPressed){
ctrlKeyPressed = false;
console.log('left ctrl key');
}
});
.overlay{
position: fixed;
display: flex;
justify-content: center;
left:0;
top:0;
width: 100%;
height: 100%;
z-index: 1;
border: solid black;
background: white;
font-size: 30px;
align-items: center;
}
.overlay > div {
text-align: center;
}
<td> ERROR massage. Please find the log here </td>
My apologies if this is answered someplace already. I looked but maybe had bad search terms.
How can I use an image from Google Drive as a button in a Google Apps Script which is serving HTML as a web app?
I know that I have to use the following to get an image to show, such as a banner:
In HTML File:
<script>
//for showing the image
google.script.run
.withSuccessHandler( function(bytes){ showImage(bytes) })
.loadImageBytes();
function showImage(bytes){
document.getElementById("headerimage").src = "data:image/png;base64," + bytes;
$("#headerimage").fadeIn(2500);
}</script>
and on the server side:
//For displaying an image from our Google Drive
function loadImageBytes(){
//https://drive.google.com/a/boxwood.org/file/d/1ewu8FAmyIGooL4cXH4ki6CuVKE5v_4HC/view?usp=sharing
var id = "1ewu8FAmyIGooL4cXH4ki6CuVKE5v_4HC"
var bytes = DriveApp.getFileById(id).getBlob().getBytes();
return Utilities.base64Encode(bytes);
}
But how would I set an image for a button in a stylesheet?
/* Edit Buttons */
.edit_button {
display: inline-block;
height: 20px;
width: 20px;
padding: 0;
margin: 0;
vertical-align: top;
background-image: url( 'https://drive.google.com/a/boxwood.org/file/d/1sR7PUHUiTlcWarlm4Ks-SXF2j5EUACwe' );
background-size: 20px 20px;
}
When using an image from drive like this you need to append the file ID to the URL: https://drive.google.com/uc?export=download&id=
The image must be shared 'anyone with the link can view'
Hi and hope someone can help.
I have a live site and also a development site where I test out new code before deployment but basically they have the same content e.g.
Live = www.myserver.com/live/index.html
Development = www.myserver.com/development/index.html
Is there a way of setting the (say) CSS background property dependent upon the url that has been used to arrive at the site.
My current CSS =
body {
background: #eff;
/* change this to background: #ccc; if on development site */
margin:25px;
}
Why?
Well, I frequently find myself uploading or testing new code on the wrong site.
Not a big issue I know but useful if I could have a visual clue as to which site I'm testing.
My thanks for your interest.
Now Solved Thanks for input from #Adam Buchanan Smith, #Dekel and Mr Green.
I sort of used #Dekel's logic but changed it to jQuery along the following lines:
<script>
$(document).ready(function(){
// Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2
// cab2 is the development site, cab the live site
// Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2
if (document.location.pathname.indexOf('cab2') > -1){
$('body').css({"background":"#BFFFDF"});
document.getElementById('live').innerHTML = "Development Site";
} else {
$('body').css({"background":"#efffff"});
document.getElementById('live').innerHTML = "Live Site";
}
}
</script>
My thanks to all for your interest!
Not something you can do in pure html/css, but you can use both javascript and server side language for that.
In javascript you can check if the document.location.hostname or document.location.pathname to check the domain/url you are currently using.
In javascript for example you can use:
if (document.location.pathname.indexOf('development') > -1) {
body = document.getElementsByTagName('body')[0]
body.setAttribute('class', body.getAttribute('class') + ' development')
}
Using PHP you can use $_SERVER['REMOTE_HOST'] and $_SERVER['REQUEST_URI'].
if (strpos($_SERVER['REQUEST_URI'], 'development')) {
echo "<body class=\"development\">";
} else {
echo "<body>";
}
And in the css file you can use:
body {
background: #eff;
}
body.development {
background: #ccc;
}
Theoretically something like this could work for you in just plain javascript using document.referrer;
<body onload="checkURL()">
</body>
<script>
function checkURL(){
var testPage = "www.testpage.com";
var livePage = "www.livepage.com";
var lastPage = document.referrer;
if (lastPage == livePage){
//do something here
}
else if {lastPage == testPage}
//do something else
}
else{
//umm what did you do?
}
</script>
does anybody knows how can style the baloon that appears in the Google Maps v3 when you click a place? I wish to change the default "comic-style".
Second question: is it possible to automatically (or in some other way) color a country (i.e. I wish to have the US with a red overlay, Canada with a yellow overlay and so on)?
Thank you,
da
As I can see infowindow baloons have inline styles, so, it's a problem to apply styling to them. So, one of alternatives is to create own class for bubbles (or find the one, for example look here: Google Maps: How to create a custom InfoWindow?).
Your second question: there are no simple and generalized way to show overlay like you want. I mean, there is no such API call. But it can be done relatively easily using polygons. (look at How do i Add and Remove polygons on a Google Map (version 3)?), you just need country boundaries, which you can find over the net.
I have solved the styling problem by toggling custom elements when clicking the markers. I needed to create smaller info windows, so I made a custom element showing up by the marker clicked without the comic style pointer.
google.maps.event.addListener(marker, 'click', function() {
loadInfoWindow(map, marker);
});
function loadInfoWindow(map, marker){
clearInfoWindow();
pixelOffset = getPixelPosInMap(map, marker);
var iwc = ''; // infowindow markup goes here
$('#iwContainer').css({'margin-top':(pixelOffset.y - 100), 'margin-left':(pixelOffset.x - 40)}).html(iwc).fadeIn('fast');
}
function getPixelPosInMap(map, marker){
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
return new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
}
This code use jQuery to fetch the info window container #iwContainer. I have the following styles for the info window container.
#iwContainer {
position: absolute;
display: none;
background-color: white;
color: #900;
font-size: 10px;
padding: 5px;
width: 90px;
border: 1px solid #900;
border-radius: 5px;
z-index: 100;
opacity: 0.85;
}
Please dont mind for adding a vulnarable content as below.
jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
I have a multiline html text editor(tiny mce). When a user enters unappropriate words, as i entered above!. It will be saved properly in database. When i am trying to display the same data using a label. The displayed data disturbs the page design.
How can i fix this issue?
Please provide me a solution for this.
Thanks in advance
Regards,
Madhu BN
If it's about disturbing the page design when redisplaying the user's input and if the input is "inappropriate" then apply a CSS style to cut it off by using overflow:hidden.
<style>
.fixed { overflow:hidden; }
</style>
Then apply it to the div or container:
<div class="fixed" style="width:100px">The following input is really long and invalid.
fffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>
This ensures the page layout is not disturbed. In the above example 100px is adhered to no matter the unbreaking length of the invalid text.
Edits:
If you want the wrapping behaviour try using CSS word-wrap: break-word;
<style>
.fixed {
word-wrap: break-word;
}
</style>
Or even put them both together to be really safe across browsers.
<style>
.fixed {
overflow:hidden;
word-wrap: break-word;
}
</style>
If you use PHP to print out the text, check out the wordwrap function.
Try inserting into the string. It's the HTML element for the "soft hyphen".
If using PHP, print(wordwrap($string, 75, ''));
More info on SO: Soft hyphen in HTML (<wbr> vs. )
This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery:
(function($) {
$.fn.breakWords = function() {
this.each(function() {
if(this.nodeType !== 1) { return; }
if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
this.runtimeStyle.wordBreak = 'break-all';
}
else if(document.createTreeWalker) {
//Faster Trim in Javascript, Flagrant Badassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function(str) {
str = str.replace(/^\s\s*/, '');
var ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
};
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
//For Opera, Safari, and Firefox
var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
var node,s,c = String.fromCharCode('8203');
while (dWalker.nextNode()) {
node = dWalker.currentNode;
//we need to trim String otherwise Firefox will display
//incorect text-indent with space characters
s = trim( node.nodeValue ).split('').join(c);
node.nodeValue = s;
}
}
});
return this;
};
})(jQuery);
In javascript, add \u200b - Zero Width Space before displaying it
YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");
You could use InsertAt repeatedly to achieve #Ryan's solution, or you could perform validation to prevent such malformed data from reaching the database.
Regular expressions would also make this available to put the soft-hyphen in.
It can be fixed with a little CSS using overflow-x (lots of cool examples after link).
Just make sure you specify a width, otherwise overflow-x won't do you any good.
Try it here
<style>
div{
width: 105px;
overflow-x: hidden;
float: left;
margin: 10px;
padding: 4px;
background: orange;
}
</style>
<div>WAYTOOLONGTOBESHOWN</div>
<div>WAYTOOLONGTOBESHOWN</div>