i have this kind html in my vue template: it is a simple list rendering
<div class="col-sm-6 col-md-4 col-lg-3" v-for="(lesson) in lessons" :key="lesson.id">
<div class="card card--elevated card-course overlay js-overlay mdk-reveal js-mdk-reveal "
data-partial-height="40" data-toggle="popover" data-trigger="click">
<a href="course.html" class="js-image" data-position="left">
<img :src="lesson.cover_image" alt="course">
<span class="overlay__content">
<span class="overlay__action d-flex flex-column text-center">
<i class="material-icons">play_circle_outline</i>
<small>Preview course</small>
</span>
</span>
</a>
</div>
</div>
the data-partial-height="40" , data-toggle="popover" and data-trigger="click" was working fine at first. but once i add the v-for="lesson in lessons" :key="lesson.id", and successfully generate the loop through the lessons array, all the styling is broken. i try to bind the value of data-partial-height="40", data-toggle="popover" and data-trigger="click" to the data property, but still nothing change. any solution?
Could it be that you're putting your v-for in the wrong element?
Right now you have it in you upper-level container <div class="col-sm-6 col-md-4 col-lg-3>" so, once you have more than one element in your list (say 10) you will end up with 10 <div class="col-sm-6 col-md-4 col-lg-3" containers that judging by the classes it uses most likely will be placed side-by-side.
In the other hand if you place your v-for in your inner container <div class="card card--elevated ... then the result for 10 elements will be somethig like:
<div class="col-sm-6 col-md-4 col-lg-3>
<div class="card card--elevated ...
<div class="card card--elevated ...
<div class="card card--elevated ...`
...
<div>
I'm just guessing but maybe this points you on the right direction, if you provide a minimal reproduction I'll be happy to help.
Related
I am trying to implement a simple pictures gallery in my Vue.js app.
This what I am looking for:
User click on a thumbnail and a larger picture is displayed on the right. This is the code I've done so far:
<div class="col-md-6">
<div class="row" id="grid">
<div v-for="(picture, index) in pictures"
:key="picture.pk"
class="col-md-4 my-auto"
>
<div #click="picToShow= index">
<img class="img-thumbnail img-responsive" :src="picture.picture_1">
</div>
</div>
</div>
</div>
<div class="col-6 text-center my-auto">
<div v-for="(picture,index) in pictures"
:key="picture.pk"
class="col-md-4 my-auto"
>
<img v-show="pictToShow == index" :src="picture.picture_1">
</div>
</div>
But as I run it, I get this error :
[Vue warn]: Property or method "pictToShow" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I do have in my <script>:
data () {
return {
pictures: [],
picToShow: null,
}
},
How can I fix it?
You're making a typo by adding an extra t in v-show="pictToShow == index" which should be v-show="picToShow == index", but I see that it's not a good practice to make two loops, i recommend to keep the first one and use the selected index to show its image :src="pictures[picToShow].picture_1":
<div class="col-md-6">
<div class="row" id="grid">
<div v-for="(picture, index) in pictures"
:key="picture.pk"
class="col-md-4 my-auto"
>
<div #click="picToShow= index">
<img class="img-thumbnail img-responsive" :src="picture.picture_1">
</div>
</div>
</div>
</div>
<div class="col-6 text-center my-auto">
<div v-if="picToShow!==null" class="col-md-4 my-auto">
<img :src="pictures[picToShow].picture_1" />
</div>
</div>
I'm sorry this is quite a silly question, but maybe it's because of being working for a few hours, but I can't wrap my head around this. I mean, I think I can solve this by manipulating the whole div structure with javascript, but I can't help to feel there has to be a way simpler solution that I'm not thinking of.
Here's a fiddle of what I got right now:
https://jsfiddle.net/aq9Laaew/42687/
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<div class="container-fluid colindex">
<div class="row">
<div class="col-md-9 stackem">
<div class="card">
<ol class="breadcrumb">
<li class="breadcrumb-item">Index</li>
<li class="breadcrumb-item active"></li>
</ol>
<h4 class="card-header">Test
<button class="btn btn-primary add" type="button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="test"><i class="material-icons" id="sidebaricons">bookmark</i></button>
</h4>
<div class="card-body">
<div class="container index">
<div class="row py-3 px-4">
<div class="col-md-6">
<p></p>
</div>
<div class="col-md-6">
<p></p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<p>testlist</p>
</div>
</div>
</div>
</main>
So the div which says "testlist" on the right, I got an include there with a list with links for fast access.
Question: What I'm trying to achieve is adding a button on this list which will toggle it. The thing is, when it's hidden, I want the other divs on the left side to expand and takes up the space on the list. When the list would be toggled again it would become like it is at the moment again.
Again, sorry for the (I'm sure) silly question, and thanks a ton in advance.
Have you tried using <div class="col-md stackem">
instead of <div class="col-md-9 stackem">
to let bootstrap auto-adjust the width?
I want to loop through this HTML structure
Each loop should add an image inside
Then repeat the outer elements again and continue.
I am finding it difficult to isolate the index and append the correct image in the sequence - I ahve tried modulus but goes out of sync.
I kinda need to get the repeat in chunks of 5 do this block then continue for another chunk until all is complete.... not sure how.
<span ng-repeat="node in inspiration.data track by $index">
<div class="list__row row">
<div class="col-xs-12 col-lg-3 list__medium" style="background-image: url('https://z3photorankmedia-a.akamaihd.net/media/e/e/2/ee2ju34/mobile.jpg');"></div>
<div class="col-xs-12 col-lg-offset-1 col-lg-2 list__small" style="background-image: url('https://z1photorankmedia-a.akamaihd.net/media/5/a/g/5ag3i44/mobile.jpg');"></div>
<div class="col-xs-12 col-lg-offset-1 col-lg-5 list__large" style="background-image: url('https://photorankmedia-a.akamaihd.net/media/4/x/v/4xv6w34/mobile.jpg');"></div>
</div>
<div class="list__row row">
<div class="col-xs-12 col-lg-offset-1 col-lg-5 list__large" style="margin-top: -8.3%; background-image: url('https://z2photorankmedia-a.akamaihd.net/media/c/d/t/cdt4i44/mobile.jpg');"></div>
<div class="col-xs-12 col-lg-offset-1 col-lg-3 list__medium" style="margin-top: 8.3%; background-image: url('https://z3photorankmedia-a.akamaihd.net/media/i/y/c/iycjf34/mobile.jpg');"></div>
</div>
</span>
I need to shuffle large elements inside my layout due to floating them, and trying to display them. Essentially .gallery-item with class .gallery-large always needs to be first child inside .item, there are several .item containers inside main #gallery_slideshow. At the moment if there is a large item inside second, third etc.. item it gets placed as first element inside first item, where as I want it to stay inside it's own. For example, code below results in 5 elements inside first .item with 2 large ones, instead of initial 4 elements with 1 large one.
JS:
if($('.gallery-item').length > 1) {
$('.gallery-large').each(function(e) {
if(!$(this).is(':first')) {
$(this).insertBefore('.gallery-item:first');
//Reset height of owl carousel wrapper in case moved element was last
$('.owl-wrapper-outer').css('height', 'auto');
}
});
}
HTML:
<div id="gallery_slideshow" class="owl-carousel owl-theme">
<!-- Example page 1 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
<!-- Example page 2 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
</div><!-- END #gallery_slideshow -->
You can simply do,
$(".gallery-large").each(function() {
$(this).parent().prepend(this);
});
Loop through each 'gallery-large' item
Make it as first child by using prepend() method. Prepend it to its own parent to keep the correct context.
How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.