16 {{ upvoteCount | shortNum }}
16 {{ upvoteCount | shortNum }}

Need help to refresh pic on sidebar widget in wordpress

by theimdude
12 replies
Hi,

I have added a cam that upload a picture to a wordpress site that I want to auto refresh by itself but I don't want the page to refresh.

At the moment I have managed to get it to work if you click on a link the pic will refresh only and the page is not refreshed. It is part of a news site.

This is the code I found and is using. If anybody can help it would be much appreciated

cam.js

function reloadImg(id) {
var obj = document.getElementById(id);
var src = obj.src;
var pos = src.indexOf('?');
if (pos >= 0) {
src = src.substr(0, pos);
}
var date = new Date();
obj.src = src + '?v=' + date.getTime();
return false;
}
this code is added to the header.php in wordpress theme used

<head>
<script type="text/javascript" src="cam.js"></script>
</head>
This is added in a txt widget in the sidebar

<img src="out.jpg" id="img" />
<a href="#" onClick="return reloadImg('img');">Reload Image</a>
This working here http://whalecoasttimes.com on the top righthand side in the sidebar. Visitors have to refresh the pic. I want the pic to auto reload every 20-30 seconds without visitors having to do it.

I need to add that the pic must not refresh from the browser cache but when refresh reload from the server as this pic is uploaded from the cam every 15 seconds
#pic #refresh #sidebar #widget #wordpress
  • Profile picture of the author Workman
    If you don't have any conflicts the window.onload function anywhere else on the page, I'd pop this into cam.js
    function reloadTimeout ( targetId, RefreshInSec ){
    reloadImg( targetId );
    setTimeout( "reloadTimeout('"+targetId+"',"+RefreshInSec+" )" , RefreshInSec * 1000 );
    };

    window.onload = reloadTimeout('img', 20);
    {{ DiscussionBoard.errors[4356194].message }}
  • Profile picture of the author Workman
    Better yet, since you have Jquery on the page:
    // cam.js
    if(!jQuery && $) {
    var jQuery = $;
    }

    function updateImages(){
    UpdateInSeconds = 20;
    uniq = new Date().getTime();
    jQuery(".refreshcam").each(function(){
    src = jQuery(this).attr('src')+"?";
    name = src.substr(0,src.indexOf('?'));
    jQuery(this).attr('src', name+"?"+uniq);
    });
    setTimeout("updateImages();",UpdateInSeconds*1000) ;
    }

    jQuery(document).ready(function(){
    updateImages();
    });
    Then you can add the refreshcam class to all the streams you want to update every 20 seconds.
    <img src="stream.jpg" class="refreshcam">
    <img src="stream2.jpg" class="refreshcam">
    <img src="stream3.jpg" class="refreshcam">
    {{ DiscussionBoard.errors[4356632].message }}
    • Profile picture of the author theimdude
      I have uploaded below but it does not seem to work

      http://whalecoasttimes.com/reload/index1.php

      <HTML>
      <HEAD>
      <script LANGUAGE="JavaScript">
      if(!jQuery && $) {
      var jQuery = $;
      }
      function updateImages(){
      UpdateInSeconds = 10;
      uniq = new Date().getTime();
      jQuery(".refreshcam").each(function(){
      name = jQuery(this).attr('src').str.split('?');
      jQuery(this).attr('src', name+"?"+uniq);
      });
      setTimeout("updateImages();",UpdateInSeconds*1000) ;
      }
      jQuery(document).ready(function(){
      updateImages();
      });
      </script>
      </HEAD>
      <body>
      <img src="http://whalecoasttimes.com/ganscam/out.jpg" class="refreshcam">
      </body></html>
      The "UpdateInSeconds*1000" is that seconds or milliseconds?
      Signature
      Do you want 30 back-links in my PRIVATE BLOG network for ONLY $20 ???
      [LIMITED ACCESS + FREE ARTICLE INCLUDED OR YOUR OWN]

      CLICK HERE NOW
      {{ DiscussionBoard.errors[4356890].message }}
  • Profile picture of the author Workman
    I have uploaded below but it does not seem to work
    Jquery is on the site that you linked in the original post, but this page doesn't have Jquery on it. You can add it above that code and it should work properly:
    <head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>

    <script>
    ....
    The "UpdateInSeconds*1000" is that seconds or milliseconds?
    The setTimeout function accepts in Milliseconds, so the UpdateInSeconds is multiplied by 1000 to get the millisecond count.
    {{ DiscussionBoard.errors[4356951].message }}
  • Profile picture of the author Workman
    Oops, Just realized I mistyped something when I was trying to consolidate that code. Go ahead and try this, I've tested it extensively this time
    // cam.js
    if(!jQuery && $) {
    var jQuery = $;
    }

    function updateImages(){
    UpdateInSeconds = 20;
    uniq = new Date().getTime();
    jQuery(".refreshcam").each(function(){
    src = jQuery(this).attr('src')+"?";
    name = src.substr(0,src.indexOf('?'));
    jQuery(this).attr('src', name+"?"+uniq);
    });
    setTimeout("updateImages();",UpdateInSeconds*1000) ;
    }

    jQuery(document).ready(function(){
    updateImages();
    });
    {{ DiscussionBoard.errors[4357021].message }}
  • Profile picture of the author theimdude
    I added it but it does not seem to work

    http://whalecoasttimes.com/reload/index1.php
    Signature
    Do you want 30 back-links in my PRIVATE BLOG network for ONLY $20 ???
    [LIMITED ACCESS + FREE ARTICLE INCLUDED OR YOUR OWN]

    CLICK HERE NOW
    {{ DiscussionBoard.errors[4357055].message }}
  • Profile picture of the author Workman
    Updated it
    {{ DiscussionBoard.errors[4357071].message }}
  • Profile picture of the author theimdude
    is jQuery always called in a standard wordpress installation or in this case for that slider I am using?

    thanks working perfectly now, much appreciated your help
    Signature
    Do you want 30 back-links in my PRIVATE BLOG network for ONLY $20 ???
    [LIMITED ACCESS + FREE ARTICLE INCLUDED OR YOUR OWN]

    CLICK HERE NOW
    {{ DiscussionBoard.errors[4357112].message }}
    • Profile picture of the author Workman
      Originally Posted by theimdude View Post

      is jQuery always called in a standard wordpress installation or in this case for that slider I am using?
      All current Wordpress installations use jQuery since the backend relies on it for some of its UI functionality. As long as your themes call the wp_head() function (and nearly all well coded themes do) and a theme or plugin doesn't explicitly remove it, it's safe to say it'll be there in the future. Those cases are especially rare, but even if it is removed, you can easily pop it back on the page.

      Sorry about all those revisions. I was writing that mostly from memory. I'll be sure to fully test things like that in the future before I post
      {{ DiscussionBoard.errors[4357166].message }}
      • Profile picture of the author theimdude
        Originally Posted by Workman View Post

        Sorry about all those revisions. I was writing that mostly from memory. I'll be sure to fully test things like that in the future before I post
        Make sure that this don't happen again (only joking) as I learned a few things tonight. It works perfectly on the front page but when I goto the inner page in wordpress here » Gansbaai Cam it does not seem to work so maybe I need to call the jQuery again from the page it is loading?

        Do I just call it the way you showed me earlier?
        Signature
        Do you want 30 back-links in my PRIVATE BLOG network for ONLY $20 ???
        [LIMITED ACCESS + FREE ARTICLE INCLUDED OR YOUR OWN]

        CLICK HERE NOW
        {{ DiscussionBoard.errors[4357278].message }}
        • Profile picture of the author Workman
          Originally Posted by theimdude View Post

          when I goto the inner page in wordpress here » Gansbaai Cam it does not seem to work so maybe I need to call the jQuery again from the page it is loading?

          Do I just call it the way you showed me earlier?
          Yes, the difference between the frontpage and the inner page is the relative path of cam.js. To fix this, change your theme from this:
          <script type="text/javascript" src="cam.js"></script>
          To this:
          <script type="text/javascript" src="/cam.js"></script>
          That should do it =]
          {{ DiscussionBoard.errors[4357304].message }}
  • Profile picture of the author theimdude
    Perfect should have worked that out. As you can see from that cam it is nearly midnight here by me so I better get some sleep.

    Again thanks a lot for your help.
    Signature
    Do you want 30 back-links in my PRIVATE BLOG network for ONLY $20 ???
    [LIMITED ACCESS + FREE ARTICLE INCLUDED OR YOUR OWN]

    CLICK HERE NOW
    {{ DiscussionBoard.errors[4357346].message }}

Trending Topics