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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Text Removal after set time period

    I am the webmaster for the amateur radio club I am a member of. One of the pages on our newly redesigned website is a swap shop, where people can list items for sale. To keep the page from becoming too bloated and cumbersome, I stated in the header that ads would only be listed for 30 days. I found a javascript on JavaScriptKit.com that has the features I am looking for, in that it makes something disappear after a set period of time. I need help modifying it now to make a <div> disappear from the website, instead of just an image.

    Here is the code, with all credits shown:

    Code:
    <script>
    <!--
    /*
    "Whats new?" image script-
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free scripts here!
    */
    
    //set the below to the image you wish to use as the "new" image
    var imagetag='<img src="../../news.gif">'
    var today=new Date()
    function expireat(expiredate){
    var expire=new Date(expiredate)
    if (today.getTime()<=expire.getTime())
    document.write(imagetag)
    }
    //-->
    </script>
    Anyone have an idea where to go after I remove the var imagetag? I know this requires setting the <div> element's visibility to "hidden" after the period of time set by the javascript. I just am not sure how to go about doing it.

    My website is engineered to be simple, no CMS in place. This is in the event that someone who has little to no HTML coding experience has to take over my webmaster duties in the future.
    Last edited by kl0if; 01-05-2012 at 07:16 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Use something like this:-

    Code:
    <div id = "div1" style="display:none">
    Content of the ad in here
    </div>
    
    
    <script type = "text/javascript">
    
    var expireDate = new Date("April 1, 2012 12:00");  // date and time when the ad expires
    if (today<= expireDate) {document.getElementById("div1").style.display = "block"}
    
    </script>

    Quizmaster: What M, named after the Hebrew word for "Institution", is the national intelligence agency of Isreal?
    Contestant: Al-Qaeda.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    kl0if (01-19-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Phillip,

    How can what you posted be modified to work on several different items? What I am working on is a "swap shop" page where members can list items for sale, yet the ads will be removed after 30 days. I do not want to remove the code, because if the lister wants their ad relisted, all I would need to do is change the expire date and the ad reappears on the website. I know this is basic stuff, but until 6 months ago, I didn't have much exposure to anything like this.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Yes, very simple.

    But I made a boob in the code above and failed to define the variable today.

    Code:
    <html>
    <head>
    </head>
    <body>
    <div id = "div1" style="display:none">
    Content of the ad No.1 in here
    </div>
    </br>
    <div id = "div2" style="display:none">
    Content of the ad No.2 in here
    </div>
    <br>
    <div id = "div3" style="display:none">
    Content of the ad No.3 in here
    </div>
    
    
    <script type = "text/javascript">
    
    var today = new Date();  // NOW!
    var expireDate = new Date("April 1, 2012 12:00");  // date and time when the ad expires
    if (today<= expireDate) {document.getElementById("div1").style.display = "block"}
    var expireDate = new Date("April 19, 2012 12:00");  // date and time when the ad expires
    if (today<= expireDate) {document.getElementById("div2").style.display = "block"}
    var expireDate = new Date("April 22, 2012 12:00");  // date and time when the ad expires
    if (today<= expireDate) {document.getElementById("div3").style.display = "block"}
    
    </script>
    
    
    </body>
    </html>
    Last edited by Philip M; 01-19-2012 at 08:20 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I get it. All I do is add a new var expiredate for each ad I put up. That will work. Thanks a bunch.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    here's another way (just add the expiry date in the title attribute of the div)...

    Code:
    <html>
    <head>
    </head>
    <body>
    <div class="ads" id = "div1" title='April 1, 2012 12:00'>
    Content of the ad in here
    </div>
    
    <div  class="ads" id= "div2" title='January 1, 2011 12:00'>
    Content of other ad in here
    </div>
    
    <script type = "text/javascript">
    divs=document.getElementsByTagName("div")
    for(x=0;x<divs.length;x++){
    if (divs[x].className=="ads"){
    divs[x].style.display=show(divs[x].title)
    divs[x].title="" //remove this line if you want the expiry date to show on mouseover
    	}
    }
    
    function show(expdate){
    var today=new Date();
    var expireDate = new Date(expdate);  // date and time when the ad expires
    return today<= expireDate? "none":"block";
    }
    </script>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok Phillip, I tried using what you gave me, but when I posted a test ad, the ad doesn't display, no matter what date I set as the expire date. Any advice?

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    xelawho,

    I tried using your script as well, and no matter what date I set it would not remove the test ad. I am not sure what I am doing wrong, so I am going to post the entire page's code for you guys to look at. Right now it has xelawho's script in it. I do appreciate all the help you guys are giving me.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	
    	<title>NCARC Swap Shop Page</title>
    	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    	<meta name="author" content="Sanger - KL0IF" />
    	<meta name="validation" content="Tested valid to W3C XHTML standards - 29 December, 2011" />
    	<link rel="stylesheet" type="text/css" href="default.css" />	
    
    </head>
    
    <body>
    
    	<script type="text/javascript" src="framecheck.js"></script>
    	
    	<script type="text/javascript">
    		divs=document.getElementsByTagName("div")
    		
    		for(x=0;x<divs.length;x++)
    			{
    			if (divs[x].className=="ads")
    				{
    				divs[x].style.display=show(divs[x].title)
    				divs[x].title="" //remove this line if you want the expiry date to show on mouseover
    				}
    			}
    
    		function show(expdate)
    			{
    			var today=new Date();
    			var expireDate = new Date(expdate);  // date and time when the ad expires
    			return today<= expireDate? "none":"block";
    			}
    	</script>
    	
    	<div id="swapshopheader" class="div1">
    		<div class="header5">
    			NCARC SWAP SHOP<br />
    		</div>
    	</div>
    	
    	<div id="disclaimer" class="font6" style="position:absolute; top:30px;">
    		<div class="div1">
    		<div class="header6">
    		<p>
    		DISCLAIMER
    		</p>
    		</div>
    		<p>
    		The Nevada County Amateur Radio Club (NCARC) offers this classified section as a free service to its members. Items for sale or trade must be amateur radio related only. NCARC does not check the validity of the advertisements placed here and implies no warranties regarding the listed items. Transactions are solely between buyer and seller. No responsibility or liability for the condition of the items being offered is assumed by NCARC. Individuals buying or selling items listed here assume all responsibility for the condition or usability of the items. You must include contact information, name, call, location, email address or a telephone number. Items may be listed no longer than 30 days. Items may be re-listed if requested by the seller. To list items, send all pertinent information to <a href="mailto:swap_shop@ncarc.org?subject=NCARC%20Swap%20Shop%20Listing">swap_shop@ncarc.org</a>.
    		</p>
    		</div>
    		<hr />
    	</div>
    	
    	<div id="ad1" class="ads" style="position:absolute; top:200px;" title="January 18, 2012">
    		Test ad<br />
    	</div>
    </body>
    
    </html>

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    sorry - I forgot to mention that the script has to be put AFTER the divs, etc in the <body> section... and I got my "block" and "none" the wrong way around

    Also I think external scripts should be loaded in the <head>

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	
    	<title>NCARC Swap Shop Page</title>
    	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    	<meta name="author" content="Sanger - KL0IF" />
    	<meta name="validation" content="Tested valid to W3C XHTML standards - 29 December, 2011" />
    	<link rel="stylesheet" type="text/css" href="default.css" />	
    <script type="text/javascript" src="framecheck.js"></script>
    </head>
    
    <body>
    	<div id="swapshopheader" class="div1">
    		<div class="header5">
    			NCARC SWAP SHOP<br />
    		</div>
    	</div>
    	
    	<div id="disclaimer" class="font6" style="position:absolute; top:30px;">
    		<div class="div1">
    		<div class="header6">
    		<p>
    		DISCLAIMER
    		</p>
    		</div>
    		<p>
    		The Nevada County Amateur Radio Club (NCARC) offers this classified section as a free service to its members. Items for sale or trade must be amateur radio related only. NCARC does not check the validity of the advertisements placed here and implies no warranties regarding the listed items. Transactions are solely between buyer and seller. No responsibility or liability for the condition of the items being offered is assumed by NCARC. Individuals buying or selling items listed here assume all responsibility for the condition or usability of the items. You must include contact information, name, call, location, email address or a telephone number. Items may be listed no longer than 30 days. Items may be re-listed if requested by the seller. To list items, send all pertinent information to <a href="mailto:swap_shop@ncarc.org?subject=NCARC%20Swap%20Shop%20Listing">swap_shop@ncarc.org</a>.
    		</p>
    		</div>
    		<hr />
    	</div>
    	
    	<div id="ad1" class="ads" style="position:absolute; top:200px;" title="January 01, 2012">
    		Test ad<br />
    	</div>
    		<script type="text/javascript">
    		divs=document.getElementsByTagName("div")
    		
    		for(x=0;x<divs.length;x++)
    			{
    			if (divs[x].className=="ads")
    				{
    				divs[x].style.display=show(divs[x].title)
    				divs[x].title="" //remove this line if you want the expiry date to show on mouseover
    				}
    			}
    
    		function show(expdate)
    			{
    			var today=new Date();
    			var expireDate = new Date(expdate);  // date and time when the ad expires
    			return today<= expireDate? "block":"none";
    			}
    	</script>
    </body>
    
    </html>
    Last edited by xelawho; 01-19-2012 at 10:24 PM.

  • Users who have thanked xelawho for this post:

    kl0if (01-20-2012)

  • #10
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    xelawho,

    I made the corrections you mentioned and it works just fine. Thanks a lot. The external script to the framecheck.js file needs to be in the body as it posts a referral link at the top of the page if someone tries to load individual pages. My website is set up as a collection of pages loaded into iframes on a shell page. It works well, and makes content management easy to control. At least I think it does.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by kl0if View Post
    Ok Phillip, I tried using what you gave me, but when I posted a test ad, the ad doesn't display, no matter what date I set as the expire date. Any advice?
    It works just fine for me! The fault, dear Brutus, lies not in the stars but ....

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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