Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Moving image in scroll window by using mouse

    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. 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

    .
    Last edited by Kevin_M_Schafer; 01-19-2012 at 11:14 PM. Reason: text clarity, added link
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at this Kevin - http://jqueryui.com/demos/draggable/
    Might be close to what you're looking for. Lots more here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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:

    Code:
    <!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

    .
    Last edited by Kevin_M_Schafer; 01-20-2012 at 02:34 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Kevin_M_Schafer (01-20-2012)

  • #5
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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.

    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):

    Code:
    <form name="form1" method="post" action="eee/checklogin.php">
    Code:
    <form name="form1" method="post" action="/eee/checklogin.php">
    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-20-2012 at 04:18 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning Kevin,
    If I followed that correctly, it should be ../eee/checklogin.php? I think.

    Relative paths explaned here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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:
    Code:
    <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:
    Code:
    <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:
    Code:
    <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...-e-edition.php

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

    When I use this for my form action:
    Code:
    <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...-e-edition.php


    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-20-2012 at 10:42 PM. Reason: added one more link attempt
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •