I have a table with sliders (part of a form) in one column and a button (link to other page)
<button onclick="location.href='/main';">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</button>
Instead of opening the page, the button just submits the form. Any way I can fix this without breaking the table or the form?
Why don't just use anchor tag
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
or
# If you are using erb
<%= link_to '/main' do %>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
<% end %>
try below code:
<a href='/main' class="btn btn-primary">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
If you used bootstrap css then you can add classes btn and btn-paimary which makes button.
Instead of opening the page, the button just submits the form.
Yes! Buttons are meant to perform actions that effects on front-end or back-end, they are not meant for navigation. You should use links(a.k.a anchors) to perform navigation.
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
Related
I have downloaded a template for my app. I have to replace the menu links of this template with my project url links.
Code block of the menu link in template page::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Item 2
</span>
</a>
I have to use this with::
#Html.ActionLink("Program", "Index", "karyakramModels")
I tried with the code ::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
#Html.ActionLink("Program", "Index", "karyakramModels")
</span>
</a>
I am not getting the CSS design with this code. Thank You!!!
As you have icon () inside the anchor tag, I would suggest #Url.Action() to use
<a href="#Url.Action('actionName', 'controllerName')" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Program
</span>
</a>
I'm working on restructuring my code to clean it up and I'm trying to move over into using view helpers to do this. Right now I have the following in my views file:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=Book Subject&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://url.com/books/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-facebook fb-share-button" id="fbid">
<div data-href="http://url.com/books/<%= book.book_name %>" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore jssocials-share-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.url.com%2Fsomebooks%2Fbooks%2F<%= book.book_name%>&src=sdkpreparse">
<i class="fa fa-facebook jssocials-share-logo"></i><span class="jssocials-share-label">Share</span>
</a>
</div>
</div>
</li>
The only thing I can think of to alter this to a view helper is to go to books_helper.rb and do something like:
module BooksHelper
def social_sharing (media)
when 'email'
content_tag(:div, class: 'jssocials-share jssocials-share-email')
end
end
I've barely scratched the service here but I feel as even that is incorrect. I've nothing that's looking for the media type so email is worthless. Plus there's a div class around the href I'm hitting but the href has it's own class and an onclick plus styling. Any nudge would be appreciated. I have never built out a custom view helper.
You could pass a block...
<%= social_sharing 'email' do %>
Print
<i class="jssocials-share-logo"></i>
<% end %>
And define your helper method as...
module BooksHelper
def social_sharing(media, &block)
case media
when 'email'
content_tag :div, class: 'jssocials-share jssocials-share-email', &block
end
end
But I think that might just make your code more obscure even if it does DRY up the jssocials classed divs. I highly recommend "99 Bottles" by Sandi Metz which amongst other things talks about producing clear, maintainable code.
https://www.sandimetz.com/99bottles/
I'm trying add an icon with using awesome font.
I used bootstrap button type and it's working fine.But when i would like to add a social icon using tag it does not seem.How can i do that ?
<div id="socialLoginList">
<p>
#foreach (AuthenticationDescription p in loginProviders)
{
<button type="submit" class="btn btn-lg btn-social btn-#p.AuthenticationType.ToLower()" id="btn-socialID" name="provider" value="#p.AuthenticationType" title="Log in using your #p.Caption account"><i class="fa fa-#p.AuthenticationType"></i>#p.AuthenticationType</button><br /><br />
}
</p>
</div>
Simply do a ToLower here:
<i class="fa fa-#p.AuthenticationType.ToLower()">
Font awesome icons are all lower case, so it should pick them up if you do a ToLower. Remember that HTML class names are case-sensitive.
E.g.
<i class="fa fa-google"></i>
<i class="fa fa-facebook"></i>
I have this bit if code on my .cshtml page.
<a href='~/AudioFiles/#item.dateOfCall.ToShortDateString()_Store_Call.mp3'
class="btn btn-xs green tooltips" target="_blank" data-container="body"
data-placement="top" data-original-title="Play">
<i class="fa fa-play"></i>
</a>
I need to change the date to be 2014-02-19
instead of 2014/02/19
Current the link breaks because it is trying to go to 2014/02/19 which is invalid in windows file naming.
You could format the date like so:
<a href='~/AudioFiles/#item.dateOfCall.ToString("yyyy-MM-dd")_Store_Call.mp3'
class="btn btn-xs green tooltips" target="_blank" data-container="body"
data-placement="top" data-original-title="Play">
<i class="fa fa-play"></i>
</a>
For a full list of options check this page out http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx
I am having a bit of a problem with my site, i am trying to add a simple link to an external site, but i can't get the link to open without right clicking and selecting open link.
This is the piece of code
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item"</a>
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
</div>
I know it's most likely something simple but i can't seem to pin it down
Thanks
Aha! The problem is because you are trying to link from an http to an https!
Your anchor tag needs to override the click handler:
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');" >
Should fix it!
But I would still fix the nesting.
try properly nesting everything, like so:
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');">
<div class="nav-hover">
<i class="li_shop">
<span>Shop now</span>
</i>
</div>
</a>
</div>
Syntax error
<a href="https://www.google.co.uk/" class="nav-item">
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>