I am trying to create 50 background images for a set of windows using less.
These image paths are exactly the same format, but the number just increments by 1 for each window.
Currently I have the following code:
window-1{
background-image: url('/content/images/background-1-window.png')
}
window-2{
background-image: url('/content/images/background-2-window.png')
}
..
window-50{
background-image: url('/content/images/background-50-window.png')
}
What I want to achieve is to effectively have variables replacing the numbers using less, is it possible to do this using variables and or mixins?
Something like:
window-#window-number{
Background-image: url('/content/images/background-#window-number-window.png')
}
Is it at all possible to do something like this?
Yes, it is possible, see this answer https://stackoverflow.com/a/15982103/1596547 and https://github.com/twbs/bootstrap/issues/10990 for some example code:
In your case:
.setbackgroundimage(#index) when (#index > 0)
{
window-#{index}
{
background-image: url('/content/images/background-#{index}-window.png');
}
.setbackgroundimage(#index - 1);
}
.setbackgroundimage(50);
I have a webpage with 6 small images and 1 big images in the center (which is really 6 layers, each contains 1 images), just like this: http://jsbin.com/onujiq/1/; I've set the z-index property of all center images to (-1). What I'm trying to do is when I hover over 1 of the 6 small images, the respectively image will appear as the big images in the center (by change the respectively center image's z-index to 5 - for example) ; but no matter how I try, It's doesn't work as what I want. Please help me with this (I only use CSS); thank you in advance !
PS: another confusing problem when i test about hover is when I use this code:
#img3:hover + #img4{
opacity: 0.2;
}
it does work, but when i use this:
#img3:hover + #img5{
opacity: 0.2;
}
it doesn't ! I still dont' know what is the big different between #img4 & #img5 ??
http://jsfiddle.net/yy9Rr/
Your solution was close, but you need to change it from
#img3:hover + #img4{
opacity: 0.2;
}
to use the ~, to give something like
#img3:hover ~ #imgCenter3 {
z-index: 10;
}
a + b says any b element immediately following element a
a ~ b says any b element that is a following sibling of a, not necessarily immediately adjacent.
Try using JavaScript:
document.getElementById("img3").onmouseover = function() {
document.getElementById("img4").style.opacity = ".2";
document.getElementById("img5").style.opacity = ".2";
}
I've got two columns and i need to add line between them. This is 1px solid color so i would love to achieve this with css.
The trick is that content is dynamicaly loaded, so sometimes the left column can have more text and sometimes right column can have more text. Of course if the size of coulmn would be always the same i would add the border to bigger one. But unfortunatly i don't.
So is there a way to achieve this or do i have combine it with php and maybe strlen or something?
You can find simple code for this problem here http://jsfiddle.net/M9TSs/
One way of doing it would be to have a border on both, and use a negative 1px margin to pull the right column over so that the borders overlap:
http://jsfiddle.net/7GCff/
I already solved this using JQuery...
I used this code and it worked great.
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Source : http://www.cssnewbie.com/equal-height-columns-with-jquery/
Makes all columns have the same height as the longest.
When using an editor like tinymce, how could i limit the height of the text a user enters so it doesn't use more space on the webpage than i want it to?
There are 2 things that i want some advise on:
In the editor:
The user enters text in a tinymce editor, he could set a text to font-size say 80px which would use up more space than a normal letter. So it's not the amount of text that i care about it's the height of the total.
In the webpage:
I don't want to give them more than say 200px worth of text on the page. But if they enter just 1 line of text with a small font-size i don't want to show a 200px space. So the height has to be flexible but with a maximum.
I know this isn't exact science but the goal here is to prevent the user from messing up the page.
To solve a similar issue i wrote the following function (placed inside an own tinymce plugin). You will need to add a variable for the maximum case and maybe tweak it a bit, but i hope this code will put you into the right direction
// this function will adjust the editors iframe height to fit in the editors content perfectly
resizeIframe: function(editor) {
var frameid = frameid ? frameid :editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},
I have a string of HTML in Rails. I'd like to truncate the string after a certain number of characters not including the HTML markup. Also, if the split happens to fall in the middle of an opening and closing tag, I'd like to close the open tag/s. For example;
html = "123<a href='#'>456</a>7890"
truncate_markup(html, :length => 5) --> "123<a href='#'>45</a>"
the regular truncate function works fine, just pass :escape => false as an option to keep the HTML intact. eg:
truncate(#html_text, :length => 230, :omission => "" , :escape => false)
RubyOnRails.org
*Edit I didn't read the question very carefully (or at all TBH), so this answer does not solve this question... It IS the answer I happened to be looking for though, so hopefully it helps 1 or 2 people :)
There are two completely different solutions both with the same name: truncate_html
https://github.com/ianwhite/truncate_html : This is a gem and uses an html parser (nokogiri)
https://github.com/hgmnz/truncate_html : This is a file you put in your helpers directory. It uses regular expressions and has no dependencies.
You should solve this problem with CSS rather than Ruby. You are doing something that affects the DOM layout, and there is no way to programmatically devise a solution that will work consistently.
Let's say you get your HTML parser gem working, and you find a lowest common denominator character count that will work most of the time.
What happens if you change font sizes, or your site layout? You'll have to recalculate the character count again.
Or let's say your html has something like this in it: <p><br /></p><br /> That is zero characters, however it would cause a big chunk of blank text to be inserted. It could even be a <blockquote> or <code> tag with too much padding or margin to throw your layout totally out of whack.
Or the inverse, let's say you have this 3 ≅ λ (3 ≅ λ) That is 26 characters long, but for display purposes it is only 5.
The point being that character count tells you nothing about how something will render in the browser. Not to mention the fact HTML parsers are hefty pieces of code that can at times be unreliable.
Here is some good CSS to deal with this. The :after pseudo class will add a white fade to the last line of content. Very nice transition.
body { font-size: 16px;}
p {font-size: 1em; line-height: 1.2em}
/* Maximum height math is:
line-height * #oflines - 0.4
the 0.4 offset is to make the cutoff look nicer */
.lines-3{height: 3.2em;}
.lines-6{height: 6.8em;}
.truncate {overflow: hidden; position:relative}
.truncate:after{
content:"";
height: 1em;
display: block;
width: 100%;
position:absolute;
background-color:white;
opacity: 0.8;
bottom: -0.3em
}
You can add as many .lines-x classes as you see fit. I used em but px is just as good.
Then apply this to your element: <div class="truncate lines-3">....lots of stuff.. </div>
and the fiddle: http://jsfiddle.net/ke87h/
You could use the truncate_html plugin for this. It uses nokogiri and htmlentities gems and does exactly what the plugin name suggests.
We had this need in zendone.com. The problem was that the existing solutions were very slow when truncating long HTML documents (MBs) into shorter ones (KBs). I ended up coding a library based in Nokogiri called truncato. The library includes some benchmarks comparing its performance with other libs.
This will help you without any extra effort
raw your_string.truncate(200)
your_tagged_string.truncate(60).html_safe
You can use
truncate(html.gsub(/(<[^>]+>)/, ''), 5)
We can do that with the help of simple_format http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-simple_format
html = "123<a href='#'>456</a>7890"
simle_format(truncate_markup(html, :length => 5))
=> "123 456 7890"
You can use the truncate method in combination with sanitize.
truncate(sanitize(html_content), length: 100, separator: '</p>', escape: false)
This will truncate your HTML using the separator but it can produce HTML without closing tags. To fix this we can use the sanitize method again, which will clean the HTML and add the missing tags.
sanitize(truncate(sanitize(html_content), length: 100, separator: '</p>', escape: false))
Solving this problem from the client side:
view:
<script>
$(function() {
$('.post-preview').each(function() {
var tmp_height = $(this).innerHeight();
if ((tmp_height > 100) && (tmp_height < 200)) {
$(this).addClass("preview-small");
}
else if (tmp_height >= 200) {
$(this).addClass("preview-large")
}
else {
//do nothing
}
});
});
</script>
css
.preview-small {
height: 100px;
overflow: hidden;
}
.preview-large {
height: 200px;
overflow: hidden;
}