I've been reading up about links that can take you to a div id on a site, eg:
www.example.com/#halfwaydownpage
I'm trying to do create a link that will jump to a position on a site, however there are very few div id elements in the code.
Has anyone heard of another method of achieving this that doesn't use div id?
If you are linking to your own website (meaning: you can edit the source as you need), or to some other website where named anchors are already present, you can do like so:
ipsum II
<p>lorem ipsum</p>
<p>sic dolor</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a name="ipsum2"></a>ipsum ipsum</p>
otherwise, linking to a point in a page where a named div resides, you need assistive javascript to achieve that.
Related
Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.
i use facebook comments plugin https://developers.facebook.com/docs/plugins/comments/
for every page in my site
and i show the facebook comments by fetching from json request
https://graph.facebook.com/comments/?ids=abc.com/
so when i update comment in facebook plugin, i would like to get the comments in my site to get dynamically updated
my code in controller
#fb_res=HTTParty.get('https://graph.facebook.com/comments/?ids=abc.com/')
fb_json=JSON.parse(#fb_res)
#fb_comment = fb_json["abc.com/"]["comments"]["data"].map {|x| [x["from"]["id"],x["message"],x["from"]["name"]]}
my views :
<% #fb_comment.each do |fb| %>
<li>
<div class="pic_commnt">
<div class="pic">
<div class="pic_image">
<img src="http://graph.facebook.com/<%= fb[0].to_s %>/picture?type=square" alt="" />
</div>
<span class="pic_name"><%= fb[2].to_s %></span>
</div>
<div class="pic_comments">
<p>
"<%= fb[1].to_s %>"
</p>
</div>
</div>
</li>
<% end %>
i would like to get this section updated dynamically
I created a controller for "products" to be added into my app that is utilizing the Refinery CMS.
Hhere is the code for the page in show.html.erb
<div>
<h3>Feedback Sought</h3>
<p>
<%=raw #product.description %>
</p>
</div>
But this is what is actually produced in the live page.
For the meantime I can implement a digsuting hack of removing the margin by targeting the element, like
.productFeedbackDescription p { margin: 0; }
and then doing inline css along the lines of
<p style="margin-bottom: 12px;">
<%=raw #product.description %>
</p>
By default Refinery adds <p> tags in the template.
And by default, using the WYSIWYG editor also adds <p> tags. So I manually removed the <p> tags from the template.
For reference, this was the default code generated by refinery when I create the controller
<section>
<h1>Product Summary</h1>
<p>
<%=raw #product.product %>
</p>
</section>
Now my code is
<div>
<h3>Product Summary</h3>
<%=raw #product.product %>
</div>
Here is a screenshot of the code now generated as live in page.
I cannot make my 'Add to Cart' button inline next to the product price, for some reason that I do not understand, the button appears below the product price.
Here my development settings:
ruby 1.9.3p392
rails 4.0.0.rc2
I following the DEPOT project and I am stuck in ITERATION D3 where the author insert a button next to the product price through the following CSS code:
#store .entry form, #store .entry form div {
display: inline;
}
and my views/store/index.html.erb as follow:
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% #products.each do |product| %>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%= product.title %></h3>
<%= sanitize(product.description) %>
<div class="price_line">
<span class="price"><%= number_to_currency(product.price) %></span>
<%= button_to 'Add to Cart' , line_items_path(:product_id => product) %>
</div>
</div>
<% end %>
Also I have reviewing the HTML rendered from Google Chrome:
<div class="price_line">
<span class="price">$34.95</span>
<form action="/line_items?product_id=4" class="button_to" method="post">
<div><input type="submit" value="Add to Cart" /><input name="authenticity_token"
type="hidden" value="yTcDgb4x1h98dXnI0dQqHv4hjfqduSBPMwsLLL3GeHw=" />
</div></form>
</div>
I have tested over Google Chrome, Firefox, IE9 and Opera. It seems that is not a problem related to browser. I need someone who can explain this weird behavior what could be the smartest way to solve it. :-)
Thanks in advance for any input.
I have a standard Edit form view within MVC, and I need to place a user control, in this case Create inside the BeginForm, like below:
When the issue is that the Create ascx when the form is submitted does not fire it's action in the controller, what am I doing wrong?
<% using (Html.BeginForm())
{%>
<fieldset>
<legend>Tax</legend>
<p>
<label for="Name">
Name:</label>
<%= Html.TextBox("Name", Model.Tax.Name) %>
<%= Html.ValidationMessage("Name", "*") %>
</p>
<p>
<% Html.RenderAction("Create", "Mileage"); %>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
Here is the Create.ascx
<% using (Html.BeginForm())
{%>
<fieldset>
<p>
<label for="Distance">
Distance:</label>
<%= Html.TextBox("Distance", Model.Mileage.Distance)%>
<%= Html.ValidationMessage("Distance", "*") %><span class="field-validation-error"
id="field-validation-error-distance">*</span>
</p>
</fieldset>
<% } %>
You have nested forms in your resulting HTML. This will not work as expected. Remove the form from the inner view. The inner view will then be incomplete, so if you were using it as a stand-alone, you should make it shared, and create another view, which will just open the form, render the inner view, and close the form.
As a margin note: you are not using the default binder. You can if you want to, it will work even with nested objects (Html.TextBox("Mileage.Distance"), for example).
Nested form are not supported in HTML. See here: The FORM element
Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested.
Either remove the form from your partial view and let the container view provide it, or remove the form from the view and add it to the partial thus making it independent of the parent.