Page 4 of 6 FirstFirst ... 23456 LastLast
Results 31 to 40 of 51

Thread: Javascript solution for image link issue

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

    Default

    Quote Originally Posted by coothead View Post

    No problem, you're very welcome.

    coothead
    you wouldn't happen to know how to set up a multiple choice quiz where the score is displayed with graphics instead of numbers?
    or how to use raycasting in three.js to place 2d hrefs in 3d coordinate space? http://theangelsquest.com/test/earth...rstperson.html i'd like to make it so if you're flying toward the planet's surface, once you reach a certain coordinate range, anywhere around the planet in a big sphere (like an invisible gigantic raycasted sphere that encases the planet so that flying into it immediately opens a new html page)
    or how to make the zoom script you helped with, controllable with up and down arrow keys instead of the input buttons?



    i'd like to give her the chance to walk instead of always being on the tram or a conveyer belt. in the cafe sequence, for example, i'd like to make it so she walks between each cooking area, rather than riding the tram. i have an animation of her walking that contains two images, that can be animated (if memory serves) when one of the arrow keys is pressed and held down. of course, since you always see her from the back in third person camera perspective, if she were to go backwards, she'd appear to be walking backwards from the back unless i made another animation where's she's walking from the front. that might be a tad bit disconcerting though (She'd look like she was moonwalking from the back though hehe). here's the sequence i'd like to use arrow keys from keyboard instead of input buttons
    http://theangelsquest.com/test/earth...ttle/cafe.html
    Last edited by jundo12; 05-05-2017 at 01:36 PM.

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

    Default

    Quote Originally Posted by coothead View Post
    Hi there jundo12,

    the following example has individual links for each image state...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/">
    <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="screen.css" media="screen">-->
    <style media="screen">
    html {
        touch-action: none;
        content-zooming: none;
     }
    
    body {
        margin: 0;
        padding: 0;
        background: #000;
     }
    
    #screen {
        position: absolute;
        width: 100vw;
        height: 100vh;
        max-width: 640px;
        max-height: 480px;
        margin: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
     }
    
    #zoom {
        width: 100%;
        height: 100%;
        transition: transform 2s ease-in-out 0s;
        transform: scale3d(0.000729, 0.000729, 1);
     }
    
    #zoom img {
        position: absolute;
        width: 640px;
        height: 480px;
        top: 50%;
        left: 50%;
        margin-left: -320px;
        margin-top: -240px;
     }
    #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%;}
    #i7 + 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);}
    #i7: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,
    #i7:checked ~ #a7 {
        z-index: 2;
     }
    </style>
    
    </head>
    <body> 
    
    <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="i7" name="doot" type="radio">
     <label for="i7"></label>
    
     <a id="a1" href="https://aws.amazon.com/"></a>
     <a id="a2" href="https://google.com"></a>
     <a id="a3" href="https://yahoo.com"></a>
     <a id="a4" href="https://www.ecosia.org/"></a>
     <a id="a5" href="https://www.startpage.com/"></a>
     <a id="a6" href="https://bing.com/"></a>
     <a id="a7" href="https://duckduckgo.com/"></a>	
    
    <div id="zoom">
     <img src="bd1b.jpg" alt="">
     <img src="bd2b.jpg" alt="">
     <img src="bd3b.jpg" alt="">
     <img src="bd4b.jpg" alt="">
     <img src="bd5b.jpg" alt="">
     <img src="bd6b.jpg" alt="">
     <img src="bd7b.jpg" alt="">
    
    <!-- #zoom --></div>
    	
    <!-- #screen --></div>
    
    </body>
    </html>

    coothead
    hmmm doesn't appear to be working. where's the screen.css file? you mean the css in the header? none of the images are appearing, even though they are the same images in the working example

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

    Default

    oh i figured out the problem. the "base href" was not necessary and went to an inaccessible page

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

    Default

    is there a way with javascript to have it auto click one of the buttons i indicate *by putting the id (either a7 or i7, for example)? i have tried pretty much every combination and the auto click function just seems to not understand what it needs to click, even when i indicate the id of the link or input id. i've tried it with auto click link javascript and auto click input button javascript. neither worked. it treats it like a jump to image, rather than clicking the link button and letting it perform its function (zooming)
    Last edited by jundo12; 05-17-2017 at 12:16 PM.

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

    Default

    k i resolved it for the first click. thing is, i'm trying to chain the zoom into another zoom of the same thing on a new page. i have a timer that tells it after 4 seconds, load a new page. i'd prefer the timer start after it auto clicks. but the real issue is what happens when the new page loads with same auto click, same images, mostly the same html. it seems to be acting like its cached and therefore will not auto click the button again. is there a way to force it to auto click again on a new page?

    i mean, i suppose i could give it a different id for each new page, just seems silly that it doesn't understand this is a new page. do what the javascript says to do on this new page. also it does occassionally ignore the zoom function entirely and just jumps to the last image. it needs to just push the button each time the javascript tells it to and let the button do what it does. dunno why it's trying to also do the function of the button itself. just push button. nothing more nothing less. lol

    p.s. i'm using the i7 id, rather than the a7 id.
    Last edited by jundo12; 05-17-2017 at 01:23 PM.

  6. #36
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    402
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    I don't fully understand what it is you are trying to do but this might help:

    https://www.w3schools.com/js/js_cookies.asp

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

    Default

    Quote Originally Posted by styxlawyer View Post
    I don't fully understand what it is you are trying to do but this might help:

    https://www.w3schools.com/js/js_cookies.asp
    this link is an example of the zoom http://theangelsquest.com/test/earth...testings4.html
    now say i want to simulate a nearly endless zoom. which is started when the person clicks the link that goes to the page containing the first set of zooms. it can only zoom up to 7 images per page. i usually go for 5-6 images. so to simulate an endless zoom i got the idea that i could put a timer on the page, that after so many seconds, it automatically goes to the next page of zooms. and to make the whole thing automated, a script that automatically pushes the button that zooms to last image on the page. i know that's a clumsy way to do so. if you know how i could include the timer into the auto click script, that'd be great. these are the two scripts

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

    <script type="text/JavaScript">
    setTimeout(function(){document.location.href = "south3.html"},3000);

    </script>
    --

    the issue is, when the timer goes to the next page of zooms, the auto click doesn't click. it just sits there. i have to hard reload the page to get it to run the script, and occasionally, it will jump to the last image, rather than zooming to last image

  8. #38
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    402
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    Quote Originally Posted by jundo12 View Post
    .
    .
    the issue is, when the timer goes to the next page of zooms, the auto click doesn't click. it just sits there. i have to hard reload the page to get it to run the script, and occasionally, it will jump to the last image, rather than zooming to last image

    When you load a new HTML page any JavaScript from the previous page is lost. In order to carry JavScript data forward to a new HTML page you will have to use temporary storage in the form of cookies. 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.

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

    Default

    Quote Originally Posted by styxlawyer View Post
    When you load a new HTML page any JavaScript from the previous page is lost. In order to carry JavScript data forward to a new HTML page you will have to use temporary storage in the form of cookies. 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.

    but i use the same javascript on the new page. it doesn't need to be carried over since it's declared all over again. maybe i am misunderstanding you? it's acting like it's cached, sorta like large .gifs do, where you have to make the same .gif with different names to get it to play on later pages, since it's cached and browser says, "Been there, done that," and ignores running the animation. just shows the gif with its last frame. well that's essentially what is happening on pages following the first one. the first one won't even play, just jumps to last image in the zoom, if i have been to it recently. so it's caching. i have to hard reload the page to get it to read the javascript again. and then the second page just jumps to last image as well, cause now, it's cached from the first page, or simply ignores the javascript entirely and just sits there while the timer counts down.

    p.s. it doesn't do this if i'm not trying to use the javascript to auto click the button. if i push the button manually, it doesn't jump to last image, it zooms to last image. so it's the auto click that seems to be causing the problem. is there perhaps an easier way to make an "endless zoom"?
    Last edited by jundo12; 05-18-2017 at 12:32 PM.

  10. #40
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    402
    Thanks
    0
    Thanked 47 Times in 44 Posts

    Default

    Quote Originally Posted by jundo12 View Post
    but i use the same javascript on the new page. it doesn't need to be carried over since it's declared all over again. maybe i am misunderstanding you?
    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.

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
  •