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.
Related
Following is html code. The final div is a hyperlink that calls javascript. This is the bottom of a longer page, but everything works until the final hyperlink, which appears on the page but not as a clickable link.
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
<div class="sp_01 bordered">
<ul class="sp_03 bordered">
<li class="sp_03 bordered" style="text-align:justify;">Text 1</li><br>
<li class="sp_03 bordered" style="text-align:justify;">Text 2</li><br>
<li class="sponsor_03 bordered" style="text-align:justify;">Text 3</li>
</ul>
</div><br><br>
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
The first instance of the hyperlink works. After the -div class="sp_01 bordered"- section, the final instance of the hyperlink appears as a line but not a click link.
This sort of problem is usually related to how the preceding tags are open and closed. I’ve studied the open and close tags and I don’t see anything wrong. The color coding in my editor (Atom) is correct for all tags.
What’s wrong?
Just wrap your DIV inside a like
<a href="#" onclick="ShowPages(18);" class="tfl" style="text-decoration: none; color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span>
<div style="padding-left:15%;">
</div>
</a>
<br>
Edit
For future references this answer don't include sufficient information . So that I was trying to delete this. But after answer beign accepted it cant be deleted.
I'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.
I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains the task cards.
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
Any help, tips, suggestions, etc. Would be greatly appreciated!.
You could use columns classes to achieve what you want
<div class="task-container columns is-multiline">
<div class="card column is-half is-offset-one-quarter">
// statements
</div>
</div>
Here is the link to the official documentation: https://bulma.io/documentation/columns/options/#centering-columns
You could wrap the card div with a columns container and use the is-half class if you don't want to use the offset class.
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.
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
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>