I want to display a large table to users. To ensure they see all the data before they proceed to the next step I want to hide the "Next" button in a way that it will only be visible after the user has scrolled past all the rows.
I would also like it to look like the button was hiding behind the table all along, instead of having the button pop in and out of existence.
So far I have experimented with fixed positions and z-indexes like this:
<div id="container>
<table id="table" class="table">
<!-- a lot of rows, asynchronously bound with images in some cells -->
</table>
<button id="button" class="nextButton">
next
</button>
</div>
and with css:
.nextButton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: -1;
}
.table {
background-color: white;
width: 100%;
}
Now the button is not accessible if the table is larger than the window, as the page's content height does not take into account the button's height. So I try to increase artificially the height with code such as
$(window).load(function() {
var height = $("#button").height();
$("#container").height("+=" + height);
});
JSFiddle (note that you must resize the "Result" pane so that it is small enough for the table to hide the button) but I have run into issues.
The first issue is that I would much prefer do this declaratively. Second, The button cannot be clicked as even though it is visible, the browser seems to believe I am clicking the div. Lastly, all this resides in an angular project, and window.ready doesn't seem to always trigger properly.
What am I doing wrong?
The fixed sized button may not make the document grow, but you can use margin of the table to do so.
Give your table margin-bottom with value larger than or equal to the buttons's height:
.table {
background-color: white;
width: 100%;
margin-bottom:50px;
}
Here is the fiddle
Related
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I have a mobile website. It's ajax based and when clicking a row from a table in the main screen, a div is populated with ajax data and then fades in, occupying the whole window, in fixed position. Then the user can navigate the div like if it's a separate window but can back out to the main table (fading out the fixed div). So, when the user navigate the fixed div, in reality there is also the main page body in the background. Would disabling/hiding the background main page make the website more lightweight for a mobile or not? The structure is similar to:
<html>
<head>
<script>
function navigateIn(url){
$.get(url,function(data){ //get data from url
$('#navigate').html(data); //put data into div
$('#navigate').fadeIn(200,function(){ //fade in div
//Now, after div is faded in, hide the background:
$('#main').css('overflow','hidden'); //Is this helpful?
$('#main').css('visibility','hidden'); //Is this helpful?
$('#main').css('display','none'); //Is this helpful? This void the scrolltop of the body, so it's not my greatest choice
});
});
}
function navigateOut(){
//Display the main page before back out!
$('#main').css('overflow','');
$('#main').css('visibility','');
$('#main').css('display','');
$('#navigate').fadeOut(200);
}
</script>
<style>
#navigate {
position: fixed;
height: 100%;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<button onclick="navigateIn('http://www.test.com');">Navigate In!</button>
</div>
<div id="navigate"></div>
</body>
</html>
Here's a jsfiddle which is showing what I'm talking about: jsfiddle
But the effect is a bit different because it's not full screen view.
I don't actually know how to test by myself if it's helpful or not (or even worse) to hide the content. So I ask to you.
PS: I know it's not a beautiful effect when fading in, but in reality I made a slideIn from right extension, so it's much better...
I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.
I have a overlay div look like below with id & class,
<div id="findBudget" class="openedlist bottom-side open" style="height: auto; width: 1080px; top: 80px;">
And it is perfectly showing overlay with open.
After browser click back from next page to this div page, while the page loads, the style of the id 'findBudget', need to change dynamically like below,
style="height: auto; width: ''; top: 80px;"
I tried with below jquery script in browser back function.
if ($('#findBudget').hasClass('open')) {
$('#findBudget').css('width','');
}
But still it is showing like this (old),
<div id="findBudget" class="openedlist bottom-side open" style="height: auto; width: 1080px; top: 80px;">
Please show me where I am doing mistake, before switch on coffee machine.
Thanks
Technically the code you have in your answer works just fine. I am guessing that either (1) it doesn't do what you want or (2) it doesn't work because of code that you haven't pasted into your answer (events not getting wired or things of that nature).That said, if you are just trying to hide the element you can call:
$('#findBudget').css('display','none');
See The Fiddle: http://jsfiddle.net/fd379/1/
EDIT: One more note - if you want the div to size exactly to the same size as the text you can use float: left. You can see this working in the following update to the fiddle: http://jsfiddle.net/fd379/2/
I'm assuming you want to erase the width instruction.
If that's all, you can set it with a zero px to ensure that it will arrive as zero.
if ($('#findBudget').hasClass('open')) {
$('#findBudget').css('width','0px');
}
If you want it to disappear, simply use
if ($('#findBudget').hasClass('open')) {
$('#findBudget').hide();
}
I have a calendar, and when the user hovers over a cell, a large-ish info box appears with details for that date. I am having some trouble though making the info box disappear when the user moves away.
I basically want it so that when the mouse cursor moves out of the calendar cell which is hidden by the info box it will disappear. But I'm having trouble with this because mouseenter and mouseleave get messed up by having the info box as the top element.
So I tried to get around this by using "placeholder" divs that are transparent, have the same shape and location as the calendar cell beneath it, and have a z-index of 1000 so they are above the info box. I then apply the mouseenter and mouseleave events to these divs instead.
There's two problems with this though. One, I have now messed up my HTML semantically. The divs have no purpose but to get around what seems to be a limitation. And secondly, they mess up my jQuery UI selection (I've applied it to the calendar cells - a click no longer selects a cell).
Is there a clean way to handle displaying an info box? There will be no user interaction with the info box -- it's just to display information.
EDIT: Here is some code:
<li>
<div class="day-content">
</div>
<div class="day-content-placeholder">
</div>
</li>
and CSS
li
{ position: absolute; width: 15%; height: 20%; top: ... left: ... }
.day-content
{ position: absolute; width: 100%; height: 100%; }
.day-content-placeholder
{ position: absolute; width: 100%; height: 100%; z-index: 1000; }
.popup
{ position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; }
and Javascript
var popup;
$('.week-content-placeholder')
.mouseenter(function()
{
popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this);
})
.mouseleave(function()
{
popup.remove();
});
That's not the exact code, but you get the idea. This works okay, but like I said, since .week-content-placeholder is above .week-content, the selection capability with jQuery UI doesn't work properly on .week-content.
You could modify your solution with the transparent "placeholder" divs in the following way:
Have the "placeholder" dive underneath the "calendar cell", using {zIndex: -1}.
When you enter a calendar cell, unhide the large "content" div and set {zIndex: 1000} on the "placeholder" div to bring it to the top.
Have a "mouseout" event on the placeholder div that will hide the "content" div and set {zIndex: -1} for the the "placeholder" cell.
Rather than create the "placeholder" cells in the HTML, you could create one in the javascript and move it to the postion of each "calendar" cell as you "mouseIn" it. You could also duplicate any "click" events on the "calendar cell" onto this one as well.
Let me know if this works.
The trick here is to make the info box a child of the cell:
<div id='box'>
Normal content
<div id='inner'>
This big box obscures everything in the cell!
</div>
</div>
The inner box is hidden until the hover occurs. Notice how with CSS we can make the box bigger than the cell itself with negative margins.
#box
{
width:100px;
height:100px;
margin:100px;
border:solid 2px darkblue;
position:relative;
}
#box #inner
{
display:none;
position:absolute;
background-color:#eeee00;
top:-10px;
left:-10px;
width:120px;
height:120px;
}
And you can use normal jquery hover because the hover covers box the box and it's child:
$('#box').hover(function(){
$('#inner').show();
},function(){
$('#inner').hide();
});
Here's it running:
http://jsfiddle.net/RbqCT/
You can create the info box dynamically as you do in your code.
Here's 15 different plugins that let you do this with jquery:
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
You could track mousemouse and use the offsetLeft + width and offsetTop + height of your hover trigger against the event.pageX and event.pageY to compare.
If you make this work as you described a tiny mouse movement that remains within the calendar cell (which is not even visible) leaves the popup in place, but a slightly larger movement that exits the cell makes the popup disappear.
The user sees only movement within the popup itself — small movement within the popup leaves it in place; large movement makes it go away.
I suggest triggering the disappearance of the popup on exiting the popup div itself. Any movement that remains within the "tip" panel leaves it up. I think that (1) this is better usability and (2) it avoids the whole problem with the obscured calendar cell event handling.
You could do that by adding a .mouseleave() handler to the div when you create it.