So I am trying to make a website and have a popup window/box DIV that appears after clicking something. This popup DIV contains text/content, let's name it "Locations," as per my website's design. This Locations Popup DIV has a fixed height and width, and consequently, there is a vertical scroll bar I've created to scroll down and read the text. I would like to add more content to this popup but unfortunately, the text is being cutoff, and the scroll does not continue scrolling down. I have set a pretty large value for the margin/padding in the DIV to make this work for a very long page length, but it is very inefficient and poor programming.
How can I set the style of a div to the height of the total HTML document (which is the dyanamic, changing factor here) using JavaScript or CSS so I can do this intelligently and properly? I don't want to have to manually do this, as the longer the HTML Document becomes if I choose, I will always have to go back and either change the margin/padding value in CSS or do something to the JavaScript.
Below is the CSS for it:
/* Pop Up */
#popupAbout, #popupLocations, #popupContact, #popupBlog {
height: 600px;
width: 900px;
overflow: scroll;
background-color: rgba(0, 0, 0, 0.75);
border: 2px solid #cecece;
z-index: 15;
padding: 20px;
color: #FFF;
-webkit-box-shadow: 0px 0px 4px #000 inset;
-moz-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: -50px;
visibility: hidden;
}
#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p {
padding-left: 10px;
font-size: 18px;
line-height: 20px;
}
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 {
text-align: left;
font-size: 30px;
letter-spacing: 1px;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose {
right: 6px;
top: 6px;
position: absolute;
display: block;
}
And the appropriate JavaScript:
//Locations Page Pop Up
var popupLocationsStatus = 0;
function loadPopupLocations(){
if(popupLocationsStatus==0){
$("#popupLocations").fadeIn("slow");
popupLocationsStatus = 1;
}
}
function disablePopupLocations(){
if(popupLocationsStatus==1){
$("#popupLocations").fadeOut("slow");
popupLocationsStatus = 0;
}
}
function centerPopupLocations(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupLocationsHeight = $("#popupLocations").height();
var popupLocationsWidth = $("#popupLocations").width();
$("#popupLocations").css({
"position": "absolute",
"top": windowHeight/2-popupLocationsHeight/2,
"left": windowWidth/2-popupLocationsWidth/2
});
}
$(document).ready(function(){
$("#popupLocations").fadeOut();
popupLocationsStatus = 0;
$("#Locations").click(function(){
$("#popupLocations").css({
"visibility": "visible" });
disablePopupAbout();
disablePopupContact();
centerPopupLocations();
loadPopupLocations();
});
$("#popupLocationsClose").click(function(){
disablePopupLocations();
});
});
$(function()
{
$('#popupLocations').jScrollPane();
$('.popupLocations').jScrollPane(
{
showArrows: true,
horizontalGutter: 10
}
);
});
Here is the screenshot I've saved to give a better look at what I am talking about exactly (looking at the bottom of the popup window where the text is being cutoff):
My Website Screenshot
Everyone may view my work so far at: www.zaheeruddinsyed.com, to see exactly what I am talking about.
I believe you're looking for overflow: auto property. Take a look at this fiddle.
If you want to achieve the scrollbar like on sample image, you'll have to play around with css, here is tutorial on how to apply custom style to scrollbar.
Btw, if you want to make popup window, you might want to look at Fancybox, which, in my opinion, looks really good and most of work is already done! The only downside might be that you have to use it with jQuery, but it's already used on most of the webpages today.
Edit
When I've looked at page source, I found the problem in less than a minute. The content of your popup div isn't scrolling to the bottom, it stops for some reason.
This question is similar: Bottom content cutoff using overflow: auto; and jscrollpane
Try and put this code in JavaScript console (Ctrl + Shift + (J in Chrome, K in Firefox):
$("#popupLocations .jspPane").css("top","-800px")
It scrolls down to the bottom where it should. I know that this doesn't solve your problem just yet, but I think I've found a solution (I'm not sure because I can't test it myself). But if you look at that other question, the solution is using autoReinitialise:true. You can try it right away by running this in JavaScript console:
$('.popupLocations').jScrollPane({
showArrows: true,
horizontalGutter: 10,
autoReinitialise:true
}
);
Of course you'll have to put it in your file where you're initializing jScrollPane if you want it to work correctly every time you refresh the page.
And why do you have 2 $(document).ready(function()...) and 2 $(function()... (which is the same) definitions in your file? You should put all the code in one function, which will be called when the DOM is loaded. And for the sake of your users UX, try to reduce the images and files, also try to avoid using millions of different js plugins. It took me almost 11s (according to network profiler) to load for the first time and I have 100Mb/s uplink, I can't imagine someone with mobile internet. The webpage makes over 100 requests, a lot of them are 1x1px pngs. If all that is really necessary, you might want to look into compressing and bundling. It depends on what back-end framework you'll be using. I can say that ASP.NET MVC 4 provides very simple bundle manager but I'm sure that PHP or rails provide something similar.
Related
I have a div that is used to display the users data.
This div is used to simulate how the users data will be printed. The users printed data can be 1 or many pages long.
I am trying to simulate a page break on the div each time the height of the div reaches the height of 3507px.
I have searched SO & google to find a solution, but I am stumped. I am unsure if this can be accomplished using CSS or jQuery.
How do I display a horizontal rule or some other such line break indicator in the div (to indicate a page break) each time the height of the div reaches the height of 3507px?
Here is the HTML code of my div:
<div style="border: 2px dashed red;">
<div id="live_preview" class="livePreview_resumeWrapper2"></div>
</div>
Here is the CSS:
.livePreview_resumeWrapper2 {
background: #fff;
border: 1px solid #000;
box-shadow: 10px 10px 5px 0 #888;
direction: ltr;
padding: 20px;
width: 100%
}
I will appreciate any suggestion. Thanks.
the idea that occures to me is:
1)Get the height of the page
var page_height = $('.page').height();
2)Get the count of the hr you would require
var hr_count = Math.floor(page_height / 3507);
3)Set the page as relative
.page{ position: relative}
4)Now knowing the count of the hr you need to display append them to the page with an absolute position;
for(i=1; i<=hr_count; ++i){
$('.page').append('<hr style="position: absolute; top: ' + i * 3507 + 'px;"');}
The only issue I see is that the hr may appear straight on top of a text, but at least you would know that there goes a line break.
why 3507px?
What if somebody changes the margins of they print setup, or uses different type of paper like a4, a3, letter?
Best regards
I'm making a navigation system on some of the pages of my website that is roughly like this:
<span>Page</span>
Where each navigation link would look like that. I want the link representing current page
to have the following properties:
background-color: buttonface; border: 2px solid grey; border-radius: 5px;
and all navigation links to have these properties:
padding: 0 6px 0 6px;
In addition I wanted to make the border and background of the current page's link fade into any link on .mouseenter() and fade out on .mouseleave() unless it is the current page in which case it should not fade out. I am relatively new to jQuery and I have no idea how to do this.
It isn't completely necessary for the links to be in the format I put above as long as they're listed horizontally across the page and have the properties I specified. If it matters my site also uses the following code for style already:
body{font-family: 'Raleway'; background: #F07400; color: black; font-size: 18px; margin: 20px 0 20px 20px;}
button{font-size: 18px; font-family: 'Raleway'; border-radius: 5px; border: 2px solid grey;}
and
$(document).ready(function() {
widthval = $(window).width()-40;
$("body").css("width", widthval);
$("body").fadeOut(0);
$("body").fadeIn(1600);
$(window).resize(function(){
widthval = $(window).width()-40;
$("body").css("width", widthval);
});
});
You could layer two body layers, by placing a body2 positioned absolute as a child element of body, which would draw it ontop of body. Have the body 2 contain the border information and body contain the content. Then fade body2.
But this solution would require the content to exist in both body and body2 because clicks would be blocked to body and processed through body2.
updated
<div style="width:needed; height:needed;">
<div2 style="position:absolute; width:sameAsBody; height:sameasbody" class="fade">
this content will fade.
</div2>
content content here will be faded to. If changing just the background it would be literially the same hence it appears that the content did not fade.
</div>
$(document).ready(function(){
$(‘.fade’).fadeTo(2000, 1.0).fadeTo(4000, 0.0);
});
I am getting weird problem in using custom validator function in asp.net page and showing validation summary on the top of web page using CSS Styles.....
and this is the screen shot before clicking the button submit changes
after submitting the page the validation summary is displayed on top but controls positon is changing like this
and this is my code for
<div id="validationSummaryHolder" class="validationSummaryHolder">
<asp:ValidationSummary runat="server" ID="valsErrors" ValidationGroup="TestValidation" DisplayMode="BulletList"
CssClass="validationsummary" HeaderText="<div class='validationheader'>Please correct the following:</div>" />
</div>
and this is my css styles for validation summary
Css Styles for validation summary
.validationheader
{
background-color: white;
color:green;
height: 14px;
font-weight: bold;
border-bottom: 1px solid #b08b34;
padding-top: 3px;
}
.validationsummary
{
border: 1px solid #b08b34;
padding: 0px 0px 0px 0px;
margin:5px 0 20px 0px;
font-size:12px;
width:99%;
}
.validationsummary ul
{
padding-top: 1px;
font-size: 12px;
color:#982b12;
}
.validationsummary ul li
{
padding: 1px 0px 0px 1px;
}
I have placed all controls in individual divs and mentioned type of positon for all controls is Relative ..
I don't know why I am getting this weird thing,
Do i need to set fixed height and width for total page ?
would any one pls help on this
Many thanks In advance....
Check the width of
<div id="validationSummaryHolder" class="validationSummaryHolder">
It is not likely the the validation summary's insides are causing anything of their own accord since they are contained in that div, but maybe the containing div is stretching or shrinking the page. Also some html in the question would help. If you can't paraphrase the html here, another option would be to show the wire frame of the page with and without the validation summary and the answer should be clear at that point what is happening.
If you have a look at digg.com, there is a persistent status bar (i.e. the Digg version number etc).
I have played with a few jQuery plugins, but they don't anchor fully to the bottom like that one in Digg.. I have tried to look at the CSS, but can't quite understand what bits are needed..
Any ideas/pointers very welcome?
<--- EDIT: SOLUTION --->
Thanks to the answer/comments below, I have ended up with the follow (just in case anyone else wants a basic working version to get going..):
The CSS is:
.footer-bar {
background: -webkit-gradient(linear,left top,left bottom,from(#F3F3F3),to(white));
background: -moz-linear-gradient(top,#F3F3F3,white);
background-color: white;
border-top: 1px solid #AAA;
bottom: 0;
color: #333;
font-size: .833333333333em;
font-family: Arial Narrow;
height: 12px;
padding: 5px 0;
position: fixed;
right: 0;
text-align: left;
width: 100%;
z-index: 5;
}
Obviously you can change the relevant bits, and then of course in my case I just have the following HTML:
<span class="footer-bar">Some text in the footer/status bar that stays there even when you scroll</span>
So there you are - thanks to all the others and of course the guys who originally created it.. CSS is still a bit of a mystery in some cases to me!
You want position: fixed on the element. No JavaScript.
Fixed positioning makes the element relevant to the viewport.
How do I go about changing the css of an iframe scrollbar?
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll.
By the way, My browser is Google Chrome.
This is the css to change the scrollbars in iframes in chrome
body {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}
You can make it by getting scrollbar element in the frame, for example use jquery:
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.
You can't style a scrollbar (other then to turn it on and off) with CSS at all.
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
Chrome provides no mechanism to do this.
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".
A better solution would probably be to "Not cram so much information into so little space".