I have this script: This script changes an image every time the user refresh the page, and it works fine. However, my problem is that I want it to output to a specific DIV ID, and for the life of me I have thus far been unable to figure out how to do this. I have tried various methods with document.getElementById('div id') functions, but so far without any luck. I could, of course, run the script from within the DIV, and that should work I believe. However, this is not an option in this case, and as such I need to be able to run the script outside the target DIV, but have it output to a specified DIV. Edit: I have now been driven well on the way towards insanity; my hair is falling out in large lumps and the parts of it that are still attached to my skull are turning grey by the seconds - not to mention the copious amounts of dandruff covering my desk like a five inch layer of snow. Needless to say this is really bugging me; and to make matters worse I do believe the script can be made to work with a simple document.getElementById('div-id') function (I might be wrong of course), but I have not been successful so far. Googling the problem and scouring the w3schools website has yielded nothing apart from more references to the getElementById function. I really need help with this, and I fear it is dreadfully ... nay, embarrassingly simple. Any advice is appreciated.
Not really woken up yet, but have you tried something like document.getElementById('div id').innerHTML = '<img src="'+theImages[whichImage]+'">'? Is it actually finding the div at all?
Not really woken up yet, and already at the bit-tech forums? Now, that's commitment. I have not tried that particular variety, so I will do so promptly. It seems to find the DIV, just not output to it. If I add a line to change certain parameters on the DIV, those go through. I will try your suggestion. Thanks for the input, it is much appreciated.
I am a javascript novice - obviously, but I am learning a great deal every day. The script I'm using now has grown more complex since I first required help with this particular portion, and now I am here again. The problem is not the picture change itself as that part is working flawlessly, however what I need now is to have the pictures displayed as background in the specified div. How would I go about making this happen? I've tried this line (amongst others): document.getElementById('curve5').style.background = '+theImages[whichImage]+'" orgurl="'+theImages[whichImage]+'"'
Code: document.getElementById('curve5').style.backgroundImage='url(' + theImages[whichImage] + ')'; ? http://w3schools.com/htmldom/prop_style_backgroundimage.asp may help - that's where I was looking to come up with the above. FWIW I use jQuery for almost everything just because it makes a hell of a lot more sense syntactically ($("#curve5").css('backgroundImage', 'url('+varWithPath+')');) since it uses CSS selectors and all of that good stuff.
I've been looking into JQuery, but to my eyes it seems a lot more confusing than javascript. We'll see, but for now I'll stick with js I think - particularly since I need these pages done by 1. november. Anyhow, the code did not work, and I've tried several variations of it. Thanks for the input though.
I've also tried doing this: var toppDiv = document.getElementById("curve5"); toppDiv.style.background="url('+theImages[whichImage]+')"; But still no luck. The thing is, I need this to be background because the images are to sit in a div with rounded corners, and thus if I simply insert the images I get clipping problems. But, when set as background the images adapt to the container. Another way of doing this, I suppose, would be to round the corners of the images as well. However, I'd prefer to have the images simply set to background and thus have no more hassle. The quest continues, and unfortunately for me I do not personally know of any javascript gurus. By the way. Me being a js novice, and trying hard to learn this quickly, find myself wondering; how do you know when to use " instead of ' and vice versa? And one last question (something I'm working on at the moment whilst awaiting an epiphany with regards to the background images issue); is there a way of displaying select content from an external page in a div? I've put an iframe in the div, and I have successfully loaded the external page into this iframe. But, I do not want to view the entire page, just the content from one of the divs on that page. Any suggestions?
Put this in the head of your doc Code: <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> Then put this where you want Code: <div id="banner"></div> <script type="text/javascript"> <!-- var currentdate = 0 var core = 0 function StringArray (n) {this.length = n; for (var i =1; i <= n; i++) { this[i] = ' ' }} image = new StringArray(4) theImages[0] = '<img src="/uploadextern/MFS/Styles/1.gif" />' theImages[1] = '<img src="/uploadextern/MFS/Styles/2.gif" />' theImages[2] = '<img src="/uploadextern/MFS/Styles/3.gif" />' theImages[3] = '<img src="/uploadextern/MFS/Styles/4.gif" />' var ran = 60/image.length function ranimage() { currentdate = new Date() core = currentdate.getSeconds() core = Math.floor(core/ran) return(image[core]) } $('#banner').html(ranimage()); --> </script>
So, is there no-one that knows of a simple way to make the following script affect background-image instead of just a "free-standing" image? Also, does anyone know of a simple way of pulling an external page into a hidden iframe and then getting content based on element ID from that iframe to display in a div? Or, do you know of alternate methods of doing this?
I am pretty bad at JS myself but wouldnt it be enough to change this row document.getElementById('headerMainRow').innerHTML = '<img alt="bildetekst" src="'+theImages[whichImage]+'" to this document.getElementById('Body').innerHTML = '<img alt="bildetekst" src="'+theImages[whichImage]+'" just a thought
Ah, but then the image would be displayed as a free-floating image in my body element instead of in my headerMainRow element. headerMainRow is the DIV in which the image should sit (preferably as background to that one specific DIV, and not the entire page). Thanks for your input though.
Ahh sorry i misunderstood what you meant. So you want to have the background of that specific DIV changing? I want to wrap my head around that a lil better as i have a JS course coming up soon and it would be good training.
This seems to work ok... You should be able to adapt it - it puts either gif1.gif or gif2.gif as the background of the div. Javascript is an arse when it comes to syntax tbh Code: function changeImage(num) { var thediv = document.getElementById('theDiv'); thediv.style.backgroundImage = 'url(gif' + num + '.gif)'; } <div id="theDiv" style="width:100px; height:300px;"><!-- --></div><br /><br /> <a href="javascript:void(0)" onclick="changeImage(1)">Change 1</a><br /> <a href="javascript:void(0)" onclick="changeImage(2)">Change 2</a><br />
Ah, thank you once again heh-. I was able to adapt your method by doing this to finish off the script; And now it works flawlessly. Excellent! Now, onto the other issues (it's sort of an uphill struggle), and I'm looking for alternatives to my iFrame. What's really annoying is that whilst I am able to get the iframe to target a designated content div (though not by only displaying that one), the entire page jumps down to the iFrame after it has loaded. Strange.
Yes, that was my intention, and now it works (thanks heh-). Working with JS is the perfect way of learning it - at least to me it is, and it's fun even.
Glad I could be of help, anything to avoid actually doing some work Agreed, this is how I learnt it and I lost much hair learning it! Not sure on the iframe thing, not really used those before, tho I have an idea and will do an experiment later.
Things are going great (as a matter of fact), and as the deadline looms ever closer on the horizon I have stumbled upon yet another hurdle. Well, it's not really a hurdle as hurdles go, but rather a niggling irritation. Most of the site is now completed (apart from content which falls to someone else), and as I am finishing it off I have obviously found several ways of improving the site. I'd like to have a way of gathering input from users and display this on the page on the fly. Sort of like a "graffitti wall" feature if you get my drift. Now, getting quotes from users and displaying it is not a problem (it is in fact quite an easy thing to do with JS) however, saving it so that the inputted text does not disappear at refresh is. I would also like to be able to store the quotes from the users at server so that I might display them randomly or in sequence. Do you have any references or directions to point fingers towards in order to guide me on my way? Or should I just forget about it for the time being and focus on making the deadline?
