CSS container errors everywhere - Javascript appears when page has shrunk - javascript

having an issue with a javascript element.
<a class="twitter-timeline" href="https://twitter.com/Account" data-widget-id="395882390205108224">Tweets by #Twitter</a><script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
This is linked in with my other question I think but not 100% as this is regarding the JS element.
On JSFiddle it works fine, I can shrink the element and it appears. On my website it doesn't appear unless I shrink the browser down.
http://jsfiddle.net/MLJpY/
Before:
After:
URL: http://profiledt.co.uk/SetTraining/

You assigned a fixed height to the container for this elements.
CSS:
#frontpage-Button-Cont {
width: 100%;
height: 135px;
text-align: center;
}
the height attribute (works in chrome then) or add overflow: auto to have it in a container with scroll bars
#frontpage-Button-Cont {
width: 100%;
height: 135px;
text-align: center;
overflow: auto;
}

Related

Move relative object position when scrollbar appears using CSS

On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?
You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>

New block with z-index 100, becomes too large

This is not my script.
I tried editing this script so when my pictures are clicked, they would not be larger than the device's resolution, and they would be centered in the screen. Unfortunately, what I've tried places them on the top-left and makes them smaller than the resolution.
I've tried margin auto, max-width / height, and removing top:0; left:0;
Here's where the script is deployed: http://idealportraits.com/
When I click an image on the PC, the original code works well. When I use my phone and tap an image, depending whether the image is larger vertically or horizontally, it becomes much too large and goes off-screen.
How do I make the image open as the full resolution (width or height, whichever is reached first) of the device being used, not larger, and centered in the screen?
<!-- Images enlarge on click -->
<script type="text/javascript">
function showImage(smSrc, lgSrc) {
document.getElementById('largeImg').src = smSrc;
showLargeImagePanel();
unselectAll();
setTimeout(function() {
document.getElementById('largeImg').src = lgSrc;
}, 1)
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.display = 'block';
}
function unselectAll() {
if(document.selection)
document.selection.empty();
if(window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<style type="text/css">
#largeImgPanel {
text-align: center;
display: none;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
</style>
<!-- End script -->
Just as a work around. I have typed up a quick CSS only onclick event for your images. So when you click on the images, it should expand them to 100% height/width, and also be centred on the screen.
It also means your have to copy/paste the relevant bits onto your piece of code, But why use JS when you can use CSS, after all people do disable Javascript sometimes.
http://codepen.io/Ballard/pen/JRjAod
.box {
width: 700px;
height: 700px;
background-color: #000;
color: white;
margin: 0 auto;
display: flex;
justify-content: center;
}
.inbox {
text-align: center;
vertical-align: middle;
line-height: 350px;
width: 350px;
height: 350px;
background-color: #fff;
color: #000;
align-self: center;
}
#btnctrl {
display: none;
}
#btnctrl:checked + label > .fb {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
overflow: auto;
}
<div class="box">
<div class="inbox">
<input type="checkbox" id="btnctrl"/>
<label class="btn" for="btnctrl"><img src="https://s19.postimg.org/777mf3pdv/facebook.png" class="fb"></label>
</div>
</div>
Let me know if this is any good for you, may save alot of scripting time.
By the sounds of it, you might be dealing with the old Android position: fixed problem. Try this.
If that doesn't solve the problem, try setting 100% width and height on the document/container and then using max-width and max-height for the images.
I'm not providing this in the comment section, because I don't have enough reputation to post comments.
From what i can see, the problem is not just with the script. e.g. if you hold your mobile device in landscape mode and click on the images you will see that all large images are fully visible when clicked(they may not fill the screen though).
At the moment the HTML for the large images seem to be hardcoded with a height of 100%, you will need to remove that and set that in Javascript by checking the ratio, if it is portrait image then set the height to be 100% and if it is a landscape image then set the width to 100%

Hide scroll bar of nested div, but still make it scrollable [duplicate]

This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 8 years ago.
This is a reference that I used, which explains how to make a div scrollable with its scroll bar hidden. The only difference is that I have nested divs. Check my fiddle
HTML:
<div id="main">
<div id="sub-main">
<div id="content">
<div id="item-container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
</div>
</div>
CSS:
#main {
width: 500px;
height: 500px;
}
#sub-main {
width: 500px;
height: 500px;
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 500px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Like above, I have a overflowed horizontal div and I want to hide its scroll bar. I have to make it still scrollable because $.scrollTo() wouldn't work otherwise.
UPDATE:
I have read all the answers, but I still have not resolved my problem and don't know what's causing it. This is the live that's having troubles.
Basically, I am trying to follow this almost exactly the same, but there must be some reason that my website isn't working as expected. There are two problems.
When I set overflow: hidden to a parent container of scrollable items, I cannot scroll (native javascript scroll functions do not work too).
I want to scroll just the overflowed container, not the entire window. This can be done by setting a target in $.localScroll({ target: '#projects-content' }) but nothing scrolls when I set the target. If I don't, scrolling works as long as overflow:hidden is not applied.
Again, any help would be greatly appreciated.
HTML:
<div id="projects"> <!-- start of entire projects page -->
<div id="project-sidebar">
<a href="#project-first">
<div class="sidebar-item sidebar-first">first</div>
</a>
<a href="#project-second">
<div class="sidebar-item sidebar-second">second</div>
</a>
<a href="#">
<div class="sidebar-item sidebar-third">third</div>
</a>
</div>
<div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
<div id="project-first" class="project-item">
<!-- these items should be scrollable -->
<div class="project-subitem" id="first-sub1">
<a href='#first-sub2' class='next'>next</a>
</div>
<div class='project-subitem' id='first-sub2'>
<a href='#first-sub1' class='prev'>prev</a>
</div>
<!-- end of scrollable items -->
</div>
</div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->
<script>
// FIXME: when I set target, nothing scrolls.
// But I don't want the entire window to scroll
$('#projects').localScroll({
//target: '#project-content',
hash: false
});
</script>
CSS
#project-content {
width: 80%;
height: 100%;
position: relative;
float: left;
}
#project-sidebar {
float: left;
width: 20%;
height: 100%;
}
.project-item {
width: 300%;
height: 100%;
}
.project-subitem {
height: 100%;
width: 33.33%;
position: relative;
float: left;
}
Update:
After I added overflow:scroll to #project-content, the scrolling works as expected. All I need now is making scroll bars disappear in #project-content. I tried adding overflow:hidden to its parent but had no success. I also tried adding it to html, body, but then the entire document refuses to accept any scrolling functions like scrollTop().
Any help will be greatly appreciated!
Theory :
The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :
Practice :
In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.
The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.
This is the CSS you should add to your website :
#projects{
position: relative;
}
#project-content{
position: absolute;
top: 0;
left: 20%;
bottom: -30px;
/* remove:
height: 100%;
position: relative;
float: left;
padding-bottom: -15px
/*
}
scollbars take up around 20px so just make you scrollable div 20px taller and 20px wider and your scrollbars will be hidden:
#content {
background-color: red;
width: 520px;
height: 520px;
overflow: auto;
}
Example
It's kind of cheating but could you hide it behind the #content like this DEMO
#content {
background-color: red;
width: 500px;
height: 480px;
overflow: hidden;
}
#item-container {
width: 1500px;
height: 500px;
overflow: scroll;
}
If you know all containers that can be scrollable, you can hide scrollbar with CSS and a little bit of JS. For webkit-based browsers (safari, google chrome, opera) it will be CSS-only solution to set scrollbar width to 0. For IE, Firefox and other non-webkit browsers you should calculate scrollbar width that will be used as negative margin-right for you scrollable content.
To do so you should wrap your content into div with overflow-y:scroll to always show vertical scrollbar and hide this scrollbar with margin-right:-17px and parent overflow:hidden. Example is here. No need to set fixed width, nor height.
This is the way that used in jQuery Scrollbar. Hiding horizontal scrollbar is more complicated and requires to handle content changes to recalculate container height.
I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if parent has overflow: hidden. tune padding-bottom or only padding-right, if it is to hide only one of them.
1em is average width of scroll bars in most browsers :
http://jsfiddle.net/5GCsJ/912/
The solution to make the content itself with horizontal scroll.
Just increase the height of #main, and #content.
#main {
width: 500px;
height: 520px;
}
#sub-main {
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 520px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
overflow: hidden;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Use a script to create custom scrollbars.
http://manos.malihu.gr/jquery-custom-content-scroller/
Then use CSS(or modify script or change script config) to hide the custom scrollbars.
I did this crudely using jQuery and your example
Check this fiddle:
I simply detected the direction of the scroll-wheel and pushed the horiz-scroll bar with jQuery
$(document).ready(function(){
$('#content').bind('mousewheel', function(e){
var curScroll = $("#content").scrollLeft();
if(e.originalEvent.wheelDelta > 0) {
$("#content").scrollLeft(curScroll-500);
} else {
$("#content").scrollLeft(curScroll+500);
}
});
});
It is "crude" because I hard-coded some values like the 500px amount to scroll, you could write some more javascript to detect dynamically how much to scroll. Plus I don't know if the wheelDelta value will be +120 for up and -120 for down, for you and other users.
Also note that the scrolLeft() can be animated.. for smoother transitions.

Prevent Address-Bar hiding in mobile Browsers

I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.
Thank in advance!
This is not scrollable at all:http://maxeffenberger.de/test.html
This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html
This is the way I have achieved it:
html {
background-color: red;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
/* prevent overscroll bounce*/
background-color: lightgreen;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/* iOS velocity scrolling */
}
Use this style code on your page.Now your chrome url bar will not hide.It'll stop scrolling.
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
The only soltuion that worked for me was this :
Put the content of your body inside a wrapper with the following style :
.wrapper {
position: absolute;
top: 0.5px;
left: 0;
right: 0;
bottom: 0.5px;
overflow-x: hidden; /* or any other value */
overflow-y: auto; /* or any other value */
}
the half-pixel offsets will be invisible but they will prevent the body from being considered as scrollable by the browser, thus preventing the address bar from hiding.
if someone still has this problem with the hiding address bar, this is how its worked for me.
html, body {
height: 100%;
}
body {
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: scroll;
}
.background {
position: fixed;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
I try a lot of similar code, but android chrome was killing me. Only this worked for me. When you have navigation at the bottom of the page it's major problem with that auto-hide bar.
This does it for me in iOS 15. Though my web app disables zooming. Both the top bar and bottom bar are always full size.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
So for it was the problem, that I want to avoid the scroll effect on a certain element. For this element I just set:
.disable-scroll {
overflow-y: hidden;
touch-action: pan-x;
}
It works on Chrome and the Xiaomi Default Browser but not Firefox.
The most reliable solution may be to use the fullscreen API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API
The following worked for me:
HTML
<body>
<div> This is the container for all content. </div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
⋮
}
body > div {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: CALC(100% + 1px);
overflow-x: hidden;
overflow-y: auto;
⋮
}
Another approach with customized scrollbar:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bdbdbd;
}
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-y: auto;
}
Use window.innerHeight to set boundaries for your site
You can set html and body or your wrapper to
var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
Keep in mind, that it needs to be updated on every resize!
window.innerHeight allows you to get the actual height of the inner part of the browser view (no browser bar).
You can achieve the height of the content when the bar is visible, or even when it is hidden (swiped down).
In my case:
1. set body to 100vh via CSS.
Unfortunately vh ignores the browser bars, what causes some trouble on mobile devices with modern browsers that hide the bar while/after scrolling.
Have a look at.
This is also my solution to problems like those above.
2. Calculate the exact height via JS with the stated function. Update on every resize!
=> the content of the site is now restricted to the inner part of the view.
On mobile:
Android 7.1.1/ Chrome 61.0
iOS 9.3.5/ Safari
=> now the browser bar is no longer hiding on scroll- and swipe-events.
Keep in mind:
It is only working, when you do not use some library that leads to believe you are scrolling horizontal, but actually is using body.height.
With a javascript window.scrollTo(0, 1); you can fix the problem.
Look at http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ for the solution.

