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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Show image for 5 seconds but before another picture that is delayed for 5 seconds

    Hi Everyone,

    I've managed to learn stuff myself but this has got me stuck, hope you can help.

    I have a button that has many actions - mostly unhiding text or buttons, I have also put a timer delay on one of the images (google map marker)

    But I also want an animated "searching" gif to come on once the same button is clicked then go away after 5 seconds: so the searching animation comes up then 5 seconds later the marker on google maps shows up (as if it's really searching for a location but it's not, i'm faking it)

    Here is the code I've found that does the giff and timer:

    Code:
    <input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br>
    <div id = "myDiv" style="display:none"><img id = "myImage" src = "http://studyrays.com/resources/images/search_anim.gif"></div><br>
    
    <script type = "text/javascript">
    
    function show() {
    document.getElementById("myDiv").style.display="block";
    setTimeout("hide()", 5000);  // 5 seconds
    }
    
    function hide() {
    document.getElementById("myDiv").style.display="none";
    }
    
    </script>

    Here's the code I have for "some" of the page i'm working on:

    Code:
    ul for the following reason: " + status);
        }
      }
    
      function addMarkerAtCenter() {
    map.setZoom(map.getZoom() + 8);
    var image = 'http://i47.tinypic.com/25zs048.jpg';
        var marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
          icon: image
        });
    
        var text = 'Lat/Lng: ' + getCenterLatLngText();
        if(currentReverseGeocodeResponse) {
          var addr = '';
          if(currentReverseGeocodeResponse.size == 0) {
            addr = 'None';
          } else {
            addr = currentReverseGeocodeResponse[0].formatted_address;
          }
          text = text + '<br>' + 'address: <br>' + addr;
        }
    
        var infowindow = new google.maps.InfoWindow({ content: text });
    
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
      }
    
    </script>
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
    
    </head>
    <body onload="initialize()">
      Enter the items desitination country: <input type="text" id="address"/><input type="button" value="Go" onclick="geocode();setVisibility('sub3', 'inline');setVisibility ('sub4', 'inline');";>
    <br>
    
    <input type="hidden" name="Language" value="English"></div>
    <input  div id="sub3" type="text" size="25" style="display:none;" value="Enter Barcode Number">
    <input  div id="sub4" type="button" style="display:none;" value="Go" onclick="setVisibility('sub5', 'inline');";><br>
    <input div id="sub5" type="button" style="display:none;" value="Last known position" onclick="setTimeout('tFunc();', 5000);" />
    <script type="text/javascript" language="javaScript">
    function tFunc() {addMarkerAtCenter();setVisibility('sub6', 'inline');setVisibility('sub7', 'inline');setVisibility('sub8', 'inline');setVisibility('sub10', 'inline');
      }
    </script><br>
    <div id="sub6" style="display:none;" >To get the exact location where the item is now, Enter the bracode number in your satilite reciever and then enter these numbers:-  33438844903  Now enter the numbers you see on your satilte receiver in to this box. </div> 
    <input  div id="sub7" type="text" size="25" style="display:none;" value="Type recievers numbers here">
    <input  div id="sub8" type="button" style="display:none;" value="Go" onclick="setVisibility('sub9', 'inline');";><br>
    <div id="sub9" style="display:none;" <font color="red"><b>Incorrect numbers entered, please try again.</b></font></div> 
    <input type="hidden" name="Language" value="English"></div>
    <br></body>
      <div id="map">
        <div id="map_canvas" style="width:100%; height:400px"></div>
        <div id="crosshair"></div>
      </div>

    The part where the "searching image needs to show up for 5 seconds is here:
    Code:
    <input div id="sub5" type="button" style="display:none;" value="Last known position" onclick="setTimeout('tFunc();', 5000);" />
    <script type="text/javascript" language="javaScript">
    You'll see I have set everything to appear on button click after 5 seconds, but I need the "searching image" to start on the button click and then go away at 5 seconds so the rest of the buttons and text show up after the "searching image" goes away.

    Any help would be really great, my eyes are now blood shot trying to get the two to work together.
    Thanks

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Exclamation

    It would be nice if you could put your code into a sequence that could be tested.
    Taking the 3 previous blocks of posts, this is my SWAG as to what you want.

    Problem is, it won't work as you have indicated because
    the function "initialize()" is not available to load with the body

    Plus you have some orphaned code that I have no idea where it is to go.

    Re-arrange your display and include any missing code.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    
    <input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br>
    <div id = "myDiv" style="display:none">
    <img id = "myImage" src = "http://studyrays.com/resources/images/search_anim.gif"></div><br>
    
    <!-- orphaned code ?????
    ul for the following reason: " + status);
        }
      }
    -->
    
    <body onload="initialize()">
      Enter the items desitination country:
     <input type="text" id="address"/>
     <input type="button" value="Go"
      onclick="geocode();setVisibility('sub3', 'inline');setVisibility ('sub4', 'inline');";>
    <br>
    
    <input type="hidden" name="Language" value="English"></div>
    <input  div id="sub3" type="text" size="25" style="display:none;" value="Enter Barcode Number">
    <input  div id="sub4" type="button" style="display:none;" value="Go" onclick="setVisibility('sub5', 'inline');";><br>
    <input div id="sub5" type="button" style="display:none;" value="Last known position" onclick="setTimeout('tFunc();', 5000);" />
    
    <br>
    <div id="sub6" style="display:none;" >
    To get the exact location where the item is now, Enter the bracode number in your satilite reciever
     and then enter these numbers:-  33438844903  Now enter the numbers you see on your satilte receiver in to this box. 
    </div> 
    <input  div id="sub7" type="text" size="25" style="display:none;" value="Type recievers numbers here">
    <input  div id="sub8" type="button" style="display:none;" value="Go" onclick="setVisibility('sub9', 'inline');";><br>
    <div id="sub9" style="display:none;" <font color="red"><b>Incorrect numbers entered, please try again.</b></font></div> 
    <input type="hidden" name="Language" value="English"></div>
    
    <br>
      <div id="map">
        <div id="map_canvas" style="width:100%; height:400px"></div>
        <div id="crosshair"></div>
      </div>
    
    <input div id="sub5" type="button" style="display:none;"
     value="Last known position" onclick="setTimeout('tFunc();', 5000);" />
    
    <script type = "text/javascript">
    
    function show() {
      document.getElementById("myDiv").style.display="block";
      setTimeout("hide()", 5000);  // 5 seconds
    }
    
    function hide() {
      document.getElementById("myDiv").style.display="none";
    }
    
    function tFunc() {
      addMarkerAtCenter();
      setVisibility('sub6', 'inline');setVisibility('sub7', 'inline');
      setVisibility('sub8', 'inline');setVisibility('sub10', 'inline');
    }
    
    function addMarkerAtCenter() {
      map.setZoom(map.getZoom() + 8);
      var image = 'http://i47.tinypic.com/25zs048.jpg';
        var marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
          icon: image
        });
    
        var text = 'Lat/Lng: ' + getCenterLatLngText();
        if(currentReverseGeocodeResponse) {
          var addr = '';
          if(currentReverseGeocodeResponse.size == 0) {
            addr = 'None';
          } else {
            addr = currentReverseGeocodeResponse[0].formatted_address;
          }
          text = text + '<br>' + 'address: <br>' + addr;
        }
    
        var infowindow = new google.maps.InfoWindow({ content: text });
    
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
      }
    
    function setVisibility(id, visibility) {
      document.getElementById(id).style.display = visibility;
    }
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi

    Thank you so much for the reply, I'm new to this (as you guessed! )
    And I'm trying to learn as much as I can, what I've been doing is finding the code that I want and fitting it in to the google map code, which hasn't worked out as easy as thought, but I'm picking up bits as I'm going.

    Here is the full code that I've been working on.

    Code:
    <html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <head>
    <style type="text/css">
      div#map {
        position: relative;
      }
    
      div#crosshair {
        position: absolute;
        top: 192px;
        height: 19px;
        width: 19px;
        left: 50%;
        margin-left: -8px;
        display: block;
        background: url(crosshair.gif);
        background-position: center center;
        background-repeat: no-repeat;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var geocoder;
      var centerChangedLast;
      var reverseGeocodedLast;
      var currentReverseGeocodeResponse;
    
      function initialize() {
        var latlng = new google.maps.LatLng(32.5468,-23.2031);
        var myOptions = {
          zoom: 2,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        geocoder = new google.maps.Geocoder();
    
    
        setupEvents();
        centerChanged();
      }
    
      function setupEvents() {
        reverseGeocodedLast = new Date();
        centerChangedLast = new Date();
    
        setInterval(function() {
          if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
            if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
              reverseGeocode();
          }
        }, 1000);
    
        google.maps.event.addListener(map, 'zoom_changed', function() {
          document.getElementById("zoom_level").innerHTML = map.getZoom();
        });
    
        google.maps.event.addListener(map, 'center_changed', centerChanged);
    
        google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
           map.setZoom(map.getZoom() + 1);
        });
    
      }
    
      function getCenterLatLngText() {
        return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
      }
    
      function centerChanged() {
        centerChangedLast = new Date();
        var latlng = getCenterLatLngText();
        document.getElementById('latlng').innerHTML = latlng;
        document.getElementById('formatedAddress').innerHTML = '';
        currentReverseGeocodeResponse = null;
      }
    
      function reverseGeocode() {
        reverseGeocodedLast = new Date();
        geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
      }
    
      function reverseGeocodeResult(results, status) {
        currentReverseGeocodeResponse = results;
        if(status == 'OK') {
          if(results.length == 0) {
            document.getElementById('formatedAddress').innerHTML = 'None';
          } else {
            document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
          }
        } else {
          document.getElementById('formatedAddress').innerHTML = 'Error';
        }
      }
    
    
      function geocode() {
        var address = document.getElementById("address").value;
        geocoder.geocode({
          'address': address,
          'partialmatch': true}, geocodeResult);
      }
    
      function geocodeResult(results, status) {
        if (status == 'OK' && results.length > 0) {
          map.fitBounds(results[0].geometry.viewport);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      }
    
      function addMarkerAtCenter() {
    map.setZoom(map.getZoom() + 8);
    var image = 'http://i47.tinypic.com/25zs048.jpg';
        var marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
          icon: image
        });
    
        var text = 'Lat/Lng: ' + getCenterLatLngText();
        if(currentReverseGeocodeResponse) {
          var addr = '';
          if(currentReverseGeocodeResponse.size == 0) {
            addr = 'None';
          } else {
            addr = currentReverseGeocodeResponse[0].formatted_address;
          }
          text = text + '<br>' + 'address: <br>' + addr;
        }
    
        var infowindow = new google.maps.InfoWindow({ content: text });
    
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
      }
    
    </script>
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
    
    </head>
    <body onload="initialize()">
      Enter the items desitination country: <input type="text" id="address"/><input type="button" value="Go" onclick="geocode();setVisibility('sub3', 'inline');setVisibility ('sub4', 'inline');";>
    <br>
    
    <input type="hidden" name="Language" value="English"></div>
    <input  div id="sub3" type="text" size="25" style="display:none;" value="Enter Barcode Number">
    <input  div id="sub4" type="button" style="display:none;" value="Go" onclick="setVisibility('sub5', 'inline');";><br>
    <input div id="sub5" type="button" style="display:none;" value="Last known position" onclick="setTimeout('tFunc();', 5000);" />
    <script type="text/javascript" language="javaScript">
    function tFunc() {addMarkerAtCenter();setVisibility('sub6', 'inline');setVisibility('sub7', 'inline');setVisibility('sub8', 'inline');setVisibility('sub10', 'inline');
      }
    </script><br>
    <div id="sub6" style="display:none;" >To get the exact location where the item is now, Enter the bracode number in your satilite reciever and then enter these numbers:-  33438844903  Now enter the numbers you see on your satilte receiver in to this box. </div> 
    <input  div id="sub7" type="text" size="25" style="display:none;" value="Type recievers numbers here">
    <input  div id="sub8" type="button" style="display:none;" value="Go" onclick="setVisibility('sub9', 'inline');";><br>
    <div id="sub9" style="display:none;" <font color="red"><b>Incorrect numbers entered, please try again.</b></font></div> 
    <input type="hidden" name="Language" value="English"></div>
    <br></body>
      <div id="map">
        <div id="map_canvas" style="width:100%; height:400px"></div>
        <div id="crosshair"></div>
      </div>
    
      <table>
        <tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
        <tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr>
        <tr><td>Zoom Level</td><td><div id="zoom_level">2</div></td></tr>
      </table>
    </body>
    </html>

    I'm kinda surprised I've got this far and it works just how I wanted it to. (3 whole days to add the button and text to google maps code).

    If you test it you'll see when you press the "last known position" button there is the 5 second delay before the map zooms in and the marker shows up, it's in that 5 seconds the "searching" giff would be perfect.

    Once again thank you so much for taking the time.

    P.s, I have another website that needs some coding done (paid) can I post on this forum about paid work?

    Thanks
    Last edited by VIPStephan; 02-18-2013 at 10:51 PM. Reason: corrected code BB tags


  •  

    Posting Permissions

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