|
JavaScript - Set Background Image According To Screen Res
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! Similar TutorialsHey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
Hi Everyone, I have just inherited a website which has a javascript menu tab and picture fader on the home page. This moves through 6 states changing a menu tab and main picture beneath to make it look like you're flicking through the menu yourself. This works perfectly, apart from the fact that every time the picture changes the page flicks back to the top. Very annoying if you have scrolled down are reading things at the bottom of the page!! The page uses jquery-1.2.3.pack.js. I am a PHP man just starting to learn Javascript and don't understand why it is doing this, can anyone help ??? The Relevant Code is: Code: <script>
var scurrent_tab='tab1';
var scurrent_click_tab='';
var arTabsMain = new Array
(
"tab1",
"tab2",
"tab3",
"tab4",
"tab5",
"tab6",
"bottomtab"
);
function ChangeMainPictureClick(s)
{
bStopAutoLoad = true;
ChangeMainPicture(s);
}
function ChangeMainPicture(s)
{
scurrent_click_tab = s;
$("#tabs_content_container").fadeOut("slow",
function()
{
$("#tabs_content_container").html($('#tabs_content_container_'+scurrent_click_tab).html()).fadeIn("slow");
}
);
$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');
$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');
$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');
$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');
$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');
$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');
$('#main_tab_'+s+'_img').attr('src','images/tab_'+s+'_on.jpg');
scurrent_tab = s;
}
$('#main_tab_tab1').hover
(
function(){$('#main_tab_tab1_img').attr('src','images/tab_tab1_on.jpg');},
function(){if(scurrent_tab=='tab1')return;$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');}
);
$('#main_tab_tab2').hover
(
function(){$('#main_tab_tab2_img').attr('src','images/tab_tab2_on.jpg');},
function(){if(scurrent_tab=='tab2')return;$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');}
);
$('#main_tab_tab4').hover
(
function(){$('#main_tab_tab4_img').attr('src','images/tab_tab4_on.jpg');},
function(){if(scurrent_tab=='tab4')return;$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');}
);
$('#main_tab_tab3').hover
(
function(){$('#main_tab_tab3_img').attr('src','images/tab_tab3_on.jpg');},
function(){if(scurrent_tab=='tab3')return;$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');}
);
$('#main_tab_tab6').hover
(
function(){$('#main_tab_tab6_img').attr('src','images/tab_tab6_on.jpg');},
function(){if(scurrent_tab=='tab6')return;$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');}
);
$('#main_tab_tab5').hover
(
function(){$('#main_tab_tab5_img').attr('src','images/tab_tab5_on.jpg');},
function(){if(scurrent_tab=='tab5')return;$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');}
);
function AutoLoadTopic()
{
if(bStopAutoLoad)
{
window.setTimeout(function() {AutoLoadTopic();}, 8000);
return true;
}
iCurrentSlide++;
if(iCurrentSlide >= arTabsMain.length-1)
iCurrentSlide = 0;
ChangeMainPicture(arTabsMain[iCurrentSlide]);
window.setTimeout(function() {AutoLoadTopic();}, 8000);
}
var bStopAutoLoad = false;
var iCurrentSlide = 0;
window.setTimeout(function() {AutoLoadTopic();}, 8000);
</script>
// ######
<script>
$('#button_start_bottomtab').hover
(
function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic_on.gif');},
function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic.gif');}
);
</script>
The code 'works' as in there are no issues in its functionality, I just want it work in a better way. Any help or ideas would be greatly appreciated. Hi, I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript. Where can I find a sample with code? Thanks Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles 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 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!) 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 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. 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 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); } Im going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work! Heres what i got in my 'name.js' file i got var name=new Array() name='name.jpg' and in my HTML i got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div> <table> <script type="text/javascript" language="JavaScript" src="name.js"> document.write('<td id="name2" background="' + name + '">'); </script> </td> </table> </div> </body> </html> Where have a gone wrong?? If I type Hello World into the name.js file and put it in a tb it works fine, im confused thanks, Paul 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 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()"> 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>
Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance! Web Page Code Code: <html> <head> <title>slayeroffice | code | image cross fade redux</title> <link rel="stylesheet" type="text/css" href="xfade2_o.css"> <script type="text/javascript" src="xfade2.js"></script> </head> </div> <body background="id=imageContainer"> <div id="imageContainer"> <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg"> </div> </body> </html> Style Sheet 1 Code: #imageContainer {
height:309px;
}
#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}
Style Sheet 2 Code: #imageContainer {
position:relative;
margin:auto;
width:500px;
border:1px solid #000;
}
JavaScript Code: window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
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 am creating a website and there is an option for the user (after he login to the website, he enters into his workspace page)to upload a background image of his choice to his workspace page. Can the user dynamically upload a background image to his webpage? Can this be done in javascript/php? I would be glad if somebody could help me. I am wondering if it would be possible to add a Cookie to this code i found, i am wanting the browser to remember the chosen background image and save it when the user closes the browser. Currently when the option is selected it does not remember the choice when you then go back to the page, any help on this would be much appreciated! Many Thanks Code: <script type="text/javascript">
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
</script>
<body id="shelf"> <select id="themes" onChange="changeTheme()"> <option value="images/background1.jpg">Default</option> <option value="images/background2.jpg">Oriental</option> </select> 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 Hi, I need some help with my code for background image and title rotation! I'd like to get images one, two and three to rotate every one second, and have titles change according to the images. Currently both background and titles are not rotating.. ;-; Code:
<script>
window.onload = rotate;
var adImages = new Array('one.jpg','two.jpg','three.jpg');
var titleImages = new Array('title1','title2,'title3');
var thisAd = 0;
function rotate() {
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("picture1").style.backgroundImage = "url(adImages[thisAd])";
document.getElementById("picture1").title = titleImages[thisAd];
setTimeout("rotate()", 1 * 1000);
}
</script>
And here's my HTML Code: <div id="picture1" style="background-image:url(one.jpg);"></div> And here's my css Code: #picture1{
background-image: url(one.jpg);}
|
|||||||