Learn VBA & Macros in 1 Week!

JavaScript - Show Hidden Element On Page Scroll

Full Excel VBA Course - Beginner to Expert

Show Hidden Element On Page Scroll	View Content

Looking for a simple way to have a hidden element made visible when the page scrolls.

The idea is to have a back arrow appear only when the page has been scrolled horizontally.

trying something along these lines without success ...

Code:

	<script type="text/javascript">
		window.onscroll = function () {
			if $("back").is(":hidden") {
				$("back").show("slow");
			}
		}
	</script>

The site is he www.milesjaffe.com.

Thanks --

Full Excel VBA Course - Beginner to Expert

Show A Hidden Div On Page Load Complete Without Using Body Tag

Similar Tutorials

View Content

epic thread title!

Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case.

PHP Code:
// save notes against company
if ($_POST['a']=="Save Note") {
    if (addnote($_POST['notetitle'],$_POST['notebody'])) {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>";
    } else {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>";
    }
}

I want to then wait until the page load is complete and then do the following.

PHP Code:
document.getElementById('addevent').style.display='block';

The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown.

Now my current fail attempt at doing it was this
PHP Code:
echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; }

However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this.

Update Value Of Hidden Input Element On Textarea Onchange?

Similar Tutorials

View Content

I have an idea for a little script.....I'm just stuck on one little part: When a user changes the value in a input or textarea box, I want it to change the value of a certain hidden input tag too.

Here's what I have so far:

function getNewValue(inputhidden, textinput) {
var data = document.getElementById(inputhidden);
var text = document.getElementById(textinput);
data.value = text.value;
}

<input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 'name')">
<input type= "hidden" name= "detail" id="detail" value= "">

However, this is not working and I'm not sure why

Hidden Div Doesn't Show: Why?

Similar Tutorials

View Content

What did I do wrong? I would like to have an anchor link with hidden text. When I click on the anchor link, I want to see a text drop below showing the Keep trying information. It keeps giving me "object expected" error message.

What object I need to put in there. Thanks.

Here is the code:

Code:

 
<body>
<a href="#" onclick="showDiv('divFundamentals');return false;">Javascript Fundamentals</a>
<div id="divFundamentals" style="display:none;">

Basic - Javascript
Keep trying:

Keep trying 
- Try hard 1
- Try hard 2
- Try hard 3
- Try hard 4
- Try hard 5

</div>


<script>
function showDiv(id) 
{
$('#' + id).show();
}
</script>

</body>

If Form Option Selected Show Hidden Field

Similar Tutorials

View Content

I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show.
I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful.

Code:

<select id="Program" name="Program" size="1" onchange="
      $other = document.getElementById('other_program').style;
      $invoice = document.getElementById('invoice');
      if (selectedIndex==6) {
        $other.visibility='visible';
        if ($invoice.value == 'General Fund') $invoice.value='';
      } else {
        $other.visibility='hidden';
        if (selectedIndex==1) {
          $invoice.value='Renegade Fund';
        } else {
          $invoice.value='Please Specify';
        }
      }
      ">
      <option selected="selected" value="Not Selected"> - - Select One - - </option>
      <option value="Athletics">Athletics</option>
      <option value="Drum Line">Drum Line</option>
      <option value="Renegade Fund">Renegade Fund</option>
      <option value="General Scholarships">General Scholarships</option>
      <option value="President's Circle">President's Circle</option>
      <option value="Other">Other</option>
    </select>

    <span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>

    <!-- the following is the new select group ive set up
    <span id="alumni">
        <select id="select-alumni" name="select-alumni" size="1">
            <option selected="selected" value="Not Selected">Yes or No</option>
            <option value="Yes-alumni">Yes</option>
            <option value="Not-alumni">No</option>
        </select>
    </span>
    -->

Show And Hidden Radio Button Depending On Dropdown Selection

Similar Tutorials

View Content

Dear Javascript programmers,

Do you have an example of a Javascript something like this:

A dropdownlist with values "one" and "two". The radio button is not visible (as a start).
- If you have selected "one" from the dropdown list, then a radio button will appear.
- If you have selected "two" from the dropdown list, then a radio button will NOT appear.

Thanks,

Cornelis
Gouda - The Netherlands

Show/hide Element

Similar Tutorials

View Content

Hey there,
I want a div element only to show when you hover over an anchor of the main menu.
The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions.

That's the menu.

This is what should appear when you're hovering one of the items.
Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor.

