PDA

View Full Version : Resolved Inserting function into DIV or something



andrewlian
02-01-2011, 08:56 PM
First off: I know nothing of Javascript (or much of any coding really), but I expect this to be simple for someone experienced, although it was (suprisingly) hard to figure out, for a lousy Googler like myself; so here I am.

I have a function that generates an URL to an image, as so:

function todaysDate() {
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
window.location.href = "http://www.ecample.com/generator.aspx?format=png&month="+month+
"&day="+day+"&width=320&height=480"
}

I get the image displayed fine in a new window, but I need it to open in a <div> or object, iframe, something I can place under my <div>-based header, when a button is pressed from my menu.


<div id="image">
<div class="header">
<a href="#" class="back">back</a>
<h1>Title</h1>
</div>
I WANT IT HERE!
</div>


Any help would be greatly appreciated!
Regards, Andrew.

devnull69
02-01-2011, 09:16 PM
Ok ... you assign the image URL to location.href. That means, the image will be opened in the browser window. So why don't you assign it to the src attribute of an image then?

HTML:


<div id="image">
<div class="header">
<a href="#" class="back">back</a>
<h1>Title</h1>
</div>
<img id="myimage" src="#" style="display:none;"/>
</div>


Javascript:


function todaysDate() {
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var myImage = document.getElementById('myimage');
myImage.src = "http://www.ecample.com/generator.aspx?format=png&month="+month+"&day="+day+"&width=320&height=480";
myImage.style.display = '';
}

Old Pedant
02-01-2011, 09:20 PM
<html>
<head>
<script type="text/javascript">
function getTodaysImage()
{
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();

document.getElementById("TODAY").src =
"http://www.ecample.com/generator.aspx?"
+ "format=png&month="+month+"&day="+day+"&width=320&height=480";
}
</script>
</head>
<body>
...
<div id="image">
<div class="header">
<a href="#" class="back">back</a>
<h1>Title</h1>
</div>
<img id="TODAY" alt="today's image" style="width: 320px; height: 480px; visibility: hidden;"
onload="this.style.visibility='visible';" />
</div>
...
<form><input type="button" value="Show today's image" onclick="getTodaysImage()"/></form>
...


Totally untested, but something along those lines.


****************

EDIT: Heh. devnull beat me to it, but basically same idea.

andrewlian
02-01-2011, 09:39 PM
THANK YOU THANK YOU THANK YOU!

You just made my day. You know when you try to figure something out for so long your head just starts hurting and you get mad at every little thing? That's been me for some time now.. But now, I feel great! :)

Good karma coming your way..
Thanks again!

Andrew.

andrewlian
02-02-2011, 01:17 AM
I hate to bother you more; - I thought I could figure it out on my own, but some hours and countless failed attempts later, I still can't figure out how to get the image to show without that extra visibility-button (at the bottom of devnull69's code).

Any chance on showing the image directly? If not, it still works - so thanks again you two.

Regards,
Andrew

Old Pedant
02-02-2011, 05:26 AM
Ummmm...in your first post, you said

something I can place under my <div>-based header, when a button is pressed from my menu.

Are you now changing your mind? You want the image to show as soon as the page loads???

(And the visibility button is in my code, not devnull's. He never showed how to invoke the code that would do the display...he assumed that you already had the button you referred to in your first post.)

andrewlian
02-02-2011, 10:46 AM
My mistake. I guess I tried to describe it a bit more than I should have, but I already have the button which brings us to the <div id=image>, and I need that same button to load the image, as well as navigating to it.

Like I said, I don't know much about coding, and I know I'm in over my head here, and I'm thankful for all your help, even though I might mess things up a bit. I'm sorry for pointing to devnull69's code, I just scrolled down to see the name on the last post, not realizing they had been flipped for the reply-view.

I tried moving the onclick-trigger to my button, as well as different variations of the visibility-switches in your code - but I just can't get anything but the alt-text to show.

<li><a href="#image" onclick="getTodaysImage()">Todays Image</a></li>


Sorry about the confusion.
Andrew

Old Pedant
02-02-2011, 08:53 PM
Okay, that's actually simpler.

Various ways to do this, but I'll go with the simplest.


<html>
<body>
...
<div id="image">
<div class="header">
<a href="#" class="back">back</a>
<h1>Title</h1>
</div>
<script type="text/javascript">
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();

document.write(
'<img src="http://www.ecample.com/generator.aspx?'
+ 'format=png&month="+month+"&day="+day+"&width=320&height=480" '
+ 'alt="image for today" '
+ 'style="border: none; width: 320px; height: 480px;"> );
</script>
</div>
...

Notice that the JS code is now (a) no longer a function and (b) no longer in the <head> of the file.

I gotta tell you, I sure as heck didn't get any image at all when I tried that URL!!!

You sure that's the right URL??

andrewlian
02-03-2011, 12:38 AM
Works like a charm! And no, it's wasn't the correct URL, as I cut it down a bit for simplicity, since the original was way longer with more strings in it. Me doing wrong things for the right reasons again. Live and learn.

Well.. Old Penant, what can I say. You rock! Thanks for sharing your wisdom.. Now I can go back to slowly reading my Javascript for Dummies book without this little ache in the back of my head, and hopefully not bother you good people for a while.

THANKS,
Andrew.



PS; - If anyone looks to this code in the future, you might need to change the " around the +string+ to ' and add another ' at the end of the tag here ;">' );