We Keep Coding

Retaining scrollbar position using jquery

I have a java function,
private GroupsSelector group(LabourInputReportCriteria.Level level) {
HtmlSelectBooleanCheckbox box = new HtmlSelectBooleanCheckbox();
boolean isSelected = selections.isGroupSelected(level);
box.setSelected(isSelected);
// box.setDisabled(isDaySelectedOnFirst(level));
String id="groupBy" + level.getClass().getSimpleName();
box.setId(id);
box.setOnclick("submit()");
box.addValueChangeListener(u.addExpressionValueChangeListener("#{reportSearchCriteriaModel.groupBy}"));
HtmlOutputText labelComponent = new HtmlOutputText();
labelComponent.setValue(getGroupSelectionValue(level));
tr().td();
html(box);
html(" ");
html(labelComponent);
//html("<span id='"+id+ "'></span>");
//html("<script> function resetGroupsSelector() { var x = document.getElementById('search_report_form:groupByWeekLevel'); alert(x); } </script>");
endTd().endTr();
return this;
}
Whenever I click on a checkbox, sumbit() is called and it has some functionality at the backend. Now, my question is whenever I click on a checkbox, the scrollbar position is moving up i.e, it is going on top of the page. I want to avoid this. I want to retain my scrollbar position as it is. How am I supposed to do it?
I tried adding the follwing code but it dint work.
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" >
var addTweet = function() {
var scrollPosition = $(document).scrollTop();
$('#results9016').prepend($newTweet);
$('html, body').scrollTop(scrollPosition);
}
</script>
Please help.

inside the function that you call when clicking you can say
function submit(event) {
event.preventDefault();
...
}

display: none/block onclick messes up

I am having troubles for some reason, and I can't seem to find out how...
I am making a quiz, which starts with a start button, and has buttons "next" and "prev" buttons.. When I hit the start button, the question 1 and answer 1 will come up and the start button disappears, when I then hit next it is loading in the second question, but not the answer 2
my code:
// Hide / Show actions
function hideStartButton() { document.getElementById("start-button").style.display = "none";}
function showAnswers1() { document.getElementById("answers1").style.display = "block"; }
function hideAnswers1() { document.getElementById("answers1").style.display = "none"; }
function showAnswers2() { document.getElementById("answers2").style.display = "block"; }
function hideAnswers2() { document.getElementById("answers2").style.display = "none"; }
Complete code: http://jsfiddle.net/5jz092cb/
it does load answers2 when I don't use hideAnswer1(); else it comes up blank?

