I am using bootstrap modal on my rails project. On this page I have to iterate through my slides and for each slide I want to create a modal. I came up with this solution:
<% #slides.each do |slide| %>
<div class="row slidecard text-center">
<div class="col-xs-12 ">
<h2><%= slide.name.upcase %></h2>
<p><em><%= slide.description %></em></p>
<a href="#" data-target=<%=slide.id%> data-toggle="modal">
<%= image_tag slide.picture.url(:medium) %>
</a>
<div class="modal fade" id= <%=slide.id%>>
<div class="modal-dialog mymodal">
<div class="modal-content text-center">
<div class="modal-body">
<%= image_tag slide.picture.url(:original) %>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div
</div>
I give to the link containing the image the data-target attr and gives it the value that has the slide.id so I can give a specific id and data target that links image and modal. But the problem is that for the modal to work I need to add "#"in front of slide.id to have something that looks like data-target="#39"
I tried a couple of things such has :
data-target= "#"<%=slide.id%>
and other stuff but nothing gives me the result I want and make the modal work !
licence
try to this
Related
I am a newbie and I am trying to make a very simple website by Rails and I am trying to upload video by making a submit button. At first, I am trying to copy Wistia embed link and paste it into file show.html.erb, and I can show that video. But my problem is, I want to make a submit button and I can submit a new video, no need to copy paste any link from Wistia into file show.html.erb.
Here is my code at show.html.erb if you need
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-image">
<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:"100%"> </div>
</div>
<div class="card-content white-text">
<div class="row">
<div class="col m4 center">
<%= image_tag ("courses/1.png"), class: "img-responsive"%>
</div>
<div class="col m8">
<span class="card-title"><%= #course.title %></span>
<p><%= #course.description %></p>
</div>
</div>
</div>
</div>
</div>
Thank you very much.
you should create a form (the submit button is included) and learn about Active Storage
This is my code:
<div class="column">
<div class="post-module">
<a href="https://www.livescience.com/59802-should-we-fear-
intelligent-robots.html" >
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div>
<img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of Intelligent
Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
</a>
</div>
</div>
I want to make that code in rails but I am just a beginner in rails and I wasn't able to find something that could help me in this. I only know the basic idea of the link_to in rails.
link_to method can take a block and display it's evaluation as a link content:
<%= link_to "https://www.livescience.com/59802-should-we-fear-intelligent-
robots.html" do %>
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div><img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of
Intelligent Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
<% end %>
I am having a modal that have two divs in it. Now i am willing to open the same modal with two different links.
Here is my modal:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<%= link_to "Back","#",class: "btn btn-default",id: "Back-Link",style: "display:none"%>
<%= link_to "Next","#",class: "btn btn-default",id: "Next-Link"%>
<div id="One">
<p>Some text in the modal.</p>
</div>
<div id="Two" style="display:none">
<p>Modal Two.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Following are the links:
<%= link_to "Test","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
<%= link_to "Test1","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
When I click on "Test" Link the modal should open with div id "One". And when i click on "Test1" the modal should open with div id "Two".
can anyone help me? Thank you in advance
Here is a working fiddle.
I made use of the data attributes to store id of div to show inside the modal. Then on click of it, I changed its style from display:none to block.
<div class="modal-body">
<div id="one" class="hide_first">
<p>Some text in the modal.</p>
</div>
<div id="two" class="hide_first">
<p>Modal Two.</p>
</div>
</div>
Open #One
Open #Two
<!-- Storing the id of divs in data-modal-show -->
And write some javascript like this
//classes given to our links
$(".modal-open-links").on("click", function(e){
//First set display:none for all divs
$(".hide_first").css("display", "none");
//hide_first class is on both our divs inside modal body that we want to alternatively show
content_to_show = $(this).attr("data-modal-show");
//the div id we want to show on modal open
//Show the one we clicked
$("#" + content_to_show).css("display", "block");
});
I'm very new to Rails, so this has been tough for me to understand. The front end guy in my group for a school project designed this so that when I tap the "More Info" button on a displayed product, a pop up box shows up on the screen with more information about the product.
How do I make the selected product's info accessible to me so I could display it in the pop up box? I've tried button_to with an :action but I apparently needs a view template, but I don't want that. I simply want to display the selected product's info in the pop up box that shows up when the user taps the "More Info" button.
This is the code I'm working with:
<!-- Container for the Catalog Content -->
<div class="Catalog_page">
<!-- List all products -->
<% #products.each do |product| %>
<div class="product_item">
<span class="img"><%= image_tag product.image, size: "200x100" %></span>
<h1><%= product.name %></h1>
<!--<%= product.description %> Saved this just incase we needed it-->
<%= number_to_currency(product.price) %>
<!-- Button that creates light box -->
<button class="lightbox" id="button">More Info</button>
</div>
<%end%>
<!-- backdrop is the black background of lightbox -->
<div class="backdrop"></div>
<!-- the box that we need to plug information to -->
<div class="box"><div class="close"></div>
I DON'T KNOW HOW TO PULL THIS INFORMATION FROM DATA BASE
</div>
</div>
There are two ways to do your task:
You can render these "more info" and keep it hidden, and then you show the modal these info.
<% #products.each do |product| %>
<div class="product_item">
<span class="img"><%= image_tag product.image, size: "200x100" %></span>
<h1><%= product.name %></h1>
<!--<%= product.description %> Saved this just incase we needed it-->
<%= number_to_currency(product.price) %>
<!-- Button that creates light box -->
<!-- here is the link for each product to open its modal -->
<a data-toggle="modal" data-target="#more-info-<%= product.id %>" class="lightbox">More Info</a>
<!-- here is the modal content -->
<div id="more-info-<%= product.id %>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">More Info</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</div>
<% end %>
Or you can fetch these info by ajax and then show it on the modal
<% #products.each do |product| %>
<div class="product_item">
<span class="img"><%= image_tag product.image, size: "200x100" %></span>
<h1><%= product.name %></h1>
<!--<%= product.description %> Saved this just incase we needed it-->
<%= number_to_currency(product.price) %>
<!-- Button that creates light box -->
<button class="lightbox fetch-info" data-product-id="<%= product.id %>">More Info</button>
</div>
<%end%>
<!-- backdrop is the black background of lightbox -->
<div class="backdrop"></div>
<!-- the box that we need to plug information to -->
<div class="box"><div class="close"></div>
<div id="fetch-result"></div>
</div>
and then, create a JS to fetch the data:
$(".fetch-info").click(function() {
var $input = $(this);
$.ajax({
type: "GET",
url: "/product_info",
data: {
id: $input.data("product-id")
},
success: function(response) {
$("#fetch-result").html(response);
}
});
});
Then, create an action to provide the product info:
def product_info
#product = Product.find(params[:id])
render layout: false
end
and create your view with your custom product info...
That's it!
Tip: if you choose the second option, you can improve by calling the action as JSON (fetch just the product info, and then in your success callback, you add the html there)
This is an index page, www.example.com/products. It is showing a list of the products and when clicked they will open a lightbox. What you are going to have to do is pass the id of each individual product into the button so that when the lightbox is opened it is showing the correct information for that product. Alessandro's code is not going to help you because product.attribute1 will not be defined.
Ok so hoping this is final question on Bootstrap Scrollspy, almost there, one more problem to fix i hope. As I have read having a body of 100% seems to disagree with scrollspy ( Im using sticky footer). The final element in my nav is highlighted no matter where i am on the page.
I have tried removing 100% body
I have tried removing the scrollspy js
I have tried setting the body as the target element
I have tried $('body').scrollspy();
None of these work. If i set the height though on the element I am spying on then it does work, though it seems to scroll past the target element quite a bit and then change. I would like to still be able to keep sticky footer.
Here is my code
View
<div class="container">
<div class="row show-grid clear-both">
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h2>
<ul class="nav date">
<% #response.each_pair do |date, movie| %>
<li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
<% end %>
</ul>
</div>
</div>
</div>
<div class="span9">
<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">
<% #response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on <%= date_format(date) %></h3>
<% movie.each do |m| %>
<div class="thumbnail clearfix">
<!--Image here
<% end %>>
<div class="caption pull-right">
<!--Content Here
</div>
</div>
<% end %>
<% end %>
</div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->
JS
$('#dateNav').scrollspy();
CSS
#dateNav{
position: fixed;
}
#spyOnThis {
height:100%;
overflow:auto;
}
.side-nav .active a {
color: #FFBE00;
}
HTML Output (Nav)
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h3>
<ul class="nav date">
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-09">9th Jan 2013</a>
</li>
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-11">11th Jan 2013</a>
</li>
<li class="active"><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-30">30th Jan 2013</a>
</li>
</ul>
</div>
</div>
</div>
Element being spied on
<div class="span9">
<div id="spyOnThis" data-target="#dateNav" data-spy="scroll">
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
<h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!-Paragraphs here
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on next date</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
</div>
</div>
Apologies for the amount of code but better to have more on there i guess
So does anyone know of a solution for this as scrollspy does seem quite buggy at the moment
Thanks
You simply can't set 100% height on the element you're spying on with ScrollSpy, whether it be body or another div.
However, there is an issue on GitHub that suggests a workaround for this (also discussed here).
In your case, this would be:
$(window).scrollspy({wrap: $('#spyOnThis')[0]});
Here's a jsFiddle of your code that works with that fix. Note that I changed some of your HTML:
I removed the data-target and data-spy attributes again. When initiating ScrollSpy, use either the data attributes or the JavaScript.
I gave your span9 div the #spyOnThis ID, since the extra markup was unnecessary.
Hopefully this will resolve it once and for all.
EDIT
This solution worked; for #Richlewis' specific scenario we needed to add the parameter offset: -250 to ScrollSpy.
I just got scrollspy working on a site that I'm building. I was having the same issue where the last element was always highlighted. My problem was that I was calling .scrollspy() on the nav element when it should be on the body.
Try changing your script call to:
$('body').scrollspy();
In case the other answers don't work for you, my problem ended up being a missing doctype on the top of the page.
Scrollspy calls $(window).height() in the formula to calculate the current scroll position. From this other question, you can see that this call will not work without a correct doctype.
As soon as I added <!DOCTYPE html> to the top of my HTML, Scrollspy started highlighting the correct links.