So, I know I would be able to solve this issue IF I were able to implement extra handlebars helpers, but that is not an option.
We are using a third-party back end system for our Help Desk [ZenDesk], which uses handlebars as its general markup for dynamic content. I have a section on the home page of our Help Center website that I want to list the first 5-6 FAQ articles, and then a SEE MORE link underneath for the user to see the rest of the articles in that particular section.
Out of the box, they allow us to use the IF and IS conditional, but no comparative aside from TRUE or FALSE, no greater than, no less than, no greater or equal than, etc. I wrote up a simple helper that would allow for this, but no matter where I put it in the templates available to us, it would always generate an error that the function was not valid.
After discussing this with this application's support team, I was informed that NO CUSTOM HELPERS ARE ALLOWED TO BE USED. I have to rely SOLELY on HTML, CSS and JAVASCRIPT/JQUERY to find the solution.
So.... Does anybody know of a possible solution of how I can cap off a handlebars #each loop at 5 iterations by using CSS or JAVASCRIPT?
UPDATE: 09/05/2018:
Here's the #each loop I am using for the section "Frequently Asked Questions"
<h2>Frequently Asked Questions</h2>
<section class="section faq-base">
<section class="categories">
<ul class="">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="">
<a href='{{url}}' class="">
<h4 class="blocks-item-title">{{name}}</h4>
</a>
</li>
{{else}}
{{#each sections}}
{{#is id //ID FOR FREQUENTLY ASKED QUESTIONS SECTION}}
<div class="accordion homeFAQ" id="homeFAQ">
{{#each articles}}
<div class="card">
<div class="card-header" id="heading{{#index}}">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse{{#index}}" aria-expanded="true" aria-controls="collapse{{#index}}">
{{title}}
</button>
</h5>
</div>
<div id="collapse{{#index}}" class="collapse" aria-labelledby="heading{{#index}}" data-parent="#homeFAQ">
<div class="card-body">
{{body}}
</div>
</div>
</div>
{{/each}}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
...SEE MORE
</h5>
</div>
</div>
</div>
{{/is}}
{{/each}}
{{/if}}
{{/each}}
</ul>
</section>
</section>
As you can see from the above code, I am inserting the FAQ into a Bootstrap Accordion, and at the end is the ...SEE MORE button
Could you add a display:none to the articles by default, then use JS to count the number of articles on the page, based on the class (or something) of the articles on the page, and then use JS again to remove the display:none from the first 5-6 articles? May not be the most elegant approach but should be one way to accomplish what you are looking for.
Related
In our current frontend we want to add accessibility improvements. The current challenge is to make the list of items including additional actions more accessible. Our document structure is based on the following idea:
<div class="products-list" role="list">
<div class="product" role="listitem">
<div class="product-name">Product A</div>
<div class="product-actions>
<div class="action-icon" role="button">First</div>
<div class="action-icon" role="button">Second</div>
</div>
</div>
</div>
At the moment it's possible to select the list-items, however the a11y border highlights the entire list item (div.product). Hence it's not possible to focus the buttons. Defining a sublist using list/listitem roles for div.product-actions was not of benefit. Do you have any ideas how to achive this?
I'm developing a website using HTML, CSS and Boostrap. I cant figure out why everything isn't even in width going across the page. What am I missing? It seems to be some sort of Margin or Padding on the right side of the page and my card sections are uneven.
https://codepen.io/kennethpaige/pen/zYGzgOj
#<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<!--STYLE-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!--style-->
</head>
<body>
<!--TITLE-->
<section id="title">
<div class="container-fluid">
<nav class="navbar fixed-top navbar-light bg-light">
<a class="nav-brand" href="https://www.gimkit.com/"><img id="brand" class="gimkit-logo" src="https://i.postimg.cc/SNRNWbVz/gimkit-removebg-preview.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul id="navbar-list" class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#application-questions">Application Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#customer-questions">Customer Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fun-facts-about-me">Fun Facts About Me</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 id="kenneth-paige" class="display-4">Kenneth Paige</h1>
<img class="gimkit-logo2" src="https://i.postimg.cc/SNRNWbVz/gimkit-removebg-preview.png">
</div>
</div>
<!--TITLE-->
<!--APPLICATION QUESTIONS-->
<section id="application-questions">
<div>
<h2>Application Questions</h2>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="falese">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div id="carouselExampleControls" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" id="carousel">
<h3>Why you want to work in customer support?</h3>
<p style="text-align:left">Why do I want to work in customer support? Well, I believe that we were put on this earth to help each other. I gained a good understanding of this at the age of 11 when my mother had a stroke that completely paralyzed the left side of her body. A week later she woke up to the news that her mother passed away at her bedside.</br></br>
Seeing as how my father was never around, and I was the oldest of three, I learned responsibility at a young age. My mother taught me how to cook, clean, and wash clothes from a wheelchair, she made sure that I took care of my little brothers, and after everything she went through, she still managed to keep a smile on her face and never let us see her cry. She always told me that I was the reason for her happiness. However, after watching my mother go through so much and still find hope, I realized she was the reason for my happiness. She always thanked me for helping her during that time and It took years for me to realize that she was the one who helped me and for that, I thank her till this day.</br></br>
When I hear “Customer Support”, the only thing that comes to mind is “helping someone in need”. I’ve de-escalated irate customer’s before and at the end of the call, they always thank me for helping them. The goal is to empathize and understand what they’re going through. You must heal the customer before you can resolve their issue. I want to work in customer support because I love to help others. Nothing feel’s better than hearing that I was able to take someone’s terrible day and turn it into a wonderful day with a delightful experience.
</p>
</div>
<div class="carousel-item" id="carousel">
<h3>A description of a great customer service/support experience</br> you had recently, and what made it great.</h3>
<p style="text-align:left">I was driving home the night of November 16th, 2019. It was dark and raining outside, so unfortunately, I couldn’t see very well. As I was driving, I heard a loud POP, at the same time I felt my car rumble and start slowing down. After my car came to a complete stop, I got out to check and see what was going on. To my surprise, I ran over a pothole that flattened both tires on the right side of my vehicle. I had no idea what I was going to do.</br></br>
The next day I called State Farm and spoke with a representative who worked with me to set up a claim. He asked me everything that happened, and I explained it to him in detail. He ensured me that I had nothing to worry about, everything would be taken care of, and all I had to do was pay a deductible of 500.00. I chose to get my car repaired at the same place I purchased it from, a Toyota dealership about 5 minutes away from my house. The next day I called Toyota to see if the repairs were done. I was informed by a technician that my vehicle was ready for pick up however, it had to be taken to another department for the repairs. A few minutes later I received an invoice from Toyota for 2,168.68. I immediately contacted Toyota and let them know that my repair was supposed to be covered as an insurance claim. The person I spoke with told me they didn’t receive an insurance claim, so I would need to pay 2,168.68 or I wouldn’t be able to pick up my vehicle. Not only was it more than I expected, but I also didn’t have anywhere near that amount of money. I called State Farm again, this time I spoke with a different representative. After I explained the situation, the representative told me the person before her set up an insurance claim for my car, but they didn’t cover pothole damage. I was in a dilemma to no fault of my own, that neither company wanted to take responsibility for.</br></br>
After several calls to Toyota and State Farm, I was transferred to the manager of the repair department at Toyota. He let me know he understood what I was going through by relating it to a similar experience he went through, apologized for the misunderstanding, and told me he was going to personally make sure my issue got resolved. He didn’t try to place blame on anyone else and I could tell by the empathy in his voice he wanted to help me. He offered to take care of the repair amount and wash my car free of charge. By the end of the call, I had almost forgot about the experience I went through. Getting your issue resolved is always a plus. However, after the experience I had with the Manager at Toyota, I continue to go to them as a customer. He could’ve just offered to cover the repair amount and ended the conversation, but after everything that I went through, I don’t think I would’ve ever gone back to them. Sometimes being a genuine human being is the greatest gift anyone could ever receive.
</p>
</div>
<div class="carousel-item" id="carousel">
<h3>A time you taught yourself a new skill to complete a job or project.</h3>
<p style="text-align:left">I worked at a corporate Verizon Wireless call center for years. I loved my job. However, my daughter was born in October of 2018, and I wasn’t making enough money to support my family. I had to find a way to generate more income.</br></br>
One day I was scrolling on social media and I saw an ad that stated I could learn how to code, and I wouldn’t have to pay anything until I got a job as a software developer. I clicked on the link and after completing an application I was asked to complete some pre-course work. I completed the coursework and even after I was done, I wanted to know more. So, I studied as much as I could with hopes of getting approved for a coding bootcamp. A week later I received an email stating I didn’t get approved for a loan because I didn’t have enough credit. Seeing as how I could barely take care of my family, I already knew I couldn’t afford to pay for school. So, I investigated every possible option until I decided to take the self-taught route. I wasn’t going to let anything stop me from getting where I needed to be in life. After doing some research, I stumbled upon a website called “Free Code Camp” that not only allowed me to study code but also gives you certifications upon completion. I completed course work and several projects until I earned a responsive web design certification by myself.</br></br>
When I heard I wasn’t approved for a loan due to financial reasons, I almost gave up. However, I never let it get to me. All it took was some consistency and determination. Studying code is an endless journey and I’m still learning till this day.
</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!--APPLICATION QUESTIONS-->
<!--CUSTOMER QUESTIONS-->
<section id="customer-questions">
<h2>Customer Questions</h2>
<div class="row">
<div class="col-lg-12 col-md-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>How do you create a Class?</h3>
</div>
<div class="card-body">
<p>Hi Mr. Customer,</br></br>
I hope all is well. In order to create a class in GimKit, you will first need to sign into your GimKit account. From your dashboard click <strong>classes</strong> on the left panel and then click <strong>new class</strong>. On this page you will be asked to enter a <strong>class name</strong>, <strong>class color</strong>, and <strong>class members</strong>. Once that is completed, we will want to submit the information by clicking <strong>create class</strong>. Your new class will be created and ready for you to create memorable learning experiences. I have listed some resources below regarding “classes” in GimKit. Feel free to reach out to me if you have any additional questions.</br></br>
Classes Explained</br>
How To Create A Class</br>
How/When To Use Classes</br>
How To Edit Classes</br></br>
Thank you,</br>
Kenneth
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>Why does Gimkit cost money?</h3>
</div>
<div class="card-body">
<p style="padding-left:20px;">Hi Mrs. Customer,</br></br>
I hope your having a wonderful day. All our GimKit plans are ad free, so we offer several plan options in order to maintain an amazing learning experience. I listed a link below to our pricing plans, including an option to use GimKit for free forever. Please feel free to reply to this email if you have any additional questions about GimKit.</br></br>
Get Started with Gimkit!</br></br>
Thank you,</br>
Kenneth</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>Does Gimkit have the ability to export a report to a CSV file?</h3>
</div>
<div class="card-body">
<p style="padding-left:35px;">Hi Ms. Customer,</br></br>
I hope all is well. GimKit reports can be exported into a PDF file, however, currently the option to export into a CSV file is unavailable. I have included some resources below regarding GimKit reports and information on printing and saving reports. I apologize for any inconvenience. Please feel free to reach out to me if you have any additional questions.</br></br>
Game reports</br>
Printing and Saving Reports</br></br>
Thank you,</br>
Kenneth</p>
</div>
</div>
</section>
<!--CUSTOMER QUESTIONS-->
<!--FUN FACTS ABOUT ME-->
<section id="fun-facts-about-me">
<h2>Fun Facts About Me</h2>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Things I Love To Do</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>Listen to Music</li>
<li>Watch Anime</li>
<li>CODE</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Fun Places I've Been To</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>Las Vegas, NV</li>
<li>Sacramento, CA</li>
<li>Orlanda, FL</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Hidden Talents</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>I'm an Audio Engineer</li>
<li>I can play multiple Instuments</li>
<li>I'm a songwriter</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
<!--FUN FACTS ABOUT ME-->
</div>
</div>
</body>
</html>
Add .row margin:0px !important; to overwrite .row margin.
you should use "container-fluid" if full width
you should use "container" if specified width used
this will fix your column view of cards
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.
I implemented that in JavaScript:
$('#dash_adc_avg').html(adc_avg);
And this in HTML:
(part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" id="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML:
(part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" id="dash_adc_avg"></div><br>
etc.
Unfortunately, the visualization of the content from var adc_avg works properly for "part A" ONLY. Does anyone know why?
Thank you!
By the way and independent: I'm looking for a way to visualize JSON-Data (as Objects) on the website, without changing them. Any ideas?
From the id attribute section of the HTML specification:
The id attribute specifies its element's unique identifier (ID).
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
IDs must be unique in HTML. Because of this, JavaScript only ever looks for one instance of an ID and then stops searching. In your case, the ID being pulled is the one in part A - your code never bothers looking further than that.
Change your "dash_adc_avg" ID into a class instead:
<!-- Part A -->
<div class="big-text dash_adc_avg"></div>
<!-- Part B -->
- Test: <div class="text dash_adc_avg"></div><br>
Then with your jQuery select on the class instead of the ID:
$('.dash_adc_avg').html(adc_avg);
I'm not going to bother answering the second part of your question, which is about visualising JSON data, as it has absolutely nothing to do with the main part of the question and is completely separate. Please ask that as a different question.
An identity has to be unique in the page.
It's still possible to use the id attribute to find the elements, but then you have to use it as an attribute, not as an identity:
$('[id=dash_adc_avg]').html(adc_avg);
Generally a class is used instead when you want to put it on multiple elements. There is no benefit of keeping the dupliate id attributes as they don't work as identities.
You are using duplicate id's dash_adc_avg which is a invalid HTML instead of id's use class and modify your Jquery selector as shown :-
$('.dash_adc_avg').html(adc_avg);
you should use class when you are using same name for more than once on same page in your html:
$('.dash_adc_avg').html(adc_avg);
It is considered bad practice to use the same id tag on multiple places, I would suggest that you instead use class for your dash_adc_avg
$('.dash_adc_avg').html(adc_avg)
And this in HTML: (part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" class="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML: (part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" class="dash_adc_avg"></div><br>
Your id must be unique and if not the first element found by that id will be selected.
For multiple selection for same thing/functionality use class instead of id.
I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.
I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();