I have a menu bar that shows in 1 state when page loads, as soon as you scroll down the menu bar shrinks and is given a class of .roll_activated which controls height and sizing.
I have a div that I would only like to show when the .roll_activated is not active
I'm missing something with my code here:
.roll_activated:HLinfobox{display:none !important;}
The div I want to hide has a class of HLinfobox
.roll_activated is not active
There is no such thing in CSS, but what you can do is nest elements and then show or hide them depending on their parent's state.
So, if the div that you want to show only when the menu bar has a class .roll_activated attached, you can do this (assuming #div is the div that you wanna toggle).
#div {
display: none;
}
.roll_activated #div {
display: block;
}
Assuming HTML structure like this:
<div class="roll_activated">
<div id="div"></div>
</div>
Here's a codepen: https://codepen.io/anon/pen/rGgygW
Related
I need put a "carousel" div inside "oe_structure" but not work correctly, the "carousel" :
I'm editing the template "website_sale.products"
I am new to odoo, can I inherit in my direct code to edit the ? but I still don't know how to put the slider inside the div as shown in the image!
link of the code I use:
https://codeshare.io/2pBqez
My error with div carousel is:
<div class="container">
<div class="square"><div>
<div class="s-square">
</div>
.container {
width:80%;background:lightgray;height:500px;margin-left:10%;
display:flex;justify-content:center;align-items:center;
} /* this container is positioned using a left-margin */
.square {width:250px;height:250px;background:white;position:relative;} /*this square is positioned by the flexbox display of its parent container (.container) */
.s-square {height:100px;width:100px;background:blue;position:absolute;top:50px;left:60px;3px dashed purple;} /* this is absolute positioning and should be avoided as much as possible b/c not very responsive-friendly */
I have a tab with long content in the project (StackBlitz ref is here).
So the scroll appears.
The corresponding code for it is
<div class="content-container">
<div class="content-area">
<clr-tabs>
<clr-tab>
<button clrTabLink id="tab1-link">Tab1</button>
<clr-tab-content id="tab1-content" *clrIfActive="true">
...
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="tab2-link">Tab2</button>
<clr-tab-content id="tab2-content" *clrIfActive>
Content2
</clr-tab-content>
</clr-tab>
</clr-tabs>
</div>
</div>
The problem is that the scroll covers tab labels and tab content. But I need it to cover only tab content so the tab labels would stay if I scroll down.
I tried to add the following styles to fix it
.content-area {
overflow: hidden !important;
height: 100%;
}
#tab1-content, #tab2-content {
height: 100%;
overflow: auto;
}
But this resulted in scroll disappearing at all. How can I add the scroll only for a tab content?
I'm afraid I couldn't work out enough from your code snippet so looked at the code in Stackblitz. In that, Tab1 and Tab2 are list elements in an unordered list with class nav.
Moving this nav ul out of the content-container div and putting it immediately below the header-2 header element gives you what I think you need, the content-container div fills up the remainder of the main container and scrolls with the Tab list elements remaining fixed above.
This may just be luck - in that all the required flex-related settings are already in place.
I found the following solution.
I need to add to parent component content-area which contains all tabs the overflow property.
.content-area {
overflow: hidden ;
}
It removes the current scrollbar.
After that we can found the height of above elements using Chrome Dev Tools.
Now we should wrap the tab content into another div with some class (e.g. mytab-content).
<clr-tab-content id="tab1-content" *clrIfActive="true">
<div class="mytab-content">
.......
</div>
</clr-tab-content>
And finally we should add the following styles for that class
.mytab-content {
height: calc(100vh - 60px - 36px);
overflow: auto;
}
It will add scroll only for tab content.
I have this layout in my html page body
<div id="main">
...
<div id="menu">
</div>
...
</div>
<footer>
css for main:
#main {
width:100%;
min-height:100%;
height:100%;
background-color:#cacaca;
background-size:cover;*/
position:relative;
display:block;
z-index:0
}
The div with id menu is a vertical navigation menu which can extend vertically. Its position is set to absolute in css.
Now I have this problem: if the menu extends, it may overlap with the footer below because the main's height is not extended accordingly. One solution is to set the height of main to be the biggest possible value after the menu is extended, but that is not optimal. My question is how can I make the main area's height grows according to its menu descendant with css so that the overlapping won't happen? Thanks.
Like I said in the comment there isn't anyway to do this with only css.
Using jquery this line will do it.
$('#main').height($('#menu').height());
You could do it on page load or if the size of the menu is changing put it in the code that changes the size of the menu or put it in a timeout:
setTimeout(function(){
var mainHeight = $('#main').height();
var menuHeight = $('#menu').height();
if(mainHeight < menuHeight) {
$('#main').height($('#menu').height());
}
},2);
Like this:
http://i.imgur.com/homRkRv.png
How can I do it? I've looked up online and only managed to create a popout window with pure CSS but I wasn't able to click around which is something that I don't want.
You can implements your css with focus
a.button {
background: #000;
display:block
}
a.button div {
display:none;
}
a.button:focus div {
display:block
}
Only for this example:
<a class="button" href="#">Clickme
<div>Content hidden</div>
<a>
Last part, Click on link, then its will to show div.
You can add more style to div, such as position absolute, background etc.
I have to create an html page for use on a CD. The navigation is an HTML map with co-ordinates set. When the user rolls over a co-ordinate, I want an image popup to appear beside it. There's 8 map links, and 8 corresponding image popups.
I could do this easily through jQuery, but the CD will be used on IE mainly. IE doesn't allow javascript to be run locally (without user interaction, which isn't acceptable).
Through jQuery I absolutely positioned the rollover images, but I can't set them visible through CSS with a hover. What's the best method to approach this?
You could always try some serious styling effects based on the Pseudo-class of :hover.
Without knowing your markup I would tackle along these lines...
HTML Markup
<div id="mapWrapper">
<ul id="map">
<li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
....
</ul>
</div>
CSS Code
#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/
/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }
Hope that helps you out, I have had to a similar map online (not with a CD) but wanted to do it without JS and that was the easiest way to do so.
Note: If you need to offer IE6 support, you would probably be best changing the hover to be based on an ahref instead.
eg: Map Text Additional Pop Up Text