JavaScript - Tb Background Image Slides

Hi all,

I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies

Thanks in advance!!
Kyle

Hello,
I've just finished my website. But my random background images load properly sometimes, and sometimes they load as a half.
Here is my website:
http://www.finnhaverkamp.com/

Here is the relevant HTML:
Code:

<!--open random background script-->
<script  type="text/javascript">

var randnum = Math.random();
var inum = 7;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var images = new Array;
images[1] = "background1.jpg";
images[2] = "background2.jpg";
images[3] = "background3.jpg";
images[4] = "background4.jpg";
images[5] = "background5.jpg";
images[6] = "background6.jpg";
images[7] = "background7.jpg";
var image = images[rand1];


function chBackgr()
{
    document.body.style.backgroundImage = 'url(' + image + ')';
}

onload = chBackgr;
<!--close random background script-->

It's weird. Because my background image is certainly random. It's just that sometimes only half of the image loads. Really strange. Any help is appreciated. Thank You.

I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/#

so far i have recreated the top left and right edges using
Code:

var window_width = $(window).width();
    var window_height = $(document).height();
    var image_height = $("#background").height(); (2914px)
    var image_width = $("#background").width(); (3920px)


    $("#background").draggable({
        scroll: false,
        stop: function (event, ui) {
            var animate_to = {};
            var window_width_resized = $(window).width();

            if (ui.position.left > 0) {
                animate_to.left = '0px';
            }
            if (ui.position.top > 0) {
                animate_to.top = '0px';
            }

            //initial size for width
            var image_width_gap = window_width - (image_width + ui.position.left);
            if (image_width_gap > 0) {
                animate_to.left = (0 - (image_width - window_width)) + 'px';
            }

            //after window gets resized for width
            var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
            if (image_width_gap_resized > 0) {
                animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
            }


$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });

then i am using the same logic to do the bottom edge but it doesnt work any ideas

here is how i thought the bottom would work

Code:

//initial size for height
            var image_height_gap = window_height - (image_height + ui.position.top);
            if (image_height_gap > 0) {
//                animate_to.top = (0 - (image_height - window_height)) + 'px';
            }

help would be greatly appreciated

fixed.. my bg image was infact smaller

How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS.

You can view the HTML page in question he

http://aksdesigns.co.uk/temp/template.html

The DIV container is the one with the ID of #MainContent

Code:

#MainContent {
	width: 980px;
	height: 550px;
	margin: 0 auto;
	padding: 0px;
	background-image: url(images/Content-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	border-left: 2px solid #153365;
	border-right: 1px solid #FFF;
}

It probably couldn't be done using CSS be how could I achieve this with Javascript?

I have a 16x16 solid color yellow image - .gif type. I'm using it as a background for a div. I'd like to make it transparent but can't figure out how to do. I have Paint.net and follow its instructions to make the image 50% transparent but afterwards, it's completely clear with no hint of yellow.

How can I make a transparent solid image? I'd like it about 50% transparent.

Thanks...

PHP Code:
.xstooltip
{
    visibility: hidden; 
    position: absolute; 
    top: 0;  
    left: 0; 
    z-index: 2; 

    font: normal 8pt sans-serif; 
    padding: 3px; 
    border: solid 1px;
    /*background-color: #DBDBDB;*/
    /*background-color: #FFFF77;*/

    background-repeat:repeat;
    background-image:url(/yellow_help.gif); 
} 

Hello,

I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code:


====
<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="../gfx/bgs/bg1.jpg"
bgimages[1]="../gfx/bgs/bg2.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",6000)')

</script>
====


The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate.

How would this be possible?


Thanks a bunch!

-Captainel

I found a great little starfield script made with javascript and canvas3d.
however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script:
http://seb.ly/demos/canvas3d/canvas3d2.html

how do i get a background image in that? or is it impossible?

i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield.

I want to use an image as a CSS background-image so I used the Image constructor to load the image:
Code:

(new Image()).src="http://www.mediafire.com/imgbnc.php/432b35f2cc3340ea03d25128ada294476c92189353679dfb7e9cc9dfde6498f06g.jpg";

but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!)

I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out?

Here is my code in the header:
Code:

