How avoid horizontal html scrolling when a layer is show - javascript

I have a div .layer that darkens the entire page to highlight a modal, but when I trigger the event there is a problem to occupying 100% of the screen, and is that the scroll bar of the original browser is deleted
Is there any fancy way to make the div .layer, when is visible, keep the original bar scroll of the page?
In smartphones / tablet I do not find any problem when shooting the event .layer").show(); but on desktop screens the original scroll bar of browser is eliminated and the whole html document moves to right, taking its place.
What would be the correct way to avoid html to the right?
Thanks in advance!
HTML:
<div class="layer"></div>
<div class="open-modal">Open</div>
<div class="modal">
<div class="close-modal">Close</div>
</div>
CSS:
html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}
.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}
.modal {display:none;z-index:1}
SCRIPT:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer").show();
$("body").css("overflow","hidden");
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
$("body").css("overflow","");
});
});

You need to get rid of your use of "overflow". I've included a link below to the Mozilla Developer Network docs for "overflow", but below is a quick quote explaining what's happening.
"hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Also, after one cycle of clicking Open and Close, if you were to click Open again, the word Close won't show up. That's because you're not using the .show() method to show that text upon clicking Open. Updated JavaScript below.
JavaScript:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer,.close-modal").show();
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
});
});

Related

How can I make part of my page always be in the same position relative to the screen?

I'm making a website, and I have a nav bar and a main content section, the nav bar is at the top of the screen and the main content in near the bottom of the screen. However, if I change my screen height, the main content section stays in the same place, and it goes out of my browsers viewport/window and disappears, which is perfectly normal and expected. But what I want is for the main content section to always be at the same place at the bottom of the screen, no matter what the screen size/resolution/height is. How can I accomplish this?
My website is jeffarries.com and what I'm talking about is on my home page, if you need a visual.
I've used JavaScript, and I'm not very familiar with it.
I have no experience with jQuery, however I'm fine implementing a finished jQuery script.
Thanks for your Time and Energy!
Please let me know if any further information in needed.
UPDATE: Since this question appears to be unclear, take a visit to my website, you will see the text that says "here you can learn about me and my adventures", I want that text to appear at the bottom of the browser window when loaded, however, I want it to remain in usual flow, being on top of the "recent activity" box. Basically I want the margin on top of the text to change based on the browser window height, keeping the text at the bottom of the browser window.
You can use archive this via CSS3 VH property [ View Port Height ]. For that you have to make one container and add its height to 100vh.
Here is the live demo - https://jsfiddle.net/8dptzvye/
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}
<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>
You may be looking for position: fixed
EDIT
If you want to change the margin based on the window size, you can use jquery's resize
$(window).resize(function () { /* change margin of element */ });

Bootstrap 3 Modal with texarea inside. When tap/focus on textarea, the background scrolls to top. Only in iOS 8

I'm using Bootstrap 3.2.0.
I can show the modal just fine and the background stays in place. The modal contains a textarea. When I tap or focus on that textarea and the virtual keyboard comes up, the background scrolls to the top.
This only happens with iOS 8 and not iOS 7.
It's like iOS 8 wants to put whatever is focused on in the middle of the screen and it scrolls until that element is in the middle. It scrolls up and up and up until it hits the top THEN pulls the modal down a little.
Very frustrating. Has anyone experienced this yet? Any solutions?
Update: I'm thinking it has to do with the fact that the modal is fixed position and not absolute. iOS wants to put the focused element in the middle of the screen so it scrolls the viewport or document up until the element is in center but scrolling does nothing because the element is position fixed.
The solution for me was to set the modal involved to position:absolute; (by default it is position: fixed;) and instead of placing the modal at the bottom of my HTML by appending it to the body, I appended it to the parent element of the button that I clicked to show the modal. I also needed to ensure that the element that I was appending the modal into had a position of relative.
CSS
.modal.fade.my-special-modal {
position: absolute;
/* 'top' is not required but I did it for my taste */
top: 15px;
}
.my-special-modal-container {
position: relative;
}
HTML
<div class="my-special-modal-container">
<button>Show the modal</button>
<!-- js will inject the modal here -->
</div>
Thanks to #Christina for helping me discover this solution.
you can add this property globally:
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}

