Change background based on time and scale to browser window - javascript

So I'm looking to change the background of my webpage based on time. That is, one image for day and one image for night. There is a really good post I found on this site that works perfectly but I need it to do one more thing, scale the image with the browser window and not scroll with the page.
The code I found for changing the background is
</body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if(5 < currentTime && currentTime < 18){
if (document.body) {
document.body.background = 'images/bg-day.png';
}
} else {
if (document.body) {
document.body.background = 'images/bg-night.png';
}
}
</script>
</html>
but I would like the images to scale with the browser window and stay fixed when scrolling so just my content scrolls.
like this
http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php
At the moment I've got the full page background working fine but I would like it to change at night.
If someone could figure this out I would be forever in your debt.
Thanks

In your example page, you'll see that they put the background image in a div named bg and not document.body.background as in your time script. They then then set that div's css in the style tag at the top of the source. (Right-click and "View Source".)
So if you want to mimic your example, create a div in your body like so:
<body>
<div id="bg">
<img id="my-bg-image" src="images/bg-day.png" alt="">
</div>
</body>
Then make sure that div has the scaling CSS that you want. A good place to start is, again, the example page:
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
And then, using a little jQuery magic (simply to make it easier), modify your time if statement to something like this:
if(5 < currentTime && currentTime < 18){
$('#my-bg-image').attr('src', 'images/bg-day.png');
} else {
$('#my-bg-image').attr('src', 'images/bg-night.png');
}
Don't forget to include jQuery if you decide to use it.

Just set the background to fixed, that has nothing to do with javascript.Add this to your CSS styling:
body {
background-attachment: fixed;
}

Related

Using JavaScript so that background image always stays the same when scrolling (plus other inquiries)

I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/50/
I would like to insert a menu on the left side which will scroll down to different sections of the webpage which I will later add. I want the background map image to always stay in the same position when scrolling. I would like to make a section in the menu called "Portfolio" which will scroll down to different PNG images which I will insert. I would like for the user to be able to click on a PNG image and a new tab will open so that the user can better see the image.
I would also like my logo.png image to be displayed on the top-right hand corner of the page and be visible whenever the user scrolls up and down. (The logo cannot be currently displayed in the link because it is saved in my computer).
HTML:
<p class="text">text</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
.text{
color:white;
z-index:999;
position:fixed;
bottom: 10px;
right: 5px;
left:60%;
font-size:25px;}
</style>
JavaScript:
$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
You can easily apply your image as background image and fix it.
Example CSS:
body {
background-image: url('your_image.jpg');
background-attachment: fixed;
}
It will stay fixed but the page's contents will scroll like normal above that background image.
To put the logo in the top right corner and make it stay, you need to give it a position: fixed and the place it in the corner (with html or top/left/margins in css). You may also want to give it a higher z-index to ensure it stays on top. I would provide code example but I'm on my mobile right now.
Now that I'm back, here is some sample code to get you started.
#logo {
position: fixed;
right: 0;
top: 0;
z-index: 10;
}
Please see #Mischback's answer for CSS background-image.
Please see the very useful fancyBox.js utility with regard to your image inquery.
The fancyBox jQuery pluggin makes image manipulation and viewing Super Easy.
I will let someone else anwer how to fix/lock a logo to the top of the screen when scrolling.
I agree with Mischback but I would actually put the image in its own instead of the body.
HTML
<div id="image"></div>
CSS
#image {
background-image: url('image.jpg');
background-attachment: fixed;
}

Change background with setInterval