<script type="text/javascript">
function getBackground(){
            
                var bgimg = new Array();
                bgimg[0] = "background1";
                bgimg[1] = "background2";
                bgimg[2] = "background3";
                
                var random = Math.floor(Math.random() * bgimg.length);
                var imgurl = bgimg[random];
                document.body.style.backgroundImage = 'url(' + imgurl + ')';
            }
        </script>

body:
Code:

<body onload="getBackground()">

Hi Guys,

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat

else

background = #000000

THANKS A MILLION!

After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly.


Code:

<html>
<title>Welcome :D</title>
<head>

    <style type="text/css">
	body {
		background-color:E6E6E6;	
	}
    </style>
	<script type="text/javascript">
	//Pre loading images to be used with check boxes.
	function preLoad(){
	Eyeball= new Image(400,200)
	Eyeball.src = "Eyeball.jpg"

	Smileys = new Image(400,200)
	Smileys.src = "Smileys.gif"

	goodAfternoon = new Image(400,200)
	goodAfternoon.src = "Good Afternoon.gif"
	
	goodAfternoonFinal = new Image(400,200)
	goodAfternoonFinal.src = "Good Afternoon.gif"
	
	zombies=new Image()
	zombies.src = "Zombies.jpg"
	
	}
	
	function validate(){
		if(document.getElementById("cb1").checked){
		document.goodAfternoon.src=Eyeball.src;
		}else{
		document.goodAfternoon.src=Smileys.src;
		}
	}
	function reset(){
		cb1.checked=false;
		document.goodAfternoon.src=goodAfternoonFinal.src; 
	}
	
	var i=0;
	function myalert(){
		i++
		if(i == 1){
		alert("I dare you to press me again....");
		}
		if(i == 2){
		
		}
		if(i == 3){
		i = 0;
		document.body.background = "zombies.src";
		}
	}
	
</script>
</head>
<body onLoad="javascript:preLoad()">	

This is where I learn a lot of my coding for Java, JavaScript, and HTML
	<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
	
</br>

 "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
 <img src="Good Afternoon.gif" name="goodAfternoon">
 <input type="button" id="cb2" value="RESET" onClick="reset()"/>

	
	</BR></br></br></br></br>
    Hello, thank you for visiting my webpage I hope you like it.

  <input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>

Hello,

Can anyone figure out whats going on with this page and i need to finish the site by this evening? It is a wordpress site. the background image is shifting to the right on IE7 after the page loads on only the homepage. I think its the slider but im not sure

www.grapevineoutreach.org

thanks

Hi,

I have a button with a class name as below:

<input type="button" class="test" value="Add" onclick=Dothis(this);>

class test
{
background-image: url("test.png");
}

I would like to disable the button when clicked
function Dothis (element)
{
element.disabled = 'true';
}

This is working fine (i'm seeing it as disabled(grayedout)) when i wont set any class. But when i set the class to "test" i'm not seeing any change. Can you please let me know how i can resolve this.

Hello all,

I want to set dynamically a div's background image when the page loads, so I have my code like so:

javascript code:

window.onload = init;

function init(){
$(document).ready(function(){
$('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)');
$('#pg1').css('color', 'black');
$('#pg1').css('font-weight', 'normal');
});
}

My CSS stylesheet is like so:

#buttonsWrapper {
position:relative;
margin 50px 0px 0px 0px;
}

.buttons {
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
font-weight:bold;
color:#FFF;
}

#button1 { margin: 31px 0px 0px 0px; }
#button2 { margin: -43px 0px 0px 195px; }
#button3 { margin: -43px 0px 0px 390px; }
#button4 { margin: -43px 0px 0px 585px; }
#button5 { margin: -43px 0px 0px 780px; }

#button1, #button2, #button3, #button4, #button5 {
width:172px;
height:33px; /* 33px */
padding-top:10px;
text-align:center;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
background-image:url(../imagenes/buttonNormal.jpg);
background-repeat:no-repeat;
background-position:top;
}

My HTML sourcecode is like so:

<div id="buttonsWrapper">
<div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div>
<div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div>
<div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div>
<div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div>
<div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div>
</div>

The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong?

Thank you so much in advance...

Hey everyone,

I'm just trying to figure out if it is possible to swap the pages background image when a button is clicked without refreshing the page? I've looked around and can't really find anything helpful.

Any tips or pointers in the right direction would be much appreciated

Thanks

YD