parent div's width larger than children's width in Firefox

I have a strange issue in Firefox.
I have a div with height defined in constant px value, and there is an img element within that. I have no problem with this setup in chrome, but in firefox parent div's width turns out to be larger than the img in it.
This is the html structure:
<div class="wrapper">
<div class="imageHolder">
<img src='dasource'>
</div>
</div>
And this is the css:
.wrapper {
width: 900px;
}
.imageHolder {
height: 400px;
width: auto;
background-color: green;
float: left;
max-width: 50%;
overflow: hidden;
}
.imageHolder img {
height: 100%;
}
http://jsfiddle.net/MXudn/6
As explained in this fiddle, in firefox, the parent div turns out to be larger than the image in it.
Any ideas why this is the case?
This does look like a bug in Firefox to me. For some reason overflow: hidden is causing the parent div to use the width of the unscaled image rather than post-scaling.
http://jsfiddle.net/MXudn/8
<div class="imageHolder">
<img src='http://placehold.it/650x650' />
<div>
.imageHolder {
height: 400px;
background-color: green;
float: left;
overflow: hidden;
}
.imageHolder img {
height: 100%;
}
In this stripped down example, you can clearly see the issue. The image is originally 650px wide, rescaled based on height, it becomes 400px wide. The parent however, remains 650px wide.
If you do not need the overflow: hidden simply removing that fixes the problem.
http://jsfiddle.net/MXudn/12/
EDIT: Firefox bugzilla ticket for this issue.

Categories