logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-11-2013, 04:38 PM   #1
Blankie
Blankie's Avatar
 
Join Date: Nov 2013
Posts: 17
Default Hovering/Floating window - How to make it?

Dear forum users,

Hi, I'm Paula. Total self taught site builder for one site only. Very basic skills.

I'm trying to update this site and I want to have a 500x500 window hover over a thumbnail with a bit more information about that image. Nothing very fancy, no need to blur the background or have any special effects, just a window on top when you hover the mouse over the thumbnail. So not a pop-up, I know how to make those. Something like this:


How do I do that? Please, explain it like I'm 6 years old
THANK YOU!
Blankie is offline   Reply With Quote
Old 11-12-2013, 12:08 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,216
Default

hi paula.Welcome to the forum. the easiest way for you would be o use a premade jquery effect. there are mant ligt\htbox/coloorbox clones that im sure you will find one that fits your needs, try yahoogle jquery.
alternate would be a tooltip plugin (also advise jquery)
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-12-2013, 09:36 AM   #3
Blankie
Blankie's Avatar
 
Join Date: Nov 2013
Posts: 17
Default

Hey, thanks for replying!

I have come across this jquery thing (yahoogle, no idea what it is), but like I said, I'm very code illiterate. The good thing about HTML for me is that it's understandable. Eventhough I can't write it, I can read it, and understand where stuff goes. Dreamweaver writes it, I just fill stuff in. This jquery coding, I can't figure it out, e.g, I don't see where it links to the thumbnail. Where do you place it in the "narrative"?


Let me describe it. The code Dreamweaver gives me for the thumbnail is this:

<td valign="middle" class="style31"><div align="center"><img src="../IMAGES/Image.jpg" width="160" height="160"></td>

Now, where do I place the jquery code in order to have the lightbox show up when the mouse passes over the thumbnail?
Blankie is offline   Reply With Quote
Old 11-12-2013, 09:59 AM   #4
Blankie
Blankie's Avatar
 
Join Date: Nov 2013
Posts: 17
Default

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

Last edited by Blankie; 11-12-2013 at 10:05 AM..
Blankie is offline   Reply With Quote
Old 11-13-2013, 12:03 AM   #5
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,216
Default

i meant search on yahoo or google etc. no im afrain its not that easy. if you want effects you would be best to use javascript, and jquery is just a framework to make it easier to implement.
What you want can be done using css but to make the text appear you will need something to deliver it like possibly a database.
not just a simple add code situation im afraid
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-28-2013, 03:13 PM   #6
Blankie
Blankie's Avatar
 
Join Date: Nov 2013
Posts: 17
Default

Here I am again.
So I am trying to figure out how this jquery fancybox things works, and for some reason I cannot make it work. The image appears, but as a page, not in a window. Could it be DW CS3 is too old for this code? Do frames limit the usage of this code? My website uses frames, and the index.htm is a combination of two.
Help.
Blankie is offline   Reply With Quote
Old 11-28-2013, 07:40 PM   #7
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Yes, frames will really screw things up..

There's really no way around learning _some_ of this stuff
domedia is offline   Reply With Quote
Old 12-04-2013, 12:47 PM   #8
Blankie
Blankie's Avatar
 
Join Date: Nov 2013
Posts: 17
Default

Seriously, I'm not entirely dense, and this jquery thing is giving me a run for my money. Everyone says how simple it is, it works fine with HTML, simple, simple, simple, but every person has a different approach to it. One inserts the stylesheet in the page, another makes a separate stylesheet and links it, someone else has a folder with all the source and lib etc. And then the code seems to be different with every person who is explaining it.

I just want to open a window with content (image/vídeo) and a little x to close it via a click on a thumbnail. No gallery, nothing else. Just that.

I've done the following so far, from a recent tutorial:
  • Remade the page using css styles instead of frames
  • Went to JQuery.com and created a .js file in the site folder (where the .html files are) with the latest code (2.0.2 Minified). From what I understand, this is a sort of basis file for JQuery to work in the html files. Right?
  • Linked my index.html to this file with <script src="jquery.js"></script> (or I think that's what this code does)
  • Inserted the image which should be clicked to open the floating window.
Now is where people write all different sorts of code in different places and the ones I've tried do not work.
Please. How do I go about this?

PS: what do you mean by database edbr?

Last edited by Blankie; 12-04-2013 at 01:14 PM..
Blankie is offline   Reply With Quote
Old 12-04-2013, 08:16 PM   #9
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Blankie, put what you have so far online, a temporary location for example. If you are following a tutorial, it should be pretty simple to see what you have done wrong.
domedia is offline   Reply With Quote
Old 12-05-2013, 12:31 AM   #10
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,216
Default

at the lease post the code here . database id just a method of storing information basically
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:27 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2021, vBulletin Solutions, Inc.