We Keep Coding

Format cell text color

This column formatter sets background color fine, but then I cannot see the text at all.
function truthFormatter(cell, formatterParams, onRendered) {
var cellValue = cell.getValue();
var cellElement = cell.getElement();
if (cellValue == "T") {
cellElement.style.backgroundColor = "#0000B3";
cellElement.style.color = "#FFFFFF";
}
else if (cellValue == "F") {
cellElement.style.backgroundColor = "#B30000";
cellElement.style.color = "#FFFFFF";
}
}
Chrome's style inspector on one of these cells suggests everything should be fine:
element.style {
width: 40px;
text-align: center;
background-color: rgb(0, 0, 179);
color: rgb(255, 255, 255);
height: 25px;
}
I get the same behavior in a stand-alone, test configuration---no other CSS applied.
Also, text in cells where the formatter should not apply is not visible---even though style inspection here also seems to be fine:
element.style {
width: 151px;
text-align: right;
color: rgb(0, 0, 0);
height: 32px;
}
Link to screenshot of table as rendered
Link to rendering without the formatter

Your line of :
cellElement.style.color = "#FFFFFF";
Should work just fine, i have run some tests and it works this end.
I would suggest using your browser inspector to see what CSS is overriding it.
You are also not returning the value of the cell in the formatter, so nothing will will be displayed inside the cell.
you need to add this line to the bottom of your formatter function
return cell.getValue();

JS Maps v3: custom marker with user profile picture

