Combining text within div via css - javascript

Is it possible to combine all the text in one. Below I gave an example of how not right. I would like to make the word "ОН" was common cause with the text below.
I would like to like this: https://www.dropbox.com/s/e3qzv55rbopefet/good.png?dl=0
Roughly speaking I need a div with the attribute "el", to connect with the upper elements. Possible and through js, if there is a solution ... but these attributes are not lost. Thank you!
http://jsfiddle.net/syxc5yv4/
#content-area {
visibility: visible;
position: relative;
z-index: 1;
left: 0px;
-webkit-column-width: 595px;
-webkit-column-gap: 99px;
top: 0px;
}
#content-area > div {
display: inline;
}
#content-area > div div {
white-space: normal;
text-indent: 30px;
}

Add display:inline to the #content-area > div div class
#content-area > div div {
white-space: normal;
display: inline;
padding-right: 5px;
}
FIDDLE

Related

set class in css or hover over 2 overlapping divs

Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>
The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !
The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
 
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.

Align nested element to top of div using nth-child property

I need to assign .dropdown .has-panel ul .dd-panel:nth-child(2) different top:x values but it seems my nth-child is not working correct as i may be doing something wrong.
fiddle sample http://jsfiddle.net/Ed9nk/4/
I need to align Level 3/ Grand Child menus at top of the container like level 2 /Child menus so that respective level3 me menus always show at top.
i added following css
/* has set top: -64px; manually so that Parent One > Child Menu> Grand Child align to top*/
.dropdown ul ul .dd-panel {
background: none repeat scroll 0 0 red;
border-left: 0px solid #30a784;
border-right: 0px solid #008438;
bottom: 0;
display: none;
font-size: 11px;
height: 100%;
left: 175px;
line-height: 15px;
min-height: 100px;
padding: 10px;
position: absolute;
text-align: justify;
top: -64px;
width: 400px;
}
.dropdown .has-panel ul .dd-panel:nth-child(2)
{
top: -64px;
background-color:green;
}
.dropdown .has-panel ul .dd-panel:nth-child(4)
{
top: -164px;
background-color:yellow !important;
}
My simple question is i always want Image & Text related to level 2 or level 3 menus to show up as top, i tried so many thing but nothing is working finally if thought of working with nth-child but i am not abel to get it right may be mixed up elements.
Based on your Image you have added in your question, I am going to give the solution. Update your CSS like below.
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel
{
margin-top: -90px;
background-color:green !important;
}
DEMO

Adjust vertical position of different elements when display inline-block

I have a bunch of img elements that I want to display in a line inside a div. So I did something like this
css:
#imageContainer {
height: 90px;
padding-left: 50px;
padding-right: 50px;
text-align: justify;
text-justify: distribute-all-lines;
}
#imageContainer > img {
/*width: 150px;
height: 125px;*/
/*vertical-align: middle;*/
display: inline-block;
*display: inline;
zoom: 1;
}
#imageContainer:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
html:
<div id="imageContainer">
<img class="imageOne" src="images/sample2.jpg" />
<img class="imageTwo" src="images/sample.jpg" />
</div>
This will make sure no matter how many img tag I put in the div it will be evenly distributed across the screen width. Now what I want to do is to be able to adjust vertical position of different elements. I tried to add padding in individual img tag but that will adjust the position of whole line. Is there a way to work around this?
JSFiddle: http://jsfiddle.net/g244H/
Update:
Found two solutions so far:
Don't use display inline block, use float and do something similar as Auto-growing margins when screen width get streched
But this means implementing a bunch of code to get the auto margin adjustment
With a bit of hack I have this work around, surround a div to each of img element and have display inline-block applied to div instead of img. Then in each div I can applied margin-top to adjust the height. JSFiddle link above is updated
position: relative;
top: the-amount-that-you-want-it-to-move;
Relative will make it appear to the other elements as if it's still where it was without it, but it's visible part will be moved according to top, bottom, left, and right.
For the images that you would like to raise and or lower you could do a.
margin-top:1em; margin-bottom:-1em
Add overflow:visible to the #imageContainer.
Also add position:relative; When ever positioning elements they need a position set and so does their parent.
#imageContainer {
position:relative;
height: 90px;
padding-left: 50px;
padding-right: 50px;
text-align: justify;
text-justify: distribute-all-lines;
overflow:visible
}
#imageContainer > img {
position:relative;
/*width: 150px;
height: 125px;*/
/*vertical-align: middle;*/
display: inline-block;
*display: inline;
zoom: 1;
}
The same amount you add you subtract for the opposite side.

