We Keep Coding

ERROR Error: Uncaught (in promise): invalid link: SosPopPage

I am coding a SOS page, when I click the button that I want it showing a popup page like this. Then user can choose phone number.
sos.html page
<button ion-button color="light" (click)="openSosPop()">Call</button>
sos.ts page
openSosPop() {
this.openModal('SosPopPage');
// let contactModal = this.modalCtrl.create(SosPopPage);
// contactModal.present();
}
openModal(pageName) {
this.modalCtrl.create(pageName, null, { cssClass: 'inset-modal' })
.present();
}
sos.css page
ion-modal.inset-modal {
// transparent black background overlay
background-color: rgba(0, 0, 0, .5) !important;
transition: opacity .25s ease-in-out;
padding: 20vh 10vw;
}

I am not using lazy loading
If you are not using lazy loading, it is not an IonicPage.
Adding IonicPage decorator allows you to use string names to handle pages.
This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name.
Since you are not lazy loading, you cannot use a string to navigate or create modals and popups. You have to use the actual page/component.
Import the page.
import <path_to_page>;
this.openModal(SosPopPage);//create the modal.

Transparent background in world in whitestorm js?

I am trying to create a world that does not have a background so that I can add objects to it and then run this world over a background configured in html. Is something like this possible?
Here is a link to the site I am working on. To clarify: I am trying to figure out how to make the black transparent so that the background behind it is visible. Here is the repo. Thanks.

I decided to use CSS for now instead.

Simply use:
const world = new WHS.World({
background: {
opacity: 0; // Opacity is 0. Fully transparent
},
renderer: {
alpha: true // Allow transparency in renderer.
}
});
UPDATE
In v2.x.x use the following approach:
const app = new WHS.App([
// ...
new WHS.app.RenderingModule({
bgOpacity: 0,
renderer: {
alpha: true
}
})
]);

CSS transitions & timing seem off

First I am open to any ideas / suggestions. I desire to keep the home page as is as far as using the variety of scenic images. The problem I run into is of course what is readable font color on one image is not very readable on another. So I googled some ideas and found a darkened area / backdrop to be the most professional. Great now it works well for all light images but not dark images. So I came up with the idea of switching font color and background depending on the image (dark or light). The trouble I am having is that the font / background switch about 1-2 seconds before the image does??? Further I think I would like to add a cross fade or some animation effect to make the switch soother. Here is the site:
http://alexandredairy.com/staging/
Again I am open to any ideas / suggestions
So the first thing I did was to name the images with a dark or light prefix so the css can switch accordingly. So I have twenty or so images named like so:
Dark_Cover1_PastrDairy.jpg or Light_Cover1_PastrPoultry.jpg
My CSS is:
/*Back ground shading so we can read text*/
.lighttextbackground
{
color:#000;
background-color:rgba(255, 255, 255, 0.35);
box-shadow:0px 0px 10px 10px rgba(255, 255, 255, 0.35);
}
.lighttextbackground a
{
color:#000;
}
.lighttextbackground p
{
color:#000;
}
.darktextbackground
{
color:#fff;
background-color:rgba(0, 0, 0, 0.35);
box-shadow:0px 0px 10px 10px rgba(0, 0, 0, 0.35);
}
.darktextbackground a
{
color:#fff;
}
.darktextbackground p
{
color:#fff;
}
A typical HTML element that I want the effect on is:
<div id="pageslogan" class="slogan lighttextbackground">
....code...
</div>
As for the jquery I am posting just the function(s) I think relevant. I can definately post more if needed or you can browse the site and get everything using developer tools (F12).
function changeImageHandler(){
var imgSRC;
$("#inner ul>li").eq(currImg).addClass("active");
$("#inner ul>li").eq(prevImg).removeClass("active");
loadComplete = false;
image.addClass("topImg").css({"z-index":1});
imgSRC = imageSRCLink.eq(currImg).attr("href");
imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
$(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
$("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));
discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
discription.eq(prevImg).css({display:"none"})
});
}
About 3/4 the above function you see TextReadabilityHandler which is where the switch takes place:
function TextReadabilityHandler(_imgNameSwitch)
{
if(_imgNameSwitch == 'Light')
{
$("#pagetitle").attr('class', 'sitetitle lighttextbackground');
$("#pagemenu").attr('class', 'sf-menu lighttextbackground');
$("#pageslogan").attr('class', 'slogan lighttextbackground');
}
else if (_imgNameSwitch == 'Dark_')
{
$("#pagetitle").attr('class', 'sitetitle darktextbackground');
$("#pagemenu").attr('class', 'sf-menu darktextbackground');
$("#pageslogan").attr('class', 'slogan darktextbackground');
}
else
{ alert(_imgNameSwitch); }
}
So I was thinking to do a crossfade while the image switches. Where I am stumped is how to implement. As I have it written the html element is updated with a new class and that change is applied instantly. How / where would I implement a .fadeOut() / .fadeIn()??
Thank You
As a side note I tried submitting my site to csscreator.com for critical review / suggestions on the design with no feedback. Any suggestion where I can get the design critiqued would be helpful.
Edit
Thank you user3037493 and Zeaklous.
You both broke through the road block I was up against. Here is what your answers triggered in my brain.
I added a custom namespace (for readability)
/* Text Readability switching */
var txtread =
{
onReady: function(_imgname)
{
txtread.fadeoutText(_imgname);
txtread.fadeinText();
},
fadeoutText: function(_imgname)
{
$("#pagetitle").fadeOut(1250);
$("#pagemenu").fadeOut(1250);
$("#pageslogan").fadeOut(1250);
$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
},
fadeinText: function()
{
$("#pagetitle").fadeIn(1250);
$("#pagemenu").fadeIn(1250);
$("#pageslogan").fadeIn(1250);
$("#sitecopy").fadeIn(1250);
},
TextReadabilityHandler: function(_imgNameSwitch)
{
if(_imgNameSwitch == 'Light')
{
$("#pagetitle").attr('class', 'sitetitle lighttextbackground');
$("#pagemenu").attr('class', 'sf-menu lighttextbackground');
$("#pageslogan").attr('class', 'slogan lighttextbackground');
}
else if (_imgNameSwitch == 'Dark_')
{
$("#pagetitle").attr('class', 'sitetitle darktextbackground');
$("#pagemenu").attr('class', 'sf-menu darktextbackground');
$("#pageslogan").attr('class', 'slogan darktextbackground');
}
else
{ alert(_imgNameSwitch); }
}
}
and then I modified the these two lines in ChangeImageHandler.
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));
to
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));
So the whole thing looks like this:
function changeImageHandler(){
var imgSRC;
$("#inner ul>li").eq(currImg).addClass("active");
$("#inner ul>li").eq(prevImg).removeClass("active");
loadComplete = false;
image.addClass("topImg").css({"z-index":1});
imgSRC = imageSRCLink.eq(currImg).attr("href");
imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
$(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
$("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));
discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
discription.eq(prevImg).css({display:"none"})
});
}
and now I have my fade in / out effect and while the text blocks are faded out I do a quickie class change by making the copyright fadeout take a bit longer (ensuring vast majority of content is gone) then executing the return function to switch classes as seen in my custom namespace here:
$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
Of course nothing works perfectly and for some reason I haven't figured out yet one element is not fading in / out?? That is off topic here so I posted a new SO question here for that one.
Element refusing to fade out or in

sorry, i dont have enough reputation to comment on your question, and this answer is really just a comment.... white text with black background is going to be easier to read. here is a JSfiddle http://jsfiddle.net/Kyle_Sevenoaks/ZnfED/1/
basically, the css for your .slogan p you would make the color to be white and add this text shadow
{text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}
edited to add: to have the textbackground change before the image, call TEXTREADABILITYHANDLER at the beginning of the changeImageHandler function and maybe try putting a delay on the imgSpinner.animate per http://api.jquery.com/delay/

You could try doing it yourself as this SO answer and corresponding example describe, but depending on the image it is liable to be incorrect more so than if you went with an actual plugin
Background Check is what I would likely recommend. It's not exactly what you are requesting, but it changes the background of elements as well as the text on top of it. One added, you can use it simply by declaring
BackgroundCheck.init({
targets: '.ui', // Select the divs to have the background changed
images: '.thumbnail' // Select the list of images to be analyzed
});

How can I change the background color of a Leaflet popup?

I'm creating a map using Leafletjs, and I'd like to change the background color of a popup (which is currently displaying and image and a link) from white to a different color. It seems that basic background color css syntax won't cut it. Any advice?
Thanks,
-Scott

After you call leaflet.css, you can include a <style> tag with the following rule to change the color of the popup and popup tip.
.leaflet-popup-content-wrapper, .leaflet-popup.tip {
background-color: #000
}
Here's a screenshot I took after I edited background-color of a popup on Leaflet's homepage. Let me know if you have any more questions. Cheers.

Open leaflet.css and search for:
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: rgb(111, 51, 51);
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
Then change the background value to whatever color you want.

const marker = new L.marker(lastPoint, {
icon: markerIconSnake
}).bindPopup(getDataInHtml(dataPopup), {
className: 'stylePopup'
})
If you want to change the background color of a popup you can use the method .bindPopup (in your marker) and add a css class.
.stylePopup .leaflet-popup-content-wrapper,
.stylePopup .leaflet-popup-tip {
background-color: #f4913b;
padding: 8px;
}
If you wanna know more head to the docs!

In my case I'm using react-leaflet v2 and wasn't able to use css in js with material/core/styles. I created a function
const updatePopupCss = (color) => {
let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
let htmlPopupElement;
if (popupElement[0] instanceof HTMLElement) {
htmlPopupElement = popupElement[0] as HTMLElement;
htmlPopupElement.style.backgroundColor = color;
console.log(htmlPopupElement)
}
}
Then called it from the onOpen attribute like so
<Popup onOpen={() => {updatePopupCss("#036597")}} >

