My website is mostly Single Page Website, but there are some pages that only registered users can enter there. In the first "block" (I can't find other name. I'm speaking about areas in the single page website) there are a button named "Login / register", and when you click on her it shows you a login and registration form.
Because in the registration you should give us a lot of info (first and last name, email, password - twice, recaptcha and checkbox about the terms of use), we designed it like it is a different page, but to make the process faster I decided that it will be on the main page in position:fixed;, overflow:auto; and display:none; and when you'll push the "login / register" button it will change to display:block; and it will add overflow:hidden; to "body" and "html". Every thing works great, you even can scroll up and down, but the scroll bar itself seems strange.
Here is the JS (jQuery) code:
function login(){
$('#loginpopup').css({"display":"block","opacity":"0"});
$('#loginpopup').animate({"opacity":"1"});
$('body').css({"overflow":"hidden"});
$('html').css({"overflow":"hidden"});
return false;
}
Here is a screenshot of the page with the problem:
Use
overflow: visible;
instead of
overflow: auto;
in #loginpopup
Your problem comes from the div with class backgroundcolor, which is fixed and has a width and a height of 100%. This div displays over the scrollbar. Get rid of this div and try to put the grey background in the body element.
Related
I'm trying to create a chat app basically and I want it where when a new message has been added to its container, I don't want it to be hidden. Yes, I've enabled overflow:auto but I don't want it to where the user has to manually scroll down in order to see the latest message sent;I want it where the latest message sent is automatically scrolled down. I still want the scrollbar to be enabled but I just want to disable it from jumping up and hiding the latest message.
look at this article about how to scroll down automatically to an element using .scrollIntoView()
Inside JavaScript file on page
const messages = document.querySelector(".messages-container"); // Div with class "messages-container"
After appending the received message to the messages-container div...
messages.scrollTop = messages.scrollHeight;
Some CSS...
.messages-container {
padding: 30px;
max-height: 500px;
overflow-y: scroll;
}
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();
});
});
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.
I am having trouble getting a certain feature to work.
As you can see here: https://jsfiddle.net/y5jn4tco/1/
<div> CHECK CODE AT JSFIDDLE</div>
I am using the flip jquery plugin which made a flip, where you choose a category, and then gets sent to a certain login screen. My issue is, that I want the bottom one to flip to another backside. I have tried altering the jquery plugin, but without luck. Is there anyone who knows how I could make this work?
So the pink one goes to the pink login, and the blue one goes to the blue login.
Thank you in advance!
You Need To Wrap Your Div int Another Div Then Flip Back Div To Front And Front To back
1 div Is A
2 div is B
A-> 1
Student
2 Company
B -> 2 Buttons
IF Click In btn1 Then Hide company and Flip
$("#centerModuleCompany").css('display','none');
$("#centerModuleStudent").css('display','block');
IF Click In btn1 Then Hide Student and Flip
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
I Wrap The Student And Company Into Main Div I Also rotate Main Div#centerMain Front And Back
Then If You Clicked In Student Then Company Form Hide And Student Display In Div#centerMain
If You Clicked In Company Then Student Form Hide And Company Display In Div#centerMain
And I Change #back To .back
I Solve This In Fork Try This
https://jsfiddle.net/ehab6sqs/
Made some changes to your document.ready function as below:
Here is the DEMO
$(document).ready(function(){
$(".cards").flip({
trigger: 'manual'
});
$("#loginStudent").click(function(){
$(".cards").flip(true);
$("#centerModuleStudent").css('display','block');
$("#centerModuleCompany").css('display','none');
});
$("#loginCompany").click(function(){
$(".cards").flip(true);
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
});
$("#back1,#back2").click(function(){
$(".cards").flip(false);
});
});
I noticed that you have same ids for back button which is violating DOM element rules so I've changed it to back1 and back2 respectively and I am just hiding the alternative div on click of each button and showing the required div
Your CSS changes:
#back1,#back2 {
position: absolute;
left: 10px;
top: 10px;
height: 20px;
cursor: pointer;
}