PDA

Click to See Complete Forum and Search --> : Can this be done??

margaretw0403
06-08-2009, 10:33 AM
Hi There,

Thanks for taking the time to read this... My first post so be gentle with me.

I'm a newbie but I'm learning fast I think, heres my problem.

I'm a keen Cardcrafter/Scrapbooker & I have a number of graphics/images I have made that I'd like to use/select/print off via one webpage.

At present I'm using the following simple script...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta name="Description" content="">
<meta name="Keywords" content="">

<title>Large Butterfly </title>
</head>

<body>
<style type="text/css">
.containerdiv { float: left; position: relative; }
.image1 { position: absolute; top: 50; left: 200; }
.image2 { position: absolute; bottom: 10; left: 630; }
</style>

<div class="containerdiv">
<img border="0" src="../images/largecard/01blank.jpg" alt="" width="740" height="1010">
<img class="image1" border="0" src="../images/graphics/01purple/01butter.png" alt="" width="300" height="400">
<img class="cornerimage2" border="0" src="../images/everycard/01madeby.png" alt="" width="100" height="100">
<div>
</body>

</html>
This works ok but I have a lot of images and therefore I have to make a page for each one.

This code puts the images on the left hand side of the page. Is there anyway I could use the right hand side of the page with dropdown box choices so I could simply pick what I wanted, then print it off.

Being a newbie I'm a loss as to weather this can even be done... Could this be done with more css? or Javascript?
Or is there a better way of doing this?? It doesnt need to be SE friendly as these pages aren't online.

I've searched all over but to no avail,
Looking forward to your replies.
Margaret :)
peachskittle
06-08-2009, 01:34 PM
Hi,

I'm trying to understand exactly what you want to do here.

Do you mean, you want the left hand side to have the images, and on the right, you want there to be a drop down menu that you can quickly jump to from image to image, have it display the one on the left as you pick from the drop down?

If this is what you were asking, yes, it can be done, with some more css/html/javascript.
margaretw0403
06-08-2009, 01:40 PM
Thanks peachskittle...

Yes thats pretty much what I'd like to be able to do. Any ideas where to start? Or can you point me in the direction of some code?

Many Thanks,
Margaret
peachskittle
06-08-2009, 02:47 PM
Heya,

I'm not too good at javascript, just familiar with the concept, so this will be a bit crude, but I'm going to give you blurbs of css/html/javascript that kinda does what you are looking for. You are going to have to take what you can from it and go from there and fill out all the pieces of the puzzel in the best way you think you can.

Essentially what we are doing is creating a dropdown with a list of options. Using the javascript onchange event (it's pretty literal), we are going to send up the value of what the user selects, feed it to the changeSelection function, and all that does it spit that number right back out inside the part of the html we want it to. You can work similar to this, but just consider the url for an image as html that's editable too. So, ie, if you call your images "img01" "img02" "img03", you can potentially use this blurb I've done... so take a look.

CSS (this is just dressing it up but refer to it as you wish :) )

#main-container {
width: 600px;
height: 300px;
margin: auto;
border: 1px solid #cccccc;
}

#gallery {
width: 259px;
float: left;
height: 260px;
padding: 20px;
border-right: 1px solid #ccc;
}

#image-menu {
width: 260px;
padding: 20px;
float: left;
}

html (really just a form with a dropdown, you can google "html dropdown" if you need any further details)

<div id="main-container">
<div id="gallery">
<p>This is sentence number <span id="changing-content">1</span>.</p>
</div>
<div id="image-menu">
<form name="gallery">
<select name="menu" onchange="changeSection(this.value);">
<option value="1">To Sentence 1</option>
<option value="2">To Sentence 2</option>
<option value="3">To Sentence 3</option>
<option value="4">To Sentence 4</option>
</select>
</form>
</div>
</div>

javascript (again, very crude, and there may be a better way to do it, but ill leave that to a js person to step in. you can try googling "javascript dropdown onchange" for further.)

<script type="text/javascript">
function changeSection(selection) {
document.getElementById('changing-content').innerHTML=selection;
}
</script>
peachskittle
06-08-2009, 03:57 PM
weird, my edit button has vanished.

While looking around, it appears that 'innerHTML' may not actually be standard, so I feel the need to bring that up. Maybe "document.write____" may be better here. Something else to google :D
JMRKER
06-08-2009, 04:48 PM
I'm not good with CSS yet, so very little change there.
Hopefully this is closer to what you are trying to accomplish ...

