Page 5 of 6 FirstFirst ... 3456 LastLast
Results 41 to 50 of 51

Thread: Javascript solution for image link issue

  1. #41
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    Yes, you are loading the same JavaScript code again, but the problem seems to be that the new code doesn't know how far the old code on the previous page had progressed. It's not the code that is the problem but the state of the variables used within the code which are all unknown when the new page loads.

    I now also see that you are running animated GIFs, which you didn't mention before. As animated GIFs are self-contained it makes it much more difficult to know how far the animation has gone. As far as I know there's no means of determining which frame an animated GIF is currently displaying. Neither can you force an animated GIF to start displaying from a particular frame. You may need to separate the frames of each GIF file and animate them with JavaScript. Then you will be able to pass the data to the new page determining exactly which frame the animation has reached when the new page loads.
    oh the gif is not having any problem. in fact, it goes happily along for the ride. the issue is the background images that are zoomed. so i need to load javascript as a cookie or something? can you give me an example of how to write this
    <script type="text/javascript">
    document.getElementById("i7a").click();
    </script>

    as a cookie?

  2. #42
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    When leaving a page write the current state of the variables to cookies (in plain text), then read the cookies when the new page is loaded.
    not sure what you mean by this. i read the cookies link you gave, but not sure how that applies to what you are suggesting about "the current state of variables" nor how to "read" the cookies on new page

  3. #43
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    430
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    A cookie simply carries data from one HTML page to another one. Only you can decide what data needs to be forwarded so that a smooth transition can be displayed as you change HTML pages.

    There is an excellent treatise on how to use cookies on this page.

  4. The Following User Says Thank You to styxlawyer For This Useful Post:

    jundo12 (05-19-2017)

  5. #44
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    i don't understand why a javascript code on a different page would be trying to keep track of javascript code on another page. such as your comment that it doesn't know the state of progress of the variables in the previous code. it's not the type of code that is supposed to be keeping track of what is happening on a different page. it's just supposed to perform its function when called for. and its only function is to auto click an input button

    for example, the other javascript code is a timer. after 4 seconds, it goes to new html page. when it gets to new page, it's on that page as well. it doesn't stop counting because it counted on previous page. it doesn't keep track of the timer variables on the previous page. it just starts counting down again. so what is it about this other javascript auto click that makes it necessary for it to keep track of what is happening on previous page, when its only function was to click a button lol

    like a mouseover function doesn't stop to check the state of variables of mouseover function on a previous page where it was also located . it's a new page. it forgets the old page, and performs its function on new page.
    Last edited by jundo12; 05-19-2017 at 03:42 PM.

  6. #45
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    430
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    I'm sorry, but I don't understand what you are trying to do. I did look at the source of the page but couldn't follow the flow of the code as there are numerous nesting errors. I passed the page to the W3C validator and it finally gave up after clocking up 239 errors:

    https://validator.w3.org/nu/?doc=htt...testings4.html

  7. The Following User Says Thank You to styxlawyer For This Useful Post:

    jundo12 (05-19-2017)

  8. #46
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    I'm sorry, but I don't understand what you are trying to do. I did look at the source of the page but couldn't follow the flow of the code as there are numerous nesting errors. I passed the page to the W3C validator and it finally gave up after clocking up 239 errors:

    https://validator.w3.org/nu/?doc=htt...testings4.html
    pretend like you've just walked into a nutty professor's laboratory. the professor is trying to piece together normal html, css, webgl and javascript commands so that they simulate game functions on a normal website page, without the full use of an actual game engine. it's all highly experimental and patchworked together in bits and pieces.

    btw nice validator link. i'm surprised it's having a tizzy over basic html lol OMG I USED <CENTER>! hehe
    they've gotten all high and mighty with the awesome css div and stylesheets (center is better used when all you need is to center something since the div equivalent would require several declarations instead of just one . they probably shouldn't deprecate basic html )
    since when did they deprecate the font command? ya know <font face="arial"> etc? now you must put it in a stylesheet! that requires using separate styles for each instance of font change in the stylesheet. personally, i dont think they should deprecate font commands either.
    i havent titled the page yet. didn't know that would be considered an error. i guess google is getting bossy.
    i did warn, earlier on, that my code is a tangled mess and that real coders would laugh at the insanity of it all. i must be psychic. lol

    as far as what i'm trying to do in these last few posts: all i was trying to do was to get a javascript to auto click an input button on each page where it is found. that's it. but it appears to want to cache the code as if it were running a gigantic .gif animation. but it isn't running a gif animation == its pushing a button! lol it's not supposed to be worrying about the zoom function, it's just supposed to auto click the input button that starts the zoom function. what's it doing, worrying about the state of the variables especially on a different page?

    p.s. the page i linked you to, is not the page i'm having problems with. i just wanted you to see what the zoom was like. it zooms thru 1-7 images. done.
    the nested issues are my pieced together UI, which is a series of toggled divs, some of which have toggled divs inside of them. this is all in a very rough state. ignore the ui. it's just a bunch of nested css divs with toggles. the actual problem is the javascript auto click not running on a second page, acting like its function is done even when it's being called on a brand new page. its behaving oddly.

    the concept was to simulate an endless zoom by using two javascripts in association with the zoom html/css. the first javascript is a timer, that counts down 4 seconds before going to a new page. the second javascript auto clicks the input button that starts the zoom. i deliberately told it to click the input button that zooms to the last image in the zoom series . so while it's zooming to last image, the timer is counting down and changes to new page at the end of 4 seconds,where the whole thing should be repeated... et.al, the timer starts again, the auto click auto clicks again..... however, that's not what it ended up doing. only the timer starts again. the auto click doesn't auto click again. it's acting as if it were only usable one time on one page and that's it.
    Last edited by jundo12; 05-20-2017 at 01:44 AM.

  9. #47
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    perhaps this would help. this is the code of the actual page i'm working on. i have left out the nested divs that compromise my makeshift game ui.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>untitled document</title>
    <!--<link rel="stylesheet" href="" media="">-->
    <style media="screen">
    html {
    overflow: hidden;
        touch-action: none;
        content-zooming: none;
     }
    
    body {
       	position: absolute;
    		margin: 0;
    		padding: 0;
    		width: 100%;
    		height: 100%;
    		background: #000;
     }
    
    #screen {
        position: absolute;
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
     }
    
    #zoom {
        width: 100%;
        height: 100%;
        transition: transform 7s ease-in-out 0s;
        transform: scale3d(0.000729, 0.000729, 1);
     }
    
    #zoom img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        margin-left: 0px;
        margin-top: 0px;
     }
    #screen a {
        position: absolute;
        width: 100%;
        height: 100%;
     }
    
    #zoom img:nth-child(7) {transform: scale3d(1, 1, 1);}
    #zoom img:nth-child(6) {transform: scale3d(3.3333, 3.3333, 1);}
    #zoom img:nth-child(5) {transform: scale3d(11.1111, 11.1111, 1);}
    #zoom img:nth-child(4) {transform: scale3d(37.037, 37.037, 1);}
    #zoom img:nth-child(3) {transform: scale3d(123.4567, 123.4567, 1);}
    #zoom img:nth-child(2) {transform: scale3d(411.5226, 411.5226, 1);}
    #zoom img:nth-child(1) {transform: scale3d(1371, 1371, 1);}
    
    #screen input[type="radio"] + label {
        position: absolute;
        bottom: 10px;
        width: 8%;
        height: 30px;
        cursor: pointer;
        background: #fff;
        margin: 0;
        z-index: 100;
        border-radius: 5px;
        outline: none;
     }
    
    #i1 + label {left: 16%;}
    #i2 + label {left: 26%;}
    #i3 + label {left: 36%;}
    #i4 + label {left: 46%;}
    #i5 + label {left: 56%;}
    #i6 + label {left: 66%;}
    #i7a + label {left: 76%;}
    
    #screen > input {
        position: absolute;
    	top: -1000px;
     }
    
    #screen > input:checked + label {background: #f80;}
    
    #i1:checked ~ #zoom {transform: scale3d(0.000729, 0.000729, 1);}
    #i2:checked ~ #zoom {transform: scale3d(0.00243, 0.00243, 1);}
    #i3:checked ~ #zoom {transform: scale3d(0.0081, 0.0081, 1);}
    #i4:checked ~ #zoom {transform: scale3d(0.027, 0.027, 1);}
    #i5:checked ~ #zoom {transform: scale3d(0.09, 0.09, 1);}
    #i6:checked ~ #zoom {transform: scale3d(0.3, 0.3, 1);}
    #i7a:checked ~ #zoom {transform: scale3d(1, 1, 1);}
    
    #i1: checked ~ #a1,
    #i2: checked ~ #a2,
    #i3: checked ~ #a3,
    #i4: checked ~ #a4,
    #i5: checked ~ #a5,
    #i6: checked ~ #a6,
    #i7a: checked ~ #a7 {
        z-index: 2;
     }
    </style>
    
    </head>
    <body> 
    <Script>
    myAudio = new Audio('data3.mp3'); 
    myAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
    myAudio.play();
    
    </script>
    
    
    <script type="text/JavaScript">
    setTimeout(function(){document.location.href = "south3.html"},3000);
          
     </script>
    <div id="screen">
    
      <input id="i1" name="doot" type="radio" checked>
     <label for="i1"></label>
       <input id="i2" name="doot" type="radio" >
     <label for="i2"></label>
       <input id="i3" name="doot" type="radio" >
     <label for="i3"></label>
     <input id="i4" name="doot" type="radio" >
     <label for="i4"></label>
       <input id="i5" name="doot" type="radio" >
     <label for="i5"></label>
       <input id="i6" name="doot" type="radio" >
     <label for="i6"></label>
        <input id="i7a" name="doot" type="radio" >
     <label for="i7a"></label>
     
     <a id="a1" href="#"></a>
      <a id="a2" href="#"></a>
      
      <a id="a3" href="#"></a>
       <a id="a4" href="#"></a>
        <a id="a5" href="#"></a>
    	 <a id="a6" href="#"></a>
    
    	  <a id="a7"   href="south2.html"></a>
    
    
    <div id="zoom">
    
    	<img src="south1e.png" alt="">
    				<img src="south1d.png" alt="">
    				<img src="south1d.png" alt="">
    				<img src="south1d.png" alt="">
    				<img src="south1d.png" alt="">
    				<img src="south1d.png" alt="">
    
    
    
    <!-- #zoom --></div>
    	
    <!-- #screen --></div>
    <script type="text/javascript">
    document.getElementById("i7a").click();
    </script>
    this bit
    <script type="text/JavaScript">
    setTimeout(function(){document.location.href = "south3.html"},3000); </script>

    tells it to go to a new page named south3.html after 3 seconds.

    this bit
    <script type="text/javascript">
    document.getElementById("i7a").click();</script>

    tells it to auto click the input button with the id of "i7a." the input button i7a is the input button associated with the last image in the zoom, which normally causes the camera to zoom to the last image if it is clicked.

    i'm not telling it to zoom to the last image of the entire endless zoom. i'm just telling it to zoom to the last image on THAT (the current) page. and when timer goes to new page, to auto click input button to zoom to last image on the NEW page. and keep repeating this every time the timer goes to new page. no need to pass variables since all images being called upon on that page, are all present and accounted for, on THAT page.*by last image i just mean the seventh image on any given page, since seven is the most images you can have per page. it works because all the images are identical. so it doesn't matter where it stops on one page to go to another cause every image is the same, no need to keep track of progress on prior page since the new page has identical images (visual continuity isn't a problem). it's similar in concept to a subway ride. if you were looking out the window at the wall, you would see the intermittent girders and walls are pretty much the same, repeatedly, as they whiz past your view. same idea.
    Last edited by jundo12; 05-20-2017 at 03:05 AM.

  10. #48
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    maybe if i used the cookie thing to wipe from memory, the previous page, so it treats the auto click script as if it were a new thing, each time
    .............
    a few minutes later....

    Nope. that's not going to work. it's still occassionally just jumping to last image in the zoom, instead of zooming to last image in zoom.
    the auto click was just supposed to click the button. i didn't realize that it was also going to try to perform the button's function. that was the job of the css.
    le mew, le sigh. back to the drawing board.
    Last edited by jundo12; 05-20-2017 at 03:40 AM.

  11. #49
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    430
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    Quote Originally Posted by jundo12 View Post
    .
    .
    p.s. the page i linked you to, is not the page i'm having problems with.
    .
    .
    Hmmm, that makes it impossible for anyone help you as without seeing the real problem it's all guesswork.

  12. #50
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    Hmmm, that makes it impossible for anyone help you as without seeing the real problem it's all guesswork.
    it won't work anyway, as it just jumps to last image half the time. the javascript takes over the function of the input button but doesn't run the entire function. once in a great while it works. most of the time it doesn't.

    what about this fantastic script http://arkadia.xyz/ any way that could be coded so that i can just insert normal images? looks like he might be using svgs or something. not sure. i looked at his javacript for the zoom and its pretty programmy. it's really cool that you can increase the forward momentum by pushing the up arrow on your keyboard! that is an amazing piece of javascript

    on top of zooming endlessly thru several images, and offering the option of going faster or reverse, it also goes thru various color variations as it's running. that is a flippin' work of art.
    Last edited by jundo12; 05-22-2017 at 09:20 AM.

Similar Threads

  1. JavaScript and/or CSS solution
    By Sebah in forum JavaScript
    Replies: 2
    Last Post: 07-18-2010, 09:03 PM
  2. Javascript Issue (swapping image)
    By TMM1BX in forum JavaScript
    Replies: 0
    Last Post: 03-15-2009, 07:31 PM
  3. Javascript image swap with link
    By sakocreative in forum JavaScript
    Replies: 0
    Last Post: 06-13-2007, 05:30 PM
  4. Image copyright solution
    By The Roman in forum Other
    Replies: 20
    Last Post: 05-26-2006, 05:34 PM
  5. Javascript Dilemma, Simple Solution.?
    By f0ssil0o in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-22-2006, 11:43 PM

Bookmarks

Posting Permissions

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