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
I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.
This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):
You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }
I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!
It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}
it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you
If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!
Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well
I have a problem when focusing on invisible elements. Markup:
<div id="outer">
<div id="inner" style="top: 0;">
<div class="group" style="background: red;">X</div>
<div class="group" style="background: blue;">Y</div>
<div class="group" style="background: green;">Z</div>
</div>
</div>
<button onclick="document.getElementById('inner').style.top = '-182px';">Down</button>
And css:
#outer {
width: 300px;
height: 182px;
overflow: hidden;
background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}
When I press 'down' button inner's style become 'top: -182px', which functionally just shows another group of items. And component basically works as a vertical group slider. Everything works perfectly until I'm using 'Tab'. Just before slider show next group browser automatically shifts inner div without changing any attributes on it.
Is there any change to get offset made by browser from DOM or anywhere else? I know that scrolling on focus is default browser functionality so I am not going to fight with browsers and I am pretty sure I can't disable such scrolling.
I've figured out that browser scrolls before any js code executes. Is there any way to intercept focus event and scroll before browser?
Why not use a bit more JS?
I've forked your JSfiddle to use raw JS, though I would use jQuery to make it much cleaner.
http://jsfiddle.net/bldoron/wMXpt/4/
Basically I would traverse the elements and hide the irrelevant ones explicitly instead of implicitly with css rules.
You need to check if we passed the last node, but you get the picture.
Take a look at this: http://jsfiddle.net/byTLg/8/. It works! Fiddle will explain much more than me )