Here's the website:www.chabuya.net

I already tried hundreds of show/hide scripts, solving this via css but nothing works for me.
I'd be grateful for any suggestions.

Thanks in advance,
Kevin

Loading External Js Before Page Page Load (specific Span Element)

Similar Tutorials

View Content

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.

Hidden Fields Are Showing On Page

Similar Tutorials

View Content

I dynamically create a hidden form field with some javascript. It works fine, the field gets created and filled in with whatever the user types in the prompt popup. But even though I have specified type="hidden" it is still displaying the field contents at the bottom of my form.

Code:

   var newvar = document.createElement('input');
    newvar.setAttribute('name',varname);
    newvar.setAttribute('type','hidden');
    newvar.setAttribute('value',Prompt.show("Enter notes"));
    document.mainform.appendChild(newvar);

Thanks for any help

Inserting Hidden Content On Page Into Between Tags

Similar Tutorials

View Content

Hello,

I was wondering if it is possible to do something like below using JS.

Say I have some hidden text at the top of an HTML page...

Code:

<div id="text" style="visibility: hidden;">text</>

and an empty tag at the bottom of the page.

Code:

<div id="empty_container"></div>

Is there any way JS could grab the content inside #text and move it inside #empty_container when the page loads?

Thanks.

Hidden Text Field And Process Page Help.

Similar Tutorials

View Content

I need for the form to do the following:
when age is greater than or equal to 65 enter "yes" in the hidden field
when age is less than 65 enter "no" in the hidden filed
return true

Create a page processAge.htm that
Writes the message on the page
Hi name. At age # you may retire.
or
Hi name. At age # you are not ready to retire. Get to work.
name is the name entered on the form.
# is the age entered on the form.

Java:
Code:

<script type="text/javascript">
/* <![CDATA[ */
function validateSubmission() {
  var retValue = true;
  if (document.forms[0].name.value == "") {
      window.alert("You did not fill in one of the following required fields: Name or Age.");
      retValue = false;
      }
}
function checkForNumber(fieldValue) {
  var numberCheck = isNaN(fieldValue);
  if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;
    }
} 
/* ]]> */
</script>

Body:
Code:

<form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); ">
<table frame="border" rules="cols" >
<tr>
<td valign="top">
<h2>Retirement</h2>
<p>Name<br />
<input type="text" name="name" size="40" /></p>
<p>Age<br />
<input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p>
<p style="text-align: center"><input type="submit" value="Send" /><input type="reset" />
<input type="hidden" name="Retirement" /></p>
</td></tr>
</table>
</form>

Process Page:
Code:

<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
  formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
  document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>

Thanks for any help!

Using A Search Form To Display Hidden Divs On A New Page

Similar Tutorials

View Content

Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
   $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/php/fleet/includes/website.php";
   include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';

}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
	}
document.getElementById(showndiv).style.display = 'block';
}
	
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";

/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");

function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "";
   }
}

function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "none";
   }
}
</script>

<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>

<div id="fleet1" style="display:block">
</div>


<div id="fleet2" style="display:none" class="fleetdiv">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W599 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network 

Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>



<div id="fleet3" style="display:none">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W601 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none">	<br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">
             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">122</FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W602 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>

http://nctfleetlist.co.uk/div3.php

Form Hidden Field Redirection To Parent Page

Similar Tutorials

View Content

I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form:

Code:

<input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent">

The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe?

Scroll To Bottom Of The Page

Similar Tutorials

View Content

hello
i use this script, and its working so far.
except i want the element to stick to the bottom not the top..

http://javascriptkit.com/javatutors/static3.shtml

i am a absolute java-noob and if anyone has a hint for me, i would be happy
i already tried to rename some words to bottom, but this doesnt work (ie iebody.scrollTop to iebody.scrollBottom)

thanks a lot, regards florian

Moving Div Down With Page Scroll

Similar Tutorials

View Content

I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything.

What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll.

Can anyone point me in the right direction?

Setting Documentelement.style.overflow = 'hidden' Jolts To Top Of Page (undesirably)

Similar Tutorials

View Content

I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:

Code:

document.documentElement.style.overflow = document.body.style.overflow = 'hidden';

The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.

I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.

Scroll Browser Page Javascript?

Similar Tutorials

View Content

Hi to everyone!

Script first:

Code:

var allowscroll = 0
//Mouse scroll ____________________________________________________________________________________
function handle(delta) {
		if(allowscroll == 1){
			if (delta < 0){
				simgs1dest_x -= 30
			}
			else{
				simgs1dest_x += 30
			}
		}
		if(allowscroll == 2){
			if (delta < 0){
				textdest_y -= 30
			}
			else{
				textdest_y += 30 
			}
		}
		
}
function wheel(event){
        var delta = 0;
        if (!event) 
                event = window.event;
        if (event.wheelDelta) { 
                delta = event.wheelDelta/120;
                
        } else if (event.detail) { 
                delta = -event.detail/3;
        }
        if (delta)
                handle(delta);       
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}
if (window.addEventListener){      
    window.addEventListener('DOMMouseScroll', wheel, false);
	window.onmousewheel = document.onmousewheel = wheel;
}

I'm using this script to scroll two divs, which each activates self scrolling onMouseOver and onMouseOut deactivate scrolling by setting allowscroll varible to 0.
And everything works fine, but this script doesn't allow to scroll browser entire page!
So is there a script wich will scroll browser page when allowscroll is equal to 0?

Auto Scroll Down On Page Load

Similar Tutorials

View Content

Hi, i been poken around on here and have not found anything on this as of now, so i thought i would ask.

i have a table of data that is positioned in the middle of one of my pages, rather than change the layout i thought it would be nice to just have the page auto scroll down to the middle of the page when the page loads so that the user does not have to constantly scroll down..

i tried this and several versions of it with no luck..

Code:

scrollWindow();

// scrolls the window to auto load in middle of page 

function scrollWindow()
{
window.scroll(0,450); 
}

i also tried scrollBy, and still nothing

i tried using the body onload and still nothing... the scroll bar does seem to flash down for a split sec and im wondering if im using the wrong javascript function or if i might have some css that is locking it to load top of page..

not sure what to look for in the css though..

is there a dif function to do this.. thanks

Image Change Scroll Page To Top

Similar Tutorials

View Content

Hi, I have this simple code for gallery on my page. And everything working fine but when i click on small picture to change big picture if I'm page scroll up to top of page. So i scroll to the gallery change picture ad page scroll up to the top. What could be the reason? Here is live axample:
http://www.galerija-galiotovic.kus-s...test-hrvatski# Code:

  <table id="Table_galerija">

  <tr>
    <td style="width:520px;height:445px;vertical-align:top;padding:20px;">
      <h2 style="position:absolute;top:200px;color:#FFF;" id="naslov">Test hrvatski</h2>
     	  <div id="slika_velika"><img id="glavna_slika" style="max-height:390px;max-width:520px;vertical-align:middle;" src="/slike/10012012_7119092522.jpg" alt="KUS Sinj" /></div></td>
    <td>

        <div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
    <div style="height:14px;"></div>
        <div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_7509043961.jpg'"><img src="/slike/thumbnails/12012012_7509043961.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
    <div style="height:14px;"></div>
        <div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_9295689431.jpg'"><img src="/slike/thumbnails/12012012_9295689431.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
    <div style="height:14px;"></div>
        <div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_8527430603.jpg'"><img src="/slike/thumbnails/12012012_8527430603.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
    <div style="height:14px;"></div>
        <div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_2126924535.jpg'"><img src="/slike/thumbnails/12012012_2126924535.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>

    <div style="height:14px;"></div>
	<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
    <div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div></td>
  </tr>
  </table>

Javascript Scrolling Element With You On Page

Similar Tutorials

View Content

Its about this:
http://www.wduffy.co.uk/blog/keep-el...omment-page-1/

Everywhere is used for a whole div on some side and when its on the top of the page.
But what if its in the middle..?
Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013
Scroll down and then up.Anyway to fix this?

How Do I Set A Page Element As A Variable And Change It?

Similar Tutorials

View Content

How do i set a page element as a variable and change it?

Ive googled the internet like crazy for an answer for this, but couldnt find it. Im trying to create an animation. My question is, how do i change the width of a div onclick?
Essentially, I want it to add one percent of the value of the width of the div every one second..

PHP Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading Bar</title>
<script>
var x = getElementById("loadbar").style.width;

function load(){
setTimeout ( "progress()", 1000 );
}

function progress(){
x++;
}
</script>
</head>

<body>

<div id="load" style="border:thin solid #6699FF; width:300px; height:10px">
<div id="loadbar" style="background:#6699CC; width:0%; height:100%">
</div>
</div>
<a href="#" onclick="load()">Click to load</a>

</body>