As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
Related
I'm currently trying to style a dropdown menu, but I'm running into some issues. The biggest one is that the dropdown elements don't seem to be exceed the size of their parent object when the css for the dropdown is set to relative.
(Had to block out the search results, sorry).
It seems to work on fixed, but only in Firefox, Chrome's dropdowns are all off.
So I think I need one of two solutions:
Fixing the width issue and keeping the position: relative
Fixing the offset issue that occurs ONLY in chrome, and setting the position: fixed attribute.
HTML:
<div id="node">
<div id="nodebar">
<input type="text" id="nodetext" placeholder="Enter a node" name="nodetext" value="">
<div id="img-container">
<img src="styles/magnifyingglass.png" id="img" alt="" />
</div>
</div>
<div id="nodebr"></div>
<div id="noderesults">
<div id="nodetruncated"><span class="truncated">Truncated search results..</span></div>
</div>
</div>
CSS
#searchresults, #noderesults, #roadmapresults, #intersectnoderesults {
max-width: 1000px;
background: #2E3C3F;
width:auto;
height: 0px;
padding: 0;
border: none;
position: relative;
z-index: 3; /*So that the dropdown stays infront of the forms*/
}
Would anyone know how I could go about fixing this?
I ended up just fixing this by breaking down the CSS into one category for each one of the fields, set the position property to fixed, and scaled the css "top" property so that the results would fit for each of the search fields.
I am currently creating many figures using the JavaScript library D3 (but I don't think D3 has any relevance for my problem). The figure is placed in div X and the text explaining the figure is in div Y. I basically want to create a pattern like this:
XYXYXY
XYXYXY
but instead (depending on how wide my window since I do not want to fix the width), what I get this:
XYXYX
YXYXY
I tried putting XY in a parent div Z<XY>, so that every pair of XY stays together, but that does not work. I also don't think clearing is necessarily the answer here, but I have tried all combinations without success.
Any help is greatly appreciated.
Try
white-space: nowrap
You may also have to change the floats to for your XY divs:
display: inline-block
If I understood the problem correctly, you don't need to use float. Display the divs as inline blocks: display: inline-block.
That will flow the divs as "character blocks" doing the wrap, you'll need to have a parent for the XY to keep the text together with the image.
An example: http://jsfiddle.net/D9BAv/
HTML:
<div class="figure">
<div class="picture"></div>
<div class="text">Example 1</div>
</div><!-- reapeated ... -->
CSS:
.figure {
display: inline-block;
}
.picture {
width: 3rem;
height: 3rem;
margin:auto;
background-color: blue;
}
If I have understood you correctly, maybe this will work. You could also use display: inline-block instead of float: left if you don't need to support IE8 and below.
http://jsfiddle.net/GQ8Uw/
HTML
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
CSS
.cont {
width: 100px;
float: left;
}
.x, .y {
width: 50%;
float: left;
}
.x {
background: #ccc;
}
.y {
background: #ecc;
}
Ok, I solved the problem. So I was wrong, it did have something to do with D3. Each time, I was essentially adding a child div to the same parent, and therefore the inline-block simply had no effect.
I ended up adding a "last-child" feature in my code like "d3.select(".figure:last-child").append(...", for both the picture and the text, and it works perfectly.
I saw the problem by adding a border around the parent div, and I noticed that all children were in the same div. I then found the solution from: What is the equivalent of jQuery's $(".cell:first") in D3?
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4
Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}
I have a simple Smart TV app that shows a list of items in a vertical list with a key handler attached to an anchor associated with the DIV containing the list.
The list comprises a set of DIVs showing a text string in each enclosed by an outer DIV. The height of the full list is 400px, well within the 540px of the screen height.
The user can move up and down the list with the up and down buttons to highlight individual items.
On the emulator this works fine, however on a real TV when the user hits down, not only does the highlight move done as it should, but the whole screen moves up.
Likewise, when the user hits up, the highlight moves correctly but the screen moves up.
Here's the markup for the list
<div id="itemList">
<div class="slot" id="slot0">Slot 0</div>
<div class="slot" id="slot1">Slot 1</div>
<div class="slot" id="slot2">Slot 2</div>
<div class="slot" id="slot3">Slot 3</div>
<div class="slot" id="slot4">Slot 4</div>
</div>
<a href='javascript:void(0);' id='anchorList' onkeydown='KeyHandler.list_KeyPress()'></a>
Here's the CSS
#itemList {
position: absolute;
left: 20px;
top: 20px;
width: 250px;
height: 400px;
background-color: #000000;
}
#itemList .slot {
color: #ff0000;
width: 100%;
height: 80px;
}
The event list_KeyPress function increments or decrements the index of the highlighted item and changes the class of it to slotSelected
Nothing on the screen is being redrawn, moved or resized. The only change being made is the class of the highlighted DIV.
To eliminate this as a factor, I commented out the code inside the list_KeyPress() and still get the same issue - so it isn't that.
It is definitely something to do with the key presses.
Actually, I've solved this myself. In the CSS I added the following to the body and html style:
body, html {
overflow: hidden;
}