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";
}
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.
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.
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
I have a banner, and it's a certain size. It has decorations on it.
I also have my whole website style sheet based on percentages on the page. I want to keep it this way.
However, is there a way to dynamically resize my banner image? So if I shrink the webpage down, it does not omit any part of the banner?
Hi is very simple without jquery you can do this only css
i give you code
css part
.imgresize{
width:50%;
}
.imgtag{
width:100%;
}
html part
<div class="imgresize">
<img src="https://www.google.pt/images/srpr/logo3w.png" alt="google" class="imgtag" />
</div>
and live demo now click here
http://jsfiddle.net/rohitazad/aJdmu/1/
Your question is kind of blurry, but to resize properly an image you can play on the width or the height value (or both) of an
<img width="width_value" src="img_src" />
tag for example. The browser will keep the proportions of the image if you only change one attribute. Changing these values using Javascript is easy and this should not alter your layout.
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV