Link to website:
http://www.ideagang.co/home.php
Is it possible to set the background to black when click from 1 page to another?
Right now the website load perfectly with the black background, it's just that when I navigate from one page to another the page flickr for a second.....
Is there anyway to resolve this by setting the background to black when loading page internally?
Not using only CSS. The browser's default color for the background is white, so the flicker you see is the default coming through for a split second before it has a chance to read the CSS rule to make it black.
The only way I can think of to get around this would be to load the first page, and then switch from page to page via javascript, loading them in to the exiting page. No reloads means no flicker. In my opinion, that is a ton of overhead for very little value, so I would suggest just living with it.
I very much doubt this would be possible with CSS.
Have you tried using
<body background="#000">
It is long deprecated but may help. I think you will still get a white flash but it may be for less time.
You could also try putting a small block of CSS as the first thing in the header after your title.
the html5 method of doing this via CSS is now:
<body style="background-color:#000">
also tried putting this CSS styling as the first thing in the <head> :
<style type="text/css">
body{background-color:#000}
</style>
...but on my application it still resulted in a momentary white flash
While this is a pretty old question, hopefully this can help someone else who stumbles along (like me):
Using some javascript seems to have worked for me (only tested on Firefox 84.0 - Ubuntu):
index.html:
<script src='script.js'></script>
script.js:
onload = function() {
document.body.style.backgroundColor = 'black';
}
I believe the most efficient way to accomplish this is to place the background color in the html tag itself in the main document file. Such that
<html lang="en" style="background-color: #111">
With this you can set any background color you want and it should work.
Related
I'm using a Google Font on my site with the following tag in my index.html page:
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500&display=block" rel="stylesheet">
No matter what I do, the first load of the page results in a flash of changing/appearing text.
I have experimented with changing display to block, swap, etc. But no matter which I pick, there's either a FOUT or FOIT.
I have also tried to use a transition: 1s linear (or similar) on the blocks where text will eventually appear. It doesn't seem to make a difference.
Is there some CSS I can apply that will fade-in the text once the font has fully loaded?
You can try to use the preload feature in your link tag. This tells your browser to load in your files as soon as they're required
<link rel="preload" href="/" type="font/ttf" crossorigin="anonymous" />
Read more about the preload tag here: Source
after ages messing around i came up with this:
add a class in your css file:
.showMe{filter:opacity(1) !important; transition:filter 1720ms ease-in;}
then add a javascript tag at the very end of your document just before the closing body tag.
include in the file
setTimeout(function(){
let h1 = document.getElementsByTagName('h1')[0];
h1.classList.add('showMe');
},88);
Seems to be working for me as i was having the same issue. Can play around with the timing of setTimeout to optimize which is the number at the end(in milliseconds).
You could also add a transition onto this so it fades in more smoothly & also add will-change:auto; or will-change:filter; but i'll let you mess around and see what suits you.
forgot to mention you need to add style="filter:opacity(0);" on the h1 in your html mark-up.
another way might be to use this javascript font observer https://jonsuh.com/blog/font-loading-with-font-events/ which is only a couple of kb in size.
as for pure css as your post suggests i do not know if this is possible until css evolves & becomes more capable.
I just created an Arabic version a website and noticed that Chrome sometimes shows a totally blank page until the window is resized and then everything instantly becomes visible.
Arabic is a RTL language, so the <html> tag has dir="rtl" lang="ar" added to it. This is the only difference between it and the English site.
This is the site. You may have to click the logo a few times in order to see it show blank.
I've noticed this problem too and I searched the internet in English and Arabic but couldn't find the cause of the problem. I found a workaround to fix it though; use the following jQuery script in your rtl-directed webpages:
//Chrome RTL UI Issue Fix
$(document).ready(function(){
$(window).load(function() {
$( "body" ).animate({
scrollTop: 1
});
});
});
All it does is that it scrolls the page by only 1px right after all the page elements have been loaded. You can add a code that scrolls it back if you want.
I fixed this problem and I want to share it with you.I think this problem is only for gc on mac os.
How to fix it?its really easy.
hide you body in your css and then show it when page load and every thing will work.
/*Add this to your css to hide body */
body {
display: none;
}
<!-- Add to your html to js file to show your body again -->
$(window).load(function() {
// When the page has loaded
$("body").show()
});
The link to the page does not work. Is the page available on the futurism site?
I downloaded the futurism.com page and added dir="rtl" lang="ar" to the html tag. I have reloaded the page 50 times. I cannot reproduce the problem.
My copy of the page is running on Apache with Multiviews.
I have added a language directive for Arabic.
I have two copies of the file, futurism.htm.en and futurism.htm.ar
I have set the language in my browser to Arabic [ar].
The Arabic pages is negotiated by Apache.
The page loads without a problem.
I have also created another page with Unicode Arabic letters. It loads and displays the Arabic right-to-left without a problem.
I had the same problem.
Just don't apply direction to the body or html tags.
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<!-- Your Codes Here ... -->
</div>
</body>
</html>
I had a similar problem to yours but my site showed fine until it was manually refreshed on Android phones, after which the page would go blank. This behaviour could also be reproduced in developer tools on Chrome and Opera (both use the Blink engine).
First, I applied a fixed positioning rule to the body,
body { position: fixed; }
Then, I reverted the positioning on page load using jQuery,
jQuery(window).load(function() {
jQuery('body').css('position','static');
});
Wordpress became really annoying when working on RTL, you need to resize or scroll to show content. I think it is only happening on MacOS.
I've noticed that some websites don't have this issue, so comparing the html I noticed that the working websites have many class in the <html>, like: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation...
which added by modernizr.js (v2.8.3)
I added this to my page header, and the blank page issue disappeared:
<script src="/js/modernizr.js"></script>
I am not sure what is going on, but may be it will give some starting point to figure out the real cause of the issue.
I have this issue with my Wordpress and I fixed it by adding this javascript code
window.scrollTo(0, 1);
window.scrollTo(0, 0);
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class