Changing the colour inside characters/Font

Firstly, I need to say I am not a web developer, but I have managed to create a HTML5 and CSS3 web site by learning from as many tutorials as possible, also hacking code together from Google searches.
On my web site I would like to display environmental information: Temperature, Humidity, Air Pressure, etc.
I would like to know if the following is possible and if someone can point me in the right direction?
What I would like to do is display the value of the Temp. and have the colour inside the digits related to the Temp.
So for example:
If the Temp is below 10'C, then colour inside the digits is dark blue
If the Temp is between 10'C - 20'C, then the colour inside the digits is dark blue at the bottom and fades to light blue at the top of the digits
If the Temp is between 20'C - 30'C, then the colour inside the digits is light blue at the bottom and fades to orange at the top of the digits
If the Temp is between 30'C - 40'C, then the colour inside the digits is orange at the bottom and fades to red at the top of the digits
If the Temp is above 40'C then the colour inside the digits is red
I hope it makes sense
Thank-you in advance
Gregg

You can use some classes having different background colors like.
in css
.cssclassname1{
background-color:blue;
}
.cssclassname2{
background-color:blue;
}
in html
<div class="cssclassname1">below 10</div>
<div class="cssclassname2">above 10</div>
Hope this helps...

i have tried something but i cant define all ur condiotions
demo
HTML
<p>If the Temp is below 10C, then colour inside the digits is dark blue.<br>
If the Temp is above 40C then the colour inside the digits is red</p>
JS
$.fn.wrapInTag = function(opts) {
var o = $.extend({
words: [],
tag: '<strong>'
}, opts);
return this.each(function() {
var html = $(this).html();
for (var i = 0, len = o.words.length; i < len; i++) {
var re = new RegExp(o.words[i], "gi");
html = html.replace(re, o.tag + '$&' + o.tag.replace('<', '</'));
}
$(this).html(html);
});
};
$('p').wrapInTag({
words: ['10C', 'dark blue'],
tag: '<span>'
});
$('p').wrapInTag({
words: ['40C', 'red'],
tag: '<span1>'
});

You can get a good effect using background-clip: text.
This is only supported by webkit and mozilla, though.
I have prepared a demo for Chrome. The CSS is
.text {
font-size: 100px;
background-image: linear-gradient(0deg, red, orange, yellow, lightblue, blue);
background-size: 100% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: colors 10s infinite linear;
-webkit-text-stroke: 1px black;
}
#-webkit-keyframes colors {
0% {background-position-y: 300%;}
100% {background-position-y: 0%;}
}
In this demo, the background is clipped by the text, so that it will show only inside the numbers. To let it show we need also to make the text transparent. (and to make it a little nicer, we set a stroke around the font.
Then, we create a gradient background with the colors that you want, and just for fun we animate it.
In your code, the background-position would be set according to the temperature.
Notice that with that system, you can do it continous. (that is, a slightly different color for every temperature
demo

Js Fiddle Example here
(If your browser lacks webkit support, try this example instead.)
Probably the simplest way to control what the text looks like is to use css to define different styles (or colors as you've said) and then use javascript to set the class of a span tag around the temperature value text.
Some Sample HTML
<html>
<head>
<script src="[path to your .js file]"></script>
<link rel="stylesheet" href="[path to your .css file]" />
</head>
<body onload="initialize();">
<p>The temperature today is <span id="tempVal"></span></p>
</body>
</html>
Your javascript file:
var curTemp; // this will contain the current temperature
var curClassName; // the name of the class for that temperature (reflects css code below)
var valueContainer;
function initialize()
{
valueContainer = document.getElementById("tempVal");
}
//... calculate or set the current temperature value here ...
if (curTemp < 10)
curClassName = "freezing";
else if (curTemp >= 10 && curTemp < 20)
curClassName = "cold";
else if (curTemp >= 20 && curTemp < 30)
curClassName = "warm";
else if (curTemp >= 30 && curTemp <= 40)
curClassName = "hot";
else if (curTemp > 40)
curClassName = "scorching";
valueContainer.innerHTML = curTemp + "C";
valueContainer.setAttribute("class", curClassName);
This just leaves your CSS file. Now currently, the only way to achieve this gradient effect without using a canvas element is to use some webkit properties. These are not universally supported, so for maximum portability, I would simply use different solid colors rather than gradients, but here's the webkit example.
#tempVal
{
font-weight: bold;
}
.freezing
{
color: blue;
}
.cold
{
background: -webkit-linear-gradient(top, lightblue, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.warm
{
background: -webkit-linear-gradient(top, orange, lightblue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hot
{
background: -webkit-linear-gradient(top, red, orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.scorching
{
color: red;
}
Check out the example here
If your numbers aren't coming up with a gradient color, it's because your browser doesn't support the webkit features.