Develop Reference

JS code to change parameter 'top' on click

Here is the pen I've created.
HTML
<div class = 'cc'>
<div class = 'bb'><div class = 'aa'> Some word </div></div>
</div>
CSS
.cc {
width: 100%;
min-height: 90px;
margin: 0;
padding: 0;
border: 1px solid #999999;
border-radius: 3px;
padding-left: 20px;
padding-right: 20px;
font-family: "Calibri";
font-size: 17px;
color: #666666;
background-color: rgba(0,0,0,.0);
}
.bb {
height: 100px;
width: 100%;
background-color: rgba(0,0,0,.5);
}
.aa {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Now I want to create a clickable event such that when user click on class bb, page will check the top parameter of class aa - if it is 50% then smoothly change that to 10% and vice versa.
I want to use JavaScript code to achieve that. How can I do that?

hey just tried to gave shot at it , seems its working please look into this
let bb = document.querySelector('.bb');
let aa = document.querySelector('.aa');
bb.addEventListener('click',e => {
let top = window.getComputedStyle(aa).getPropertyValue('top');
if(top === '50px'){
aa.style.top = '10%';
}else{
aa.style.top = '50%';
}
})

Got it. It is tested and it seems to work.
let bb = document.querySelector('.bb');
let aa = document.querySelector('.aa');
bb.addEventListener('click', function(){
if(window.getComputedStyle(aa).getPropertyValue('top') === '50px'){
aa.style.top = '10%';
}else{
aa.style.top = '50%';
}
})
First, I used querySelector to get .bb and .aa.
Then, I added a event listener to bb.
Next, in the event listener I used window.getComputedStyle(), got the value of top from it and checked if it is 50px.
Last of all, if it is, change that to 10%, else change it to 50%.
I did this on CodePen, you can check it here (notice I changed the style from gray to white because gray is hard to read inside a black box).

why is child element's width changing when parent's width changes?

I am trying to create a tooltip element that has a min width of 50px and a max width of 200px. I place the tooltip element inside another element so that I can easily control when the tooltip appears or disappears when there is a hover event on the parent.
The problem that I have is that the tooltip element's width appears to be controlled by the parent's width even though I specified that the child(tooltip) has an absolute position.
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
position: relative;
transition: width 2s;
}
#tooltip {
position: absolute;
top: calc( 100% + 5px );
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>
I would like the tooltip (yellow div) to keep it's size at 200px in this example, but we can see that when the parent changes width, the tooltip width also changes. Why?
Is there a way to fix this problem?
Clarification: In this example: https://codepen.io/anon/pen/ePPWER we see that the tooltip text looks nice on one line. I don't want the tooltip's div to change its width when the parent changes width, because it forces the tooltip text to wrap onto 2 lines which is undesirable.

If we check the specification related to the width of absolutely positioned element we can read this:
'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
So in your case the width of your element is shrink to fit:
Calculation of the shrink-to-fit width is similar to calculating the
width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, calculate the available width: this is found by solving for
'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
To make it easy, and without considering the min/max-width, the width of your element will try to fit the content without exceding the width of its parent container (containing block). By adding min/max-width you simply add more constraint.
One idea of fix it to remove positon:relative from the parent element so that it's no more the containing block of the position:absolute element (it will be the initial containing block which is wide enough to avoid the available width constraint).
Then use margin instead of top/left to control the position:
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
}
#tooltip {
position: absolute;
margin-top: 30px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>

ID Tooltip is being used under Parent. When parent's width changes, it also suggest that tooltip's total width is changed. Since you have used mix-width and max-width it will expand till it reaches max-width. If you want it to be fixed then simple use width.

It is because the .parent has a position: relative. This will keep all children (position: absolute included) as confined by the parent div.
Not sure if this will work for you because it is pulling the tooltip out of the parent and making it's own with span wrapping the text. Alternatively, you'll need to change the parent from being relative otherwise it'll continually affect the child.
let p = document.getElementById('parent');
let b = true;
setInterval(() => {
b = !b;
let w = 10;
if (b) {
w = 300;
}
p.style.width = `${w}px`
}, 5000);
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
position: relative;
}
#root {
position: relative;
}
#tooltip {
width: 100%;
}
#tooltip span {
position: absolute;
top: calc( 100% + 5px);
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="root">
<div id="parent"></div>
<div id="tooltip">
<span>My long tooltip text that wraps to multiple lines as needed.</span>
</div>
</div>

dc.js legend is not displaying

