Show moving picture file

Hi,
I expect to show following picture file
https://app.box.com/s/3btrq1w3la4qmwfe8eo0899zhedfjzta

is moving across this URL

http://my-friend.co/Login4/Default.aspx

how?
LVL 11
HuaMin ChenProblem resolverAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan singhWeb developerCommented:
0
HuaMin ChenProblem resolverAuthor Commented:
Hi,

Is there one working example to this?
0
mohan singhWeb developerCommented:
Hi
I am also using that code
but my project is not live so you can use above code
if you want

Thank you

Regards
Mohan SIngh
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

HuaMin ChenProblem resolverAuthor Commented:
Can I see if your example to showing one picture file?
0
mohan singhWeb developerCommented:
Hi@ HuaMinChen
tell me first
Above given link working or not ?
0
HuaMin ChenProblem resolverAuthor Commented:
But I expect to see the example, displaying one moving picture.

This example does not work
http://jsfiddle.net/uQTb2/1003/
0
Slick812Commented:
greetings HuaMinChen, , I am having difficulty understanding what you are asking for in the Display of the web page, you seem to want an Image for a House, and you say -
    "displaying one moving picture"

Moving How, Moving Where? ? Across the top from left to right? ?
From top to bottom on the left? ?

Jquery offers a method called - "animate( )"  which can have page elements "Move", I use this in the page code below -
<!DOCTYPE html>
<html>
<head><title>Moving Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    
var im = $("#img1");

function movePic() {
  im.animate({left: '85%'}, 2100,"swing");
  im.animate({left: '15%'}, 2100,"swing", movePic);
}

movePic();

});
</script>

<style>
#img1 {
position:absolute;
top:79px;
left:15%;
width:130px;
height:120px;
margin-left:-65px;
z-index:4;
}
</style>
</head>
<body>
<h3 style="text-align:center;">Moving Image<br />Text<br />Text<br />Text<br />Text</h3>


<br />
<img id="img1" src="https://filedb.experts-exchange.com/incoming/2018/03_w13/1292822/House1.png" />

</body>
</html>

Open in new window

But I really have no Idea of what you are talking about when you say - "displaying one moving picture" - because there are so many different things to do with a web page?
0
HuaMin ChenProblem resolverAuthor Commented:
Many thanks Slick.

I expect that it would only move within highlighted area (in red) below, from Top to bottom. What to adjust?
22x.png
0
Slick812Commented:
? ? ? You seem to want to place this moving image on this page -
     http://my-friend.co/Login4/Default.aspx

BUT that page is NOT MADE for the display you show in the Image above. On the
    http://my-friend.co/Login4/Default.aspx
page there is NO element , no <div>, no <table>, no <span>, the left side is in the <form> BUT, there is no RED border rectangle <div> that you show in the above Image.

 Also page has NO code in the CSS to be responsive, the central display <div> as -
      <div class="content" id="wrapper" >
is always  1180 pixels wide, even in a cell phone browser, so I am not sure what to do? ?

The code below is a version of the moving picture, that is as simple a way to have a image move up and down on the left side
<!DOCTYPE html>
<html>
<head><title>Moving Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    
var im = $("#img1");

function movePic() {
  im.animate({top: '93.7%'}, 2100,"swing");
  im.animate({top: '6.3%'}, 2100,"swing", movePic);
}

movePic();

});
</script>

<style>
#img1 {
position:absolute;
top:6.3%;
left:2%;
width:130px;
margin-top:-32px;
z-index:6;
}
</style>
</head>
<body>
<img id="img1" src="http://my-friend.co/pict/House1.png" />
<form method="post" action="./Default.aspx" id="main_form">
	
<div id="wrapper" style="text-align:center;width:1180px;height:780px;
  background:#ccd;margin:11px auto;font-size:141%;">
  Moving Image<br />Text<br />Text<br />Text<br />Text
</div>

</form>
</body>
</html>

Open in new window


You must NOT place the image that moves -
     <img id="img1" src="http://my-friend.co/pict/House1.png" />
inside of any other element as you did on the page. Try to place the <img> right after the <body> and before the <form> tags.

= = = = = = = = = = = = = =

although this is not part of the question here, I would suggest that you try and fix you whole page, as the HTML and CSS on that page are not doing a good job for the display you need.
AND in 2018, all pages must be cell phone responsive to width in smaller devices, like a cell phone browser, and that page is to wide for a cell phone?
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks a lot. When it reaches end of bottom (on the left), can it further "continue" from the bottom of right side? It is currently "moving" on left hand side and I expect it to also move on right hand side.
0
Slick812Commented:
Sorry, You give so little information for doing Programming, I can not get what you may have in mind, as you say -
       "and I expect it to also move on right hand side"

? ? ? What? ?

Just so you know, this site Experts Exchange, is to help people to get code that they wrote to work better, it is not meant to just have someone write all the code for you.

- - - - - - - - -
this is the function that moves the image element -

function movePic() {
      im.animate({top: '93.7%'}, 2100,"swing");
      im.animate({top: '6.3%'}, 2100,"swing", movePic);
// you can change this function by adding movement any where you want to
}

