I am working on a personal website and so far, everything has been going pretty well. I got the pages set up with the basic layout and everything like that. Now I am trying to make it look more professional. I bowl in tournaments multiple weekends a month. (Yes, I said bowl and yes I do consider it a sport) What I would like to do is put a schedule type bar across the top. (example can be found by clicking the link in this post) The problem is I cannot find any tutorials on how to do this because I don't really know what this functionality is called. Everything that I have tried searching for has just brought up horizontal navigation/scroll bars. Can anyone point me to a tutorial or give me a starting point for getting something like this working on my website?
That is actually a slider, showing like 15 slides at a time.
BX SLIDER - jQuery Slider
The slider included above has many options that let you customize how it works, such as
maxSlides - the total number of slides shown at a given time ( you'd set to 15 )
moveSlides - the number of slides to move on change ( you'd set to 1 ).
Example JS
$('.schedule').bxSlider({
maxSlides: 15,
minSlides: 15,
moveSlides: 1,
autoStart: false
});
Your HTML, with the schedule and all, as styled as you would like, is contained in a list.
<ul class="schedule">
<li>January 15th - Match</li>
<li>January 22nd - Match</li>
<li>January 23rd - Match</li>
</ul>
etc etc etc.
Related
I've spent like two hours or more trying to figure out what a "ved" parameter on a Google search means. A curious person I am.
My finds so far:
$ved value changes-
1 - every different search result (diff keywords)
2 - every different resulted block (the url blocks/boxed on the resulted google search, but they are quite similar, as I'll write down below)
3 - every different geolocation perhaps
Consider these tests or lookups:
1-
Diff keywords, but first block/position in list:
&ved=2ahUKEwidsaSd4M_1AhVlk_0HHUxOCQYQFnoECAsQAg
&ved=2ahUKEwj2pZyN5s_1AhVRmuYKHZ5IB5EQFnoECAcQAg
I thought the "ved" value refers to the block/position of a url in the result list, but no.
2-
Twree different urls, first and second from the 1st and 2nd blocks of first page, then third from a "much farther on the list" block:
ved=2ahUKEwjq1-Wb1s_1AhW6SWwGHZwpBMwQFnoECD8QAQ
ved=2ahUKEwjq1-Wb1s_1AhW6SWwGHZwpBMwQFnoECCAQAQ
ved=2ahUKEwiZ2NDe1s_1AhVaTmwGHThIA5U4PBAWegQIGRAB
The same website url, from different countries (not considering blocks or position in list):
&ved=2ahUKEwiopK2X08_1AhUgxzgGHQEbDkcQFnoECBIQAQ
&ved=2ahUKEwjpueqC1M_1AhWJq3IEHYEDAfc4FBAWegQIDBAB
&ved=2ahUKEwih09Wz08_1AhUY7WEKHQYdBB8QFnoECEIQAQ
Very similar they are.
I'd really love to know what they mean. Any ideas are appreciated too!
I found an interesting article explaining the subject : https://moz.com/blog/inside-googles-ved-parameter
TL;DR:
A ved code contains up to five separate parameters, which each tell you something about the link that was clicked on:
1st (parameter1: Link index) gives you an idea of where the link was on the page.
2nd (parameter2: Link type) is a number that corresponds to the 'type' of the link that was clicked.
3rd (parameter7: Start result position) is the cumulative result position of the first result on the page.
4th (parameter 6: Result position) indicates the position of your page in the search results.
5th (parameter 5: Sub-result position) like the (parameter 6), except it tells you the position in a list of sub-results, such as breadcrumbs, or one-page sitelinks.
I'm new to Angular. All the answers that i came accross are using jquery and javascript. Few weeks ago there was a requirement in my team that we need a month only picker. But the condition is that we cannot outsource the component from anywhere outside the organization. Not even bootstrap, material or primeng. So I decided to create a custom one from the scratch using HTML and CSS. Here is the screenshot:
app-monthpicker is a component and on top of it there is a parent component app-timeselector.
The monthpicker is working perfectly. But I'm not able to implement the logic for highlighting the selected range of months. All the solutions on stackoverflow and other websites are using jquery or js. But here We're talking typescript. I've created a minimal stackblitz and here is one more stackblitz created by one of the answerer. Can someone help me in this regard please. With HTML and CSS and Typescript only. I badly need someones help here. I want this:
You can see 6 months from the previous year and all the months from next year also. And they also need to be highlighted if they're in range. For now I need this for 2017 to 2025 only. I don't mind even if you hard-code these values for now.
PS: I'm afraid that my whole implementation is incorrect. Please correct me.
Ideally, for such a use case you should not re-invent the wheel and leverage a good library that solved this problem. But if you want to make your current code works for the use case here is what can be done:
demo: https://angular-zedvjx.stackblitz.io
implementation: https://stackblitz.com/edit/angular-zedvjx
At high level:
I used approach where overall months are represented by one large
Array (monthsData) since the use case needs to support months
selection across years and this way it is easier to iterate over it.
Then each month view is just a "slice" into this big array, so
switching between years is switching between the "views" (view here
is monthArray.slice(viewStart, viewFinish) )
Also introduced state for the range to keep track of it easier.
Update: wrote an article with cleaner implementation here: https://medium.com/better-programming/month-range-picker-in-angular-8-4ce93ef7d76b
I'll take another aproach. You has four variables:lboundMonth,lboundYear,uboundMonth and uboundYear.
I think that you can has some like, I put and example from october 2020 to febrary 2021
lbound:{year:2020,month:10,yearMonth:"202010"} //yearMonth it's the way yyyyMM
ubound:{year:2020,month:1,ueatMonth:"202101"}
Futhermore, you create an array with the month. As #Sergey say, we can create an array of months. But in my case, I'll take that was in the way
{monthName: "january",month:1,monthYear:202001}
So, when you change the year
month=arr.map((x,index)=>{
return {
monthName:x,
month:(index+1)
monthYear:displayYear+('00'+(x+1)).slice(-2)
})
You only need compare in the loop monthYear with lbound and ubound. Some like
<div *ngFor="let month of months>
<span [ngClass]="{'ubound':month.yearMonth==ubound.yearMonth,
'lbound':month.yearMonth==lbound.yearMonth,
'range':month.yearMonth>lbound.yearMonth &&
month.yearMonth<ubound.yearMonth
}"
(click)="click(month)"
</div>
When you click you has in
click(month:any)
{
const my={
year:this.displayYear
month:month.month
monthYear:month.monthYear
}
..asing to lbound or tbound
//you emit:
this.ouputToparent({
lbound:this.lbound,
ubound:this.ubound,
})
//or
this.ouputToparent({
lbound:{year:this.lbound.year,month:this.lbound.month},
ubound:{year:this.ubound.year,month:this.ubound.month},
})
}
Can you help me solve this problem? One column is not visible in Safari. I tried change display of .uk-grid class to everything, change order of CSS attributes and it didn't help.
Here is the page: http://pegasproperty.impnet.cz/
Here is image with mentioned issue (big red box should be visible):
You are mazafakin pohadkovy raper.
If not in the office is a habit, trust me,
in the streets I have the prestige, I go out with the truth out,
like pregnancy tests, you do not know anything about the street,
as a book with Majka Spirita and rappers from the villages,
I'll eat these shit like Nesquik,
do not rush before you grab over the lip,
I'll pull you out of the two-sixth of your brush
and you go home in the rain, these lyrics, tracks,
boards are not bullshit, I'm a problem I do not want to solve,
With some coding and getting the ratyrate to work into chartkick.js - there are very minimal tutorials regarding styling changes.
The data is working into the bar graph as shown below;
HTML Setup for display:
<div class="col-md-4">
<%= bar_chart Review.group(:rating).count(:rating), colors: ["blue"], discrete: true %>
<p>Sum of each Review</p>
<%=#review_total_each%>
<p><%=#review_count%> Total Review count</p>
</div>
Main objective is to get it to look like this;
have different colours per each rating number
reverse order with 5 being at the top
remove the bottom legend (only keep the left)
remove the lines between the bars
done need to worry about the average etc, only focussing on the colour changes to the bars
I have read some tutorials although each review needs to become a unique data set and then you can complete colours.
(Chartkick column charts multiple colors)
But still having no success.
Any help or guidance will be appreciated.
(I can always update the question with requests)
I want to add a line chart as a control chart in one of the widget pages in October CMS. CMS has pre-built classes for bar chart and pie chart. I was wondering if they have similar classes for other kind of analytics data.
I want to add the line chart prebuilt class to an html partials page, that can be used as a widget in october cms.
It seems that you are talking about things like this: https://octobercms.com/docs/ui/chart and you are looking for another type of chart besides those mentioned there.
I wanted to say if such a thing is not listed there then probably it does not exist. But... hey... I just went looking into the backend UI JS code.
Look at this file in your October app root: {% app root %}/modules/system/assets/ui/js/chart.line.js
/*
* Line Chart Plugin
*
* Data attributes:
* - data-control="chart-line" - enables the line chart plugin
* - data-reset-zoom-link="#reset-zoom" - specifies a link to reset zoom
* - data-zoomable - indicates that the chart is zoomable
* - data-time-mode="weeks" - if the "weeks" value is specified and the xaxis mo
de is "time", the X axis labels will be displayed as week end dates.
* - data-chart-options="xaxis: {mode: 'time'}" - specifies the Flot configurati
on in JSON format. See https://github.com/flot/flot/blob/master/API.md for detai
ls.
*
* Data sets are defined with the SPAN elements inside the chart element: <span
data-chart="dataset" data-set-data="[0,0],[1,19]">
* Data set elements could contain data attributes with names in the format "dat
a-set-color". The names for the data set
* attributes are described in the Flot documentation: https://github.com/flot/f
lot/blob/master/API.md#data-format
*
* JavaScript API:
* $('.chart').chartLine({ resetZoomLink:'#reset-zoom' })
*
So the functionality is there, it seems, but it's not in the public docs. Looks like you could try out something like this
<div
class="control-chart"
data-control="chart-line"
style="min-height:400px"
data-zoomable="1"
data-reset-zoom-link="#reset-zoom"
data->
<span data-chart="dataset" data-set-label="Graph me tender" data-set-data="[0,0],[1,5],[3,8],[4,2],[5,6]">
Graph me tender
</span>
<span data-chart="dataset" data-set-label="Graph me sweet" data-set-data="[0,0],[1,5],[3,8],[4,2]">
Graph me sweet
</span>
</div>
<a id="#reset-zoom" href="#">Reset zoom</a>
(Edit: There was a somewhat "dirty" tweak necessary here: I added a min-height css attribute, otherwise there was an error thrown. Maybe there should be some additional class for that instead which I do not know. Also, the two data-sets are not plotted in order (the second is plotted first) and are wrongly labeled in the legend, and appear horizontally connected to each other. The zoom function does not seem to work, etc, etc. I think this line graph thingy is possibly still work in progress and that might be the reason why it is not included in the docs yet. )
, play around with it and see what it does. (I have not tested this and hope it works somehow.) If I understand correctly it should give you a zoomable line graph with data points [0,0],[1,5],[3,8],[4,2],[5,6] (x,y coordinate points) and the link below should reset the zoom (edit: zooming does not work. maybe need to set some additional options for that)
The whole thing seems to be based on this Flot JQuery chart library. So you might find some good further hints there or here, besides reading October's {% app root %}/modules/system/assets/ui/js/chart.line.js source code.