I have a list of comments on my page that is zebra colored to aid distinction between each comment.
I achieve the zebra colouring using the rails cycle helper in the partial I use for each comment:
<div class="span9 <%= cycle("odd_response", "even_response") -%>">
I dynamically update this list via a form that prepends a new comment to the top of list via AJAX when the user submits a new call.
As I use the same partial as the template to render this new comment the comment is only colored as the "odd_response" irrespective of the color of the previous response i.e. it starts the cycle process again.
How do I get the partial to respect the order of colors present in the table that it is being prepended to?
My solution would be to drop the cycle call and use this CSS for the zebra stripes.
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
This works in all modern browsers, no IE7/8 support.
I ended up resolving this by placing some custom JavaScript in the create.js action that first checked what the background colour of the last comment was and then altered the new comment to the opposite colour immediately after rendering the object on the page.
Related
grails v 3.3.9, fields plugin
fighting with fields plgin and theres a problem when rendering domain objects and using bootstrap
i've got a sample here from a simple standalone page to show the problem
<p>f:display category </p>
<f:display bean="maintenanceAgreement" >
</f:display>
<hr />
<p>f:field category</p>
<f:field bean="${this.pageScope.maintenanceAgreement}" property="category">
<g:render template="/_fields/map/displayWidget" ></g:render>
</f:field>
<hr />
in essenence i have added a template in "/_fields/map/displayWidget" that renders a drop right table on a button
when you render a map field directly from your Domain object the sample table opens and you get all of the table
however when you
you can see the differences between using f.display (has clipping problem), f.field ( which seems to work) and f.all that ignores my _fields/map/_displayWidget.gsp
I dont want to have not use the fields plugin but its not working with bootstrap templating
has any one come up with a fix for this problem?
the project demo page is here
github standalone page to show rendering problem
the attached shows the output as you try each and select category property
well goldarn it another 2 days down the pan - but i have it !
I thought at first it was something to do with fields plugin processing. so i hacked a clone of plugin project locally and added some bits so i could watch it/debug step through it
in doing so i noted that my dummy web domain class page i'd cut across to the plugin didnt have the clipping problem. but the styles were not the same so i copied main.css and grails.css from ordinary project back into the plugin, then re rendered in the browser - and the clipping happened again.
so its in the css!. some very careful watching of browser and looking at the browser 'inspect' indicated that the clipping seemed to be enabled very early on in the journey.
so in my dummy page i just used
I then spent a day wandering round the various bits of fields plugin as its not that well explained anywhere.
if you look at the plugins taglib display method, by default that triggers the /templates/fields/_list.gsp. naming is a little odd but its the gsp that renders the domains persistent attributes as an ordered list - the plugins default _list.gsp looks like this
<ol class="property-list ${domainClass.decapitalizedName}">
<g:each in="${domainProperties}" var="p">
<li class="fieldcontain">
<span id="${p.name}-label" class="property-label"><g:message code="${domainClass.decapitalizedName}.${p.name}.label" default="${p.defaultLabel}" /></span>
<div class="property-value" aria-labelledby="${p.name}-label">${body(p)}</div>
</li>
</g:each>
</ol>
so after much exploration coming up through templates, from the bottom I ended up right at the top with the '
so nearly there now. back into main.css that i'd copied in. if you edit that, down around line 215 you get this style. If you comment out the overflow property - its all fixed !
.property-list .fieldcontain {
list-style: none;
/*overflow: hidden; */
zoom: 1;
}
I tried auto, scroll, and visible but that seems to much about with too much of the page so best to just comment it out.
once you do that - the rest of the rendering of your forms starts to work !! blimey one line of css for all that pain. Attached is the page using
Lastly through out all this, id ended up digging through /tracing fields plugin. What a nest that is. Not really finished here, but basically
with no body just renders a label and no content. So you either need to provide provide a body tag, say to get the value field displayed.
as
if no widget template has been defined then the renderDefaultDisplay is called which again has very limited options for controlling the rendering by falling through a 'switch (prop.type)' and basically calls either g.format (bool), g.formatDate (but no LocalDateTime/LocalDate Support) or g.fieldValue, non of which are bootstrap enabled.
if you call
these two diagrams are not beautiful but just high level pseudo code walk through for what the core tags are trying to do. One day i'll try and pretty that up but it might help you if you get stuck
I'll raise a bug for the main.css clipping directly to the grails team and see what happens, but you can comment the line out yourself if you fall foul of it.
I am using Django and the django-dynamic-formset plugin to generate a JQuery Mobile (JQM) site. I have nested forms that allow the user to click a "Add" link to another line to the form. This works great without JQM, but when JQM is used to style the form widgets the radio button labels do not trigger the correct radio button.
I have put up a static example of the behaviour, based on the generated HTML. Click the "Add" link, then try choosing a severity for the added item. The "for" attributes of the labels appear to update correctly, so I do not know what I'm doing wrong.
The django-dynamic-formset guide provides me with a way to call a JavaScript function after the user clicks the "Add" button, but I do not know if there's a JQM method I should be calling that will fix the issue. When I use JQM's enhanceWithin function it triggers a page load, which submits my form to Django, which I don't want at that point because the form won't validate yet.
Edit: I uploaded a much better example to the same URL.
After enough caffeine and peanut M&M's I have figured it out.
Reason for Failure: The django-dynamic-formset (DDF) plugin duplicates the form you give it. But the form is cloned as-is, which already includes all the JQuery Mobile (JQM) processing. This causes JQM to ignore it and makes the radio buttons misbehave.
The Solution: The DDF plugin allows you to specify what form to clone by its formTemplate parameter. JQM allows you to disable automatic mobile-enhancement of certain elements. Create an un-enhanced version of your form, and pass that to DDF as your formTemplate.
More Details:
I put this coded into my HTML head, before the reference to JQM:
<script>
$(document).bind('mobileinit',function(){
$.mobile.ignoreContentEnabled = true; // required for using the natural forms
});
</script>
And included this style to hide my "natural" form:
<style>
.natural-form { visibility: hidden; display: none; }
</style>
In the Django code I added a <div class='natural-form> and put a dummy version of my form in it (being sure to surround it another <div> with a unique ID for reference later). In my initialization of DDF I give it the unique ID as the parameter to formTemplate.
I was told on another forum I would have to hack DDF and JQM to get this to work. I am impressed at the design of both of these libraries - flexible enough that a newbie to JQuery can stick all the pieces in the right places and get something out of it.
I've been looking everywhere for code that would allow me to make the banner ads on my site show on the homepage only. Right now they show up site-wide and the advertisers are asking me to change it. I've unsuccessfully tried looking up the right code, but so far it has proven impossible. I'm only coming up for fixes for Blogger and Wordpress, and I need something for tumblr.
Any help would be much appreciated.
Thanks!
Output certain div only on homepage? — No.
Show certain div only on homepage? — Yes, with css snippet.
How to output certain div only on homepage?
Tumblr has only two main types of page:
PermalinkPage
IndexPage
IndexPage include 3 sub-types:
TagPage
DayPage
SearchPage
Tumblr has no else statement for if blocks, that's why it is impossible to output banner ads only on home page — it would be outputted on other index pages.
How to show certain div only on homepage?
You can hide #banner ads with css using this tip:
Step 1. In your Tumblr markup to your html change your body tag to this snippet:
<body class="
{block:IndexPage} index-page {/block:IndexPage}
{block:TagPage} tag-page {/block:TagPage}
{block:DayPage} day-page {/block:DayPage}
{block:SearchPage} search-page {/block:SearchPage}
">
Step 2. Then make sure you output #banner only for index pages:
{block:IndexPage} <div id="banner">...</div> {/block:IndexPage}
Step 3. After that you will have four classes for control demonstration(show/hide) of your #banner div, this css snippet must be added to Custom CSS field on customize page:
.index-page #banner {
/* not neccessable, only for tip's logic demonstration */
display: block;
}
.tag-page #banner,
.day-page #banner,
.search-page #banner {
/* hide on all index pages except home index-page */
display: none;
}
Notice: this tip only hide div, not non-output.
I posted screeenshots of Edit HTML button and Custom CSS field to show the simplicity of the second method and to cheer you up.
Could you use javascript to only should the page on the homepage?
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.
I'd like for users to be able to upload images to use as their backgrounds on their profiles (users#show). Viewing source of some sites that have that functionality (e.g. Twitter), it seems that users are assigned an html body tag and the corresponding CSS background-image for that body tag is linked to the image they have uploaded.
Any ideas of how I can do this?
(Note: I am currently using paperclip for image upload, but will integrate that with an Amazon S3/similar service)
I thought about injecting a ruby instance variable to a CSS file/script from my users controller so that it would be dynamic, but I don't know if this is even possible. There's probably a better way.
I have implemented something similar in a project. I'll lay down the concept and give you a code example. I'll leave you to understand the logic or take bits of the code example to suit your kind of system implementation.
I would use a helper for this.
In app/views/layouts/application.html.erb
<head>
...
</head>
<body style="<%= show_user_bg %>">
...
</body>
In app/helpers/application_helper.rb
module ApplicationHelper
def show_user_bg
"background:transparent url(#{#user.background_image}) no-repeat fixed left top;"
end
end
Just make sure your user model has the background_image column and this is set.
Using a helper makes it more dynamic and cleaner. For example, you can throw in conditions:
module ApplicationHelper
def show_user_bg
# Show user background
if user_signed_in?
"background:transparent url(#{#user.background_image}) no-repeat fixed left top;"
# Otherwise, show a default background image
else
"background:transparent url('/images/default_bg.png') no-repeat fixed left top;"
end
end
end
Hope that helps!
Since it's data dependent, I would simply use an in-line style in the view.
Assuming the controller has loaded a model instance into #profile that has a Paperclip attachment attribute called background_image, ...
<body style="background-image:url(<%= #profile.background_image.url %>)">
...
</body>
There are various way to do this. I've seen the google search page. It added an image tag in the bottom of html body with absolute position to 0,0 and sets index as -2.
another way is to set the background image of body or your main div, you can do this using inline css attribute like
<body style="background-image: 'url(<%= user_image -%>)'">
where user_image is a helper method which calculates background image url for current user, this should handle the default image too i.e if user has not selected any image then it should return a default image probably a transparent image.