I am struggling since 2 days with something I was thinking easy, on a map, I have to display a marker for each user with the user FB profile picture inside.
I am wondering how I can have a result similar to this one? What I tried was really hackish.
I put the FB picture as the marker icon
I put a CSS class on the label of the marker
I find the sibling to add this border and this arrow to decorate the user picture
but it doesn't work when there is more than one marker on the map.
.marker-labels {
display: none !important;
+ div {
background-color: $dark-gray;
border: 2px solid $dark-gray;
#include radius(0.2em);
height: 54px !important;
width: 54px !important;
overflow: inherit !important;
> img {
height: 50px;
width: 50px;
}
&:after {
content: ' ';
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: $dark-gray;
position: absolute;
top: 52px;
left: 19px;
}
}
}
global question:
how can I get an icon like that (http://mt-st.rfclipart.com/image/thumbnail/24-1d-5f/blue-glossy-square-map-pin-or-speech-bubble-Download-Royalty-free-Vector-File-EPS-29153.jpg for instance) with a custom user picture inside? is it possible?
otherwise how is it possible to customize the icon (if it is the profile picture) to have a result similar to the screenshot
thanks for your help

This answer assumes you already have the URIs for the facebook profile images. Honestly, it feels there is an easier way, but I found some code that shows how to create a custom marker with custom HTML elements and I went from there. From there's it's pretty easy to create a custom marker that accepts a image URI as a parameter. From the original, I just added an imageSrc parameter, moved the styling outside the code by attaching a class name to the new div. In terms of html and css, I just appended an image with the passed image URI into the div, and just added some CSS to make it look like what you have.
Demo
So the javascript code looks something like this:
function CustomMarker(latlng, map, imageSrc) {
this.latlng_ = latlng;
this.imageSrc = imageSrc; //added imageSrc
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function () {
// Check if the div has been created.
var div = this.div_;
if (!div) {
// Create a overlay text DIV
div = this.div_ = document.createElement('div');
// Create the DIV representing our CustomMarker
div.className = "customMarker" //replaced styles with className
var img = document.createElement("img");
img.src = this.imageSrc; //attach passed image uri
div.appendChild(img);
google.maps.event.addDomListener(div, "click", function (event) {
google.maps.event.trigger(me, "click");
});
// Then add the overlay to the DOM
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
// Position the overlay
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.remove = function () {
// Check if the overlay was on the map and needs to be removed.
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function () {
return this.latlng_;
};
I think I added only one or two lines here. You can just add this to your page I think. With this in place you can just style the container as normal, and it should apply to all the custom markers. You can add elements and classes as you see fit to achieve the look you are looking for. But for completion's sake I added the styles I used for the demo here.
.customMarker { /* the marker div */
position:absolute;
cursor:pointer;
background:#424242;
width:100px;
height:100px;
/* we'll offset the div so that
the point passed doesn't end up at
the upper left corner but at the bottom
middle. so we'll move it left by width/2 and
up by height+arrow-height */
margin-left:-50px;
margin-top:-110px;
border-radius:10px;
padding:0px;
}
.customMarker:after { //triangle
content:"";
position: absolute;
bottom: -10px;
left: 40px;
border-width: 10px 10px 0;
border-style: solid;
border-color: #424242 transparent;
display: block;
width: 0;
}
.customMarker img { //profile image
width:90px;
height:90px;
margin:5px;
border-radius:2px;
}
And for the demo I have some sample data in array and placed them on the map using a for loop.
var data = [{
profileImage: "http://domain.com/image1.jpg",
pos: [37.77, -122.41],
}, {
profileImage: "http://domain.com/image2.jpg",
pos: [37.77, -122.41],
}]
for(var i=0;i<data.length;i++){
new CustomMarker(
new google.maps.LatLng(data[i].pos[0],data[i].pos[1]),
map,
data[i].profileImage
)
}
I hope that helps.

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
});

ExtJS 4.2.1 - add a top arrow to any popup menu

I would to create a menu with the following appearance:
I have managed to create the background color using css and the rounded corners as well.
I am now attempting to add the top arrow.
How can I add an element to the menu itself (the arrow), and shift its original open position?

You can modify the renderTpl of the menu to include the triangle at the top. I would recommend creating a class which extends Ext.menu.Menu. See this example.
Ext.define('Ext.menu.TriangleMenu', {
extend: 'Ext.menu.Menu',
initComponent: function () {
//get the original template
var originalTpl = Ext.XTemplate.getTpl(this, 'renderTpl');
//add the triangle div (or img, span, etc.)
this.renderTpl = new Ext.XTemplate([
'<div class="menu-triangle"></div>',
originalTpl.html, //the html from the original tpl
originalTpl.initialConfig //the config options from the original tpl
]);
this.callParent();
},
beforeSetPosition: function () {
//shift the menu down from its original position
var pos = this.callParent(arguments);
if (pos) {
pos.y += 5; //the offset (should be the height of your triangle)
}
return pos;
}
});
How you render the triangle is entirely up to you. You can do it without having to use an image by using this neat little border trick.
.menu-triangle {
height: 0;
width: 0;
border-bottom: 5px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}

color fading with jquery without the color plugin

I look around to learn how to fade a background color using jquery, but all of the answers lead to the jquery color plugin, which I don't wanna use. I want a pure jquery code to do it but can't seem to find it. And my work place are very reluctant on using plugings for their site, so I must use pure jquery.
I'm not an expert in jquery but this is what I came up with, which I think is not the solution:
$('#fade').css('background-color', '#2CAEA8').animate({'opacity': 0});
I just want the background to fade to white from any color. Please can someone show me the way? Thank you.

Why not write the the code yourself?
You know that FFFFFF is white, which can be interpreted as RGB 255 255 255
For example, you have a rgb (converted from hex) value 100 100 100 and then you just run a loop and increment those values till they reach 255, and set the background color to the matching on every iteration.

Html
<html>
<body>
<div id="fade">
some text goes here
</div>
</body>
</html>
jquery
$(document).ready(function() {
$('#fade').css('backgroundColor', $('#fade').css('backgroundColor')).animate({
backgroundColor: '#ffffff'
}, 5000);
});
css
#fade{
background:#ff0;
}

I think I have found your questions answer! Here it is a live demo or you can view the code below --
HTML --
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div id="fade">
My Friend Shaoz!
</div>
</body>
</html>
CSS --
div#fade
{
color: #333;
background: #ddd;
padding: 5px 5px;
font-family: segoe ui;
font-size: 12px;
font-weight: bold;
border: 2px solid #333;
}
Jquery --
$(document).ready(function(){
var fadeobjid = 'fade';
var fadetinobg = '#fff';
var fadeouttobg = '#ddd';
var fadeintotextcolor = '#000';
var fadeouttotextcolor = '#333';
var fadeinanimatespeed = '300';
var fadeoutanimatespeed = '250';
$('#' + fadeobjid).mouseover(function () {
$(this).animate({
'backgroundColor' : fadetinobg,
'color' : fadeintotextcolor
}, fadeinanimatespeed, 'linear', function() { });
});
$('#' + fadeobjid).mouseout(function () {
$(this).animate({
'backgroundColor' : fadeouttobg,
'color' : fadeouttotextcolor
}, fadeoutanimatespeed, 'linear', function() { });
});
});
The thing is that you will need the jQuery-UI to do this. That's all you need!
Hope this would help you!

A simple/raw script for a "yellow fadeout", no plugins except jquery itself. Just setting background with rgb(255,255,highlightcolor) in a timer:
<script>
$(document).ready(function () {
yellowFadeout();
});
function yellowFadeout() {
if (typeof (yellowFadeout.timer) == "undefined")
yellowFadeout.timer = setInterval(yellowFadeout, 50);
if (typeof (yellowFadeout.highlightColor) == "undefined")
yellowFadeout.highlightColor = 0;
$(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
yellowFadeout.highlightColor += 10;
if (yellowFadeout.highlightColor >= 255) {
$(".highlight").css('background','');
clearInterval(yellowFadeout.timer);
}
}
</script>