...

View Full Version : Moving image in scroll window by using mouse



Kevin_M_Schafer
01-19-2012, 10:03 PM
I have a large image I would like to display within the confines of a div with a border. The div is rather small compared to the image, so I have "overflow:scroll" and it works how I want. The question I have, I can apply "cursor:hand" to my css, and that works to give the hand over the part of the image that shows in the window, but is it also possible to make it so I can click on the image and slide it around inside the scroll window?

Edit: Here's what I have so far. (http://www.theeagleextra.com/page-viewer.html) If I have to stay with just scroll bars for html and css, that's fine. I can at least add javascript as an enhancement. This concept is just in development, beginning a couple of hours ago. Any help would be greatly appreciated.


--Kevin

.

Excavator
01-19-2012, 11:50 PM
Have a look at this Kevin - http://jqueryui.com/demos/draggable/
Might be close to what you're looking for. Lots more here (https://www.google.com/search?q=jquery+click+drag+image&sourceid=ie7&rls=com.microsoft:en-us:IE-Address&ie=&oe=).

Kevin_M_Schafer
01-20-2012, 02:34 PM
Thanks, Excavator. The first one you pointed out is probably what I need, but I'm not able to create a working example on my end yet. I'm still trying.

On another note for a page selector for this same project, how do I vertically center text within a div?

Here's what I'm trying for a simple little box:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">
.numberinbox {
background-image:url('http://www.theeagleextra.com/new/images/pageselect.png');
background-repeat:no-repeat;
width:29px;
height:29px;
border: 1px solid #cacaca;
font-family:arial;
font-size:14px;
color:#000;
margin-right:6px;
display:table-cell;
vertical-align:middle;
text-align:center;
float:left; }
</style>

</head>
<body>
<div class="numberinbox">1</div>
</body>
</html>


--Kevin

.

Excavator
01-20-2012, 02:57 PM
If all you need to vertically center is that "1" or a single word, change that height: 29px; to line-height: 29px;. That will work until there is a line break and you have more than one line of text.

Other vertical centering methods (http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/index.html).

Kevin_M_Schafer
01-20-2012, 03:11 PM
Cool, it worked, Excavator. Thank you very much. I don't think I've ever really understood this. Here's what I have right now after your help (http://www.theeagleextra.com/testfiles/e-edition-page-viewer/eee/tee-e-edition.php).

I store up questions in the middle of the night and then keep trying them in the morning, and if I still can't solve it on my own, I ask for help.

In an input form on my main page, I would like the "action" to go to my "checklogin" php file, which I have now placed in another folder (I'm trying to organize my files). I can't seem to get the url correct. Do I need a full address? It worked great when the "checklogin" file was in the same folder as the "index.html" file. Then, of course, it was just "action="checklogin.php".

Here's what I am trying with no result (eee is my folder which contains my "checklogin" file):


<form name="form1" method="post" action="eee/checklogin.php">


<form name="form1" method="post" action="/eee/checklogin.php">

--Kevin

.

Excavator
01-20-2012, 03:36 PM
Good morning Kevin,
If I followed that correctly, it should be ../eee/checklogin.php? I think.

Relative paths explaned here (http://www.geeksengine.com/article/absolute-relative-path.html).

Kevin_M_Schafer
01-20-2012, 10:37 PM
I'm just not having any luck with linking to a different folder for my "checklogin" file.

The file is located at http://www.theeagleextra.com/new/eee/checklogin.php

When I use this for my form action:
<form name="form1" method="post" action="/eee/checklogin.php">

I get an error in the browser and this address is displayed: http://www.theeagleextra.com/eee/checklogin.php

When I use this for my form action:
<form name="form1" method="post" action="../eee/checklogin.php">

I get an error in the browser and this address is displayed: http://www.theeagleextra.com/eee/checklogin.php

When I use this for my form action:
<form name="form1" method="post" action="/new/eee/checklogin.php">

I get an error in the browser and this address is displayed: http://www.theeagleextra.com/new/new/eee/tee-e-edition.php

Why would I get two "news" in the address bar?

When I use this for my form action:
<form name="form1" method="post" action="../new/eee/checklogin.php">
I get an error in the browser and this address is displayed: http://www.theeagleextra.com/new/new/eee/tee-e-edition.php


--Kevin

.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum