I'm trying to make a componenturl right now so I can make a dynamic product page, I use bootstrap as css framework, it only works as long as I use the components from framework7, but I want to use my own styles.
The same with images, as soon as I link an image from my file server with the tag it doesn't work again, the same error code every time:
Uncaught (in promise) Error: TypeError: Cannot create property 'elm' on string '[object Object],[object Object]'
I just want to use my own style file or continue to use the bootstrap framework.
MyCode looks like this:
Routes.js
const MyComponent = (props, context) => {
// some component logic
let value = 'pipi';
let productnumber = props.id;
// return render function
return () => context.$h`
<div class="page">
<!-- Header -->
<div class="no-navbar">
<div class="page-content" style="height: auto;">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title"></div>
<div class="right"></div>
</div>
</div>
</div>
</div>
<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50"
style="position: relative; top:30px" class="swiper swiper-init demo-swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/Frame 71.png"></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</div>
<style>
</style>
`;
}
var routes = [
// Index page
{
path: '/home/',
url: './pages/home.html',
options: {
transition: 'f7-fade',
},
},
{
path: '/finder/',
url: './pages/finder.html',
options: {
transition: 'f7-fade',
},
},
{
path: '/wishlist/',
url: './pages/wunschliste.html',
options:{
transition: 'f7-fade',
},
},
{
path: '/brands/',
url: './pages/brands.html',
options: {
transition: 'f7-fade',
},
},
{
path: '/allbrands/',
url: './pages/allbrands.html',
options:{
transition: 'f7-parallax',
},
},
{
path: '/account/',
url: './pages/account.html',
options:{
transition: 'f7-fade',
},
},
{
path: '/addcard/',
url: './pages/addcard.html',
options:{
transition: 'f7-cover-v',
},
},
{
path: '/karten-info/',
url: './pages/karten-info.html',
options:{
transition: 'f7-push',
},
},
{
path: '/product/:id',
component: MyComponent,
options:{
transition: 'f7-parallax',
},
},
{
path: '/product-layout/',
url: './pages/product.html',
},
{
path: '/damen-geschenke/',
url: './pages/navigation/women/geschenke.html',
options:{
transition: 'f7-parallax',
transition: 'router-transition-f7-parallax-backward',
},
},
];
app.js
// Dom7
var $ = Dom7;
// Theme
var theme = 'md';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
// Preloader
setTimeout(function () {
$('.loader-screen').hide();
}, 2000);
// Init App
var app = new Framework7({
id: 'com.thirteendegree.shop',
el: '#app',
theme,
view : {
browserHistory: true,
},
// store.js,
store: store,
// routes.js,
routes: routes,
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
var mainView = app.views.create('.view-main');
I want this page for my componenturl context
<div class="page">
<!-- Header -->
<section class="finder padding-5" style="padding-top: 50px;">
<div class="account">
<div class="account-details product-flex" >
<a style="padding: 0px;" href="#" class="back backlink"><img style="font-size: 18px; width: 30px;" src="img/icons/Back Arrow.svg"></a>
<a style="padding: 0px;" href="#" class="back backlink"><img style="font-size: 15px; width: 30px;" src="img/icons/Union.svg"></a>
</div>
</div>
</section>
<section class="productview">
<div class="page-content">
<div class="swiper swiper-init demo-swiper">
<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper swiper-init demo-swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="slider-img" src="img/Frame 71.png"></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</section>
<div class="product-information">
<h2 class="name">Jordan 1</h2>
<span class="brand2">Dior</span>
<div class="details">
<span class="details-header">Details</span>
<p>
<ul>
<li>100% Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>100% Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</p>
</div>
</div>
<div class="navigation-bottom-product">
<div class="priceetc">
<div>
<img src="img/icons/Tag_black.svg">
</div>
<div class="text-align-right">
<span class="price">€ 11.000</span><br>
<span class="mwst">inkl. MwSt.</span>
</div>
</div>
<div class="addtocart">
<button class="addtocard-button">
<img src="img/icons/Bag_white.svg">
</button>
</div>
</div>
</div>
Related
I need to make two swiperjs in one html page but isn't working. I trying tow change and add new class but the result its same..
my Html
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="swiper1 mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide1">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide1">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper1">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
and the js code for swiper1 and swiper2:
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
the swiper2 its working as I want. but swiper1 not working.
Basic example
Your first slider missing the mandatory HTML layout (swiper instead of swiper1 and swiper-slide instead of swiper-slide1).
https://swiperjs.com/get-started#add-swiper-html-layout
Wrong:
<div class="swiper1 will_not_work">
<!-- const swiper = new Swiper('.will_not_work', { -->
Correct:
<div class="swiper will_work">
<!-- const swiper = new Swiper('.will_work', { -->
snippet
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
let swiper_setting_two = {
spaceBetween: 200,
}
let swiper_1 = new Swiper("[slider_one]", swiper_setting);
let swiper_2 = new Swiper("[slider_two]", swiper_setting_two);
html,
body {
background: #403F6B;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
Loop throw example (multiple sliders with same setting):
You can take the example above and loop throw all sliders (Lets say for real estate pagelist with slider for each house card **like airbnb):
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
var swiper_nodes = document.querySelectorAll('.swiper');
/* loop throw */
[].forEach.call(swiper_nodes, function(swiper_node) {
// do whatever
let swiper = new Swiper(swiper_node, swiper_setting);
});
html,
body {
background: #403F6B;
}
main{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 3px;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<main>
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</main>
Yes the constructor of Swiper takes as argument one element at a time. So you should loop all the items with a forEach for example.
EDIT:
I made some changes in your HTML to fix the issues.
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
.swiper {
width: 300px;
height: 100px;
margin: 5px;
}
.swiper-slide {
background: yellow;
padding: 20px;
font-size: 32px;
}
.swiper-slide:nth-child(2) {
background: red;
}
.swiper-slide:nth-child(3) {
background: blue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper2">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
I have 4 menus and with this piece of code, i can show menus and hide them with specific btns .my question is how can i when i open a menu and i don't close it and then I open another one close previous menus? i tried to store the open menu in a variable and check it when i open another one but it didn't work.
<body>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
</div>
</body>
const btns = document.querySelectorAll(".btn");
btns.forEach(btn => {
const menu = btn.parentElement;
const items = menu.querySelector(".items");
const itemsContainer = items.querySelector(".items-container");
const itemsContainerHeight = itemsContainer.getBoundingClientRect().height;
let previousActivebtn = "";
btn.addEventListener("click", (e) => {
// change btn text
if (e.currentTarget.innerHTML == "open") {
e.currentTarget.innerHTML = "close";
} else {
e.currentTarget.innerHTML = "open";
}
//show and hid the menus
if (!items.classList.contains("item-active")) {
items.classList.add("item-active");
items.style.height = itemsContainerHeight + 32 + "px";
} else {
items.classList.remove("item-active");
items.removeAttribute("style");
}
});
});
You overcomplicate it. You could create a CSS rule which would ensure that .items is hidden, unless .menu is opened:
.menu .items:not(.open) {
display: none
}
And you could create a function like this:
function open(item) {
if (!item.classList.contains("open")) {
//Hide whatever was opened
for (let it of document.querySelectorAll(.menu .items.open)) {
it.classList.remove("open")
}
item.classList.add("open");
} else {
item.classList.remove("open");
}
}
Just pass to this function the item having the class of items.
I'm trying to make a function in order to hide the boxes with their corresponded number, but I have no idea on how to do it. I tried to figure out how to do it, but every method I come up with ends up on an error.
I'm using jQuery library and Bootstrap.
CSS :
.random {
width: 100 px;
height: 100 px;
background - color: lightgreen;
margin: 30 px;
}
HTML :
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>
JavaScript :
$(document).ready(function() {
$(".task_hidden").hide();
var box_1 = $('#box_1');
var box_2 = $('#box_2');
var box_3 = $('#box_3');
var box_4 = $('#box_4');
var box_5 = $('#box_5');
var box_6 = $('#box_6');
var box_7 = $('#box_7');
var box_8 = $('#box_8');
var box_9 = $('#box_9');
var box_10 = $('#box_10');
});
function NumberFunction(random) {
console.log(random);
if (random = 1) { box_1.hide(); }
if (random = 2) { box_2.hide(); }
if (random = 3) { box_3.hide(); }
if (random = 4) { box_4.hide(); }
if (random = 5) { box_5.hide(); }
}
Your code was not working fine because you had declared variables box_1, box_2 inside the ready function which were not able outside it i.e. not available in NumberFunction function. Also, you were assigning variables in if rather than comparing. = is assignment and == or === is for comparison.
You can improve your code to following:
$(document).ready(function() {
$(".task_hidden").hide();
});
function NumberFunction(random) {
$("#box_" + random).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>
Unlike other answers, with each click, a box will be deleted (this is sure to happen) but in other answers may be a few clicks to remove a box.
$(document).ready(function(){
var listOfRemovedNumbers =[];
var lengthBoxs = $('[id^=box_]').length;
function getRandomNumber(){
do {
var randomNumber = Math.floor(Math.random() * 10) + 1;
} while(listOfRemovedNumbers.includes(randomNumber) );
return randomNumber;
}
$('.btn').click(function(){
var randomNumber = getRandomNumber();
$('#box_'+randomNumber).remove();
listOfRemovedNumbers.push(randomNumber);
if ((listOfRemovedNumbers.length == lengthBoxs ))
$('.btn').attr("disabled", "disabled").html('All Removed');
})
})
$(document).ready(function(){
var listOfRemovedNumbers =[];
var lengthBoxs = $('[id^=box_]').length;
function getRandomNumber(){
do {
var randomNumber = Math.floor(Math.random() * 10) + 1;
} while(listOfRemovedNumbers.includes(randomNumber) );
return randomNumber;
}
$('.btn').click(function(){
var randomNumber = getRandomNumber();
$('#box_'+randomNumber).remove();
listOfRemovedNumbers.push(randomNumber);
if ((listOfRemovedNumbers.length == lengthBoxs ))
$('.btn').attr("disabled", "disabled").html('All Boxs are Removed');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>
.random {
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="container text-center">
<div id="box_1" class="random">Box 1</div>
<div id="box_2" class="random">Box 2</div>
<div id="box_3" class="random">Box 3</div>
<div id="box_4" class="random">Box 4</div>
<div id="box_5" class="random">Box 5</div>
<div id="box_6" class="random">Box 6</div>
<div id="box_7" class="random">Box 7</div>
<div id="box_8" class="random">Box 8</div>
<div id="box_9" class="random">Box 9</div>
<div id="box_10" class="random">Box 10</div>
</div>
</div>
<div class="col">
<button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
</div>
</div>
</div>
<script>
function NumberFunction(random) {
$("#box_" + random).hide();
}
</script>
i've been trying to create some slides using swipe slider with custom classes.
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
</script>
The swipe pagination is dynamically created and generates into
<span class="swiper-pagination-bullet">1</span>
<span class="swiper-pagination-bullet">2</span>
<span class="swiper-pagination-bullet">3</span>
<span class="swiper-pagination-bullet">4</span>
<span class="swiper-pagination-bullet">5</span>
<span class="swiper-pagination-bullet">6</span>
I want to have the div class swiper pagination into
<span class="swiper-pagination-bullet color-0">1</span>
<span class="swiper-pagination-bullet color-1">2</span>
<span class="swiper-pagination-bullet color-2">3</span>
How do I add an additional custom class of color-0, color-1, color-2? Thank you so much.
return '<span class="'+ className +' color-'+index+'" >'+(index+1)+'</span>';
I'm making FAQ page with AngularJS and I want expand/collapse elements.
This is my HTML:
<div id="faq" class="">
<div class="faq-item" collapse>
<div class="expend-element">
<div class="question">
<div class="text">Question 1</div>
</div>
</div>
<div class="answer">ANSWER 1</div>
</div>
<div class="faq-item" collapse>
<div class="expend-element">
<div class="question">
<div class="text">Question 2</div>
</div>
</div>
<div class="answer">ANSWER 2</div>
</div>
<div class="faq-item" collapse>
<div class="expend-element">
<div class="question">
<div class="text">Question 3</div>
</div>
</div>
<div class="answer">ANSWER 3</div>
</div>
</div>
My Directive:
return {
scope: {},
template: "<div class='faq-item' ng-click='expend()' ng-class='{ expended: active }'><div ng-transclude></div></div>",
replace: true,
transclude: true,
link: function(scope) {
scope.active = false;
scope.expend = function() {
scope.active = !scope.active;
};
}
};
This works fine, but it has one problem.
My main aim was to expand was only one element, but this expands all the elements.
How can I make this?