Force the user to the top of the page?

This is my website: http://www.ragewarsclan.com
I was having trouble integrating a Forum into my website.
I used object at first then realised that this wouldn't be the best solution, so I switched to iframe and used this code:
<div style="margin: 0 auto; width:100%; height:100%;
overflow: auto;"><iframe src="./smf/" width="100%" height="100%"></iframe></div>
This only seemed to work for chrome as in other browsers the height of the forum would only be something like 250px so I changed from having 100% to 1750px.
However, now, when the user clicks on one of the forum categories, it puts the user near the bottom of the page so I used jquery and used this to try and force the user to the top of the page when a forum category has been clicked:
<script type="text/javascript" src="jQuery-1.4.1-min.js">
$(document).ready(function(){
$(this).scrollTop(0);
});
</script>
Although this hasn't seemed to have worked and I'm not sure why...
Thanks.
you can make your forum categories links and set their href to an element at the top of the page
http://jsfiddle.net/sTr8F/
<div id="top"> top of page. scroll down to find link and click on it </div>
forum category
scrollTop doesn't scroll to the top, it returns the y-offset of the page.
If you need to scroll the page to the top using jQuery (so you can do it also smoothly) you can use animate
$("html, body").animate({scrollTop:0},500); //will be done in 500ms

jquery-ui modal window, make only one part of it scroll like new Facebook photo tagging window

In the newly introduced photo tagging window layout of Facebook, the commenting part is located to the right of the photo instead of keeping it beneath the photo. If commenters leave more than a certain number of comments, then a vertical scroll bar appears on the right side. But the image on the left side has no relation with the scroll bar .. i.e. scrolling the bar downward does not make the image disappear gradually from its upper part.
To achieve that,
my html snippet:
<style type="text/css">
.my_image{
float:left;
}
.comments{
float:left;
}
</style>
<div id="dialog" title="Basic dialog">
<div class="my_image"><img src="my_img.img"/></div>
<div class="comments"></div>
</div>
javascript snippet:
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
what I need to do is to keep the 'my_image' div size fixed while getting the 'comments' div scroll vertically as necessary.
But whenever the scroll bar appears , it makes the whole window (not part of it) scroll.
How to do that in jquery-ui? Is my html mark-up appropriate for that ?
Try setting overflow-y: scroll; for .comments. You might need to also set height the height of this div.
You can read more of overflow here: http://www.w3schools.com/jsref/prop_style_overflow.asp

How can I make a box inside the page appear after clicking a link?

I want an image, that when pressed, shows another image apear from the left of the screen to a point in the background image. I then want to zoom in on that image and make a modal box apear. How can I do this?
The point in the background need to stay the same. When I resize the browser it needs to appear at the same point.
See a working demo of the following code here.
The first part of your problem can be solved using position:absolute within a position:relative container that holds your background image.
#wrapper {
overflow-x:hidden;
width:100%;
position:relative;
}
#absSlide {
width:100px;
position:absolute; top:200px; right:-100px;
}
Make sure the wrapper is as wide as the window and that the overflow-x:hidden so that the slide in div isn't visible before the click. The slide in will be positioned just off stage to the right and top:XXXpx where XXX is the distance from the top of the page where your background element is. Your jQuery would look something like this to animate in the hidden div on click:
$('#showSlide').click(function(e){
e.preventDefault();
$('#absSlide').animate({'right':0},450);
});
You should be able to modify this code so that it works on the left side instead and animate the left property in the jQuery. I didn't want to make it too easy as your question was very general. You should ask a separate question for the rest of your problem after you share the working code for what you're able to implement on the first part.

Categories