I am trying to have the following scenario: a section as a container, and inside different div. These are created dynamically. I am parsing a JSON file and for every name of a person I find, I have to create a div with the picture of that person and the name beneath the picture. So my div contains a picture and a string. What I want to do is placing these divs inside the section/container in a row. Unfortunately I was not able to it so far and the divs are displayed vertically instead of horizontally. Indeed, I have noticed that every div takes the whole row in terms of space. I was therefore wondering what's a smart way of sizing a div in such a way that takes the space enough to contain the picture and the text. I don't want to use explicitly the number of pixels because I find it a bad design. Any help? I can try to put some code but I am using knockouts in order to bind all the info.
<section id="picturesSection">
<div data-bind="foreach: { data: people, as: 'person'}">
<header>
<img width="256" height="256" data-bind="attr:{src: person.imageUrl}">
</header>
<footer>
<p class="nameEmployeePos" data-bind="text: person.name"></p>
<p class="nameEmployeePos" data-bind="text: person.dateOfBirth"></p>
</footer>
</div>
</section>
You can add "float:left" style to your divs. In that case the width will take as much as the content takes. But in case your content is too long, it also might take the whole page. In that case you can set the with of the divs in percentages, e.g., "width: 20%" to have five blocks in a row.
Related
I want to adjust the height of some lines of texts by css-file. But I can't change css property and value directly, because the contents are displayed with Fluid of TYPO3.
This is my codes in a HTML-file:
<!-- for left side -->
<div class="anreisetag-zeit anreisetagabstand">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
{itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
</f:for>
</div>
<!-- for right side -->
<div class="anreisetag-text">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
{itemAnreisetag.data.bodytext -> f:format.html()}
</f:for>
</div>
Now my contents are displayed in frontend, but the height of the textline is different. My problem now is:
I want to adjust the height between the line of "anreisetag-zeit / anreisetagabstand" and "anreisetag-text", so that they have same height.
My idea:
I have an idea that I add a field in Backend which it has a type="input". I added this:
The field has a variable tx_anreisetag_zeit_abstand.
Also, every item has class name like this:
My final idea is that if I give a value in the input-field tx_anreisetag_zeit_abstand, then "margin-bottom" of the <p class="text-center"> is changed with the new value. Now anreisetagabstand p has "margin-bottom: 16px;". I want to change these value "16px" for example to "38px" from Backend.
in my CSS file now:
.anreisetagabstand p{
margin-bottom: 16px;
}
The class anreisetag-text will be changed anything. Just the style of "p element of anreisetag-zeit" or "anreisetagabstand" musst be changed. I've already defined some design with the calssname "anreisetag-zeit", so I want to use the classname "anreisetagabstand" to adjust the hight.
How can I realize this? If I don't use Fluid, then I can adjust easy...
Maybe can I change the css property and value from a JavaScript file to operate DOM? I've already tried it, but I can't change my css property and value. I think there are some error in my codes:
window.onload = function() {
var anreisetagzeit = document.getElementsByClassName('anreisetagabstand');
anreisetagzeit += ' p';
anreisetagzeit.style.marginBottom = '38px';
}
Adding:
If I adjust my texts in my richt text editor, then I have to give some spaces and I have to check the frontend every time if the height or distance between the time and the description:
Furthermore, I can't give spaces, if I use "list" in a rich text editor. I have to give some space on the left side of the point to display the list-items on the right side :
If I display them in frontend:
I hope someone can give me some advices. Thank you.
trying to align your text and time to be on the same horizontal level is proably more easy by changing the HTML-structure instead of playing arount with linebreaks and CSS.
CSS-based solutions will maybe work on a static viewport, but as soon as the textarea grows or shrinks the number of lines of text will also change and therefore not be properly aligned again.
If it is within your possibilities i would recommend to restructure your Template to something like this:
<div class="anreisetag-plan">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
<div class="anreise-item">
<div class="anreisetag-zeit">
{itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
</div>
<div class="anreisetag-text">
{itemAnreisetag.data.bodytext -> f:format.html()}
</div>
</div>
</f:for>
</div>
With this structure you should be able to achieve your desired output alot more easy than before.
OK so I am relatively new to JS and the REST API (so please be gentle)
I am using REST to pull from a sharepoint list. This populates a slider with multiple divs that include both an image and text. I would like to make the image a slider itself (without controls) that will swap out images for the unique slider item.
The code is written so a user can populate multiple images on a single slider element and the images will stack on top of each other and change every few moments from one image to another. I am having trouble coming up with a function that will treat each slider div uniquely given an unknown number of images and/or slider elements. I attempted to put walls to say a maximum of 10 sliders elements will exist, but any number of images could be populated for any one slider element.
My REST code works as it should and populates the images in a stack but now i need to assign visibility or order to the images. Each list item can have anywhere from 0-X images.
Unfortunately I dont really have any code per say that would provide value here... the bounds of this is purely 'X' number of elements with 'N' number of images each. I want each element x1, x2, x3... xx to swap images n1, n2, n3...nn every 2-3 seconds.
Here is the resulting HTML for the element. I created a unique id for each element -- this one is element 8 in the sharepoint list (pic8). I then assign a dummyclass for the all images dummyclass I also append a unique ID for each image (2pic0 2pic1 2pic2). I also tried assigning data attributes -- data-index says the pic is the 1st 2nd or 3rd pic of the set and data-max is the max value of data-index -- this was meant to identify that there are 3 total (0, 1, 2) images so the data-max was set as 2 -- hopefully that makese sense.... I am honestly pulling at staws:
<div class="spotlight">
<div class="img_spotlight" id="pic8">
<img class="dummyClass" id="2pic0" data-index="0" data-max="2" src="image1.jpg">
<img class="dummyClass" id="2pic1" data-index="1" data-max="2" src="image2.jpg">
<img class="dummyClass" id="2pic2" data-index="2" data-max="2" src="image3.jpg">
</div>
<div class="spotlight_content">
<div class="spotlight_title"><h3>TITLE</h3></div>
<div class="spotlight_body"><p>WORDS HERE</p></div>
</div>
</div>
My intuition is to use a function that will pull all children from each div and swap visibility or z-index. This function would of course need to exist outside of the ajax query which generates the image stack. Any ideas?
Ok after a bit of research i found an answer via the cycle() jquery plugin http://jquery.malsup.com/cycle2/download/
This effectively takes the children and fades them in regardless of the number of elements. Hopefully this helps someone else in a similar position
Inside my <main> element I have divs, each with the class .dataCard. Each .dataCard has the same minimum dimensions, but as soon as I started adding content to the .dataCards I noticed the layout behaving weirdly.
The <main> element is separated into two columns each containing a .dataCard. I did this because I need the order of the .dataCard to go left-column, then one in right-column, one in left-column, and so on.
But when I fill the .dataCards with content they push all the other cards down underneath them.
How can I fill the available space with the .dataCards so that the <main> element that contains them is as small in height as possible.
Right now, in the link below, there is the second card in the right column, but then a bunch of whitespace and at the end of the second-card the 3rd card in the left column starts.
How can I move the left column up, or in other words, make the cards fit the available space with or without flexbox?
I would greatly appreciate any and all help!
Here is the link: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html
From your question I understand that you want to fill the entire page with boxes without any space.
This is what, exactly you wanted.
Given that you have an HTML div/section with a header, multiple paragraph tags (or anything block-level HTML tags markdown will produce, really -- h1-6, ul, ol, p, etc.), and perhaps a footer or some other content, how do you make the "content" fit nicely in that box?
Here is a screenshot of the issue:
The HTML structure is something like:
<section class='box'>
<header>
<h2 class='title'>A Title</h2>
</header>
<footer>[the image]</footer>
<div class='content'>
<p></p>
<p></p>
...
<p></p>
</div>
</section>
I've tried setting text-overflow: ellipsis on the section, div, and p tags, but that doesn't work. Is this possible?
Really just looking to see what is and is not possible here:
Possible
You can definitely use jQuery to iterate through the content in the box, find the block element that's chopped off (top < box botton and bottom > box bottom) and truncate the text. But, this is a last resort as it quickly becomes a performance problem with lots of boxes and all the different edge cases.
You can create a "summary" blob of text on the server side that fits within the boxes dimensions. But this doesn't work if you change the font-size or the size of the box.
You can create a set of font-size and line-height rules that forces the text to at least be cropped in-between lines, but this is very brittle.
Like #Madmartigan in the comments, you can also add a gradient at the bottom of the box to fade out the text.
Not Possible
You can't set text-overflow: ellipsis in this case (at least from the things I've tried).
Try one of these 3 options on the containing div.content element:
Use overflow:hidden
Use a scrollbar - jQuery slimScroll
Don't set a height property
I've got an image on the page (class='image') within the div (class='galleria_wrapper') and want to place a caption (class='caption') at the lower right corner under that image.
The image could be vertical or horizontal, and making a fixed padding-right value let's say
.caption<{float:right;padding-top:5px;padding-right:90px;}
is not working for one or another. I need to switch on the fly padding-right value depending on horizontal or vertical image is currently on the page. I can theoretically access image's width through document.getElementByName('image').width although don't understand where to put that code. So, I probably need something like that:
document.getElementByClass('caption').padding-right =
(document.getElementByName('galleria_wrapper').width -
document.getElementByName('image').width)/2
Where do I put this code?
I do have that in my css file:
.caption{float:right;padding-top:5px;}
which places the caption below the image, but to far to the right (div 'galleria_wrapper' is wider than most of the images supposed to be displayed within that area).
I have an img tag in the html:
<img src=image title='this is caption' /></li>
...and some JavaScript which makes title displayed styled by the "caption" css definition.
How do I assign variable value for the padding-right without in-advance knowledge of particular image's width?
It is not clear why you are trying to do whatever you are trying to do with the caption. Does galleria_wrapper have only one image in it? It sounds like you have a fixed width galleria_wrapper and you want the caption at the bottom right of the photo wherever it is. If so, I'd wrap the image and caption inside another div, center that div within the galleria_wrapper, and text-align right the caption.
Put that code inline with the .caption element.
<div class="caption" style="padding-right: XXpx;">caption text</div>
Your question is not really clear and there is a better solution, but your full markup/demo page would be needed.
UPDATE
Just add the span to the galleria_wrapper div and then set text align right.
<div class="galleria_container">
<div class="galleria_wrapper">
<div style="text-align: right;">
<img id="image" src="strangers/010.jpg" class="replaced" onload="resizeToMax(this.id)" style="cursor: pointer;">
<span class="caption">Moscow Region, late 1980-s</span>
</div>
</div>
</div>
To access programatically to the padding-right, the object property is
object.style.paddingRight.
Often, the true size of an object is in px.
So when you get its width prpoerty remove the 'px' at the end of the string before doing a parseInt or parseFloat on it.
So your function becomes:
var objs = document.getElementsByClass('caption'); //Is it one of your functions?
for(var index =0;index<objs.length;index++){
objs[index].style.paddingRight =
( parseInt(document.getElementByName('galleria_wrapper').offsetWidth) -
parseInt(document.getElementById('image').offsetWidth )/2))+"px";
}