CSS
.hidden {display: none;}
JavaScript
change('answers1','hidden');
change(document.getElementById('answers1'),'hidden');
//etc.
function change(id,c)
{
if (id_(id)) {id_(id).className = c; if (id_(id).className=='') {id_(id).removeAttribute('class');}}
else if (id) {id.className = c; if (id.className=='') {id.removeAttribute('class');}}
else {alert('Error: the class id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+c);}
}
Also you need to hide and show layers simultaneously often in these kind of scenarios so you may very well need to do something like loop through and hide all the elements except the one you want to hide.

How to Expand / Collapse a section of a Web Site and also change the image using JavaScript

EDIT #1
Thanks to the 2 users who responded, their solutions worked great! Something I forgot to mention in the original post was, Is there any way to adjust the user's view so that when the expanded section is collapses by the user, their "view" (or the actual web page) can adjust up to an anchored spot?
ORIGINAL POST
I've got a section of a website that I want to first be collapsed and not able to be viewed by the user. Then, when they hit an arrow on the screen, the hidden content will then display AND the image needs to change from a "down" arrow to an "up" arrow.
I'm able to do this with the below code right now but I have to have two arrows. Can anyone help so that I only have one arrow on screen and it changes based on when the user clicks on it? I'd also like this to be able to be done an infinite amount of times by the user (ie if the user clicks the "down" arrow, the section expands and the arrow changes to an "up" arrow but then when the user hits that "up" arrow the section collapses and the arrow changes back to a "down" arrow. Possible?
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
// -->
</script>
<br>
<img src="up_arrow.png">
<img src="down_arrow.png">
Thanks for any help!

I have added your code and created a jsfiddle for you...
changed code:-
function sizeTbl(h) {
var tbl = document.getElementById('container');
tbl.style.display = h;
if (h == "block") {
document.getElementById('down').style.display = 'none';
document.getElementById('up').style.display = 'block';
} else {
document.getElementById('up').style.display = 'none';
document.getElementById('down').style.display = 'block';
}
}
working example:-
click to see example:-http://jsfiddle.net/XUjAH/1089/
thanks

I've taken out the parameter from your sizeTbl method
Then I'm getting the src property of the image (note I've given it an ID). Depending on the src we can show/hide the table and change the image property
Here's a jsFiddle
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.src === 'down_arrow.png'){
tbl.style.display = 'block';
icon.src = 'up_arrow.png';
}
else {
tbl.style.display = 'none';
icon.src = 'down_arrow.png';
}
}
// -->
</script>
<br>
<img src="down_arrow.png" id="toggle-table">
You've added some extra requirements to your question. You've tagged jQuery and this is the easiest solution for this scenario.
Remove the javascript:sizeTbl() from your <anchor> tag. This is known as inline JS and isn't recommended because it means you are mixing your presentation code with your business logic.
You make the <anchor> tag act like a normal anchor tag and attach a click event in the document's ready event.
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.innerText === 'show') {
tbl.style.display = 'block';
icon.innerText = 'hide';
} else {
tbl.style.display = 'none';
icon.innerText = 'show';
}
}
$(document).ready(function(){
$('#sizeTbl').on('click', sizeTbl);
});
I've created a new jsFiddle that demonstrates this.
Notes:
You need to be using jQuery for this to work
Note that I've given the <anchor> tag an ID. This is so that I can locate it in code
If you have any other comments, the etiquette on SO is to ask new questions. The answers get too long and complicated otherwise

Checking div visibility using js

I have two divs (soru and yanit) in a div (alan).
When someone clicks on the screen, the other invisible div must be visible. At the begining, "yanit" div is invisible and "soru" div is visible.
My code is below but doesn't work. How can I do this?
<script>
window.onload= function(){
var divSoru = document.getElementById("soru");
var divYanit = document.getElementById("yanit");
document.getElementById("alan").addEventListener('click', containerClick, false);
function containerClick(){
if(divSoru.style.visibility=='visible'){
divSoru.style.visibility=='hidden';
divYanit.style.visibility='visible';
}
if(divSoru.style.visibility=='hidden'){
divYanit.style.visibility='hidden';
divSoru.style.visibility=='visible';
}
}
}
</script>

You made 2 mistake:
if(divSoru.style.visibility=='visible'){
divSoru.style.visibility='hidden'; // you used ==
divYanit.style.visibility='visible';
}
if(divSoru.style.visibility=='hidden'){
divYanit.style.visibility='hidden';
divSoru.style.visibility='visible'; // you used ==
}
Now it should work.

change image src with javascript not working

Here is my code
function playPause(){
movie = document.getElementById('movieEMBED');
icon = document.getElementById('playPauseIcon');
var isPlaying;
isPlaying = movie.GetRate();
if (!isPlaying){
movie.Play();
icon.setAttribute('src', "images/pausebutton.png");
}
else {
movie.Stop();
icon.setAttribute('src', "images/playbutton.png");
}
}
in the html:
<input type="image" id="playPauseIcon" src="images/playbutton.png" width=30px onClick='playPause()'></input>
Any ideas as to why the picture does not switch between the pause and play button when I click the button?

I'm guessing it's because your movie is playing. The else of the if block sets the src to the same value:
if (!isPlaying){
movie.Play();
icon.setAttribute('src', "images/pausebutton.png");
}
else {
movie.Stop();
icon.setAttribute('src', "images/playbutton.png"); // <---- no change
}
Just to be sure that your code is right, which it appears to be, I would change the function to this:
function playPause(){
var icon = document.getElementById('playPauseIcon');
icon.setAttribute('src', "images/pausebutton.png");
}
and then slowly add in your movie code

As far as I can see, your code is fine. Are you sure movie.GetRate() returns different values and you're passing by both paths of the 'if' correctly? I would think movie.GetRate() is returning always the same value so you never set the src attribute to a different image.