Vue template conditional rener - javascript

<template id="players-template">
<div v-for="player in players" v-bind:class="{ 'row': $index == 0}">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ player.username }}
<span class="small pull-right">{{ player.createdAt }}</span>
</h3>
</div>
<div class="panel-body">
<img alt="" class="img-circle center-block">
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
</div>
</div>
</div>
I want to end the div with class of row each third element and then append new row. How can I use if conditions ?


<div id="app" class="container">
<div v-for="player in players">
<div class="row" v-if="($index + 1) % 3 == 0 ">
{{$index + 1}}
</div>
</div>
</div>
$index is a special variable inside v-for
http://vuejs.org/guide/list.html#v-for


I think I figured this out
<template id="players-template">
<div class="row">
<template v-for="player in players">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ player.username }}
<span class="small pull-right">{{ player.createdAt }}</span>
</h3>
</div>
<div class="panel-body">
<img alt="" class="img-circle center-block">
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
</div>
</div>
<template v-if="($index + 1) % 3 == 0 ">
</div><div class="row">
</template>
</template>
</div>
</template>
The trick is opening a row before the loop, then closing it afterwards. But, after every third player, we close the row and open a new one. This will result in one row for every three players.
In most cases however, this isn't necessary - bootstrap would know to bring each set of three to a new row because you used col-md-4

Related

Manipulate the card class with css and Html

I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.

How can I keep a Bootstrap accordion closed after the page is refreshed?

I'm using a Bootstrap v5.2 accordion in my website. Accordion includes bootstrap cards inside of it. Eveything works fine but when I refresh the page, first accordion item is automatically getting actived and opening itself. How can I prevent this issue ? For example, before refreshing the page, I leave the second accordion item open and after the page is refreshed, the second item is closed, and the first item opens by itself, although it was closed before the page was refreshed.
my accordion code :
<div class="accordion-item">
<h2 class="accordion-header" id="üretim_kategorisi_header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse_üretim" aria-expanded="true" aria-controls="collapse_üretim">
<h2 class="text-black">Üretim hakkındaki projeler</h2>
</button>
</h2>
<div id="collapse_üretim" class="accordion-collapse collapse show"
aria-labelledby="üretim_kategorisi_header" data-bs-parent="#proje_kategori_kutusu">
<div class="accordion-body">
<div class="container">
<div class="row">
{{#each projeler as |proje|}}
{{#ifeq proje.proje_kategorisi 'Üretim' }}
<div class="col-md-4 mb-3">
<a data-bs-toggle="modal" data-bs-target="#reg-modal{{proje.id}}"
style="text-decoration:none;" href="#">
<div class="card">
<img class="card-img-top p-2 img-fluid" alt="100%x280"
src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
<div class="card-body">
<h4 class="card-title text-center display-5">
{{ proje.proje_ismi}}
</h4>
<p class="card-text fs-6">
{{proje.proje_aciklamasi}}
</p>
<p class="project_category text-end">
{{proje.proje_kategorisi}}
</p>
</div>
</div>
</a>
</div>
{{/ifeq}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="arge_kategorisi_header">
<button class="accordion-button collapsed d-block text-center" type="button"
data-bs-toggle="collapse" data-bs-target="#collapse_arge" aria-expanded="false"
aria-controls="collapse_arge">
<h2 class="text-black">ARGE hakkındaki projeler</h2>
</button>
</h2>
<div id="collapse_arge" class="accordion-collapse collapse" aria-labelledby="arge_kategorisi_header"
data-bs-parent="#proje_kategori_kutusu">
<div class="accordion-body">
<div class="container">
<div class="row">
{{#each projeler as |proje|}}
{{#ifeq proje.proje_kategorisi 'ARGE' }}
<div class="col-md-4 mb-3">
<a data-bs-toggle="modal" data-bs-target="#reg-modal{{proje.id}}"
style="text-decoration:none;" href="#">
<div class="card">
<img class="card-img-top p-2 img-fluid" alt="100%x280"
src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
<div class="card-body">
<h4 class="card-title text-center display-5">
{{ proje.proje_ismi}}
</h4>
<p class="card-text fs-6">
{{proje.proje_aciklamasi}}
</p>
<p class="project_category text-end">
{{proje.proje_kategorisi}}
</p>
</div>
</div>
</a>
</div>
{{/ifeq}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>

Remove show from the classes of #collapse_üretim.

Error with ui-sref

I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>

I want to traverse across the DOM , I am not able to access the data

Here is my html code in which I'm trying to traverse through DOM, basically wahen I click edit link I want to be able to traverse back to {{ $post->body }} to access content it has.
<div class="well imagess">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-md-offset-0 col-sm-offset-0 col-lg-offset-0 col-xs-offset-0 ">
<img src="images/female.png" style="height: 70px; width: 70px;">
</div>
<div class="col-md-10 col-sm-10 col-xs-10 col-lg-10 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-offset-1" style="margin-top: -15px;">
<h5>{{ $post->title }}</h5>
<br>
<p style="margin-top: -15px;">Posted by - <b>{{ $post->user->first_name }} {{ $post->user->last_name }}</b> from <b>{{ $post->user->city }}, {{ $post->user->country }}</b></p>{{ $post->created_at }}
</div>
</div>
<hr>
<div class="row first">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" id="second">
<p style="font-size: 15px;" id="post-body-edit">{{ $post->body }} </p>
</div>
</div>
<div class="well wellcolor1">
<div class="col-xs-2 col-sm-2">
<span style="color: blue;" class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
<span style="color: blue;" class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
</div>
#if(Auth::user() == $post->user)
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 col-sm-offset-3 col-xs-offset-3 col-lg-offset-3 col-md-offset-3 edit-class">
<a style="margin-right: 70px;" id="edit" href="#" title="Edit"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</div>
#endif
<br>
<div class="3">
Comments
</div>
</div>
and then javascript code
$('.wellcolor1').find('.edit-class').find('#edit').on('click', function(event){
event.preventDefault();
var postBody = event.target.parentNode.parentNode.previousSibling.firstChild.childNodes[1].textContent;
$('#post-body').val(postBody);
$('#edit-modal').modal();
});
I want to get {{ $post->body }} content into the modal, my main concern is to get how we traverse across the dom...

I'm going to go out on a limb here and guess you mean traverse up the DOM. In which case, use: https://api.jquery.com/closest/

Bootstrap 3 Collapse on hover

I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>

You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";

Categories