I have a div that I want to transition when I add to it's innerHTML. It's height grows from 0 when added to, so I think transitioning it's height is reasonable.
<style>
.transitions {
transition: height 2s;
}
</style>
<div id="div" class="transitions"></div>
<button id="button">click</button>
<script>
div = document.getElementById('div');
button = document.getElementById('button');
button.onclick = (e) => {
div.innerHTML = "hello world"
}
</script>
Shouldn't the transition css property be able to target the element's increase in height after having it's innerHTML changed?
Related
I am building a web app using web components in LitElement.js. I have a div containing most components (let's call it .top) that specifies a grid layout and a background image. In the div I have a custom component (call it <custom-container> that is itself composed of custom components (call each instance <custom-leaf>). The container also uses display: grid and defines a grid-column-gap.
The problem: between each <custom-leaf> nested inside the <custom-container> there is a grid gap, however, it is invisible: instead of "piercing" through the background image, it shows the background image.
Here is some code:
index.html
<style>
.top {
grid-gap: 4px;
display: grid;
background-image: url("../img/background.jpg");
}
</style>
<body>
<div class="top">
<custom-container></custom-container>
</div>
<script src="customContainer.js"/>
<script src="customLeaf.js"/>
</body>
customContainer.js
class CustomContainer extends LitElement {
static get styles() {
return css`
:host {
display: grid;
grid-gap: 4px
}
`
}
render() {
return html`<custom-leaf></custom-leaf><custom-leaf></custom-leaf>`
}
}
I am working on Ionic2 app. I want to zoom an image inside ion-scroll. How can I do that.
<ion-scroll scrollX="true" scrollY="true" zoom=true>
<img src="https://aa.com/app/package_content/s78c_e4vt6/main_images/pg_114.jpg" />
</ion-scroll>
I can zoom an image inside an ion-scroll by writing a small code for the tap event. This code is tested and working in android/ios ionic 2. Tap one time to zoom in and tap again to zoom out . For ios, just add overflow scroll in the ion-content for smooth scrolling.
.ts page:
export class PageName {
constructor() {
}
public tap: number = 600;
tapEvent(e) {
if (this.tap != 700) {
this.tap = 700;
}
else
this.tap = 600;
}}
html:
<ion-content style="background-image:url(assets/img/image1.PNG); white-space: nowrap; overflow: scroll; overflow-x:scroll; height: 100%">
<ion-scroll scrollX="true" scrollY="true" (tap)="tapEvent($event)" zoom="true" style="width:100%;height:100%;text-align:center;">
<div class="scroll-item" style=" width:100%; white-space: nowrap; overflow: scroll;">
<img [ngStyle]="{'width' : tap + 'px', 'min-width' : tap + 'px'}" alt="logo" src="assets/img/image2.PNG">
</div>
</ion-scroll> </ion-content>
How do you set the size of a google chart in percentage :
I have this in the html:
<div id="chart_div" width="90%" height="20%"></div>
and no width nor height in the options in the js.
But the chart size doesn't adapt to the viewport.
First, use styles to set your dimensions, not attributes:
<div id="chart_div" style="width: 90%; height: 20%;"></div>
The chart will draw to the size of the div by default, but the charts are not responsive. You have to hook a "resize" event handler to the window (or other element if you are resizing within a window) that redraws the chart:
function resizeChart () {
chart.draw(data, options);
}
if (document.addEventListener) {
window.addEventListener('resize', resizeChart);
}
else if (document.attachEvent) {
window.attachEvent('onresize', resizeChart);
}
else {
window.resize = resizeChart;
}
By multiplying with appropriate factor to $(window).width() or $(window).height() in the chart options
var options = {
width: $(window).width(),
height: $(window).height()*0.75
};
Google recommend that you style, like the answer above, with correct CSS and this makes a less-glitchy Chart.
However, you can size it up in Javascript...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
So, for the options when you draw the chart (using chart.draw(data, options) as above)...
var options = {
width:400,
height:300
}
A good fiddle for a responsive design is here...
http://jsfiddle.net/toddlevy/pyAz5/
$(window).resize(function(){
var container = document.getElementById("chart_div").firstChild.firstChild;
container.style.width = "100%";
chart.draw(data, options);
});
Please Remove the width and the height properties from the options in the scripts and then add the following style to your page
<style>
.chart {
width: 100%;
min-height: 450px;
}
.row {
margin: 0 !important;
}
</style>
I just got started with Raphael, but I don't get it right to make multiple canvases in ScaleRaphael
(I#m using this to make the site after responsive > are there alternatives for that?
Multiple ScaleRaphael Canvases: http://jsfiddle.net/karo/gMyP5/13/
or full view: http://jsfiddle.net/karo/gMyP5/13/embedded/result/
A strange thing happens here.
The red circle should be in the 2nd div but if you look in the code with eg. firebug in the fullview then you see that both svgs are in the inside a Why is that?
Do you have any idea for me?
Thanks Kaor
my code:
HTML
<div id="wrapper">
<div id="paper"></div>
<br>
<div id="paper2"></div>
</div>
JavaScript:
var paper = new ScaleRaphael("paper",200,200);
var circle = paper.circle(100, 100, 60).attr({fill:'red'});
var paper2 = new ScaleRaphael("paper2",200,200);
var circle2 = paper2.circle(50, 50, 30).attr({fill:'black'});
function resizePaper(){
var win = $(this);
paper.changeSize(win.width(), win.height(), true, false);
paper2.changeSize(win.width(), win.height(), true, false);
}
resizePaper();
$(window).resize(resizePaper);
CSS
#wrapper
{
position:relative;
}
#paper {
background-color: lightgray;
width:100%;
height:200px;
position:relative!important;
}
#paper2
{
background-color: orange;
width:100%;
height:100px;
position:relative!important;
}
svg
{
position:absolute!important;
top:0;
left:0;
}
ScaleRaphael only supports one canvas. In the code you can see it re-referencing the first existing svggroup or vmlgroup element.
You do not need ScaleRaphael to do what you are doing. Since version 2 Raphael has included Paper.setViewBox and it always included Paper.setSize, which together do this already.
I found an issue and a workaround how it works....
Have a look here: http://jsfiddle.net/karo/r4qvt/12/
I have first the paper div and then the red div
<div id="paper"></div>
<div id="red"></div>
</div>
</div>
And if I make the redpaper for the div "red" and the rectangle in it before I make the paperGrey and "talk to the" first div. THEN IT WORKS
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
If I do it the OTHER WAY ROUND IT DOESNT WORK
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
...strange, but I found a solution ;)
I am new to jquery, so apologies if this is a lengthy question. The following is what I have come up with for a horizontal slider to scroll a div containing lists of images.
The result is the slider not scrolling the div. Any help would be great.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideDrag,
slideWidth = 330,
slideSpeed = 200;
animated = false;
$(".scroll-slider").slider({
animate: slideSpeed,
start: checkType,
slide: doSlide,
max: slideWidth
});
// Set each slider to a value
$(".scroll-slider").each(function(index){
$(this).slider("value", 330 / 5 * index);
});
// You can also change a slider at any time like so:
// $(".scroll-slider:eq(0)").slider("value", value);
//
// That would move the first slider to a value, along with its content
function checkType(e){
slideDrag = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
function doSlide(e, ui){
var target = $(e.target).prev(".scroll-content"),
// If sliders were above the content instead of below, we'd use:
// target = $(e.target).next(".scroll-content")
maxScroll = target.attr("scrollWidth") - target.width();
// Need to check type now to prevent the new change handler from firing twice when user clicks on slider,
// because both 'slide' and 'change' events are fired on a click, but only a 'change' when setting slider
// value manually via code.
if (e.type == 'slide'){
// Was it a click or drag?
if (slideDrag === true){
// User dragged slider head, match position
target.attr({scrollLeft: ui.value * (maxScroll / slideWidth) });
}
else{
// User clicked on slider itself, animate to position
target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
}
animated = true;
}
else{
if (animated === false){
target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
}
animated = false;
}
}
});
</script>
</script>
<style>
/* Styling the scroll elements */
.scroll-container{padding-bottom:30px}
.scroll-content{width:330px;height:110px;overflow:hidden;margin-bottom:10px}
.scroll-content ul{
width:880px;
height:110px;
margin-bottom:5px
}
.scroll-content li{
float:left;
}
.ui-slider .ui-slider-handle{width:16px;height:12px;position:absolute;top:-3px;background:#234786;border:none}
</style>
<body>
<div id="wrapper">
<h2>Multiple Slider Control Demo</h2>
<div id="left">
<div class="scroll-container">
<div class="scroll-content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<div class="scroll-slider"></div>
</div>
</div>
Are you trying to work from this demo?
http://cnanney.com/journal/demo/div-slide/
I had the same error, and replaced the version of jQuery I was using with the one used in the demo and it worked.