I want to let the user change the background image via a select box:
jquery:
$("#selectOverlay").change(function() {
var theOption = $(this).val();
$("header .inner, .overlayBottom").css("background-image", theOption);
[code]....
Only works in FF. Not chrome, opera, or IE.
I can successfully change the background image using the following:
jQuery(document).ready(function($) {
$("div#largeimage").randombg({
directory: "http://path/to/imgs", //directory to image folder
howmany: 3 //how many images are in this folder
});
});
But, what I want to do is change this ONCE per user session. So instead of change this on every refresh / page load I want to load it once, store that setting in a cookie/session, and not do it again until the next session.
Here's my code (it is fired, and does find the object, but won't change the background image): But it's not the image that's the problme, because even trying to change the background-color doesn't work either.[code]...
View 3 Replies View RelatedI'm using javascript to change the background image of a table field. I've found that it only works correctly in IE. In FF etc, it simply doesn't change.
What I have is:
Head
HTML Code:
function Info(infolink, titlelink){
document.getElementById('Info').src=infolink;
document.getElementById('subTitle').background=titlelink;
[Code]...
EDIT: for some reason it is working now, but i have a new question: how do i change the background to no background?
View 5 Replies View Relatedi 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');
[Code]...
I've been trying to figure out how to change the background image with javascript, and I've tryed a whole bunch of code this being one of them
var imageURL = "/images/content/rotator/IMG_2019.jpg";
document.body.style.backgroundImage = "url(" + imageURL + ")";
or
document.body.style.backgroundImage = "/images/content/rotator/IMG_2019.jpg";
or
document.body.background = "/images/content/rotator/IMG_2019.jpg";
With using the last one I get 'document.body' is null or not an object, but I do have a <body> tag in my page.And if I do
if (document.body){
alert("hello");
}
I dont get anything.How can I get this code to work?
I am using PHP and Javascript to create a user generated page editor. I have everything working except one thing. The user can select the background color of the page using preselected colors. They can also enter in a hexadecimal code to change the color of the background if the color they want isn't one of the preselected ones. These two things work good, but when it comes to them entering in a web address to make an image the background instead of a color, I can't get the background image to change. I have tested it out and when I enter in a predetermined url in the javas source code to test if the pic will display it does, but it doesn't go away after being displayed. So my question is using the code below, how can I get the change the background image using an input box and how can I make it go away when a color is selected instead of an image. Explained below:
[Code]...
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.
<html>
<title>Welcome :D</title>
<head>[code]....
I want javascript to change the background image on hover.
This is my javascript:
function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
[Code]...
I'm having a problem with changing the background image on an element when I use the .hover() and .toggleClass() methods. Here's some code:
First the CSS:
Code:
.down-arrow {
cursor: pointer;
background: #efefef url(images/arrow-down.png) no-repeat 13px 13px;
[Code]....
It seems to work ok(ish) if I use the .css() method and change it directly in the code, but I want to try and keep my styling only in my CSS file and use classes to make the change.
I have found a method which works in FireFox (2 - 3.6) & Mozilla but obviously it is not generic and IE is proving difficult to provide an attribute I can change. This (in essence) is what I am doing. I do have CSS styles and set the background (fixed, repeated) there in a style called body. The one below is an exapmple - I change the URL of the IFRAME contents several times before dumping the filtered table in the innerHTML. This leaves the background as the last one set.
Code:
body{
background-attachment: fixed;
background-image: url(images/gcount.jpg);
[Code]...
I am trying to make a button that would change the background image whenever somebody clicks it.
I have tried something along the lines of this:
Quote:
<input type="button"
value="Pattern1"
onClick="background-image: url(background.png);background-repeat: no-repeat;">
[Code]...
I am trying to make a button that would change the background image whenever somebody clicks it. I have tried something along the lines of this:
<input type="button"
value="Pattern1"
onClick="background-image: url(background.png);background-repeat: no-repeat;">
and,
<input type="button"
value="Pattern2"
onClick="background: url(background.png);background-repeat: no-repeat;">
as you can see, I am a beginner at coding in general. My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong.
I want to change the background of my main div depending on the time of day. Right now this code works for two time of day, day and night but it only works on the "body" tag not on a div. How would i modify it to change a div background rather then the "body" background
[Code]...
I have function:
function blabla(){
$("#div").css("background-image", "url(img/new.png)");
}
[code]....
I have a small script that changes the background color of my page from white to grey when the user clicks a button.at the moment it works fine accept for when the user tries to navigate to another page (on my website) after changing the background color.if a user changes the background color to grey and than tries to view another page, the background color becomes white again.is there any way to make the change only controlled by the button?my head code looks like this (at least the relevant parts):
View 8 Replies View RelatedThis only works 1 time. the second time the value isthe same as the first time.
$(function()
{
<!--------1.1------------->
[code]....
I have a container <div> with a link inside of it. What I need to do is change the background of the <div> and the color of the link text at the same time.I can change the color of the link when I hover over it, but not when I hover over the <div>I have columns of links and each column is the width of the longest link so there are some links with "space" to the right of the link. When that "space" is hovered over the background of the div changes but not the color of the link text.The menulinkbox is the container and there are, for example, 4 columns with 4 rows in each column. When I hover over a column + row I want the menulinkbox's background to change *and* the color of the <a> text to change.
View 4 Replies View RelatedCode within my <HEAD> Tags;
<script language="JavaScript">
<!-- Activate cloaking device
var randnum = Math.random();[code]....
Now, this works fine with every manual refresh of the page and I can obviously get it to work with a <META> refresh, but I would like to do achieve this without resorting to this crude method.Note that I have additional code to stretch the image to the client browser resolution.I found this topic which look svery similar to what I want but doesn't have any code for the background image scaling ... http:[url]....
In the code below I have eight div's belonging to a class "mainmenu". There is styling for said class "mainmenu" in the header and that is what I would like to modify with my jQuery. What I am trying to do is set jQuery up to monitor each div for the onhover event and change the "background:" property for each div that is being hovered. I have a good book on jQuery but I don't really see this type of situation being covered. Is this possible to do?
[Code]...
I am trying to do the following.
While the background color of a div is changing when i click on a button, the image in the other div must change.
Now i have placed a bg image in a div and when i click on my menu link it changes so that works, but i would love to give it a transition, but is that even possible with the background image.
Or do i need to write some other code?
The colors and images change, but really would love a bounce in transition, cant figure it out though maybe it would be better with a list and placing the images just in the slider div?
I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code I created is the following it's not working for some reason.
html:
<div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3> </h3>
<p> </p>
</a>
</div>
javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css:
#service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens.
2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page.
$(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();[code].....
I have a button class within the html called mygallery_pause_resume and i need to split it into two classes using Javascript (_mypause, _myresume) where I can assign different backgrounds to the buttons.I have an array that activates in an onclick event so that the buttons labels change to play/pause. I have included the code from the template below,
<script type="text/javascript">
stepcarousel.stopautostep = function(config){
clearTimeout(config.steptimer);[code]....
I am totally new to jquery but have had a bit of experience at other languages. I was just trying to make a front page with a changing background and a nice menu. Havent a clue where to start. Do i use dreamweaver etc.
View 2 Replies View Related