I am trying to incorporate live feed from instagram with Jssor slide show but having problems.
I have this code here to pull pics from Instagram using special hash tag and place them into the div with id "slides" with attributes u="image" and src url.
function createPhotoElement(photo) {
if((photo.caption) !== null){var photo_content = photo.caption.text + " - ";}
else { var photo_content = " "}
return $('<div>')
.append(
$('<img>')
.attr('u', 'image')
.attr('src', photo.images.standard_resolution.url)
)
}
So the result after being generated on the page looks like this:
<div id="slides" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 380px;overflow: hidden;">
<div><img u="image" src="imgURL"></div>
<div><img u="image" src="imgURL"></div>
<div><img u="image" src="imgURL"></div>
<div><img u="image" src="imgURL"></div>
<div><img u="image" src="imgURL"></div>
</div>
BUT the problem is that jssor slides don't see those images being generated on the page. I tried to delay slider code using window.addEventListener() and $(document).ready() function and/or putting script just above the closing body tag and it still not working :(
It looks asynchronous problem.
Before the initialization (... new $JssorSlider...) of jssor slider, you'd make all content generated completely.
btw, when and how you call 'createPhotoElement'?
Got it finally to work buy adding window.load
$(window).load(function() {
jssor_slider1_starter('slider1_container');
});
Related
I've tried reading the documents or search for other similar question to it in stackoverflow or online, but it's either I'm not googling correctly.I'm not sure how to remove the QRCode after it has been scanned.
Is displaying it in a < p > tag wrong?
The QR code is generated from a type string not taken from a database.
Am I required to have a database and a script running with intervals that checks whether the QR code has been read,
Am I assuming wrongly?
//in my file.ts
createCode() {
this.createdCode = this.qrData;
}
My code for displaying the scanned QR
//in my file.html
<ion-card *ngIf="createdCode">
<ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>
<p>Value: {{ createdCode}}</p>
</ion-card-content>
</ion-card>
If there are any relating questions that you have across please do refer me to it, as I'm not able to pin point over the few hours of looking trough.
Thank you in advance!
Never mind, I just had to add span class which handles closing it.
<span class =
"closebtn" onclick="this.parentElement.style.display='none';">×
</span>
<ion-card *ngIf="createdCode">
<ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>
<p>Value: {{ createdCode}}</p>
</ion-card-content>
</ion-card>
and in file.scss add the following to display the closing button.
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
color: black;
}
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'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/.
Sorry to bother with such a beginner's question but I simply can't get this 100% height thing to work. Here is the situation (sorry, developing locally so no link):
I have a wrapping container that contains two floating elements. I followed all steps that might resolve the 100% issue, such as:
html, body {
height: 100%;
background: url(../img/bg.png);
font-family: 'SansationRegular', Helvetica;
}
.wrap {
width: 100%;
height: 100%;
height: auto !important; (apparently this fixes the issue in Chrome)
margin:40px 0px 0px 0px;
padding:0;
}
Both floating div's (sidebar and content) have height: 100% and I also added a third div container to clear the floating elements.
Still, when I add content to the content div the sidebar does not "grow" automatically. I feel I tried everything but it won't work.
Any ideas/hints are highly appreciated at this point! :)
Many thanks in advance!
P.S. I use Twitter Bootstrap as well in case that helps to solve my problem
Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.
http://jsfiddle.net/QXZuy/1/
<div class="wrap">
<div class="sidebar"></div>
<div class="content"></div>
</div>
html, body {
height:100%;
}
.wrap {
height:100%;
width:100%;
display:table;
overflow:auto;
background:#ccc;
}
.sidebar {
display:table-cell;
width:25%;
background-color:blue;
}
.content {
display:table-cell;
width:75%;
background-color:red;
}