Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a set of images that i want to place in a stair type way, like so:
img
img
img
img
I want the images to overlap and I'm currently using faux positioning.
You can see an example here:
http://jsfiddle.net/2PSFC/
I would like to add a margin-top and margin-left of 40px to every img after the first one. As you can see the :nth-child doesn't seem to be working, but anyways i would much prefer adding the margin with jquery. any ideas?
If you don't know the number of images, you can set the margins dynamically using jQuery:
$('.stuff').css('margin-top', function(i) { return i * 40; })
.css('margin-left', function(i) { return i * 40; });
Or
$('.stuff').each(function(i) {
$(this).css({ 'margin-top': i * 40, 'margin-left': i * 40 });
});
Here's a fiddle
If there aren't too many elements, I wouldn't suggest using jQuery. To fix your CSS do this:
.container:nth-child(2) .stuff { margin-left: 40px; margin-top: 40px; }
Since every element with the class .stuff is wrapped in a container div, it will be the first and only child, but the container divs have different child indexes.
jQuery solution: http://jsfiddle.net/WKE4n/
Including an answer for centering the stack of images in the parent element, which was asked as a comment on another answer:
$('.stuff')
.css('margin-top', function(i) { return i * 40; })
.css('margin-left', function(i) { return i * 40; });
$('.wrapper').css('left',($('.wrapper').parent().width() / 2) - ($('.stuff').length * 20) - ($('.stuff').width() / 2));
JSFiddle
I'm sure there's some way to clean up that second "line" of JS (the one that centers the stack of images), but I can't think of it for the life of me.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
i want to add a class to a div that has adjacent sibling selector.
What i am trying to do?
I have two divs which appear on top of each other. so was thinking to move one div (prev_div) slightly above div(next_div) so they are visible. when next_div is closed the prev_div should get back to its original position.
Below is the html code,
<div class="wrapper">
<div class="prev_div">previous</div>
<div class="next_div">next</div>
</div>
I want to add margin property to the div with class "prev_div". I tried doing that with css as below,
.wrapper div.prev_div + div.next_div {
position: relative;
bottom: 70px;
}
But the above adds the margin to the div with class next_div instead i wanted the position style for the prev_div.
So i tried doing the same using the javascript by finding the element with prev_div and next_div. if next_div present adding a class "additional" to the prev_div. once class additional added and if the next_div not present remove the additional class for prev_div. but this doesnt work...there is a delay in removing the class added when next_div not present.
this next_div can be closed with close button. and i am doing the node calculations in render method. the next_div is removed there is no trigger to render...it is taking time to detect it...can i do it in componentdidupdate or so.
could someone help me fix this. thanks.
I think since i am
render = () => {
const prev_div = document.querySelector('.wrapper div.prev_div');
const next_div = document.querySelector('.wrapper div.prev_div + div.next_div');
if (next_div) {
prev_div.classList.add('additional');
} else {
if (prev_div && prev_div.classList.contains('additional')) {
prev_div.classList.remove('additional');
}
}
}
Also the above doesnt work cause the next_div in the dom is from child component. so even if i put these calculations for node and clases in componentdidupdate...closing the next_div is not recognised soon. there is a delay in it.
thanks.
.wrapper .next_div {
margin-left: 10px;
}
If this is a react project it wouldn't work. You're using class instead of className in your html.
If I understand you correctly, you don't need to do all this stuff.
If next_div can be closed, just add margin-top: 10px to next_div, so when prev_div is "alone" -- you respect the proper styling
this is simplest css only solution
This question already has answers here:
How to set the height of CKEditor 5 (Classic Editor)
(28 answers)
Closed 4 years ago.
I was trying out ckeditor5 in Vue.js, and I came across a problem of not being able to set it's height manually, below is my code please let me know if I am doing anything wrong.
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
data() {
return {
editor: Editor,
editorData: '',
editorConfig: {
height: '500px'
}
}
Classic editor (CKEditor 5) no longer encapsulates the editing area in an , which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with :
<style>
.ck-editor__editable {
min-height: 500px;
}
</style>
or
.ck-content { height:500px; }.
2020 Note: when working with single page Vue components, do not scope the CSS you want to add to ckeditor, as it's elements are rendered separately from Vue and no data attributes are added to them. In other words, don't do this, as it will not work:
<style scoped> /* don't add "scoped"; note that this will also globalize the CSS for all editors in your project */
.ck-editor__editable {
min-height: 5000px;
}
</style>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Just got this template
http://www.gt3themes.com/wordpress/photo-fullscreen-responsive-wordpress-theme-flicker/
And can't locate how to change these elements via css
4 column portfolio page.
Your help is much appreciated. Thanks
For hiding Both buttons
.likes_and_share { display: none; }
For hiding Share button
.page_share { display: none; }
For hiding Like button
.page_likes_add { display: none; }
Basically u need javascript to hide your element . You can use .hide() method which is present in jquery .
but still you want to hid an element by using css then u should go through like that
javascript code
function toggle_visibility(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
on my website there are some hexagon SVG´s with different colors and a normal .content class with some style.
What i want, is if the user :hover over the SVG the background-color of .content should get a "specific" color.
#hexagon4_work:hover .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover ~ .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover > .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover + .content{
background-color: #6EC5D3;
}
I have already searched about it, but i do not found any solution for this.
What i found was these operators. But these affect only for a child in a parent. / or not?
I´d like to only use CSS, so if it is not possible only in CSS, please tell me that too. (I am a noobie in JS so dont wonder.) :)
Thanks for all following answers.
- MK
There is no CSS-only solution for your Problem. Check the comment from David.
But you could do something with JavaScript.
Add this to your code.
var hex4 = document.getElementById('hexagon4_work');
hex4.addEventListener('mouseover', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = '#6EC5D3';
});
hex4.addEventListener('mouseout', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = 'transparent';
});
I tried it on your page and it works. For the other hexagons you should copy this code and modify the selecor in first line and the color in line 4.
My recomendation:
Add the CSS transition: background-color 500ms; to the content div. It would be a nice animation.
While there's no way to do this directly (there are no parent selectors in CSS as of 2017), you can do it by creating a child SPAN, setting z-index and its position to push it behind everything else in the parent, and change its background color (parent background = transparent). Check this out
I need an if/else statement for my CSS which can count list items. Would this be possible?
Basically I want to say, if there are less than 10 list items, the UL container should be 200px wide, and it there are more than 10 list items, it should be 400px wide. Something like that.
Can it be done?
I would appreciate a working demo on jsFiddle, both so I can see working code, and for anyone who looks here in the future so they can see a working example and how to do it :)
CSS only does styles, but not dynamically (unless with assistance of JS). you can use the following JS snippet for the task. just to make sure, load this at the very last, just before the </body>
<script type="text/javascript">
(function resize() {
//get all lists with selected name
var lists = document.getElementsByClassName('myList');
//loop through all gathered lists
for (i = 0; i < lists.length; i++) {
//shorthand elements for easy use
var list = lists[i];
var items = list.getElementsByTagName('li');
//append class names
list.className = (items.length < 10) ? 'myList less' : 'myList more';
}
}())
</script>
.less{
width:200px;
}
.more{
width:400px;
}
CSS has no if else statements. You can do this easily with jQuery. Another option would be to use LESS or SCSS.
Short answer: no. CSS offers no conditional support.
Long answer: you need to use javascript or a server side language to either add a class when there are more than 10 items (or elements) in the list, or in the case of javascript, directly manipulate the style after it's loaded.
That doesn't sound possible for CSS. There are no logical if/else statements in the CSS spec. Your next best bet would probably be javascript. You could achieve this with jQuery with the following code:
if($('ul#target-list li').length < 10) {
$('ul#target-list').css('width', 200);
}
else {
$('ul#target-list').css('width', 400);
}
Pure CSS3 Solution
If you only want to support CSS3, then this does what you need:
li {
width: 200px;
}
li:nth-last-child(n+11),
li:nth-last-child(n+11) ~ li {
width: 400px;
}
But you will need to make the ul either display: inline-block or float it so that the width is controlled by the li elements themselves. This may require you to wrap the ul (display: inline-block) in a div so that it still is a block element in the flow of the page if you need it so.