Thanks for any help you can offer me/point me in the write direction.
I am not sure how to explain what is happening.
I current have a page with an image background (the image is 4044,2160 so it is larger than you would view on a single screen (normally)).
Currently when the page loads, the image is top-centered and is not on repeat and thus fills the background completely.
However when inserting html code (CRUD) via javascript, etc. with the resulting page becoming larger than the original in the y direction, the background stops and does not fill the space below.
http://postimg.org/image/jqzx0vuzr/
I am not sure what to do to fix it and most likely think it is a css problem.
Below is code:
HTML
<section id="index" class="index clinic">
<div id="x_container">
Javascript insertion of code
</div>
</section>
CSS
.clinic{
width:100%;
position:relative;
background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
height: 100%;
padding: 0;
}
#index.index {
padding:15% 0 0 0;
}
#xcrud_container{
width: 90%;
margin: 0 auto;
}
It seems that the javascript does not matter as to what is inserted, (have tried lorem ipsum, etc.)
But just to expand on what is inserted, the size of the x_container changes based on a state and this is altered by javascript. (Thus page is not reloaded and background size recalculated)
I have currently tried a clearfix solution (but to no avail) as well as attempting repeat-y on the background image.
Lastly I have attempted to manually create the page through directly saving the html code (i.e. it is not inserted by anything and is apart of the html code of the page) to the page and attempting to see if the background expands. It does not. The background fills the initial view area, however as soon as you scroll down the page, the white area reappears.
Just to make sure this is known the background image is larger than area viewed, thus the white area should not be present.
Any help would be greatly appreciated, as I have been at this for a few days...
Thanks
Change % to Pixels as for example.
.index{
height:1000px;
padding: 0;
}
Thanks for you help guys,
Through the comments and answer I have been able to figure out my own stupidity in trying to force a tag to define the background of the page rather than using body. i.e. .
The reason for my defining it as a section tag is due to its use on previous pages where the was followed by another section and thus the white space area would not be a problem. (Also is the reasoning for the height:100%;, as I had to define the height of the section as being 100% in order to fully create the image within the section.
Thanks again.
Related
Here's the look:
[]
I did the page in ReactJS, but I've made a copy of the page here.
To better show the white space, here's the screenshot:
several interesting observations:
when the page is first loaded, there's no such issue.
the issue only appear, when the second image box (the one with 100% bar there) added into DOM
screen.width = 375
$('html').width() = 375, also
I don't know how and why the white space appeared, nor can I find any element having width > 375. (I didn't check through all element though)
$('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) would give me no output
I try to do inspect on that white area, cannot. It would imply show me the body
this issue appear both on web and on mobile
this issue doesn't appear for the code in codepen I've shown above, although that code is an exact copy of the HTML generated (I copied directly from Chrome Inspector), with all the javascript removed
Any idea on: 1) why the white space appeared? 2) how could I solve the issue?
PS: just in case if you missed the part I put link to CodePen, Here it is again.
Update 2: I have this input box which I'm placing outside the page:
<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">
Corresponding style:
.review-add-form form .uploader .attache-upload-area .attache-upload-button {
position: fixed;
top: -1000px;
}
I inspected the DOM with chrome inspector, and i saw that the <svg class="bar"> is exceeding in width. I tried to set a overflow: hidden to the containing element, .progress-bar-circle and the whitespace disappeared
Add this to the CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Faced this issue multiple times and in my case, it's generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements, etc.
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
My question has three parts
Part 1: To show an animated image caption for a image (this part is done as in the example row one http://jsfiddle.net/JBnbG/32/ )
Part 2: Show center part of youtube hqdefault.jpg thumbnail image in a div of 150x150 dimension (This part is also done as second row in the example)
Part 3: I want to integrate the part 1 & part 2 features in to part 3. problem is that caption works but the image is not alined in center as show in second row of the example.
Example is in http://jsfiddle.net/JBnbG/32/
I cant change structure otherwise it wont work caption part work properly
I would appreciate if some can help to fix the issue with keeping the HTML structure intact
I guess my question is, are you loading the example html dynamically from youtube, or just the images?
If the html is yours, it's a simple styling adjustment.
I forked it on jsfiddle , I think this is what you mean.
Not quite sure what happened to the styling, but I set the image
id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"
or, another way is:
left:-25px; position:relative;
Which btw, all these styles should be declared as a class in you stylesheet.
If you're loading the html dynamically, I commented out the javascript that achieves the same thing.
Depending on what you're working with, if using php, you might want to get a script that will auto crop to the appropriate size. Timthumb.php is the most notable one, although there's a security issue that will never be fully bulletproof, although pretty solid as is.
Cheers!
Check this working code: http://jsfiddle.net/surendraVsingh/JBnbG/39/
Changes to be done in CSS:
.VideoContainer > span {
display: block;
}
.VideoContainer > span > img {
display: inline-block;
margin-left: -60px;
margin-top: -25px;
}
I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/
There were 2 other threads on Stackoverflow of people having this issue. Neither applied to me. One was something about javascript. I disabled javascript on my browser, still did this.
The other was adsense banners, and I don't have any on this page.
Can someone give me an idea why this is loading to the right, and then centering when the page is fully loaded?
Thanks!
http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13
It's because your width on the tables is set to 100% with two of the columns with the * to determine the padding. the * character tells the table to determine the width remaining and fill it with the table. So what happens is the browser renders the first * less the fixed width of the center column. It doesn't even render the third column until after the centering occurs. You can see this with firebug and stop the load when it is still aligned to the right.
<div class="SiteBody">
<table width="100%">
<tbody>
<tr>
<td width="*"></td>
<td width="1062"></td>
<td width="*"></td>
</tr>
</tbody>
</table>
</div>
I will say this once because so many will probably jump on this. You shouldn't use Tables to setup layout it's bad practice and it can give you problems like what you are seeing. That said, my conscience is clear.
You could remove the the first and third TD's, remove the Width 100% and set the background in the parent container. In my opinion this would be the best way to handle it. Set the margin to 0, auto and that should give you everything you are wanting.
<div class="SiteBody">
<div class="SiteMiddle">//site content</div>
</div>
<style>
.SiteBody { background: transparent url(image of background) }
.SiteMiddle { width:1062px; margin: 0, auto; }
</style>
OR This is probably the best way as it layers the divs and allows you to set the backgrounds for left and right and still set a centered content with the correct width
<div class="SiteBody">
<div class="SiteLeft">
<div class="SiteRight">
<div class="SiteMiddle">//site content</div>
</div>
</div>
</div>
<style>
.SiteBody { }
.SiteLeft { background: transparent url(image of left background) no-repeat left top; }
.SiteRight { background: transparent url(image of left background) no-repeat right top; }
.SiteMiddle { margin: 0, auto; width: 1062px; }
</style>
Don't use tables for layout.
They cause the page to be rendered more slowly, and may cause very late adjustments. I'm sure you've noticed this ;)
The site design doesn't look very complex. I would advise you to remake it without the use of tables as layout (the tables for the playlists are fine of course).
Hm, it's difficult to say, but this may be because of the right box with "position:absolute"
Maybe you should get rid of the table centering your main content, so as not to confuse your browser about the positon of every element on the page.
Try this one for HTML:
<div class="SiteBody">
<!-- remove table stuff here -->
<div class="container">
<!-- Your content -->
</div>
<!-- remove table stuff here -->
</div>
with this CSS:
.SiteBody {text-align:center;}
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}
I'm guessing it's Cufon - which replaces your fonts after the dom is loaded. Can you replace Cufon and see if you still have this issue?
If that doesn't can you put up a test version of your page with all the script tags removed?
Don't use TABLES for layouts. If you use TABLES, use fixed width cells.
Move JS script tag to the end of HTML code.
Try to disable one by one the JS scripts and see what's happening.
Monitor your HTML rendering in real-time with Firebug.
After analysis of your site, below are my comments:-
Page total weight is of 2736.6 Kbytes (Which is high)
CSSImages weight is 986 Kbytes
JS files weight is 623.2 Kbytes
If you can use caching on server for CSS & JS files then page load will reduce
As CBRRacer mentioned, you should handle that too
I stripped all the javascript, cufon, absolute divs, etc from the site here
http://www.halotracker.com/Test/Halo%20%20Reach%20Challenges.htm
The only thing left is the tables. And I've seen the tables work before. I've always used tables and this problem randomly started. Anyway, cant figure it out, none of the answers given to me were complete.
Enjoy my reputation points CBRacer.