Im currently working on a leaderboard demo where a player has a number of games, points and a ratio of points/games. On top of my leaderboards I want a line which shows what is beneath.
<h2>{{title}}</h2>
<ul class="leaderboard">
<li>
<span class="badge">Rank</span> Name
<div class="wrapper"[ngSwitch]="type">
<span *ngSwitchCase="'games'" class="points">Games</span>
<span *ngSwitchCase="'points'" class="points">Points</span>
<span *ngSwitchCase="'ratio'" class="points">Ratio</span>
<div class="wrapper" *ngSwitchDefault>
<span class="points">Ratio</span>
<span class="points">Points</span>
<span class="points">Games</span>
</div>
</div>
</li>
</ul>
I think the second div with ngSwitchDefault is the Problem. But I am relatively new to Angular 2 and its usage with html. How can i deal with that in one html?
Here is a plunker with switch working, the single quotes are ok (my bad).
enter code here
https://plnkr.co/edit/1FWbbWiLX1EGsm6Pe9YA?p=preview
Related
I developed a timeline, however I am having some issues that I can't solve :(
Firstly, the timeline is not responsive, ie when the screen enlarges or I put a larger description, the timeline lines separate and I always want to have it together, does anyone know what it is?
Second problem: Timeline starts at value 1, how can I always start at value 4?
As you can see in the image, I have both problems: separate timeline lines and it starting at 1 and not 4 :(
HTML
<ul class="timeline" id="timeline" *ngFor="let priority of Priorities; let p = index;">
<li class="li complete">
<div class="timestamp">
<span class="priorityNumber">{{priority.id}}</span>
</div>
<div class="status">
<span class="circle"></span>
<h4 class="timelineh4">{{priority.text}}</h4>
</div>
</li>
</ul>
Seen your code, If you are using angular then why are you doing it the javascript way.
And fixed as much I can in this fork. I cant understand your second question's requirement Please brief on it.
I've built a widget in ServiceNow that displays a user's onboarding steps and when a step is clicked upon, a div appears below that lists out all of the tasks that they need to complete. While this works fine, I think it would look slicker if instead of having a div appear below the onboarding steps with a line divider, that the list of tasks would take the place of the entire onboarding steps div. Then maybe have a back button that takes them back to the onboarding steps with some fade in/fade out animation. If possible, I would like this to be done without jquery. Can someone provide some guidance or direct me towards an example?
My HTML so far looks like this:
<div class="container" ng-if="!c.data.loading && c.stage.length>0">
<div class="parent">
<div class="child" ng-repeat="item in c.stage track by $index">
<div class="at-work-process position-relative overflow-hidden text-center">
<div class="at-work-process-text">
<span class="at-work-process-step" ng-class="{inactive: item.workflow_order>c.currentOrder}">Step</span>
<span class="at-work-process-number" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{$index+1}}</span>
<span class="at-work-process-number-text" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{item.workflow_stage}}</span>
<div class="at-separator-thick" ng-class="{active_stage: item.currentStage, completed_stage: item.incompleteTotal==0 && item.workflow_order<c.currentOrder}"></div>
</div>
<div ng-click="showDetails(item);" class="at-work-process-details" ng-class="{inactive: item.workflow_order>c.currentOrder}">
<div ng-if="item.incompleteTotal>0 && item.workflow_order<=c.currentOrder" class="full-height">
<i class="material-icons" style="color:#e53935;">assignment_late</i>
<span ng-if="item.incompleteTotal>1">Incomplete <br/> {{item.incompleteTotal}} Tasks Require Your Attention</span>
<span ng-if="item.incompleteTotal==1">Incomplete <br/> {{item.incompleteTotal}} Task Require Your Attention</span>
</div>
<div ng-if="item.incompleteTotal==0 && item.workflow_order>c.currentOrder" class="full-height">
<i class="material-icons" style="color:#78B4F3;">assignment</i>
<span>Not Started</span>
</div>
<div ng-if="item.incompleteTotal==0 && item.workflow_order<c.currentOrder" class="full-height">
<i class="material-icons" style="color:#43A047;">assignment_turned_in</i>
<span>Complete</span>
</div>
</div>
</div>
</div>
</div>
//am hoping the below div would take the place of the above div instead of showing up underneath it//
<div ng-if="active_tasks.length>0" ng-class="taskClass" class="text-center tasksDiv">
<md-divider></md-divider>
<h3>{{active_workflow}} Tasks:</h3>
<ul style="list-style:none; padding-left:0; display:inline-block">
<li ng-repeat="tasks in active_tasks track by $index" style="display:flex; align-items:center; padding-bottom:0.5rem;">
<i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i>
<a ng-if="tasks.url.indexOf('table2')!=-1" ng-click="c.enroll(tasks)" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.url.indexOf('table1')!=-1" ng-click="c.tableNew()" href="javascript: void(0)"ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.hr_task_type=='url' && tasks.url.indexOf('c.')==-1" href="{{tasks.url}}" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.url.indexOf('launchWith')!=-1" ng-click="c.launchWith()" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.hr_task_type!='url'" ng-click="review(tasks)" href="javascript: void(0)" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
</li>
</ul>
</div>
</div>
I would attach an ng-if to the first div that works on the opposite condition of the second div.
So in this case, your second div has ng-if="active_tasks.length>0" as its condition for display. So you could set an ng-if="active_tasks.length<=0" on the first div so that any time the second div is displayed, the condition will be false for the first div. Then just remove the divider in the second div (since you don't want that anymore). Now when you perform an action on the first div and active_tasks gets populated, the first one will be destroyed and the second one will be created.
Note that in this case, you're using ng-if which will create/destroy DOM elements. You can also use ng-show to show/hide the DOM elements if you anticipate the user going back and for a lot (so that they're created up front and just hidden instead of being recreated each time the user changes the state)
Your html is slightly hard to follow, so I'm not sure which blocks you would like to hide/show, but you can do this very simply. Just create a variable, showTaskList on your scope and set it to true/false. Then on the parent div for the onboarding list do, ng-if="!showTaskList" and on the parent div for the task list, ng-if="showTaskList".
When the person clicks the button to switch between the task list or the onboarding steps, just switch this bool to the opposite, showTaskList = !showTaskList.
I checked many different sites (official one also) and all the examples display the google snippets code itemscope/itemtype inside a div and the itemprop inside a span.
I'm wondering if this is just a simple way to show samples code or is the only way yo display it.
I have my address in a list so i wrote like this:
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<i class="fa fa-map-marker fa-lg"></i> <p class="labelSocial">Address:</p>
<a href="https://www.google.com/maps/place/Glogauer+Stra%C3%9Fe+21/#52.49226,13.4369,17z/data=!3m1!4b1!4m2!3m1!1s0x47a84fb24234006b:0x36dfe942fb2b5f97" target="_blank">
<p class="addressText">
<span itemprop="streetAddress"> Glougauerstrasse 21, </span> </br>
<span itemprop="postalCode"> 12435 </span>
<span itemprop="addressLocality"> - Berlin </span>
<span itemprop="addressCountry"> (DE) </span>
</p></a>
</li>
is that also correct?
Your Code is fine but you'll have to nest schema.org/PostalAddress under some main category but use of <li> tag is correct. Here is what Google Structured Data testing tools shows for the code you mentioned above-
http://www.google.com/webmasters/tools/richsnippets?q=uploaded:800501214b811a6b2bbfb52e2d77f96d
In order to tell Google and other search engines that address is related to what, we must specify a category and nest postal address inside it. Please see the example, schema.org/PostalAdsress is nested inside LocalBusiness schema:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1>
<span itemprop="description"> A superb collection of fine gifts and clothing
to accent your stay in Mexico Beach.</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">3102 Highway 98</span>
<span itemprop="addressLocality">Mexico Beach</span>,
<span itemprop="addressRegion">FL</span>
</div>
Phone: <span itemprop="telephone">850-648-4200</span>
</div>
I have the following RDFa rich snippet at the top of a web page (ref: https://support.google.com/webmasters/answer/146645?hl=en#aggregate):
<div class="site-reviews">
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
<span property="v:itemreviewed">[Product]</span>
<span rel="v:rating">
<span typeof="v:Rating">
<span property="v:average">5</span>
out of
<span property="v:best">5</span>
</span>
</span>
based on
<span property="v:votes">8</span> votes.
</div>
</div>
However, rather than showing the usual stars in the search result, it displays the text result "[Product] 5 out of 5 based on 462 votes." as the meta-description. Where am I going wrong?
*UPDATE (anonymised) google search result below:
I'm working on an application that displays a list of chats and need to get the chats into the virtual buffer. The chat content can be as simple as a line of text or as complicated as text plus a link plus an image. Without role=document, it's not in the buffer but with role=document JAWS reads "clickable" when it reads the content (after pressing down arrow). The content is not clickable and I can't figure out how to stop that from being read.
Here's an example of the layout:
<div role="application" class="mainViewContainer">
<ul class="mainViewContent">
<li tabindex="0" class="chatViewContainer">
<div tabindex="-1" class="chatHeaderContainer">
<span class="offscreen" id="chat1">Chat content</span>
<div role="document" tabindex="0" class="chatContent" aria-labelledby="chat1">
Here's a message, huzzah!
</div>
</div>
</li>
<li tabindex="0" class="chatViewContainer">
<div tabindex="-1" class="chatHeaderContainer">
<span class="offscreen" id="chat2">Chat content</span>
<div role="document" tabindex="0" class="chatContent" aria-labelledby="chat2">
<div class="chatText>Document documentName.jpg created </div>
<div class="documentView">
<img title="documentName.jpg" src="imgsrc">
<div class="documentItemDetails">
documentName.jpg
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Any ideas on how to make the chatContent div not have "clickable" read by JAWS?
I'm seeing this with JAWS Version 15.0.6025 (I believe it's the most recent version) and FF 26 on Windows 7.
I had this same issue. Apparently, this is an expected behavior, as explained in this URL.
Clickable Text : When you navigate to a grid cell that has its display style set to clickable text, JAWS reads the corresponding column header text and then the data content of the current cell.
I hope this helps.