The following code sample does not smoothly scroll in Chrome 67; when you use a mouse to grab the scrollbar, you will notice the scrollbar drag gets aborted every 1 second when the timer updates the text in the title.
<html><body style="margin:0pt;">
<div style="height:100vh;overflow:hidden;display:grid;grid-template-areas:'topbar' 'body'">
<div style="grid-area:topbar;background-color:lightblue">
This is a fixed top bar with ticker: <span id="ticker">0</span>
</div>
<div style="grid-area:body;font-size:200pt;overflow:auto;">
Try and scroll down! a a a a a a a a a a a a a a a a a
</div>
</div>
<script type="text/javascript">
setInterval(function(){
document.getElementById("ticker").innerHTML = Number(document.getElementById("ticker").innerHTML) + 1;
}, 1000);
</script>
</body></html>
It works as expected in Edge.
Is there a solution to this problem?
Related
I am using an iframe to display a php page. I used a script within the iframe that sizes it to the documents height. This allows the user to scroll the main window without having dual scroll bars on the page. I am using a bootstrap modal within the iframe to display an image. The issue is that when clicked the modal popup is displayed at the top center of the iframe. However if the user had to scroll down the list prior to clicking the 'show image' button, they wont find the popup unless they know to scroll all the way back to the top.
I have searched relentlessly for a solution to this within this site and google with no clear understandable answer. Hoping one of you experts can enlighten me.
Here is my modal code:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<img id="img" src="" width="100%" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the script:
<script>
$(document).on('click', '.getinfoBtn', function(e){
var image=$(this).attr('data-image');
$('#img').attr('src', image);
return false;
});
</script>
Here is the iframe script used to get height of content to be displayed:
<iframe id="form-iframe" src="rooz/on-tap.php" style="margin-top:20px; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
As stated previously, this code works but pops up the image at the top center of the iframe. I would really like it to either pop up near the button clicked or at least visible.
In my case, using Bootstrap 3.4, what I could make is to catch the show.bs.modal event and setup its position according the click. To avoid the glitch effect, I hide the modal and show it after move it.
I didn't find the way to parametrize the modal in its creation to set it up, instead of enforce it.
$('#theModalDiv').on('show.bs.modal', function (event) {
const modalWidth = 600; // Because #attendeesModal has no lg nor sm size
// and by default, bootstrap modals has 600px width
const target = $(event.relatedTarget);
let newLeft = (document.getElementById('iframe-content-body').offsetWidth/2) - (modalWidth); // Centering the modal
const modal = $(this); // Getting modal instance
modal.css('opacity', '0'); // Hidding modal
// After some time...
setTimeout(() => {
modal.offset({
// ...setting new modal position
...target.offset(),
left: newLeft,
});
// ...setting same top position as the click
$('.modal-dialog').css('margin-top', 0);
// ...displaying again the modal
modal.css('opacity', '1');
}, 500); // This value was taken with rule of thumb
});
I hope someone can find this usefull.
I´m using bootstrap3 and I´m trying to create a fixed menu for mobile devices. This menu can have submenu´s and submenu´s can have a lot of content in it. So when you watch the site on mobile phone´s (320x480 eg) and the menu is very long then you can´t scroll in the inner/submenu. In other words if your screen height is too short you can´t see all the menu items because the menu bar is sticked at the top of the screen.
I´ve read a lot of post from github and here + Bootstrap's page, but can´t seem to get it to work. I think that position fixed is the problem?!
I'll try to explain with a fiddle and here below
EDIT: You can view an example here -> example (resize browser and try to hit brands)
HTML
<div id="main-nav-container">
<div class="container">
<div class="row">
<div class="col-md-12 clearfix">
<nav id="main-nav">
<div id="responsive-nav">
<div id="responsive-nav-button">
Menu <span id="responsive-nav-button-icon"></span>
</div><!-- responsive-nav-button -->
<ul class="clearfix responsive-nav">
<li><i class="fa fa-home"></i></li>
<li><span class="menu-button"></span><a title="Camera" href="http://www.webshop.com/nl/camera/">Camera</a>
<ul>
<li><a title="Canon" href="http://www.webshop.com/nl/camera/canon/">Canon</a></li>
<li> like 40 li items more for example </li>
</ul>
</li>
etc...
JQUERY
$(function() {
var sticky_navigation_offset_top = $('#main-nav-container').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#main-nav-container').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#main-nav-container').css({ 'position': 'relative' });
}
};
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
So how can I make the menu so that the with the li items is scrollable so that on smaller screens the whole submenu can be viewed?
I have to scroll div block instead of window scroll and i want that this block will be until the end of the page, and if it is longer then scroll - it must appear.
I have such html:
<body>
<div id='header'>
</div>
<div id='content'>
<div id='main'>
<div id='options'>
</div>
<!-- other blocks -->
<div id='scrorable'> <!-- This div i want to scroll instead of window -->
<table>
</table>
</div>
</div>
</div>
</body>
And also i use infinite-scroll that works now on window scroll:
$(window).scroll(function()
{
if($(window).scrollTop() >= $(document).height() - $(window).height() - 200)
{
//ajax Call and append income data to html
}
});
I also need to change this code according to scrolling div (not window).
Updated: Infinite scroll issue I sold in that way:
Insert one inner div in my scroll div:
<div id='scrorable'>
<div id='scrorable-inner'> <!--My inner div-->
<-- content -->
<table>
</table>
</div>
</div>
And My Changed inner scroll code:
$('div#scrorable').scroll(function()
{
if($('div#scrorable').scrollTop() >= $('div#scrorable-inner').height() - $'div#scrorable').height() - 200)
{
//ajax Call and append income data to html
}
});
Updated:
Now i use
$('div#scrorable').height($(window).height()-300);
to set height of that block. I use ($(window).height() - height of header and footer (300px))
I am trying to make a message bubble, and I've got it working on all browsers with exception to IE7. The bubble needs to wrap itself around variable width content, so it's width will depend on the amount of content. It may grow to 100%, but it may only be 100px wide if the message is short. This is where I'm running into problems with IE.
Here's a jsfiddle: http://jsfiddle.net/w9Vdh/
The main construct of the bubble is a top row, middle row and bottom row. I've got a sprite and a couple other background images that I use render the graphics. Here's the HTML:
<div class="thread-item-wrapper">
<div class="thread-item-horiz thread-item-top">
<div class="thread-item-corner thread-item-topleft"></div>
<div class="thread-item-corner thread-item-topright"></div>
</div>
<div class="thread-item-middle">
<div class="thread-item-content-wrapper">
<div class="thread-item-label">You:</div>
<div class="thread-item-content">
<div class="thread-item-msg">
<div class="thread-item-content-top"></div>
<p>Message</p>
</div>
</div>
</div>
</div>
<div class="thread-item-horiz thread-item-bottom">
<div class="thread-item-corner thread-item-bottomleft"></div>
<div class="thread-item-corner thread-item-bottomright"></div>
</div>
<div class="thread-item-date">Aug 18, 2011 12:01 PM</div>
</div>
Here's what it's supposed to look like:
And here's what it looks like in IE7:
see the fiddle for code and demo-
Fiddle: http://jsfiddle.net/w9Vdh/6
Demo: http://jsfiddle.net/w9Vdh/6/embedded/result/
screen shot of IE7:
Updated fiddle for sent bubble fix for IE7
Fiddle : http://jsfiddle.net/8NpwH/2/
Demo: http://jsfiddle.net/8NpwH/2/embedded/result/
Changes in code html:
<div class="thread-item-clear"> </div>
<div class="thread-item-date"><div style="text-align:right;">Mar 23, 2012 12:41 PM</div></div>
Css:
.thread-item-sent .thread-item-date {/*clear:left; float:right;*/ margin:0px 4px 0 15px; } /* <--- this line --- */
"Received messages" work... the bubble wraps to the message width nicely. However, sent messages are being displayed full-width, and not sizing correctly to the message width. This has something to do with the date. In my fiddle (jsfiddle.net/8NpwH) you'll see a comment in the CSS on the .thread-item-sent .thread-item-date style, which indicates the CSS that appears to be the problem. If you get rid of that CSS, the bubble sizes correctly, but the date is missing.
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.