OR if you need another Image to move (on the right side), you can change the function for other image movement OR re-positioning. Please try to change the function to have any movement, re-positioning, or any other display you may want to do.
0
HuaMin ChenProblem resolverAuthor Commented:
Good day Slick,

When the picture file "reaches" bottom on the left, is it possible it would "continue" from bottom on the right?

I expect that the picture file would repeatedly "move" along the given arrows below. Is it possible to achieve this?

22z.png
0
Slick812Commented:
? ? ?    ? ? ?
The image movement path is    NOT CONNECTED  ? ? From what I can understand from your image above. I would think that you could have TWO images, one on the left, and one on the right, and the two images could move up and down on both sides. BUT the code I gave is for an animation PATH, and in your description of what you want, , there is no animation PATH from the bottom-left to the bottom right? ?

Did you try any change the animation function  movePic ( )  to get the effect you may want?
0
HuaMin ChenProblem resolverAuthor Commented:
Good day Slick,

Many thanks.

Currently you're showing the file moving from top to bottom in one horizontal area.

How about to show it move within the area of following arrows, from left to right (and then right to left)?

23a.png
0
Slick812Commented:
? ? ? You keep changing the movement the Image should be doing, so I feel that you are not sure about what is needed?

Anyway,  You have you arrows down at the bottom of the   <div class="content" id="wrapper" > , so I am confused about what display you want for this moving Image? ?

BUT here is some more code for you -
<!DOCTYPE html>
<html>
<head><title>Moving Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    
var im = $("#img1");

function movePic() {
  im.animate({left: '81.7%'}, 3300,"swing");
  im.animate({left: '18.3%'}, 3300,"swing", movePic);
}

movePic();

});
</script>

<style>
#img1 {
position:absolute;
bottom:7%;
left:18.3%;
width:410px;
margin-top:-32px;
margin-left:-205px;
z-index:6;
}
</style>
</head>
<body>
<form method="post" action="./Default.aspx" id="main_form">
	
<div id="wrapper" style="text-align:center;width:1180px;height:780px;
  background:#ccd;margin:11px auto;font-size:141%;position:relative;">
  Moving Image<br />Text<br />Text<br />Text<br />Text

<img id="img1" src="http://my-friend.co/pict/House1.png" />

</div>

</form>
</body>
</html>

Open in new window


Maybe this is something like it?
0
HuaMin ChenProblem resolverAuthor Commented:
How to correct
<div class="content" id="wrapper" >

Open in new window


to make it better?
0
Slick812Commented:
I once again looked at the HTML and CSS for the page -    http://my-friend.co/Login4/Default.aspx    -   And it seems so mixed up and not useful for the display for a Login Page with the <form> and labels and the <input> that are used in it. It is my opinion that you use too many <div> with the   position: absolute; CSS. Also you have at least TWO <div> with the  id="wrapper" which is very very incorrect, you are only suppose to have Just ONE element with the ID of "wrapper".

 It is very troubling to me that you use your <input type="submit"> with a CSS of -   position:fixed; top:30%;left:50%;    - as you have here -

<input type="submit" name="LoginButton" value="登录" id="LoginButton" class="rounded" name="LoginButton" class="LoginButton" AutoEventWireup="true" style="font-weight: bold; position:fixed; top:30%;left:50%; height: 40px; width: 150px; z-index:1000" />

It is inside the <table> with the other inputs for user-name and password, and if it was NOT CSS position: fixed; then it would properly display BELOW the login inputs above it, but as position: fixed it can be Over TOP and covering the user name or password inputs.

It is my view that this Login page could be made MORE Simple, and have a better display. As I have said, today in 2018 MOST web pages are seen on a phone. And this page really needs to be "Responsive" and able to change for the smaller width of a phone browser.
0
HuaMin ChenProblem resolverAuthor Commented:
Sorry, can you please share your way to simply adjust the current page for "better and simple" view?
0
Slick812Commented:
I took some time to do a more simple log in page, It has the moving Image going across the bottom. I have made this somewhat responsive, as the content will become more narrow with displays that are less wide. I do NOT use any <table> as they just are NOT needed for this.
I am not sure if the ASP server code adds and CSS to a page, but this  uses ONLY my CSS which is in the styles.css file. Code below -

