Please check this image
I want when clicking on the + sign inside the red circle, to make a div shows. this div have many check box.
I made the div already. but I didn't know what is its style to be above the text and above the white space in the image
I am sorry if i couldn't understand my mean.
<h3>html</h3>
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
the div is id = div1 ,which I didn't show its content because that doesn't matter for the answer, but I dont know where to put it.
I would like to have the div like this
kindly help
If you need to make "glued" child, you have to define relative position to the parent, absolute position and z-index to child(ren).
#div1 {
position: absolute;
top: 32px;
right: 0;
}
jsfiddle
You'll need to use two main CSS properties. position: absolute to place it up there and z-index to place it 'above' other items visually. In order for position: absolute to work, you'll also need to set a parent to position: relative.
The dropdown is there by default but hidden. When the + is clicked, a class is toggled on the menu to show/hide it.
The main bits:
HTML:
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<a id="DropdownSeviceLink" href="#">+</a>
<div class="menu">
lkj sldkj sldkj slkdj slkdj
</div>
</div>
CSS:
.menu {
display: none;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.menu.shown{
display: block;
}
.chartHeaderClass {
position: relative;
}
JS:
$('#DropdownSeviceLink').on('click', function(){
$(this).parents('.chartHeaderClass').find('.menu').toggleClass('shown');
return false;
});
Here's an ugly codepen to get you on the way. http://codepen.io/anon/pen/poqjK
Related
I'm building a gauge which uses pure CSS. It has a background to clip the remainder of the progress colour from showing. I want to add another div on top which gives a text indication of the progress: "10%".
It seems like no matter what I do, I end up with the background clip covering my text.
I've got an example of the problem here:
https://svelte.technology/repl?version=1.60.3&gist=77e1b55c23e229dee8d45b5648610593
An extremely cut down version of my code, demonstrating the problem is as follows:
<div class="gauge-wrap">
<div class="gauge-core">
<div class="gauge-bg" style="background-color: #fff;">
<div class="gauge-bg-value">10 %</div>
</div>
<div class="gauge-cap" style="background-color: #000;"></div>
</div>
</div>
<script>
.gauge-bg-value {
position: relative;
color: #f0f;
top: 7px;
z-index: 6;
}
.gauge-wrap {
position:relative;
margin:0 0 20px;
}
.gauge-bg {
position: absolute;
width: 200px;
height: 200px;
border-radius:100px;
z-index:0;
}
.gauge-cap {
position: absolute;
top:16px;
left:16px;
width: 168px;
height: 168px;
z-index:5;
}
</script>
It seems like z-index: 0 is still on top of my text div (.gauge-bg-value), even though I've given it a higher index.
Update - Solution:
In building my example, I moved the text into the .gauge-cap div and now it sits on top. Perhaps it was that div covering it all along. Happy to hear solutions that don't modify the structure of the html though.
This is to do with stacking context. In a case like this...
<div class='foo'>
<div class='bar'></div>
</div>
<div class='baz'></div>
...if foo and baz both create stacking contexts, and baz has a higher z-index than foo, then bar can never appear above baz no matter what. You'll have to break your markup apart into different layers instead (though in your example, I think you'd have an easier time using SVG instead of HTML).
I have two images, one on the left and one on the right. I am facing issues in writing text onto both images.
I am pasting HTML code and CSS code. Please correct it.
#container {
width: 400px;
height: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 999999999;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
}
<div id="header">
<img src="images/banner-img1.jpg" class="left">
<p id="text"> jhcjdhdjshdjdhjd</p>
<img src="images/banner-img2.jpg" class="right">
<p id="text"> jgdhdgdhddhhsd</p>
</div>
Both of your paragraphs refer to the same ID, but ID's must be unique. Try using a class here instead.
.text {
...
}
and
<p class="text"> ... </p>
Also, you use class="left" and class="right" on your image tags, but these classes don't yet exist in your css code.
Create a container for the image and make it’s position relative. (to get along with the rest of the page)
Place the image within the container.
Place the text immediately below the image within the container and make it’s position absolute (to overlay text on the image) and place it as you please.
Finally, add some CSS tricks to suit your needs.
I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here:
The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.
With:
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}
If the msgContent is a child of blueBox:
<div id='msgBox'>
<div id='blueBox'>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
</div>
and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.
If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.
I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.
Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.
Thanks!
Here is how I would go about this,
(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)
html,
<div class="messageContent">
<span class="overlay"></span>
<p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
This is a link
</div>
css,
.messageContent {
color: #000;
position: relative;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background: lightBlue;
opacity: 0;
height: 100%;
width: 100%;
display: block;
z-index: 100;
}
.messageContent:hover .overlay {
opacity: 0.6;
}
What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.
JSFIDDLE
Here's how I would do it.
<div id='msgBox'>
<div id='blueBox'>
</div>
<div id='msgContent'>
... all the message contents, buttons, etc.
</div>
</div>
CSS
#blueBox {
background-color: #FFD090;
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
}
jQuery
$("#msgBox").hover(function(){
$("#blueBox").css({top:$(this).css("top")}).height($(this).outerHeight()).width($(this).outerWidth()).animate({opacity:0.6});
},function(){
$("#blueBox").animate({opacity:0}).height(0).width(0);
});
http://jsfiddle.net/54cx7/2/
The problem is that since content is a child of bluebox, then it inherits the 0 opacity.
I'm unsure if this is the correct approach, or even question, so I will elaborate.
Please visit this live page http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3
I am basically asking if it is possible to overlay a link somewhere in the header div? Specifically over the sticker background image on the right?
I didn't build the site, but I have just added the sticker to the right corner of the header div. (FYI it's a Joomla site so uses a PHP template file.).
I did this as a background image and used some padding and negative margin to make it overflow, then I realised the sticker needs to link to their order page.
Would an image map be the best way to make this into a link? Or is there a better method?
If an image map is the way has anyone got a code example.
I've tried the below code, which I edited from a tutorial on a similar subject, this doesn't work
<div id="header" usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>
Paste the following code as is and it will work for you
Append a <a> to the end of your header div:
<div id="header">
<div...
<div id="menu">...
<a class="my-map" href="#"></a>
</div>
And then add the following styles:
#header{
position:relative;
}
.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}
I don't know how popular imagemaps are anymore :). You can position the element absolutely relative to the header with the following (for example). Codepen sketch: http://cdpn.io/klsEp
HTML
<div class='header'>
<a class='sticker'>Click me</a>
</div>
CSS
Consider this simple example.
.header {
background: green;
height: 200px;
position: relative;
width: 800px;
}
.sticker {
background: red url('..') no-repeat center;
bottom: -20px;
color: white;
cursor: pointer;
display: block;
height: 100px;
position: absolute;
right: -30px;
width: 100px;
}
.sticker:hover {
background: black;
}
In your HTML, I cannot find the link to menu_bg6.png, but that is where you must put the usemap= tag, as in:
<img src="menu_bg6.png" alt="an image" usemap="#usethismap">
So, not on the DIV tag, but on the IMG tag.
Then you can create a corresponding <map> tag and it should work for you (although, don't forget to insert a URL for the click to action - currently yours is '#').
Here is a simple jsFiddle with more ideas for positioning clickable areas over an image.
Here is an article that discusses how to create pseudo "image maps" for DIVs - without an IMG tag.