I want to have the background image of a page change every 5 seconds. There are 5 images and I want them to loop.
I researched thoroughly here and tried different approaches. Can someone please tell me what is wrong with this code:
In my css I have:
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
background-image:url('images/indexbg01.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
}
and my javascript I have:
var imageArray = ['images/indexbg02.jpg', 'images/indexbg03.jpg',
'images/indexbg04.jpg', 'images/indexbg05.jpg',
'images/indexbg01.jpg'];
var imageIndex = 0;
function changeBgImage(){
var imageUrl = "url('" + imageArray[imageIndex] + "')";
$('body').css('background-image', imageUrl);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
setInterval(changeBgImage, 5000);
I first had the imageUrl variable built in the line that follows, but I added this so I could check it was built ok.
In the chrome debugger, when I put a breakpoint on the line following the imageUrl build line, it stops nicely every 5 seconds, the imageUrl is built as it should, yet the background does not change.
I edited the fiddle: http://jsfiddle.net/5Cv49/1/.
Enter and see. The only markup there is the:
<div id="wrapper"></div>
The only css modified is:
adding #wrapper to the selector.
See how background is overlapped by #wrapper's background.
Works in the fiddle.It means you need to run script after page load like the fiddle does:
$(window).load(function(){
//your script
});
Working fiddle
One approach that I personally have done in the past is to have a full page slideshow using jQuery. there are a number of versions of slideshow you can use from the internet. There are 100s of them some better than others. In the slideshow have it times to change every 5 seconds like you wanted. in your html wrap the slideshow in a div (#slideshow_background for example). wrap the rest of your html page into another wrapper (#content). in your CSS set the following..
#slideshow_background {
margin:0;
padding: 0;
position : initial;
width: 100%;
height:100%;
}
the put the css for your #content and set the z-index to 1 so that it lies above the slideshow.hope this helps

Hiding an element with hide() causes a page "jump"

I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).
However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.
Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)
A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)
The code in question:
function UpdateTableHeaders() {
var menu = $(".main_nav_menu"),
offset_top = menu.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > (offset_top + menu.height()))
{
$(".clone").addClass("floating_header");
$(".big_logo").hide();
}
}
$(window).scroll(function(){
UpdateTableHeaders();
});
You can try this ,
Add a new style
<style>
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
</style>
And change your JS to
$(".big_logo").addClass('hide');
Instead of
$(".big_logo").hide();
Use visibility:hidden then
$(".big_logo").css('visibility','hidden');
Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)
body{
margin:0;
padding:0;
width:100%;
}

CSS :hover works only when mouse moves

I created a very basic sample:
HTML
<div id="bla"></div>
CSS
#bla {
width:400px;
height:400px;
background-color:green;
display:none;
}
#bla:hover{
background-color:red;
}
As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.
This JavaScript unhides it after 2 seconds
setTimeout(function() {
document.getElementById('bla').style.display="block";
},2000)
But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.
Here's a demo. Run it and immediately place mouse over result pane.
Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?
While you can use opacity, #BrianPhillips mentioned, it doesn't work in IE 8. I don't know of a pure CSS solution, but here's a concise enough Javascript workaround:
window.onmousemove=function(event){
ev = event || window.event;
if (event.pageX <= 400 && event.pageY <= 400){
document.getElementById('bla').style.backgroundColor= "red";
} else {
document.getElementById('bla').style.backgroundColor= "green";
}
}
setTimeout(function() {
document.getElementById('bla').style.display="block";
},2000)
Demo
When you set display to none the image takes up no space meaining there is nowhere to hover over.
I would set the background-image in you css to rgba(0 0 0 0); making it invisible but still in the dom. You can then change your javascript to
setTimeout(function() {
document.getElementById('bla').style.backgroundColor="green";
},2000);
http://jsfiddle.net/euT7k/3
You could try using CSS opacity along with setting it to position: absolute to prevent it from taking up flow on the page. This appears to work properly:
CSS:
#bla {
width:400px;
height:400px;
background-color:green;
opacity: 0;
position: absolute;
}
JS:
setTimeout(function() {
document.getElementById('bla').style.opacity="1";
document.getElementById('bla').style.position="relative";
},2000)
Demo
The key here is that elements with opacity respond to events (click, hover, etc), while elements with visibility: hidden and display:none do not. (source)
Note that opacity isn't available in IE 8 and below.

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:
I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo
Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.
You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html
Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

Categories

Resources