this is the styles.css -
        body {
        margin:1px;
        }
        .content {
            position: relative;
            text-align: center;
            max-width: 1020px;
            min-width: 450px;
            padding: 2px;
            border-radius: 1em;
            color: #fff;
            margin:0 auto;
            background:#ccd url('http://my-friend.co/pict/ID-10028343.jpg') no-repeat;
            background-size: cover;
            }
           #img1 {
             position:absolute;
             bottom:5%;
             left:20.3%;
             width:410px;
             margin-top:-32px;
             margin-left:-205px;
             z-index:6;
             }
           .aRight{
             position:absolute;
             top: 5px;
             right: 17px;
             color: white;
             font-family:Verdana;
             font-size: large;
             font-weight: bold;
             text-decoration: none;
             } 
            #inputDiv {
            clear: both;
            display: inline-block;
            margin-top: 66px;
            margin-bottom: 270px;
            }
            #inputDiv input {
            margin: 0.5em 0;
            }
            .labels {
                display:inline-block;
                color:White;
                font-family:Verdana;
                font-size:12pt;
                font-weight:bold;
                width:250px;
            }
            #LoginButton{
                color: black;
                width: 150px;
                height: 40px;
                font-size: x-large;
                font-weight: bold;
                text-decoration: none;
                border-radius: 7px;
                border: 1px solid double red;
                padding: 5px;
                font-weight: bold;
            }    
            #LoginButton:hover{
                background-color: transparent;
                color: white !important;
            }

Open in new window


next is the HTML, My browser is in English, so I had to change your text label characters to english for me to do this. It looks close to the page you have as far as the position of the <form> inputs and labels, you have some <span> that were not used, I only included One as -
     <span id="lblMessage"></span>
which looks like a server Message container, but if it is never used you can remove it.
<!DOCTYPE html>
<html>
<head><title> Login Page </title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    
var im = $("#img1");

function movePic() {
  im.animate({left: '79.7%'}, 3300,"swing");
  im.animate({left: '20.3%'}, 3300,"swing", movePic);
}

movePic();

});
</script>

</head>
<body>
<div class="content">
<form method="post" action="./Default.aspx" id="main_form">
<div class="aspNetHidden">
  <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
  <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="pQFRCkN+OZPrxDjJ5SGETbnjh1GnX9mMHmmPgKoWKydbnSN61M0gXgsZ4dRK0iqhK/qUz4VON2PDdqn7IKoaXUWFPbazMrBZKxP8w0LokttQj/v6sVr9xc4bexORbZDiNuGuEUpqJtGn38FyJdEqAqXfzfnSpMcdHqvrR/ty3vlCY96i+dDhp+zQsCajMthdAHPKKmXejdkz3iMiavJy8LTI5MmrT4dswhhOhu9lkQs=" />
  <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="6FBB0BBE" />
  <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="C7tjkmyW+WItghkHmnNBt3ZUic9HrnO9+fMseC5P6Kgn6z3bPOfrMe3gbhqSNfbZof2xZb/k1kCGjxSiSTCklCRidZP7e9y1VZG/poWYvE5ynjb7Gr6vCM2IxGnVSWygDoR+wjD488zhH+mcI2pb9gtUcXHnh8sTIii2AITftPvX2whMwkRm5Js5FfFEUThgOUYo3R7Wvj+QdNiWQjZBCFzF0tAwv63j8KK3zIfyYCc=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['main_form'];
if (!theForm) {
    theForm = document.main_form;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
<a id="lb_user_acc" class="aRight" href="javascript:__doPostBack(&#39;lb_user_acc&#39;,&#39;&#39;)">Submit</a>
<div id="inputDiv">
<span id="Label1" style="color:White;font-family:Verdana;font-size:20pt;font-weight:bold;font-weight: bold;">Login</span>
<hr>
<span id="lb_user" class="labels">userID</span> 
<input name="tb_userid" type="text" id="tb_userid" style="width:120px;" />
<br />
<span id="lb_pass" class="labels">password</span> 
<input name="tb_password" type="password" id="tb_password" style="width:120px;" />
<br />
<span id="Lb_cal" class="labels">35 Go resudolo ?</span> 
<input name="tb_res" type="text" id="tb_res" style="width:120px;" />
<br />
<span id="Label2" class="labels">save</span> 
<span style="display:inline-block;width:120px;"><input id="cb1" type="checkbox" name="cb1" /></span>
<br /><br />
<input type="submit" name="LoginButton" value="Login" id="LoginButton" AutoEventWireup="true" />
<br />
<span id="lblMessage"></span>
</div>
</form>
<img id="img1" src="http://my-friend.co/pict/House1.png" />
</div>
<div style="text-align:right;max-width: 1180px;margin:0 auto;">
        <span id="lb1" style="font-size:9pt;">Image by luigi diamanti / FreeDigitalPhotos.net</span>
    </div>
</body>
</html>

Open in new window

there are many other ways to code this with HTML and CSS to look like your page. This works for me as a Log In display

- - - - - - - - - - - - - - - -
AND you should NEVER include more than ONE Jquery File in a web page as you do, the jquery version 1.9.1 is very very OUT OF DATE now, so All I use is the
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 as version 3.3.1 is more current
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HuaMin ChenProblem resolverAuthor Commented:
Hi Slick,
I already am using such script below
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Open in new window


and what to adjust?
0
Slick812Commented:
not sure how to answer your question? ? On this page you do NOT have anything that uses the Jquery User Interface code in -
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
so you do not need that, , ,  unless you have other code ( like a menu bar ) that goes on this page that does use the JQ interface.

You have a very OLD version of Jquery listed as -
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
so you should not use such an old version of Jquery,

So unless there is more code to this page , all you need is one script as -
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.