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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Stop auto scrolling 1

Status
Not open for further replies.
ana03

ana03

Programmer
Apr 25, 2003
12
0
0
US
I have an element which is invisible. when a user cliks on a link a function is called and makes that element visible, during this time or after this action the vertical scrollbar scrolls to top, and b'casue of this the element which was visible is scrolled down. This is very annoying.

How do I stop this..?

Sharat.
 
Sort by date Sort by votes
Your link code most likely looks like this:

Code: 
<a href="#" onclick="blah();">Click</a>

A slight change will fix your problem:

Code: 
<a href="#" onclick="blah(); [red]return false;[/red]">Click</a>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Thanks a bunch my friend. That was awesome.

Sharat.
 
Upvote 0 Downvote
Hey,

You seem to be an expert. .

I'll be happy if you can solve one of the two issues, I have been struggling with.

This is related to the above question. I need to print those hidden elements along with the visible content on the page. (Irrespective of they being visible or hidden.)

I have the inline stylesheet defined as (display: none)

and in the style sheet (CSS file) I have defined as

@media print {
#hiddenSumamry { display: block; font-family: arial }
}

I have tried three ways.. by attaching the id "hiddenSumamry" to the element DIV and TABLE and TBODY.
...but nothing works and the those elements does not print..

Your help is greatly appreciated.

Sharat.
 
Upvote 0 Downvote
I'm not sure if the way you're using "media" is valid. Here's how I would do it:

Code: 
<style type="text/css" media="screen">
#hiddenSumamry {
    display: none;
}
</style>

<style type="text/css" media="print">
#hiddenSumamry {
    display: block;
    font-family: Arial;
}
</style>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
I have to put that style in a style sheet, that is why I did that way. And that code along with some more statements was working with DIV tag, no it does not seemd to be ..

I also tried with the above code even before and it dif not work.

Following is the sample snippet. When I choose print preview option it does not shoe the hidden and slo does not print.

-----------------------------------------
<HTML>
<!-- print style sheet -->
<STYLE type="text/css" media="print">
#hiddenSummary
{
display:block;
}
</STYLE>

<BODY>
<TABLE cellSpacing=0 border="1">
<TBODY >
<TR id="hiddenSummary" style="display: none">
<TD>KABC</TD>
<TD>09/12/2002</TD>
<TD>Submitted</TD>
<TD>0</TD>
</TR>
<TR>
<TD>KCBS</TD>
<TD>09/11/2002</TD>
<TD>Lockdown</TD>
<TD>1</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
----------------------------------------
Sharat.
 
Upvote 0 Downvote
Funny, works perfectly for me:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css" media="screen">
#special {
    display: none;
}
</style>

<style type="text/css" media="print">
#special {
    display: block;
    font-family: arial;
}
</style>

</head>

<body>

<div id="normal">
    Always Display
</div>

<div id="special">
    Print Only
</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Well, I got it worked. I made the css object as a class and then applied that class to table cell. now it is working..

Any how yes that was funny and the one you replied was similar to mine.

Any how I appreciate your time and reponse.

Sharat.
 
Upvote 0 Downvote
Hello my friend,
My week seems to be going hard, things which seems to be working seems to be exist even now.

You know for now what I was trying to achieve from the above mails. But there is still a small bug wher eI am not able to fix.

I am pasting here the working sample and they way exaclty what I am trying to do. This is same as the above one, excpet there is a javscript that you were not aware of.
-------------------------------------------
<HTML>

<!-- print style sheet -->
<STYLE type="text/css" >
@media print {
.hiddenSummary { display:block; }
}

@media screen {
.hiddenSummary { display:none; }
}

</STYLE>

<SCRIPT language="Javascript" >
function toggle(elementId) {
var element = document.all[elementId];

if (element.style.display == 'none')
{ element.style.display = 'block'; }
else if (element.style.display == '')
{ element.style.display = 'block'; }
else
{ element.style.display = 'none'; }

}
</SCRIPT>

<BODY>

<TABLE ><TR><TD > <a href="#" onclick="toggle('table1'); return false;">Click here to view</a>
<TABLE id="table1" class="hiddenSummary" cellSpacing=0 border="1">
<TBODY >
<TR >
<TD>0000</TD>
<TD>09/12/2000</TD>
<TD>Submitted</TD>
<TD>0</TD>
</TR>
</TBODY>
</TABLE>
</TD></TR></TABLE>
<TABLE ><TR><TD > <a href="#" onclick="toggle('table2'); return false;">Click here again</a>
<TABLE id="table2" class="hiddenSummary" cellSpacing=0 border="1">
<TBODY >
<TR >
<TD>2222</TD>
<TD>09/12/2000</TD>
<TD>Submitted</TD>
<TD>0</TD>
</TR>
</TBODY>
</TABLE>
</TD></TR></TABLE>

</BODY>
</HTML>

---------------------------------------------
Just paste the above code and try this.
After clicking on the links, when the content is hidden if you try to do print preview then the hidden content will not print. If you donot click for the first time and single link and then try to print pre view then you will able able to see that content. So I think basically what is happening is once the function toggle() is called the local style attributes are given hight priority.
Let me know if you find something.

Sharat.
 
Upvote 0 Downvote
how do you WANT it to work? What is happening incorrectly?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
My friend irrespective of whether you click on those links (which are ususally for hide and display) all the hidden content should be visible in the print preview mode.

Thanks a lot for your quick reply.
Sharat
 
Upvote 0 Downvote
Where are your head tags? I made changes to your style sheets and your JavaScript:

Code: 
<head>
<!-- print style sheet -->
<STYLE type="text/css" media="print">
    .hiddenSummary{ display: block; }
    .normalSummary{ display: block; }
</STYLE>

<STYLE type="text/css" media="screen">
    .hiddenSummary{ display: none; }
    .normalSummary{ display: block; }
</STYLE>

<SCRIPT language="Javascript" >
function toggle(elementId) {
    var el = document.getElementById(elementId);
    el.className = (el.className == 'hiddenSummary') ? 'normalSummary' : 'hiddenSummary';
}
</SCRIPT>
</head>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Yes it worked .

Thanks again a bunch.
By the way I am not basically a frint end guy, so having given this experience of erros I ask you is there any web site which has all these attributes. For example.

element.className.

I could not find all these ..

I'll apprciate if you can pass on this link if you have..


Agaion and again thanks for saving my time..

Sharat.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

emmals
  • Locked
  • Question
Auto Click Button and pass through all data
Replies
0
Views
38
emmals
emmals
Krus1972
  • Locked
  • Question
On-Click Form Input Box Scrolling
Replies
4
Views
58
Krus1972
Krus1972
damipera
  • Locked
  • Question
Autobrowse in Javascript? 2
Replies
8
Views
73
Offera
Offera
Krus1972
  • Locked
  • Question
Geolocate and Form Auto-Submit
Replies
2
Views
39
vacunita
vacunita
c0deM0nK424
  • Locked
  • Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
42
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top