I have (Joomla) a web page with the following elements;
<section id="sp-top-bar">
<!-- html content -->
</section>
<section id="sp-footer">
<!-- html content -->
</section>
The #sp-top-bar is styled via custom.css - with a background-color: blue.
The #sp-footer is styled via template.css - with a background-color: green.
I am using jquery to force the #sp-top-bar to use the same background colour as is set for #sp-footer in the template.css file. (I know there are others ways to set the colour but I'm experimenting with jquery so please bear with me!).
This is my jquery code, which works.
jQuery(function ($) {
var brand = $('#sp-footer');
var bg = brand.css('background-color');
$("#sp-top-bar").css({
backgroundColor: bg
})
});
My jquery code is in the <head> of the document, after my template.css file.
When my page loads, the #sp-top-bar initially flashes blue for a split second, then successfully changes to the #sp-footer green.
I've had a look at the source code and my template.css file is loading before my jquery code - presumably this is the issue?
Is there anything I can do to avoid this initial background colour flash in the #sp-top-bar?
Thanks
You could try hiding the top-bar until everything's been loaded
CSS
#sp-top-bar {
display: hidden
}
JS
$("#sp-top-bar").css({
backgroundColor: bg,
display: 'block'
})
in jQuery you can set the background color like this:
$("#sp-top-bar").css('background-color','#f6f6f6');
(I used an imaginary shade of grey f6f6f6)
Hope that helps you.
Try this
$("#sp-top-bar").hide();
$(document).ready(function(){
var brand = $('#sp-footer');
var bg = brand.css('background-color');
$("#sp-top-bar").css({
backgroundColor: bg,
display: 'block'
})
});
Using JQuery for this one is kinda hard, since the JQuery has to wait for the DOM element to be loaded into the page before it can change it. So you'll usually have the flash effect because the header will use the default style from the css.
In css you could just overwrite the default style before the header is rendered.
But if it has to be JQuery, something like the hide trick described below might work. Or you could insert an absolutely positioned header in the right color completely overlapping the header and remove it again after the page has loaded.
But that's alot of work to replicate one line of css.
Edit:
Another angle is loading the css with ajax after the page has loaded, but then nothing will be styled, which might be worse than flashing.
You could also show a fully blank page until all scripts have ran, but this also isn't perfect, since it comes across as being a 'slowloading' page.
Related
Trying to replicate the pre-loader page on load the SVG and a background image appears and as soon as the user scrolls the page scrolls to the content and the page-loader is not visible or can be reached again unless you refresh the page, not sure how to tackle this, any help to point me in the right direction would be great- I have tried diseminating the said page.
there are a few ways to accomplish this, a simple starting point could be something like this:
basic html outline:
<div id="loader">
LOADING Image/content
</div>
<div id="body">
website body
</div>
CSS
#body{display:none;}
jQuery
$(document).ready(function(){
$("#loader").hide();
$("#body").show();
});
noscript fallback
<noscript>
<style>#loader{display:none;}#body{display:block !important;}</style>
</noscript>
Basically, this code has two divs the loader and the body, the body is set as display none in the CSS. When the page is ready, jquery is triggered to hide the loader and show the body.
The noscript fall back will set body to visible when javascript is disabled.
There are multiple ways to accomplish, this is just one idea.
Out of one of a hundred different ways, my initial thoughts were along these lines:
Wrap your main content in a wrapper with position relative and give it an offset from the top by 100% of the window width
Make the page-loader 100% height and width and position fixed
Offset the wrapper before the page is fully loaded, and then just transition it to 0 offset once the page had loaded
See a working jsfiddle here
Create an element (Div) that covers the whole screen.
Behind it (smaller z-index) add a Div container that holds all the images.
Add in JavaScript a load event function to all images:
image.onload = function() {
//image was loaded
}
Hide the cover Div when all images was loaded.
How to know when all images were loaded? add a counter or use a Promise.
Add overflow: none to disable scrolling, and add click event or scroll event (using jQuery) and set overflow to auto.
There are a lot of ways to implement each of these sections.
I'm working on a Wordpress theme for my blog and I have a kind of overlay-container. If you klick on a button it slides in from the top and pushes the whole page down.
I use jQuery for it, with this little code:
$(document).ready(function () {
// variables
var overlay = $('#layout-overlay'); // Overlay ID
// hide overlay-container
overlay.css({
display: 'block',
marginTop: -overlay.height()
});
...and more code...
As you can see, I just hide the container by assigning a negative margin-top depending on height of the container which itself depends on the content.
As long as I put together the layout, everything worked fine. Now that I started to put it into an actual Wordpress theme, the overlay-container is visible on page-load and page-reload on every page it is included. It may be just for some milliseconds, but it is clearly noticeable. It is there for the blink of an eye and then it is gone as it is supposed to be from the very beginning.
Any ideas how I can retime the whole thing?
I put the JS in the <head> tag and I made sure it is the first code to be fired.
If you want to get rid of the glitch, first set the overlay's regular CSS to display: none. If the problem occurs, try displaying it after the page is fully loaded using load.
Bit more about ready vs load:
jQuery - What are differences between $(document).ready and $(window).load?
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO
I need some help on the topic: as i am printing the webpage it prints all well but not the background images, so my page breaks up at some places.Please suggest.
Regards
Jos
In your print stylesheet you should use something along the lines of:
.background {
display: list-item;
list-style-image: url(image.gif);
list-style-position: inside;
}
Please note that you can't use image sprites and more advanced background positioning this way and you need to do it for every image.
I just came across the same issue. My header background image wasn't printing on single post articles, leaving a big white gap at the head of the page where the header image would normally show. So to fix this, I added the background image via HTML directly on the page - which your users browser will print by default. Below is a basic example of how to achieve this:
1, Create a blank style sheet and name it print.css. Now add this style sheet to your page header, and make sure media="print". We need this in order to tell the browser which elements we want and don't want to print:
<link rel="stylesheet" href="pathtoyour/css/print.css" type="text/css" media="print" />
2, Add the image you want printed to your page and make sure it has an ID so we can style it within the print.css and your main style sheet:
<div id="header">
<img id="print-image" src="pathtotheimageyouwanttoprint.jpg"/></div>
</div>
3, In your main style sheet, add your image ID so we can tell browsers to stop the image from showing during normal viewing of your page:
#print-image {display:none}
4, In your print.css style sheet, because we've told your image to not display in your main style sheet, we need to now make sure that your image prints and doesn't remain hidden. Add the following to achieve this:
#print-image {display:block;}
You're done. Test and adjust styling to suit.
Doing this also allows you to fully customise the way your page is printed, for example - when printing, you now have the ability to hide your print button, menu items etc. and can code in any styling as per normal.
Hope this helps.
Try using David Aragon's Javascript
function replaceSprite(selector){
if ($.browser.msie == true) {
var back_x = $(selector).css('background-position-x'),
back_y = $(selector).css('background-position-y'),
back_position = back_x+" "+back_y;
} else {
var back_position = $(selector).css('background-position');
}
var back_image = $(selector).css('background-image'),
width = $(selector).width(),
height = $(selector).height(),
index1 = back_image.indexOf('http'),
index2 = back_image.indexOf('.png');
back_position = back_position.split(" ");
back_image = back_image.substring(index1, (index2+4));
$(selector)
.append('<img src="'+back_image+'"/>')
.css('width',width)
.css('height',height)
.css('overflow','hidden');
$(selector).find('img')
.css('margin-left',back_position[0])
.css('margin-top',back_position[1]);
}
http://quickleft.com/blog/printing-css-sprites
This is a user setting in the browser. By default some browsers won't print background images.
The user may choose to print background images also, but you can't force this with code or markup.
I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.
Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.
All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).
Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide() my entire body while the background image loads.
*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded? *
* EDIT 2 *
Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?
<script>
$(function() {
// create a dummy image
var img = new Image();
// give it a single load handler
$(img).one('load',function() {
$('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
});
// declare background image source
img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";
// make sure if fires in case it was cached
if( img.complete )
$(img).load();
});
</script>
This seems an old thread but I found a solution for this.
Hope it can help:
$(window).load(function(){
$('<img/>').attr('src', 'images/imgsrc.png').load(function() {
$('#loading').fadeOut(500);
$('#wrapper').fadeIn(200);
});
});
Use $(document).load() to achieve what you want.
"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"
It is, just before the page has loaded
Add display: none; to your body tag
<body style="display: none">
Then with jQuery modify your code so it looks like this:
$(img).load(function(){
$("body").show();
});
Now page content will only show after img loading is complete.
To check when the image is loaded, declare another, "regular" image (i.e. the <img> tag) with the same src and attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.
Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.