<html>
<head>
<title>Image Selection</title>
<style type="text/css">
/* From: http://www.webdeveloper.com/forum/showthread.php?t=210701 */

#main-container {
width: 650px;
height: 300px;
margin: auto;
border: 1px solid #cccccc;
}

#gallery {
width: 259px;
float: left;
height: 260px;
padding: 20px;
border-right: 1px solid #ccc;
}

#image-menu {
width: 260px;
padding: 20px;
float: left;
}
</style>
<script type="text/javascript">
var ImageList = [
["The beautiful mountains","http://javascript.internet.com/image-effects/pix1-sm.gif"],
["The crystal clear lake","http://javascript.internet.com/image-effects/pix2-sm.gif"],
["The lonesome, barren tree","http://javascript.internet.com/image-effects/pix3-sm.gif"] // Note: no comma at end
];

function changeSection(selection) {
if (selection > (ImageList.length-1)) { return }
document.getElementById('selected_image').src = ImageList[selection][1];
// document.getElementById('selected_image').alt = ImageList[selection][1];
document.getElementById('changing-content').innerHTML = ImageList[selection][0];
}
</script>
</head>
<body onload="changeSection('0')">
<div id="main-container">
<div id="gallery">
<img src='' alt='' id='selected_image' height="250" width="600">
<p><span id="changing-content">1</span>.</p>
</div>
<div id="image-menu">
<form name="gallery">
<select name="imgMenu" id="imgMenu" onchange="changeSection(this.value);">
<option value="0">Scene 1</option>
<option value="1">Scene 2</option>
<option value="2">Scene 3</option>
</select>
</form>
</div>
</div>
</body>
</html>

Pretty easy to change.
:)
margaretw0403
06-09-2009, 05:32 AM
Thanks Peachskittle & JMRKER...

Fantastic, I was looking at dropdown menu but couldn't see how to pull it together, thanks for pointing me in the right direction.

Two things, how could I add more dropdowns to add other images to the page? Is that even possible?

Plus, how can I print off just the left hand side of the page rather than the whole page??

I found this printframe script... how can I work it into the code you've created??
<HEAD>
<script>
function doPrintFramePopUp(){
doPrintFramePopUpWindow = window.open("printframe_frameset.html","printFrameDemo","menubar=yes,width=500,height=400");
}
</script>
</HEAD>

<BODY>

<center>
<a href="javascript:doPrintFramePopUp();" class="js">Print</a><br>
</center>

Many Thanks for your help on this,
Margaret
JMRKER
06-09-2009, 10:35 AM
More information needed ...
...

Two things, how could I add more dropdowns to add other images to the page? Is that even possible?

Yes, but need an example of what you want in the drop-down.
Is it similar to the information provided already (ie, different images with another different drop-down content)?

Plus, how can I print off just the left hand side of the page rather than the whole page??

I'm not sure I understand the last question. :confused:
What is it that you want printed, the image or the menu or what?

I found this printframe script... how can I work it into the code you've created??

What is the 'printframe_frameset.html' file look like and where do you want the frame to be located?
The code provided above does not use frames to create the display.


...
peachskittle
06-09-2009, 11:15 AM
Sorry, was in the middle of a reply and got called away to a meeting... here was what I was about to say:::

Hi,

I'm not sure what you mean in your first question. You can create as many drop down bars as you please, so long as you give each of your options different values... I'm not sure if I understand your question correctly though.

As for printing, the only method I'm really all that familiar with is creating a print css file to give the print page you want the look and feel you want. For this, you may want to take a look at (http://www.alistapart.com/articles/goingtoprint/). You can easily tell the print stylesheet to "display: none;" on any elements you don't want to print.

For the blurb you posted, the pop up looks like its opening another html page(probably the html someone might have displayed in some frame on some part of their page that's got multiple frames). In your case, you have everything on one page (that's how I'd do it too), and this is probably not the solution for you.

You can, of course, open a pop up with the image you have selected and a "print" link. To me, that's too much, you cant just use the javascript "window.print()" (http://www.javascriptkit.com/howto/newtech2.shtml) and give the page you are on a print stylesheet that hides all elements except for your image (and maybe a caption).