Multiple Scripts

-Freebird- · 14-03-2013 1:42pm #1

Hi guys,

I want to script two commands for one heading in HTML. The code is:

<a style="cursor:pointer;" onclick="return toggleMe('para003')"><a href="#ScrollEnd">Header</a></a></li>
</ul><a style="cursor:text"><div id="para003" style="display:none;">

<center>Text
<li>Text</li>
</center>
</div>

<a name="ScrollEnd">

So, basically, what I need to do is:

When I click "Header" it exands to reveal a long paragraph but I also want to page to jump to the bottom of the paragraph so the user doesn't need to manually scroll to view the text.

Any suggestions?

Thanks

OneIdea · 14-03-2013 2:28pm

If your using jquery try scrollTo()

$('html, body').animate({scrollTop:$('#id').position().top}, 'slow'); // would scroll to a div with an id or change to ('.id') for classes

$("html, body").animate({ scrollTop: $(document).height() }, slow); // would scroll to end of page

Either method should work, but without seeing more code, not sure what would happen...

another one that might suit, because its a tab your using?

$('#this').animate({scrollTop:$('#id').position().top}, 'slow'); // would scroll to #id - from #this, I think?

-Freebird- · 14-03-2013 2:42pm

One of the full paragraphs is:


<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return false;
}
</script>

<ul>
<li><a style="cursor:pointer;" onclick="return toggleMe('para3113')">
TEXT1</a></li>
</ul><a style="cursor:text"><div id="para3113" style="display:none;">

<center>..
<li>..</li>
<li>..</li>
</li></center>

<center>..
<li>..</li>

<center>..
<li>..</li></center>

<center>..
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li></center>

<center>..
</center>
</div>

When I click on TEXT1, the paragraph collapses. But because there is so much text in the paragraph, it goes beyond the page meaning you have to adjust the scroll bar to view it. I want the page to automatically scroll down when a tab is collapsed.

OneIdea · 14-03-2013 3:14pm

-Freebird- wrote: »

One of the full paragraphs is:


<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return false;
}
</script>

<ul>
<li><a style="cursor:pointer;" onclick="return toggleMe('para3113')">
TEXT1</a></li>
</ul><a style="cursor:text"><div id="para3113" style="display:none;">

<center>..
<li>..</li>
<li>..</li>
</li></center>

<center>..
<li>..</li>

<center>..
<li>..</li></center>

<center>..
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li></center>

<center>..
</center>
</div>

When I click on TEXT1, the paragraph collapses. But because there is so much text in the paragraph, it goes beyond the page meaning you have to adjust the scroll bar to view it. I want the page to automatically scroll down when a tab is collapsed.

Here's a quick test file, upload this as eg test.php and click the Header link when it displays.

<!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>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<a href="#ScrollEnd" id="open">Header</a>


<div id="para003" style="display:none;">

<font color='red'><b>Text</b></font>

loads of text here, i'm just making it big for this test
<font size="48">
<br />
example<br />example</br />
example<br />example</br />
example<br />example</br />
example<br />example</br />
example<br />example</br />
example<br />example</br />
example<br />example</br /></font>

<a href="#" id="close">Close</a>


</div>


<script>
         $('#open').click(function () {
             $('#para003').show();
             $("html").animate({ scrollTop: $(document).height() }, "slow");
         });

         $('#close').click(function () {
             $('#para003').hide();
         });
</script>

</body>    
</html>

-Freebird- · 14-03-2013 3:26pm

Yeah, that works on a basic HTML file but not within my website, presumably because of this piece. Is there any way to see the actual script rather than the link?

<!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>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

OneIdea · 14-03-2013 4:01pm

If you post a link to your page or PM me, I'll put something together.

Multiple Scripts

Comments