<div class="row">
<% for(var i=0; i < sImages.length; i++) { %>
<img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
style="display: block;float: left;margin-right: 5px;">
<% } %>
</div>
this is what I have in my ejs template. I am generating pdf from this template and I want images resized by 33.33% and grid layouts like 3 images in the first row and 2 images in a 2nd row.
there will be no more than 5 images.
I have tried certain CSS tricks but didn't work
There are many solutions to achieve this layout, Here two simple ways like below:
<div class="row">
<% for(var i=0; i < sImages.length; i++) { %>
<img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
style="display: block;float: left;margin-right: 5px;width: calc(33.3333% - 5px);">
<% } %>
</div>
or
<div class="row">
<% for(var i=0; i < sImages.length; i++) { %>
<img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
style="display: block;float: left;margin-right: 2%;width: 31.3333%;">
<% } %>
</div>
Related
i'm creating a discord bot list but i have a mistake, i want align side-by-side dynamicaly every div,
I have tested a lot of things but none of all work, i'm quite bad at html/css so sorry if it's easy to fix
Current:
[![Current][1]][1]
What i want:
[![whatiwant][2]][2]
<div id="outer">
<br>
<%for(var i = 0; i < bot.db.bots.all().length; i++) {%>
<% var out = bot.db.bots.all()[i] %>
<% var idd = out.ID %>
<div class="bots">
<div class="col-12 col-sm-6 col-md-4">
<div class="card card-lg botcard" style="box-shadow:5px 5px 5px rgba(0,0,0,0.1);border-radius:12px;overflow:hidden;border-color:#2C2F33;width:16rem;float:left;">
<div align="center" class="card-img">
<img src="<%=bot.db.bots.fetch(`${idd}.avatar`)%>" class="card-img-top" alt="Bot Avatar">
<br>
<% if (bot.db.bots.has(`${idd}.certified`) === true) { %>
<br><br><a style="color:limegreen"><img src="https://cdn.glitch.com/cd3da949-70c8-4b46-b845-a66c4ef66826%2Fverifiedbot.png?v=1587933532345" width="30px" height="30px"> Certified</a><br>
<% } %>
<div class="badge badge-primary"><strong style='color: white;'>Votes: </strong><span style='color:whitesmoke;text-transform: none;'><%=bot.db.bots.fetch(`${idd}.votes`)||0%></span></div>
<div style="color:#fff" class="badge badge-default"><%=bot.db.bots.fetch(`${idd}.library`)%></div>
</div>
<div align="center" class="card-block">
<div class="card-title">
<h4><%=bot.db.bots.fetch(`${idd}.name`)%></h4>
<p class="card-text" style="color:#7289DA"><%=bot.db.bots.fetch(`${idd}.short_desc`)%></p>
<hr>
<div class="button_slide slide_right"><h6 align="center">View</div>
<% if (user) { %>
<% if(bot.db.bots.fetch(`${idd}.ownerid`) === user.id) { %>
<div class="button_slide slide_right"> Edit</h6></div>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
</div>
</div>
<!--- CSS code --->
<style>
#outer {
content: "";
display: table;
clear: both;
}
.bots {
float: left;
height: 470px;
width: 23%;
padding: 0 10px;
}
<!--- ... --->
</style>
if you need more information i can reply to you
[1]: https://i.stack.imgur.com/U36w5.png
[2]: https://i.stack.imgur.com/2mkqE.png
I used to use this if I wanted to align something
<div class="row">
I used this link to understand it better : https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
I'm trying to calculate total price when user click on the image and reduce price when user delete the image out by using EJS that call data base of items on MySQL which it have price.
This is my html page with ejs and js
$(document).ready(function(){ //when click on the image of item it, item will show out on canvas.
$('.items_img').click(function(){
var path = $(this).attr('data-title');
alert(path);
addImage(path, 500, 500, 0.5, -90, 3);
})
});
<!DOCTYPE html>
<html>
<body>
<div class="tab-content clearfix">
<% for(var i=0; i<categories.length; i++){ %>
<div class="tab-pane <% if(i==0){ %> active <% } %>" id="<%= categories[i].id %>a">
<% for(var j=0; j<items.length; j++){ %>
<% if(items[j].category_id == categories[i].id){ %>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image items_img" src="/pic_items/<%= items[j].picture_path %>" data-title='/anime_items/<%= items[j].anime_path %>' data-target='<%= items[j].price %>' alt="Test" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
<%= items[j].title %>
</h4>
<p class="group inner list-group-item-text"> <%= items[j].description %> </p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="">Width <%= items[j].width %> CM</p>
<p class="">Height <%= items[j].height %> CM</p>
</div>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
</div>
</body>
</html>
I have a Rails 5, ruby 2.4.0, bootstrap 4 alpha 6 app using the selectize.js plugin.
What I am trying to do is display device info based on the selected item in the select box.
Currently, When the page loads the div is hidden as it should be and the select box is displayed (as it should be) but when I select anything other than the first select option, it wont change the device in the div.
I am a java / ajax noob and am lost for a solution. Any assistance would be greatly appreciated!
my select-box:
<select class="form-control div-toggle" id="select-device" data-target=".device-names">
<option>Select Device</option>
<% #devices.each do |device| %>
<option value="<%= device.id %>" show=".<%= device.device_name %>"> <%= device.device_name.titleize %></option>
<% end %>
</select>
My Div to be rendered and displayed for each device when its selected:
<div class="container device-names">
<% #devices.each do |device_div| %>
<div class="<%= device_div.id %> invisible" id="result">
<div class="phoneDetailsContainer">
<div class="row">
<div class="col-sm-12">
<center><h5 class="deviceHeader"><%= device_div.manufacturer.name.titleize %> | <%= device_div.device_name.upcase %></h5></center>
</div>
</div>
<div class="row">
<div class="col-md-4 hidden-sm-down"></div>
<div class="col-sm-12 col-md-4" id="deviceDivImageContainer">
<center>
<% if device_div.image.present? %>
<%= image_tag device_div.image_url(:thumb), :class => "deviceImage" %>
<% else %>
<% end %>
</center>
</div>
<div class="col-md-4 hidden-sm-down"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4">
<center>
<span class="proceedDisclaimer">By clicking this button you agree that this is the device in your possession</span>
<%= link_to "Proceed to Carrier Selection", manufacturer_device_path(#manufacturer, device_div), class: 'btn btn-outline-primary proceedButton', :id => "proceed" %>
</center>
</div>
<div class="col-sm-12 col-md-4"></div>
</div>
</div>
</div>
<% end %>
</div>
my javaScript to call the div when the item is selected:
<script type="text/javascript">
var ready = function () {
// add code here
$('#result').hide();
$('#select-device').selectize({
});
$('#select-device').change(function(){
$('#result').show().removeClass('invisible')
});
//end code here
}
$(document).ready(ready);
$(document).on('page:load', ready);
$(document).on('turbolinks:load', ready);
</script>
Any assistance here would be greatly appreciated! please let me know if further info is required!
A fair warning. I am NOT much knowledgeable on ruby and thus my answer might be bit buggy on ruby side.
HTML
<div class="container device-names">
<% #devices.each do |device_div| %>
<!-- first id change -->
<div class="invisible" id="result<%= device_div.id %> ">
<div class="phoneDetailsContainer">
<div class="row">
<div class="col-sm-12">
<center><h5 class="deviceHeader"><%= device_div.manufacturer.name.titleize %> | <%= device_div.device_name.upcase %></h5></center>
</div>
</div>
<div class="row">
<div class="col-md-4 hidden-sm-down"></div>
<!-- second id change -->
<div class="col-sm-12 col-md-4" id="deviceDivImageContainer<%= device_div.id %> ">
<center>
<% if device_div.image.present? %>
<%= image_tag device_div.image_url(:thumb), :class => "deviceImage" %>
<% else %>
<% end %>
</center>
</div>
<div class="col-md-4 hidden-sm-down"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4">
<center>
<span class="proceedDisclaimer">By clicking this button you agree that this is the device in your possession</span>
<!-- third id change. Not knowing ruby i cannot help here -->
<%= link_to "Proceed to Carrier Selection", manufacturer_device_path(#manufacturer, device_div), class: 'btn btn-outline-primary proceedButton', :id => "proceed" %>
</center>
</div>
<div class="col-sm-12 col-md-4"></div>
</div>
</div>
</div>
<% end %>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function(){
//result.hide is not wanted as elements are already having class invisible
//Assuming that the dropdown values have same values as element ids
$('#select-device').change(function(){
$('#'+$('#select-device').val()).removeClass('invisible')
});
});
</script>
Right now, your jQuery selector for $('#result') is going to return an array of all the elements which match your selector. You want to find the one which has the class of the id of the item. You can pass the target into the function like this
$('#select-device').change(function(e){
id = $(e.target).val()
$('.' + id).removeClass('hidden')
}
I'm working on a blog site (in node.js), created a blog Schema, a forEach loop iterates over every blog and adds image, title,body to it :
Code :
<% blog.forEach(function(blog) { %>
<div class="col-md-4 col-sm-6">
<img src="<%= blog.image %>">
<div class="caption">
<h2><%= blog.title %></h2>
</div>
<span><%= blog.created.toDateString(); %></span>
<div class="relative">
<p><%- blog.body.substring(0,250); %></p>
<div class="absolute"></div>
</div>
</div>
<% }) %>
Because I've applied forEach, all blog posts have the same appearance.
Is there any chance that the 4th and 5th blog posts appear in different ways(col-md-6, i.e they both occupy half the space of the row)?
The second parameter of the forEach callback is for index:
<% blog.forEach(function(blog, idx) { %>
<% if (idx > 3) %>
<div class="col-md-6 col-sm-6">
<% else %>
<div class="col-md-4 col-sm-6">
Can someone help me?
I need to implement image on day event with clndr.js .
When I have events on some day, I need to put this image with the amount of events of this day.
I hope You will help.
This is my template when I have two events, I get this
<script id="clndrTemplate" type="text/template">
<div class="clndr-controls">
<div class="clndr-previous-button"><i class="fa fa-chevron-left"></i></div>
<div class="clndr-next-button"><i class="fa fa-chevron-right"></i></div>
<div class="month"><%= month %> <%= year %></div>
</div>
<div class="clndr-grid">
<div class="header-days">
<% _.each(daysOfTheWeek, function(day) { %>
<div class="header-day"><%= day %></div>
<% }); %>
<div class="days clearfix">
<% _.each(days, function(day) { %>
<div class="<%= day.classes %>" id="<%= day.id %>">
<span class="day-contents"><%= day.day %></span>
<% _.each(day.events, function(event){ %>
<div class="event">
<div class="event-images">
<span class="grey-img">
<img src="images/t-clndr.png" alt="">
</span>
<span class="white-img">
<img src="images/t-clndr-w.png" alt="">
</span>
</div>
<span class="amount-events">
<% %>
</span>
</div>
<% }) %>
</div>
<% }); %>
</div>
</div>
</div>
</script>
You can locate a <div> on each day (using CSS) which will contain the number of events, you should set the id of this div to be the date of its day, something like "d29-09-16".
Then use jQuery:
$("#d29-09-16").text(numOfEvents);
while numOfEvents is your counter of this day.