I have created a testimonial section for a website. This is a project I am building as part of my portfolio, it isnt really for a client.
Nonetheless, what I am trying to achieve is for each of these testimonials to appear within its parent div one by one. I have put them in their own seperate divs then used a counter and function to iterate through them appearing individually, however something does not seem to be working (and the console does not seem to be logging any errors).
My code is provided below. Many thanks for the help.
HTML:
<div class="row text-center">
<div class="col-md-12" id="customerreviews">
<div class="customercomment text-center">
<p>"TEXT 1"</p>
<h4>Rachel Smith<span class="location"> (Manchester)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 2"</p>
<h4>Darren Wise<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 3"</p>
<h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 4"</p>
<h4>Jason Hardy<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 5"</p>
<h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 6"</p>
<h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>
</div>
</div>
</div>
JAVASCRIPT:
var testimonials = $(".customercomment");
var testimonialsDiv = $("#customerreviews");
var currentTestimonial = 0;
function switchComments(){
if (currentTestimonial == testimonials.length-1){
currentTestimonial = 0;
}
$(testimonials[currentTestimonial]).fadeIn("fast",function(){
$(testimonials[currentTestimonial]).delay(5000).fadeOut("slow");
currentTestimonial++;
})
}
switchComments();
EDIT the code is fading in the first element with class "testimonials", but after it fades out, nothing else appears.
Use Jquery when you gain elements.
var testimonials = $(".customercomment");
var testimonialsDiv = $("#customerreviews");
function switchComments(){
var ix, ixLen;
for(ix = 0, ixLen = testimonials.length; ix < ixLen; ix++){
$(testimonials[ix]).delay(1000 * ix).fadeIn("slow");
}
}
switchComments();
.customercomment{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12" id="customerreviews">
<div class="customercomment text-center">
<p>"TEXT 1"</p>
<h4>Rachel Smith<span class="location"> (Manchester)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 2"</p>
<h4>Darren Wise<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 3"</p>
<h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 4"</p>
<h4>Jason Hardy<span class="location"> (London)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 5"</p>
<h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>
</div>
<div class="customercomment text-center">
<p>"TEXT 6"</p>
<h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>
</div>
</div>
</div>
Related
I'm currently working on a web application that has to function as some sort of webshop later on. I'm now working on an addToCart function, that has to pick certain data from the clicked element (the name and the price of the product, and add 1 to pcs and save everything to a session), and paste these 2 values into a template I've made and place this in the shopCart. I'm now trying to print out the 2 values I've just mentioned, but I'm stuck now.
This is the current javascript code I've made for loading in all the products, and my attempt on showing some of the values of the clicked items:
$(function(){
$.getJSON("assets/products/sample_products.json", function(response) {
$.each(response.data, function (i, el) {
let card = $($('#productCard-template').html());
card.find('#cardName').html( el.name);
card.find('#cardPrice').html( '€' + el.price );
card.find('.productItem').attr('data-price', el.price)
.attr('data-article-number', el.article_number)
.attr('data-id', el.id)
.attr('data-name', el.name)
.attr('data-stock', el.stock)
.attr('data-categories', el.categories);
$('#touchViewProducts').append(card);
});
});
});
//onclick function adds data of product to the designated template
function addToCart(){
var value = document.getElementById("productCard").value;
var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
This is the html code of the templates:
<div class="row touchViewSection">
<!-- shopping sector -->
<!-- touchView -->
<!-- categories menu -->
<div class="col-3 categoriesSection">
<div class="categories">
<p style="background-color: white; margin-bottom: 0px" > Categories </p>
<a class="nav-link" id="all" href="#">All</a>
<a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
<a class="nav-link" id="rotjes" href="#">Rotjes</a>
<a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
</div>
</div>
<!-- categories menu -->
<!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
<div class="col-9 productItems" >
<br>
<div class="row" id="touchViewProducts">
</div>
</div>
</div>
<!--/touchView -->
<!--Keyboard View -->
<div class="row keyboardViewSection">
<div class="col-12 keyboardViewRow">
<table id="data-table" class="table table-bordered" style="width: 100%;">
<thead id="tableHead">
<tr>
<th> # </th>
<th> Product name </th>
<th> Free Stock </th>
<th> Price </th>
<th> Action </th>
</tr>
</thead>
</table>
</div>
</div>
<!--/Keyboard View -->
<div class="footer">
<div class="container">
<p class="text-muted"> Developed by Vesta Group</p>
</div>
</div>
</div>
<!--/shopping sector-->
<div class="col-4 cartSection">
<!--cart-->
<div class="row">
<div class="col-5">Product</div>
<div class="col-1">Pcs.</div>
<div class="col-2">Price</div>
<div class="col-3">Total</div>
</div>
<hr style="background-color: white;">
<div id="output" class="row"></div>
<div class="row shopcardProducts" id="shopcartProducts">
</div>
<div class="row cartCheck">
<div class="col-5">Number of products</div>
<div class="col-1">1</div>
<div class="col-2">Subtotal</div>
<div class="col-3 total">€ 0,00</div>
<div class="col-5"></div>
<div class="col-1"></div>
<div class="col-2">Total </div>
<div class="col-3">€ 0,00</div>
</div>
<div class="row cartCheck">
<div class="col-12 checkoutBtn"> Checkout </div>
<div class="col-6 addDiscountBtn"> Add discount </div>
<div class="col-6 cancelBtn"> Cancel </div>
</div>
<!--buttons-->
<!--/cart-->
</div>
</div>
</div>
<script type="text/template" id="productCard-template">
<div class="col-3 productCard" id="productCard" onclick="addToCart()">
<a href="#" class="productItem">
<div class="card">
<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
<div class="container">
<div class="row" style="height: 6vh; max-width: 20ch;">
<p id="cardName"> </p>
</div>
<div class="row" style="height: 50%">
<b><p id="cardPrice"></p></b>
</div>
</div>
</div>
</a>
</div>
</script>
<script type="text/template" id="shopcartRow-template">
<div class="row">
<div class="col-5" id="valueName"> </div>
<div class="col-1" id="valueQty"> </div>
<div class="col-2" id="valuePrice"> </div>
<div class="col-3" id="valueTotal"> </div>
</div>
</script>
Here's an image of what the web app looks like, I hope that could make it more clear.
Because addToCart() is a callback, you can use this to access its context (the caller element):
function addToCart(){
var value = $(this).val(); // what val you want to refer? there are no input in the template
var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
Bad title, I know, but it's hard to explain in few words.
I'm automating on nightwatch and ran into something that has me stumped as I'm used to coding on JS only for automation. Normally, it's easy to verify that an element is present, or that an element is not. But for this, I have an html element that shows that results of a search and I need to verify that the results contain only elements
So, I need to make sure that all result-item on the entity-results div only have results with hint-val-fragment match equal to -1000000.0 and hint-prop equal to cpuLimit:, in this example.
<div class="results" style="">
<!---->
<div>
<div class="results-set-title">Results</div>
<!---->
<div class="entity-results">
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Below I've defined isValid, which is applied to every element in an array passed to allValid. This function can be applied after there's been an update on the DOM and you need to recheck the elements:
const isValid = elem => {
const val = elem.getElementsByClassName('hint-val-fragment match')[0].innerHTML.trim()
const hint = elem.getElementsByClassName('hint-prop')[0].innerHTML.trim()
return (
val === '-1000000.0'
&& hint === 'cpuLimit:'
)
}
const allValid = arr => arr.every(isValid)
const parent = document.getElementsByClassName('entity-results')[0]
const children = Array.from(parent.children)
const allAreValid = allValid(children)
I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files.
for example in php we can do it with a
include("");
but in framework7 I can include only one with
<div class="view view-main view-init" data-url="/page/" data-name="page"></div>
I'd like to include more one view like this
<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>
i put an image here to explain me better.
what i'd like to do
Thank you for your help.
pages.html
<div data-name="pages" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="pages1">
<div class="row justify-content-center">
<div class="block-title">
<h1> Pages</h1>
</div> <!--block-title-->
</div><!--row-->
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card 1</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
Here I'd like to include the code inside pages1.html
Here I'd like to include the code inside pages2.html
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" href="#">Salva</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
pages1.html
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card2</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
To include Multiple Views Layout you need to do this:
You need to create wrapper with class views like this: <div class="views tabs">
You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
You need to make sure thats only one views class wrapper.
In Js: You can control multiple views by this:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
For more details: F7 View
For Embedded Multi view not like tab:
Example
Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally
EDIT: After a long investigation, I found from the documentation that you can do it like this:
<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
...
</div>
And in your routers, will need to define your route as well:
var app = new Framework7({
root: '#app',
// Create routes for all pages
routes: [
{
path: '/',
url: 'index.html',
},{
// Add your contents page route
path: '/your-page/',
url: 'pages/your-page.html',
},
.....
});
Hope this help.
just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.
function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.
I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }
I need to use kendo ui to display between 6-60 items. Each using the flip effect here http://demos.telerik.com/kendo-ui/fx/combined
The products will be loaded from the database with the unique id like this:
<div class="row">
<div class="col-md-4 product-container">
<div id="productID1" class="productID">
<div class="product">
<div id="product-back1" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front1" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID2" class="productID">
<div class="product">
<div id="product-back2" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front2" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID3" class="productID">
<div class="product">
<div id="product-back3" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front3" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
The problem is I need multiple panels on the page how can I make each "front" and "back" click unique.
var el = kendo.fx($('div[id^=productID]')),
flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
zoom = el.zoomIn().startValue(1).endValue(1);
flip.add(zoom).duration(200);
$('div[id^=product-front]').click(function () {
flip.stop().play();
});
$('div[id^=product-back]').click(function () {
flip.stop().reverse();
});
I've tried loading each item into an array but have not found a good way to assure the correct item will be flipped.
Since every div[id^=product-front] is a child of div[id^=productID], you can find the children of that and use it.
replace flip.stop().play(); with
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();