Expand the parent div of floated elements to fit their total width?

I am trying to put together a page that will have a horizontally scrolling pane on it - here is an example of the layout I am looking to get:
The content is dynamically added and has varying dimensions. .
Here's some HTML:
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
Base CSS:
.container {
width: 100%;
height: 100%;
}
.container .inner {
position: relative
}
.container .inner > div {
float: left;
}
Currently the only way I can get it working is by setting an explicit width for .inner. Otherwise, closest I've come is this answer, but it's still pretty far off my desired effect. Is it possible to achieve what I'm looking for with HTML/CSS alone or will I have to resort to javascript?
Is this what you expected? http://jsfiddle.net/GE5Hf/4/
Just use white-space: nowrap together with the inline-block and vertical-align: top. You don't need your .inner div to achieve the desired effect - just use one container with overflow-x: auto:
<div class="container">
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
</div>
CSS
.container {
width: 100%;
height: 100%;
overflow-x: auto;
white-space: nowrap;
}
.container > div {
display:inline-block;
vertical-align: top;
}
Note: it is better to use overflow-x: auto than scroll just in case the scrollbar is not needed.
EDIT: We were speculating whether you actually need that .inner div. If you need it, you can just add it back with no special style required: http://jsfiddle.net/GE5Hf/5/
EDIT 2: To have the .inner div the width as its children, simply give it display:inline-block: http://jsfiddle.net/GE5Hf/8/
EDIT 3: Tried what you suggested in your last deleted comment, i.e. remove the fixed width of the child. This was really tricky, I had to wrap each child element to special div with display: table-cell and the inner div gets dislay: table-row: http://jsfiddle.net/GE5Hf/12/
This can be done using CSS only.
Here's a jsFiddle.
The solution is to set position: relative; on .container, which creates a new stacking context inside the .container, setting position: absolute; and white-space: nowrap; on .inner ensures that .inner's content div's will not wrap to the next line and that .inner will grow with its content, adding display: inline-block; and vertical-align: top; on the .inner > div's ensures that they are treated as inline elements and stick to the top of their containing element.
I believe this is what you are after, I have checked on the latest versions of IE, Chrome, Firefox and Safari and it works fine on all of them, I have no reason to believe that it won't work on older versions.
HTML
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS
.container {
position: relative;
width: 220px;
height: 400px;
overflow-x: scroll;
}
.container .inner {
position: absolute;
white-space: nowrap;
background-color: #FFCCFF;
}
.container .inner > div {
vertical-align: top;
display: inline-block;
margin: 10px;
}
Is position: relative mandatory ?
.container .inner {
position: fixed;
overflow: hidden;
}
demo
#styke You can do that with display:inline-block(and some font-size on .inner > div) and font-size:0 to div.inner.Provided fiddle here: http://jsfiddle.net/zepva/4/ , ignore the colors, i used them only for demonstrationfont-size:0 will remove the gaps between the element using display:inline-block so when you will get the total width of the div.inner, that will be the sum of children divs
Take a look at this, no script was necessary:
.container {
width: 300px;
height: 100%;
background-color: silver;
}
.container .inner {
white-space:nowrap;
padding: 10px;
overflow-x: scroll;
background-color: gray;
}
.container .inner > div {
display: inline-block;
vertical-align:top;
background-color: red;
border: 1px solid black;
}
Demo: http://jsfiddle.net/er144/4FLWK/
display:inline-block, with vertical-align:top , that way your text wont fall at the bottom of the container.
.container .inner > div {
display:inline-block;
vertical-align:top;
}

Single-scroll webpage with sidebar

How would I place the page content of the following example - http://jsfiddle.net/cq8dC/ to the right side of the nav sidebar, rather than behind it?
Update the style. Add style padding-left: 255px; to .horizontal
.horizontal
{
display: inline-block;
padding-left: 255px;
vertical-align: top;
white-space: normal;
width: 100%;
}
DEMO
jsFiddle Demo
First, you should add a container to your content. I've called it #Content.
Then I've added these stylings to the CSS:
body {
overflow: hidden;
}
#Content {
left: 240px;
right: 0;
top: 0;
bottom: 0;
position: fixed;
overflow: scroll;
}
This makes the #Content take the resting place in the page and be scrollable on its own.
Also I've updated the JavaScript
The root is now the #Content element and I'm using position() instead of offset(). I'm doing this because position() Get the current coordinates of the first element in the set of matched elements, relative to the offset parent (from the documentation).

Categories