I have a pie chart that I am displaying within a quadrant <div> box. The pie chart displays fine and when I inspect the element on the page I can see the legend but it has a width and height of 0. I've tried using .dc-legend svg { width: 100px; height: 100px; } to force it to be a certain size but it remains 0x0
<div class="quadrant_right">
<div id="CityCharttext"><span>Dummy graph</span></div>
<div id="city-chart"></div>
</div>
<script>
function InitPieChart(string){
// cities.forEach(function(city){
cities.forEach(function(city){
DataForPieGraph.push({Name:city,data:(test.SumHelper(Projectsall, city, string))});
})
var ndx = crossfilter(DataForPieGraph),
nameDim = ndx.dimension(function(d) {return d.Name;}),
spendPerName = nameDim.group().reduceSum(function(d) {return +d.data;});
CityChart
.width(200).height(176)
.dimension(nameDim)
.group(spendPerName)
.innerRadius(30)
.colors(['#39393B', '#58585B', '#858688', '#A7A9AB','#E8EBF1','#C4D6ED','#64BBE3','#049FD9','#097DBC','#004BAF'])
.label(function(d) { return d.data.value})
.legend(dc.legend().x(0).y(0).itemHeight(13).gap(5));
CityChart.render()
}
</script>
I left out a bunch of other stuff to focus my topic on this question and to not clutter up the code, but I may have left something out.
Thanks in advance!!
CSS
#city-chart svg { width: 350px; }
#city-chart{
width:350px;
border: 1px solid black;
height: 100%;
margin: 0px -1px;
position:relative;
float:left;
}

Try setting the CSS for #city-chart too.

How do I create an If Else condition based on margin styles

I'm having difficulty making this animation come to fruition upon a click with an If Else condition within it. So the #joinbox starts at "margin-top" of 7%, I want it to move on a click from #paper4 to a "margin-top" of -19%; only if it's already at 7% though. If not, I'd like it to move back to 7% upon the click. Also, I'm using the velocity js which is just a smoother .animate function.
$("#paper4").click(function() {
if ($("#joinbox").css("margin-top")=="7%")
{$("#joinbox").velocity({"margin-top": "-19%"}, 200, "easeInOutQuad");}
else {$("#joinbox").velocity({"margin-top": "7%"}, 200, "easeInOutQuad");}
});
Here is the original style of #joinbox
#joinbox {
margin-top: 7%;
margin-left: 31.5%;
width: 35%;
position: fixed;
box-shadow: 0 5px 10px #332E2C;
background-color: white;
padding: 1%;
}

According to my memory .css("margin-top") returns something in pxlike 7px not percent like 7% so maybe try converting the percentage to px. you could use something like $().offset for conversion.
Try doing console.log($("#joinbox").css("margin-top")) you wont get percentage I think.

Since you will only retrieve the value in px. You can use the parent width and calculate the % by hand.
Something like this:
$("#paper4").click(function() {
var elementMargin = parseInt($('#joinbox').css('margin-top')),
parentWidth = Math.round($('#joinbox').parent().width() * 0.07);
if(elementMargin === parentWidth) {
console.log('margin-top: 7%')
} else {
console.log('margin-top: -19%')
}
});
#joinbox {
margin-top: 7%;
margin-left: 31.5%;
width: 300px;
height: 100px;
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="joinbox">
</div>
<button id="paper4">Hay</button>

Force Chrome cursor update when mouse-idling vanilla javascript

I have a similar issue as related in this link :
https://code.google.com/p/chromium/issues/detail?id=26723
When new div appears and when mouse does not move, cursor is not updated in Chrome 40.
The Chrome issue list some workarounds, but I don't get them to work with my code.
There are also some stackoverflow question listing this issue but they don't fix this particular case with vanilla javascript.
HTML :
<div id ="d">
Hello
</div>
CSS :
div#d {
width: 100px;
height: 100px;
background-color: red;
}
div.curs {
cursor: pointer;
height: 80px;
background-color: grey;
}
JS :
setTimeout(function(){
var div = document.getElementById('d');
div.innerHTML = div.innerHTML + '<div class="curs">World</div>';
}, 5000);
What is the easiest vanilla javascript workaround for this particular case?
Fiddle : http://jsfiddle.net/2zh90st6/

On Google Chrome v42, you can schedule a cursor update by changing the cursor style of the element currently under the cursor, or any of this element's ancestors. Note that the cursor style has to change after the new element has been added to the DOM.
var container, overlay;
container = document.getElementById('container');
setTimeout(function() {
overlay = document.createElement('div');
overlay.id = 'overlay';
container.appendChild(overlay);
// Change container cursor from 'auto' to 'default',
// to schedule cursor update while hovering overlay
container.style.cursor = 'default';
}, 5000);
#container {
position: relative;
padding: 10px;
cursor: auto;
background: #7FDBFF;
color: #001F3F;
width: 100px;
height: 100px;
}
#overlay {
cursor: pointer;
width: 100px;
height: 100px;
background: #001F3F;
color: #7FDBFF;
position: absolute;
top: 10px;
left: 10px;
}
<div id="container">
Hover me and wait for a dark overlay.
</div>
The chromium issue you linked to, Issue 26723: Mouse cursor doesn't change when mouse-idling, seems quite active at the moment, so hopefully this kind of workaround won't be required for long.

Hmm this is interesting. Either way, triggering a change in the body's cursor, seems to do the trick in Chrome v42:
setTimeout(function(){
var div = document.getElementById('d');
div.innerHTML = div.innerHTML + '<div class="curs">World</div>';
document.body.style.cursor = 'default';
}, 5000);