Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Images and the back button

Status
Not open for further replies.
meckeard

meckeard

Programmer
Aug 17, 2001
619
US
Hi All,

I have a page where I display an image that looks like a checkbox (default). When the user
clicks it, I swap the image with one that looks like a checkbox with a checkmark in it
(I couldn't get the desired affect using CSS, so I went with images).

When the user submits the form and goes to the next page (2 of 3) but decides to use the
back button to go back to page 1, I lose the "checked" image.

Is there a way to retain the checked image when someone uses the back button???

Thanks,
Mark
 
Sort by date Sort by votes
thats because onload the page will take the image which has to be displayed first. the best bet would be to use sessions. in the next page set the session values to img2 and when u go back read the session value and set the img src accordingly...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
What kind of sessions are you suggesting? ASP sessions won't work because the when the page is called with the back button, it's not actually reloaded. So a session will not get read.

Mark.
 
Upvote 0 Downvote
its just an idea. i dont think there is any other way...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Try putting some code in your page to keep it from caching, then use ASP session variables

<%
Response.Expires = 60
Response.Expiresabsolute = Now() - 1
Response.AddHeader &quot;pragma&quot;,&quot;no-cache&quot;
Response.AddHeader &quot;cache-control&quot;,&quot;private&quot;
Response.CacheControl = &quot;no-cache&quot;
%>

Adam
 
Upvote 0 Downvote
but adam that will only make the page load again. therefore the first image (namely unchecked will be visible)...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
vbkris,
I also told him to use your idea. The combination of Session variables and preventing cache might do the trick.


Adam
 
Upvote 0 Downvote
Why can't you write a cookie when the &quot;checked&quot; image is displayed, AND add an onload eventhandler to the <BODY> tag to look for the cookie. If the cookie is there then redisplay the &quot;checked&quot; image.

That way, the first time the page loads, the onload event looks for the cookie but it isn't there to read, so the &quot;unchecked&quot; image is on the page. When the user hits the back button the onload event will find the cookie and do the display.

This solution is completely JavaScript and doesn't need ASP and sessions or having to clear the cache. Let me know if you need some example code to work from.

Einstein47
(&quot;There are no atheists when restoring from backup.&quot;)
 
Upvote 0 Downvote
But it was my understanding that when you use the back button, the page is not reloaded. It's simply recalled from the browsers memory. If that's the case, then the &quot;onload&quot; event will not refire. And the javascript function will not look for the cookie. Etc, etc.

Am I mistaken?

Thanks,
Mark
 
Upvote 0 Downvote
It seems to be working for me. Here is my sample code (minus the cookie functions, you I'm sure have your own)
Code: 
<html>
<head>
<title> Test Back </title>

<SCRIPT language=&quot;JavaScript&quot; src=&quot;cookies.js&quot;></SCRIPT>
<SCRIPT language=&quot;JavaScript&quot;>
function checkImage()
{
  if (document.cookie.length > 0)
  {
    var offset = document.cookie.indexOf(&quot;myimg=&quot;);
    if (offset != -1)
    {
      document.myimg.src = &quot;image2.gif&quot;;
    }
  }
}
function changeImage(x)
{
  var isCookie = GetCookie('myimg');
  if (isCookie == 'true')
  {
	x.src = &quot;image1.gif&quot;;
	DeleteCookie('myimg');
  }
  else
  {
	x.src = &quot;image2.gif&quot;;
	var val = 'true';
	document.cookie = &quot;myimg=&quot; + val;
  }
} 
</SCRIPT>

</HEAD>
<BODY onLoad=&quot;checkImage()&quot;>
<P>
<IMG src=&quot;image1.gif&quot; name=&quot;myimg&quot; onclick=&quot;changeImage(this)&quot;>
</body>
</html>

Yes, my code is ugly, but it seems to work with making sure the correct image is displayed on using the Back button.

Good luck,

Einstein47
(&quot;There are no atheists when restoring from backup.&quot;)
 
Upvote 0 Downvote
looks like an awful lot of trouble for a custom checkbox.

What's wrong with default tickbox?

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
clarkin,

I am CSS to create a black border around my form controls and it doesn't work well with chkboxes. That's why decided to go with images.

Mark
 
Upvote 0 Downvote
give us a look at it if you can, would be interested to see the difference and it's quite possible someone here (or in the HTML/CSS forum) can find a way to do it without images.

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
It has been my experience that some of the form elements don't respond well to CSS. The <SELECT> control in particular has only limited CSS attributes that actually work the way I want. Checkboxes and Radio buttons also seem to have certain quirks about how CSS can alter their appearance.

Maybe this may change in the future, but for now I'd say that images are the only real way to get the look you desire on all browsers.

Einstein47
(&quot;There are no atheists when restoring from backup.&quot;)
 
Upvote 0 Downvote
I agree that certain form elements, eg Radio/Checkboxes & Selects have very limited CSS formatting. I _think_ however, that because of this folks are used to seeing the default look and feel that they are used to seeing.

By this I mean, they differ from browser to browser (and I presume, even more so from OS to OS). It might make it harder for users if you change the look and feel of these elements.

Especially so if at the same time you are introducing a big slowdown in both time-to-tick and load time for the page.

Still, I'd like to see what your images look like :)

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
Well, it might be worth noting that this is for the company intranet. And since the entire company uses IE5.5 and above, I can feel safe about the look being the same.

I have been terribly busy trying to get this project done. In an effort to cut down on dev time, I just changed back to the actual check boxes. But when I get a chance, I will put the up on my site and post the link for all to see.

Thanks everyone.

Mark
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
382
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
892
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
665
Rayj0000
Rayj0000
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
801
malpa
malpa
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
714
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top