I created a project with Meteorjs and Bootstrap 3.
In this project, I can add dynamically bootstrap panels (or modals) to the Home page.
What bothers me is the fact that the position of theses panels (or modals) is random, I would like them to be organized. E.g.: when the screen of computer is medium, I want 3 panels (or modals) in each column.
Would you have an idea on how to do that?
The code is:
<template name="home">
{{> navigation}}
<div class="container-fluid lov">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
{{#each positions}}
{{> position}}
{{/each}}
</div>
</div>
</div>
</template>
And this is the JavaScript of this template:
Template.home.events ({
'dblclick .lov': function (e, tmpl) {
e.preventDefault();
e.stopPropagation();
if(e.target.className === 'container-fluid lov'){
var id = Positions.insert({ name:'Clique here to change the title', domaine:'ici tu ecris ton text en gros',footername:'le nom de pays et la ville si tu veux'});
Session.set('editing_table',id);
}
}
});
This is the collection:
Positions = new Meteor.Collection('positions');
This one is the code of position template that allow us to create our panel:
<template name="position">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="panel panel-default" id="{{_id}}" style="position:absolute;left:{{left}};top:{{top}}; width:350px">
<div class="panel-heading">
{{#if hadanata3ou}}
<a class="close" data-dismiss="modal">x</a>{{/if}}
{{#if editing_tablename}}
<input class="input input-medium tablename" value="{{name}}" type="text" />
{{else}}
<h6 class="tablename">{{name}}</h6>
{{/if}}
<!-- <h3 class="panel-title">Panel title</h3> -->
</div>
<div class="panel-body">
<div id="{{_id}}">
{{#if editing_field}}
<textarea class="input input-lg efield" name="efield" type="text">
{{domaine}}
</textarea>
{{else}}
<span>
{{domaine}}
</span>
{{/if}}
</div>
</div>
<div class="panel-footer">
{{#if editing_footer}}
<input class="input input-medium footer" value="{{footername}}" type="text" />
{{else}}
<p class="muted">{{footername}}</p>
{{/if}}
</div>
</div>
</div>
</div>
</template>
I'll be honest, I don't know a whole lot about meteorjs templating, but I can show you how the Bootstrap grid system works for rendering different amounts of panels based on the size of the view.
Bootstrap uses 4 different sizes:
Large lg (Desktop)
Medium md (Landscape Tablet)
Small sm (Portrait Tablet)
Extra Small xs (Mobile)
And using the classes .visible-SIZE and .hidden-SIZE, you can control what elements are shown/rendered at what sizes. For example:
<div class="container-fluid">
<div class="row visible-lg visible-md hidden-sm hidden-xs" >
<div class="col-lg-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-lg visible-md">Panel One - Medium</span> <span class="hiddn-md visible-lg">Panel One - Large</span></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-lg visible-md">Panel Two - Medium</span> <span class="hiddn-md visible-lg">Panel Two - Large</span></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-lg visible-md">Panel Three - Medium</span> <span class="hiddn-md visible-lg">Panel Three - Large</span></h4>
</div>
</div>
</div>
</div>
<div class="row hidden-lg hidden-md visible-sm visible-xs">
<div class="col-sm-6 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-sm visible-xs">Panel One - Extra Small</span> <span class="hiddn-xs visible-sm">Panel One - Small</span></h4>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-sm visible-xs">Panel Two - Extra Small</span> <span class="hiddn-xs visible-sm">Panel Two - Small</span></h4>
</div>
</div>
</div>
</div>
</div>
This code renders a row of .panel panel-default <div> elements. When the view is md or lg, it renders 3 <div>'s, each with the class col-md-4 and col-lg-4. The total amount of columns you can have is 12, and a class with col-*-4 takes up 4 of those 12 slots. Therefore, 3 * 4 is 12, or 1 complete row. Same with 2 * 6 for the col-sm-6 and col-xs-6.
In your meterojs templates, you need to decide how to use these classes to render the correct amount of columns. It's not too difficult, but spend some time playing with it to get the layout you want. If you want to see the test layout in effect, check this link:
Bootply
And try resizing your browser window.
Hope that can provide you some insight into Bootstrap's grid layout, and how to render different columns depending on the size of your browser.
Related
I am trying to get two divs to appear side by side when looping through props (which happen to be an array) in VueJS.
When I use a single element, it works fine. Immediately when I add the v-for tag it doesnt appear side by side anymore.
<div class="row">
<div v-for="(data,index) in data" :key="index" class="col-12">
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<p class="title">{{data.title}}</p>
<p class="description">{{data.description}}</p>
<p class="bottom">
<span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
<span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
</p>
</div>
</div>
</div>
Above is the code i am using
Seems you're just missing the required .row for grid nesting
<div v-for="(data,index) in data" :key="index" class="col-12">
<div class="row"> <!-- 👈 this one -->
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<!-- etc -->
</div>
</div>
</div>
I'm new to jquery and I'm trying to figure out how to traverse the dom in order to toggle the collapse option on panel footers? Any pointers?
<div id="colDealDiv" class="row col-md-8 col-md-offset-2 colDiv">
<div class="panel panel-default">
<div class="panel-heading">
<p>Retail & Services</p></div>
<div class="panel-body">
<div id="thumbnailDealDiv" class="thumbnail">
<div id="captionDealDiv" class="caption">
<p>$35 -- 'Best of NY': Painting Parties at City Bars, Reg. $65</p>
<p>Paint Nite</p>
<p>New York</p>
<p>NY</p><img src="https://api.sqoot.com/v2/deals/4344628/image?api_key=demo" class="img-thumbnail">
<button class="btn btn-info" data-toggle="collapse"></button>
</div>
</div>
</div>
<div class="panel-footer collapse">
<p>46% off at Paint Nite</p>
<p>35</p>
<p>2016-05-24T13:00:00Z</p>
</div>
</div>
$(".panel").on("click", ".btn-info", function() {
$(this).parent().next(".panel-footer").collapse("toggle");
});
I have the following setup in my application:
http://plnkr.co/edit/I2RCjYU17SDX65thUUqD?p=preview
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-7">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 1
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 1
</div>
</div>
</div>
<div class="col-xs-5">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 2
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 2
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-7">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 3
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 3
</div>
</div>
</div>
<div class="col-xs-5">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Panel 4
</div>
</div>
<div class="panel-body" style="height: 250px;">
Panel 4
</div>
</div>
</div>
</div>
What I am trying to do is to be able to re-order the panels by dragging them.
For example, I want to be able to drag panel 1 to the bottom right and have it switch positions with panel 4. I'm relatively new to angularjs and I have no idea how to go about tackling a problem like this.
My initial idea was to create a different template for each possible combination of panels and dynamically include the template off of a variable I set, however this would require having 16 different templates and I feel like there must be a better solution.
You can use a external dependency (Angular-dragdrop) within Angularjs. Give each canvas a sequence and reorder by sequence when you drag a canvas in an other place.
Here you find more information: http://codef0rmer.github.io/angular-dragdrop/#/
I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.
I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are.
(adding a data-target attribute to the tag breaks the expandability of the post).
$(" ??? ").on("hide.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="blog" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 25th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body" >
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes
This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
<a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 26th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
</div>
You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.
You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.
Relevant jsFiddle
$(".blog").each(function () {
$(this).on("hide.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
$(this).on("show.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
});
Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.
Now you can search the icon to be rotated in this Element --> $(this).find(
This will only find the one arrow inside the clicked blog element.
A very detailed explanation can also be found in this post.
I just started using Bootstrap 3. I made a thumbnail grid with images related to different projects. I would like that when clicking on an image a modal window open. In the modal I need to report image coming from thumbnail and some text explaining the project content.
Any idea, suggestion of how to do it?
Adding modals in Bootstrap is very easy, and there are examples in the Bootstrap documentation: http://getbootstrap.com/javascript/#modals.
I suggest trying out some of the examples and seeing how far you can get, and then if you get stuck you can ask for specifics.
I' coding as follow
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Renovations"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Renovations</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Academic Institutions"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Academic Institutions</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Interiors</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="New Construction"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">New Construction</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Site Planning"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Site Planning</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Churches"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Churches</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
</pre>
and js script as follow
/* copy loaded thumbnails into carousel */
$('.panel .img-responsive').on('load', function() {
}).each(function(i) {
if(this.complete) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parent('a');
var title = $(this).parent('a').attr("title");
item.attr("title",title);
$(itemDiv.html()).appendTo(item);
item.appendTo('#modalCarousel .carousel-inner');
if (i==0){ // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval:false});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
$('.modal-title').html($(this).find('.active').attr("title"));
})
/* when clicking a thumbnail */
$('.panel-thumbnail>a').click(function(e){
e.preventDefault();
var idx = $(this).parents('.panel').parent().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
return false;
});
So I send image from thumbnail to a modal window with a carousel. What I would like is to add some text to each of the image displayed in the modal.
Thanks for some help.