i'm using Galleria slideshow on my web page. I want to start a slideshow from the specified index. In code I pass a parameter to a JavaScript function and in this functions I wrote a line Galleria.configure('show', index); So my function is
function imgIndex(i) {
index = i;
$( "#dialog" ).dialog( "open" );
Galleria.configure('show', index);
}
Also Galleria is in a popup jquery-dialog in the page. The HTML is
<div id="dialog" title="Galleria dialog">
<div id="galleria" style="float: left; width: 100%; background-color: #000000;">
<script src="famous/list_images.php"></script>
<script>
Galleria.run('#galleria', {
dataSource: data,
transition: 'slide',
transitionSpeed: 800,
responsive:true,
thumbnails: false,
clicknext: true,
autoplay: true,
height: 0.5625
});
</script>
</div>
</div>
The problem is when I first time click on image slideshow starts in a popup dialog on the specified index. But when I close the dialog and want to start it again from the other image it seems that Galleria doesn't react to this and continues from the image where it was last time.
Thank you for your help.
Related
I'm trying to test a simple header component that has a button and when being focused - opens a dropdown using just css visibility property.
This is the html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
This is the scss style:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
And this is the test:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
When I run the test I can see that console.log(dropdownElement) exists and that console.log(button.nativeElement) returns the CSSStyleDeclaration object - but ALL the properties have an empty string as a value:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
So basically what I need is to trigger the focus event on the button and then see if the value of the dropdown's css/style property "visibility" is "visible".
I can't figure what's wrong, cause i can see that everything is rendering fine in Karma-Debug but all the style properties are empty... any idea what's the problem?
I've had similar problem in runtime (not tests).
Style property is static and based on initial style attribute on html element so this is not updated dynamically.
Solution is to use Window.getComputedStyle(). This function calculates (current!) styles from stylesheets.
If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ
I have a chart js bar chart that draws within the canvas:
<canvas id="chart" width="800" height="400"></canvas>
However I would like the chart to fit the size of the current window. I have tried:
<canvas id="chart" width="100%" height="400"></canvas>
but it does not like it. I could get the window width using window.innerWidth but is there any reason why the 100% does not work?
Please see the post: Chart.js canvas resize . There are actually two answers that are really good solutions here. You can use the chart options like below:
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
or you can set the canvas width and height using client side code:
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
This post very effectively answers your question about why % values dont work: Canvas is stretched when using CSS but normal with "width" / "height" properties
After setting responsive and ratio options (check out related chartjs doc), use following css to fill 100% of the parent:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}
I'd like to create a treeview with columns as part of the node template. Essentially, I have supplemental data that I want displayed along with the treeview so that the data lines up in columns after the initial node text.
I'm using the Kendo treeview because I need to be able to reorder the items easily using the drag and drop the treeview provides. I've tried using CSS positioning in a Kendo treeview template, but regardless of what I try, the columns to the right of the node are always displayed relative to the node itself.
Any ideas how I can create a treeview that has columnar data as part of the node template that aligns correctly? Using tables messes with the treeview and absolute positioning doesn't seem to work, either. I've tried doing this using table layouts in css:
css ---
.layout-container {
display: table;
}
.layout-row {
display: table-row;
}
.layout-cell {
display: table-cell;
padding-left: 10px;
}
html ----
<div id="treeview" class="layout-container"></div>
<script id="treeview-template" type="text/kendo-ui-template">
<div class="layout-row">
<div class="layout-cell">#: item.text #</div>
<div class="layout-cell">#: item.dept #</div>
<div class="layout-cell">#: item.owner #</div>
</div>
</script>
Here's a jsFiddle of what I have so far: http://jsfiddle.net/trentballew/oc9qsnyc/.
With the help of the Telerik folks, I found the answer by using a conditional template like this to fix the indenting of the second column in the node:
Template:
<div class="item-styling item-text">#: item.text #</div>
# if (item.rowLevel === 2) { #
<div class="item-styling move"> #: item.dept #</div>
# } else { #
<div class="item-styling"> #: item.dept #</div>
# } #
CSS
.item-styling{
display: inline-block;
text-align: left;
width: 150px;
}
.move{
margin-left: 17px;
}
The updated fiddle with the solution is here: http://jsfiddle.net/trentballew/oc9qsnyc/6/.
When the user clicks the like button a comment box pops up that has a width of 450px. This is too large for the space I have available. As far as I can tell, this comment box does not seem to respond to the "data-width" property I had set here:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="290" data-show-faces="false">
...so I had been forcing it with my css to this size:
iframe.fb_ltr { max-width:290px !important;}
All was good until it seems something just changed and this is no longer viable because the width of 450px is now being set within the iframe with this new? class:
<div class="fbpf pluginLikeFlyout pluginLikeFlyoutFull pluginLikeFlyoutFullButton">
.pluginLikeFlyoutFull {
top: 24px;
width: 450px;
}
Bottom line, is there another way to set the width of the comment box so it doesn't default to 450px?
Thanks,
Matt
I added this to my css:
div.fb-like.fb_iframe_widget > span {
width: 100% !important;
}
div.fb-like.fb_iframe_widget{
width: 100%;
}