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>
Related
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.
I'm very new to Angular, but I have a bit of java background. I'm trying to place every 4 divs in a new row, but all the divs are appending in the same row. The below one is my HTML code. How can I achieve the same through angular? The below code contains 1 row. I have to repeat the same for each row.
<div class="row startRow">
<div class="col-md-2 hidden-lg"> </div>
<div class="col-lg-3 col-md-2 shop-list" *ngFor="let shop of shops" (click)="onClick(shop.shopId)">
<i class="material-icons UnSelectedImage">check_circle</i>
<img src="{{shop.brandingImage}}" alt="{{shop.name}}" class="img-responsive orgImage" />div 1
</div>
<div class="col-lg-3 col-md-2 shop-list"> div 2</div>
<div class="col-lg-3 col-md-2 shop-list">div 3</div>
<div class="col-lg-3 col-md-2 shop-list">div 4</div>
<div class="col-md-2 hidden-lg"> </div>
</div>
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.
I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?
Yes, you can change number of columns with Bootstrap. That's what flexible grid is for.
Here's an example that follows your instructions:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2">first</div>
<div class="col-xs-6 col-md-4 col-lg-2">second</div>
<div class="col-xs-6 col-md-4 col-lg-2">third</div>
<div class="col-xs-6 col-md-4 col-lg-2">fourth</div>
<div class="col-xs-6 col-md-4 col-lg-2">fifth</div>
<div class="col-xs-6 col-md-4 col-lg-2">sixth</div>
</div>
See Bootply Demo.
<div class="row">
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg hidden-md col-xs-4"></div>
<div class="hidden-lg hidden-md col-xs-4"></div>
</div>
<div class="row">
<div class="col-lg-6 visible-lg">Column 6 Large</div>
<div class="col-md-3 visible-md">Column 1 Medium</div>
<div class="col-md-3 visible-md">Column 2 Medium</div>
<div class="col-xs-2 visible-xs">Column 1 Small</div>
<div class="col-xs-2 visible-xs">Column 2 Small</div>
<div class="col-xs-2 visible-xs">Column 3 Small</div>
</row>
It should be noted that having duplicate content in separate columns like this isn't great for SEO. You might want to instead approach this by using nested columns for more granular control over your content without having to duplicate it.