I'm building a rails app that has a form with a new action in the controller.
I have a basic nav template that I have in my application.html.erb
<a class="brand" href="index.html">
<img src="assets/logo.png" height="30" alt="logo" /></a>
When I click on an action that renders an index action the logo stays put. But when I click on a new action the logo disappears.
Any idea why this is happening? I'm ok at rails but I am horrible at design/ui/ux.
Thanks in advance.
If you are using Sprockets then your way is a little bit wrong. You should use image_tag helper to show images
<%= image_tag "logo.png", height: 30, alt: 'logo' %>
It should prevent it from disapearing and also it should always set proper path to your image (as sprockets can add some extra data (hash) to this path).
Related
I'm using colorbox on a site but haven't been able to figure out how turn off the title text when hovering over a thumbnail. I want to retain the text to use as a photo caption when you see the full size image, just hide it on the thumbnail hover state.
I've seen some js solutions to completely turn them off, which isn't what I want. I also messed around the with the colorbox js itself and was able to turn off the text for the full size image but that is the reverse of what I want. My skills are HTML and CSS... I have experimented with qtip but that is a little beyond me right now.
My HTML is basically this:
<li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li>
Any help would be appreciated--thanks!
Try using some (hidden) element other than the title attribute, then as a setting in your colorbox, set the title option to a displayed copy of that element, for example:
HTML:
<li class="imgTitle">
<a class="group1" href="images/bigPhoto.png">
<span class="caption" style="display: none;">
I'm a caption that's not in a title attribute anymore
</span>
<img src="images/thumbnailPhoto.png" />
</a>
</li>
JS could be something like this:
$(".group1").colorbox({
title: function() {
return $(this).find("span.caption").clone().show();
},
// other settings/options here
});
Here is a fiddle similar to the above. I added the .clone() part because, when I was implementing something similar in a gallery, they disappeared after clicking once through all the images.
I am using the zoom function of Magnificic Popup:
<a class="image-popup-no-margins" href="photo.jpg"><img src="thumbnail.jpg" /></a>
I would like to see thumbnail.jpg as the background of photo.jpg while photo.jpg loads right over it. So you click thumbnail.jpg and then a big version of thumbnail shows up, as it is already in cache, and photo.jpg loads right on top of it.
Is that possible? :) Thanks!
Place this before the links you have on page:
<div style="display: none;">
<img src="photo.jpg" />
</div>
and then use library like http://www.appelsiini.net/projects/lazyload to preload the image.
I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.
I am using Durandal, hottowel. Want to change the view dynamically, hide some div depending upon a cookie value. However, if I write the code in "activate" as such
$("#box1").hide();
$("#box2").show();
both the boxes are shown, hide does not work. But if I wire the same code to a click event then everything works. Is "activate" is not the right place to do such a thing? What's the best way to do such a thing.
My view is simply as follows:
<section>
<div id="box1">
box1
</div>
<div id="box2">
box2
</div>
</section>
A better approach is to use the knockout bindings that ship with durandal to do this declaratively in the view.
<section>
<div data-bind="visible: box1Visible">
box1
</div>
<div data-bind="visible: box2Visible">
box2
</div>
</section>
VM:
return {
activate: activate,
box1Visible: ko.observable(false),
box2Visible: ko.observable(true)
}
Then all you have to do to show or hide the boxes is set the values of those observables from the view model. The view model then doesn't need to be aware of the structure or the names of elements in the view.
I think I got the answer by using ViewAttached in my model. This method is called after view is bound. read more about it here http://durandaljs.com/documentation/Composition/
and here
I'm trying to create a topbar using twitter bootstrap, but the black bar won't render. I've got a simple rails app with haml-rails and less-rails-bootstrap.
I tried the following haml:
!!! 5
%html
= render 'layouts/header'
%body
.topbar-wrapper
.topbar
.topbar-inner
.container
%a{:href => "brand", :href=>"#"} Name
.container
= yield
I had a look on SO and found the following post: Twitter Bootstrap css topbar html/css I tried translating that HTML into haml, but this doesn't work either:
!!! 5
%html
%body
.topbar
.topbar-inner
.container
%a{:class => "brand", :href =>"#"} Name
I can see the bootstrap styling, so I have included bootstrap and it is being rendered along with the page. I must be making some mistake in my haml.
The HTML scaffold in Bootstrap 2.0 is different from the one proposed in 1.4:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
In HAML this would be something like:
.navbar
.navbar-inner
.container
...
You can find more details at: http://twitter.github.com/bootstrap/components.html#navbar