LFS Forum - Help with webiste html

#1 - imthebestracerthereis

Help with webiste html

Thu, 15 Mar 2007 23:50

grr, I've been searching for days now and I cant find what I need, the funny thing is, I had it on my myspace a while ago and I deleted it :cries:. Anyway what I'm looking for is a code that make it so when you click on an image, a box below it shows up with information in it. I think it has to do with divs. Example

I click on a picture of a dog a box underneath pops up with some age location, ect...

anyone have what I'm looking for?

Thanks in advance
-Dustin

#2 - NoQuarter

Fri, 16 Mar 2007 00:45

Try http://www.htmldog.com/

#3 - Stuff

Fri, 16 Mar 2007 01:13

I dunno much about myspace or any certain image popup thingies but I do know that pretty much all html includes divs and these links go to some popular and cool javscript effects libraries

http://script.aculo.us/
http://openrico.org/rico/home.page
http://www.huddletogether.com/projects/lightbox2/

#4 - glyphon

Fri, 16 Mar 2007 03:19

[HTML]<img src="image.jpg" onClick="document.getElementById('popupBox').style.display='';" />

<div id="popupBox" style="display: none;" onClick="this.style.display='none';">
some content
</div>[/HTML]

#5 - imthebestracerthereis

Fri, 16 Mar 2007 18:20

Quote from glyphon :[html]<img src="image.jpg" onClick="document.getElementById('popupBox').style.display='';" />

<div id="popupBox" style="display: none;" onClick="this.style.display='none';">
some content
</div>[/html]

hmm some problems, when I click on the image, text show underneath of it but I want it so it shows up in a box so that I can move it. Plus, i need it to go away when I click another picture :S Any help please?

#6 - glyphon

Fri, 16 Mar 2007 19:37

if you click on the text that appears, it goes away.

but what you are wanting is different than what you asked for

hang on and i'll get the rest

#7 - glyphon

Fri, 16 Mar 2007 19:48

unzip the two files, and put them in the same directory as the html file

######
This goes in the <head> tags
######
<link rel="stylesheet" type="text/css" href="floatingDiv.css" />
<SCRIPT LANGUAGE="JavaScript" SRC="floatingDiv.js"></SCRIPT>

######
this goes in the <body> tag>
######
add onLoad="setfocus();" to the opening body tag
for example...
<body onLoad="setfocus();">

######
here are the 2 images that open and close the floating Div
######
<img src="imageOpen.jpg" onClick="document.getElementById('floater').style.display='';" /><img src="imageClose.jpg" onClick="document.getElementById('floater').style.display='none';" />

######
this is the floating/dragable div
######
<div id="floater" class="drag" style="display: none;">
some content
</div>

######
Add this to the very bottom of the page
######
<script type="text/javascript">
var draggers=document.getElementsByTagName('div')
for (var i_tem = 0; i_tem < draggers.length; i_tem++)
if ( draggers[i_tem].className=='drag' )
Drag.init(draggers[i_tem])
</script>

Attached files

#8 - kiss me

Fri, 16 Mar 2007 20:48

my dad created that kind of script and is now doing the same kind i think in flex

#9 - ORION

Fri, 16 Mar 2007 22:13

I have this on my site aswell, but with fading, and it clips to the frame/window :P

http://www.franknaggies.com/
check the small icons at the bottom left

[EDIT]
coded myself though, I dont like those scripts you can get everywhere... they suck mostly :P

#10 - glyphon

Fri, 16 Mar 2007 22:22

those aren't dragable

sure, sure. they are attached to the mouse, but not dragable

and jebus...that's a lot of js in that file.

#11 - imthebestracerthereis

Sat, 17 Mar 2007 08:29

okay this is exactly what im trying to do:
I have images in a scrollable area, and when you click on the image, I want a box to show up underneath, that I choose the dimentions and put the information in. When I scroll over to see more pictures I want the box to follow the picture that is scrolling above but make it go away when the picture is off the scrollable area or when the guest clicks on another image.

Hope that helps

ps NO JAVASCRIPT ALLOWED :S
pps I really liked http://www.huddletogether.com/projects/lightbox2/

#12 - AndroidXP

Sat, 17 Mar 2007 08:40

Quote from imthebestracerthereis :ps NO JAVASCRIPT ALLOWED :S

Haha, good luck then.

#13 - kiss me

Sat, 17 Mar 2007 10:40

flex allowed?? dunno whats its like, i think more like flash...
when he gets back tomorrow ill ask him for it

#14 - glyphon

Sat, 17 Mar 2007 14:12

Quote from imthebestracerthereis :ps NO JAVASCRIPT ALLOWED :S

No JS? Well, you could make a 100% flash based website. other than that, i think you are SOL.

#15 - imthebestracerthereis

Sat, 17 Mar 2007 21:40

so far im using your code glyphon, its working so far...

#16 - imthebestracerthereis

Sat, 17 Mar 2007 22:44

okay now that I have the pictures down I need a code to make it so it will scroll in a list with other pictures. I need to be able to resize the box via admin editors (i dont want the guest to resize it :P)

P+TY

#17 - kiss me

Sun, 18 Mar 2007 21:30

so its working allmost??

i had a conversation with my dad:

me: dad, a dude wants to make a dragable box....etc
dad: well, js, or flex but flex makes js and flash etc...

final question:
why not java

i felt sory for myself i asked

10 min conversation for a 0.3min question