My website has a content div which has to be of specific height. Let's say 800px.
I'm looking for a way I could enter the content in that div and make the div break it up and make it available via some "next" anchors.
Is such thing possible in a regular html page, no wordpress no drupal no plugins.
Style your div with overflow:hidden;
Then add a button to make it scroll 800px down
You should also use overflow:scroll-y; to make it simple.
Related
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
Firebug lite displays a div tag in the bottom right of the window when included on a page. The new tool Glimpse uses the same method to display a div for it's activation as well. My problem is that the glimpse div appears under the firebug div in z-order.
Is there a simple clever way to solve this?
You can change Firebug Lite options to not display that little icon:
https://getfirebug.com/firebug-lite.js#showIconWhenHidden=false
There are different ways to set options. Read more here:
http://getfirebug.com/firebuglite#Options
You could add a little JavaScript on your page that grabs either the Glimpse or FireBug Light div (if present) and changes the placement or zIndex.
I have a black navigation bar (bar) and a vertical white page (page).
The page is supposed to run from to to bottom and look like it just comes out from right under the bar. The bar has a drop shadow which should obviously be 'on' the page - like this:
The problem with this is that the page needs a z-index of -1 to look like this (both have a fixed or relative positioning) - and this means (at least in Chrome) that I can't select or click anything on the page.
When I assign a z-index of 2 (bar being 10) it obviously doesn't work anymore:
Yet at least I can click the page's elements.
How can I achive the correct look while still being able to click/select elements?
you could set box-shadow: inset (...) to page.
http://jsfiddle.net/seler/fP2Gx/
or: http://jsfiddle.net/seler/fP2Gx/12/
Is there a way in chrome extensions to add a div OVER the page view, not to the page. I want that when I switch to another tab, the div is still there. The div should not be a part of the page, but over every page.
When this is possible: How?
No such thing.
You would need to add a div to each tab and then sync its content by exchanging messages with a background page (or make it iframe linked to extension's html page).
I'm having no end of fun (sic) with jQuery.tabs. The widget is quite crafty in that it turns basic HTML like so
<div>
<ul>
<li>Tab #1</li>
...
</ul>
<div for panel #1>
</div>
<div for panel #2>
</div>
...
</div>
into a cute tabbed dialogue. (It does so by restyling the UL and then toggling the "display" attribute for the panel DIVs to show/not show whatever panel is selected.)
Now I found that I can spare myself a lot of trouble in my JS project if I insert a scrollable IFRAME into each panel.
One usability problem I'm trying to ameliorate is that when the tabbed panel becomes larger than the browser's window, then the user ends up with too many scrollbars. I am trying to avoid this situation by linking the size of the tabbed panel to that of $(window). That is, I trap and process the resize event on $(window).
To make my life bearable, all components are relatively sized. This is also true, in particular, of the IFRAMEs (100% width, 100% height). The only exception are the panel DIVs, which are of fixed height (in px). And this is the only dimension css attribute that I manipulate during my resize action.
All of this works a treat in FF and Chrome, but IE6 is doing something rather cute: So long as I do not affect the width of the browser window (but only change its height), only the panel DIV changes in height; the IFRAME contained will not change. As a result of this behaviour, it is not possible to shorten the tabbed panel below the height of the IFRAME. I can lengthen the DIV, yes. But the IFRAME will not fill the panel in that case.
All becomes good the moment I make the slightest change to the width of the browser window. In that moment, the IFRAME expands to catch up with the extended DIV or DIV and IFRAME contract in tandem.
Bizarre. I inserted useless CSS instructions like "position: relative" and "zoom: 1". Also nudged the display with "display: block". No joy so far.
Any ideas?
Thanks.
Never mind. Just had an inspiration: jQuery.tabs doesn't mind if I make the panels outright IFRAMEs. That is, I can do away with the wrapping DIV and thus need not rely on IE6 to honour the automatic relative dimensioning (height=100%, width=100%) of the wrapped IFRAME. The IFRAME is now fixed px in height and is directly resized by my resizeHandler. Life is now good across 4 browsers. Yipee!