I'm using jqUI to build an app with a content pane and side-menu.
When the page is showing the list, I want to hide some of the menu content, but when the page is showing an item, I want to show the menu content.
I've created a pretty basic jsfiddle as an example http://jsfiddle.net/pq83M/8/
I DON'T want to do this in javascript, as the page transitions are in the jqui library and I don't think it's effective to listen for this specific transition separately fro the others.
What I am hoping to figure out is a way of saying
when
div#content > div#list_item.active ~ div#menu > div#list_item_details {
display:block;
}
with the caveat that the ~ is looking for the sibling of div#content, not the sibling of div#list_item.active.
I'm using Sass, so those custom selectors are available.
If I understand your question correctly, you want to find siblings based on the parent (div#content) but only start with particular parents depending on their children (div#list_item.active).
If so, it's not possible in CSS Selector Level 3, but it's coming in CSS Selectors Level 4; you'll be able to select the subject of your operation/comparison. http://dev.w3.org/csswg/selectors4/#subject
Related
enter image description here
Basically, I have a react app which is consist of little compoennts like menu home random(its a program), and every child has its own css. but when I write css for home it works in every child. for example when I wrtie div 50px every div in my app becomes 55px. Is there any way to stop this behavior?
I gather this is your first time using css :)
Using an html selector (like div or h1) will target every element of that type. Targeting a class will target every element containing that class, and targeting an id will target the one element of that id.
Read more about selectors here: https://www.w3schools.com/cssref/css_selectors.asp
Is it possible to make a :hover on the :before element so that something shows over it?
Yes it can be done like..
.selector:hover:before {/* css rule goes here */}
It is impossible to add a :hover style (or :active, or :focus) to any elements like :before or :after. They would have to be applied to an actual HTML element, not a pseudo-element.
From your screenshot, it appears you're trying to create a hover menu. Depending on your styles, you may be able to apply the :hover styles to the ul itself. However, you'll only be able to control ul styles with CSS - you cannot control li styles based on the hover state of their parent without JS.
If JS is an option, use it - it should be pretty simple in this case, and would make the code a lot easier. If css-only is a requirement, you might be able to get around this by setting the <ul> to a specific height (large enough to show the hover item but nothing else), and give ul:hover a larger height, or height: auto;, etc.
Its called offcanvas
Refer https://www.w3schools.com/howto/howto_js_off-canvas.asp
AND https://v4-alpha.getbootstrap.com/examples/offcanvas/
Let me know if you require any further help
I've been searching and trying out some code to make my dropdown menu same size for each link, like nelly.se, but I can't figure that out. I was tried this code:
.nav-dropdown{position:fixed; left:0; right:0;}
but can't make it work at all.
The website I am working on is: http://94.247.169.169/~welloteket/
position: fixed will really fix it in relation to the window, which means it can't be scrolled at all - that won't work.
Usually for dropdowns you use position: absolute and adjust the left and top settings as needed. There are at least two important additional things:
1.) it has to be a direct child element of the element in relation to which you want it to fix. In the example you linked to that would be the black navigation bar, probably a ul element in there.
2.) That parent container has to have position: relative.
The kind of "mega dropdown" (i.e. equal size and position for each dropdown regardless of its related main menu entry) is trickier than a regular dropdown (i.e. one than opens directly under / next to its main menu entry). You propably need Javascript for this.
Apart from those general guidelines we can only help you if you post detailed code - HTML, CSS and JS, if there is any.
This problem is easier seen than described. See here: jsFiddle
To get a clearer understanding of what is going on, I have updated the fiddle to include a class .ui-sortable-placeholder to be visible and red. This is the class of the jQueryUI (normally) invisible element involved with the sortable. As seen here: http://jsfiddle.net/rLW9m/9/. Thanks to George for pointing that out in his answer. With this answer we can probably consider this resolved as far as the "what" but perhaps the "why" is still TBD.
Of the three scenarios shown, they all apply float:left to the LI elements but the final one behaves poorly; in the last bunch of sorted items, clicking on the first or second item "drops" the rest of the list beneath the row they were just in (and the item clicked).
The scenario is exhibited when the float:left CSS is applied directly to my <li>s using inline styling versus applying the same change via a css file. Is this a jQueryUI bug?
When I apply the CSS to my elements in the identical way to how jQueryUI's documentation shows (the first example in the jsFiddle), then the sorting occurs just fine. However, once the same CSS (as far as I understand it) is applied directly to my list items, then sorting behavior is erratic as described above.
The way to get jQueryUI to sort nicely in a grid is to apply the float only in your CSS file using classes or other mechanisms:
/* Starting from UL descriptor with LI descendants */
.ulClass li {
float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
float:left;
}
/* DOES NOT WORK properly to directly apply CSS
(items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
<li style='float:left'>test</li>
<li style='float:left'>three</li>
</ul>
Why are these two CSS applications handled so differently by jQueryUI? When it is rendered, it sure seems like the list elements themselves are float:left either way. What is your take? Why can't I apply the CSS directly to the list elements and get the same, expected behavior?
EDIT: Thanks to George, I now have a better understanding of what is going on. There are probably some really good reasons that jQueryUI doesn't copy down the element inline styles to their "placeholder element" but they do pass along class details. If a jQueryUI pro shows up later and considers this a bug then I'm glad to have reported it. Until then, be sure to apply your sortable element's float via a class! Can you explain why the inline styling is not included into the placeholder?
The problem is the place holder that jqueryUI inserts does not have a float left style on it. jQueryUI duplicates the element type and the classes on an item you are sorting for the place holder but it would appear it does not duplicate the inline styles.
Ok so I am going to try and explain this the best I can. I created a widget that will pull in a featured image from the post on the home page based on the category. Right now it pulls in 4 posts. I would like to have the option to pull in 2, 3, 4, or 6 posts. I would also like to change the layout based on how many posts are coming in. Is it possible to only display 2, 3,4, or 6 posts and how would I go about changing the layout based on the number of posts coming in. I was thinking it would refer to a container class in the css for each number of posts or something along the lines of that. Any links, tutorials, or advice would be greatly appreciated!
Thanks,
- Michael
Pure CSS
This provides a CSS3 method to achieve what you want, with a fall back in place for CSS2. Basically, you have a wrapper to target your post items, which will be the only children directly in that wrapper (or, at least the only children of a particular "tag" type, here a div). So something like the following, only the number of children can be 2, 3, 4, or 6 (as you requested).
Simple HTML (this does not have to be div elements; just illustrating)
<div class="postWrapper">
<div>This is a post</div>
<div>This is the second post</div>
</div>
Set Default CSS2
For IE7/8, this will be the default display no matter how many posts are being shown in those two browsers, using this selector:
.postWrapper > div { ... }
Set Fancy CSS3
This is doen based on number of posts and will be displayed in all CSS3 browsers. It uses this series of selectors, in this order: (we are using the cascade to our advantage here):
.postWrapper > div:nth-last-of-type(2),
.postWrapper > div:nth-last-of-type(2) ~ div {
... your two display css ...
}
.postWrapper > div:nth-last-of-type(3),
.postWrapper > div:nth-last-of-type(3) ~ div {
... your three display css ...
}
.postWrapper > div:nth-last-of-type(4),
.postWrapper > div:nth-last-of-type(4) ~ div {
... your four display css ...
}
.postWrapper > div:nth-last-of-type(6),
.postWrapper > div:nth-last-of-type(6) ~ div {
... your six display css ...
}
What this is doing is utilizing the :nth-last-of-type() selector to "count backwards" through the number of child div's of the wrapper, apply a style to that div, and then use the general sibling combinator ~ to style all the other div's in .postWrapper that follow that (theoretical) first div. It does this for the first two using the :nth-last-of-type(2), but then if the wrapper contains three, the next set of selectors that uses :nth-last-of-type(3) overrides the previous (2) selector, and so forth. In this way, through a series of overriding css in the cascade, we change our settings for the number of post elements.
You can see a sample of this technique for illustration purposes in in this fiddle.
NOTE: Because we are using the cascade to override, it is imperative that you make sure to handle any previously set css. In my fiddle example, note how I put a margin on a group of four, but then I removed it on a group of six. If I had mentioned nothing of margin in group six (that is, no overriding), then elements 3-6 (but not 1-2) of the group of six would have had margin still applied based off the previous settings for the group of four.