Pamela,
If I understand your issue correctly, you need to scroll the page up and down through JavaScript.
I understand that you need a static page for the sales force. Note that you can load a LAMP stack very easily into a tablet these days. I use Bit Web Server on my Android Tablet and Phone.
Also, the method of interacting with the DOM you're using is trouble some to begin with. I suggest using JQuery. I think you'll find that your life becomes a lot easier when you don't have to worry about specific browser implementations for your JavaScript. And, my examples will demonstrate how to scroll the page using JQuery calls.
To make this easy, and for the purposes of giving you a crash course in JQuery, JQuery locates elements in the DOM based through 3 types of css selectors: ID, Class, and Name.
$("#[ ID property value]") .. finds one element with the specific ID property value
$(".[ ClassName]") .. finds any element with the css classname, in it's class property value
$("[HTML tag]") .. finds all elements with the HTML tag, ex: div
There are other ways to identify the specific tag or tag set that needs to be manipulated. But for now, as a beginner, this will suffice. IT's KISE - keep it simple and elegant =)
For more information on ways to find elements using JQuery, browse to:
http://api.jquery.com/category/selectors/
Once you have found your element to manipulate, then the JQuery API kicks in.
To scroll to a specific spot in the DOM using JQuery I would write the following piece of code.
<script src="jquery.js" type="javascript">
<script src="scrollintoview.js" type="javascript">
<html>
<body>
<div id="showme" class=""></div>
</body>
</html>
<script>
$("#showme").scrollintoview();
</script>
Unfortuantely, for my example, you will need to also include the JQuery ScrollIntoView plugin. It's not hard, just, a very good blog posts describes how the function works, why it was developed, and how to plug it into JQuery.
http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
Oh, and one last note about JQuery that may through you at first. Most JavaScript programmers that start out are used to basic coding practices. JavaScript relies on Recursive and CallBack functions.
Recursive means the function calls itself N times, till it exits
callself : function (n)
{ if n< 10) callself (n+1) }
A call back function is a function that is passed to another function in case you want to do something else before, during or after a process in the called function. In PHP this call back function is used to manipulate list elements.
callback : function (key, value)
{ // do something here with the given input }
process : function (list, start, end, callback)
{
var bThese = false;
for (var key in list)
{
bThese = ( (key == start) ? true : ( (key == end) ? false : bThese ) );
if (bThese)
if (callback)
callback (key, list [key]);
}
}
I know this is TMI, hope that it helps steer you and future dwellers in the right direction.
Good luck,
Mike,
On 10/9/2013 10:37 AM, pamelapdh@aol.com wrote:
If I understand your issue correctly, you need to scroll the page up and down through JavaScript.
I understand that you need a static page for the sales force. Note that you can load a LAMP stack very easily into a tablet these days. I use Bit Web Server on my Android Tablet and Phone.
Also, the method of interacting with the DOM you're using is trouble some to begin with. I suggest using JQuery. I think you'll find that your life becomes a lot easier when you don't have to worry about specific browser implementations for your JavaScript. And, my examples will demonstrate how to scroll the page using JQuery calls.
To make this easy, and for the purposes of giving you a crash course in JQuery, JQuery locates elements in the DOM based through 3 types of css selectors: ID, Class, and Name.
$("#[ ID property value]") .. finds one element with the specific ID property value
$(".[ ClassName]") .. finds any element with the css classname, in it's class property value
$("[HTML tag]") .. finds all elements with the HTML tag, ex: div
There are other ways to identify the specific tag or tag set that needs to be manipulated. But for now, as a beginner, this will suffice. IT's KISE - keep it simple and elegant =)
For more information on ways to find elements using JQuery, browse to:
http://api.jquery.com/category/selectors/
Once you have found your element to manipulate, then the JQuery API kicks in.
To scroll to a specific spot in the DOM using JQuery I would write the following piece of code.
<script src="jquery.js" type="javascript">
<script src="scrollintoview.js" type="javascript">
<html>
<body>
<div id="showme" class=""></div>
</body>
</html>
<script>
$("#showme").scrollintoview();
</script>
Unfortuantely, for my example, you will need to also include the JQuery ScrollIntoView plugin. It's not hard, just, a very good blog posts describes how the function works, why it was developed, and how to plug it into JQuery.
http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
Oh, and one last note about JQuery that may through you at first. Most JavaScript programmers that start out are used to basic coding practices. JavaScript relies on Recursive and CallBack functions.
Recursive means the function calls itself N times, till it exits
callself : function (n)
{ if n< 10) callself (n+1) }
A call back function is a function that is passed to another function in case you want to do something else before, during or after a process in the called function. In PHP this call back function is used to manipulate list elements.
callback : function (key, value)
{ // do something here with the given input }
process : function (list, start, end, callback)
{
var bThese = false;
for (var key in list)
{
bThese = ( (key == start) ? true : ( (key == end) ? false : bThese ) );
if (bThese)
if (callback)
callback (key, list [key]);
}
}
I know this is TMI, hope that it helps steer you and future dwellers in the right direction.
Good luck,
Mike,
Hello Nathan:--
I have a question related to the same issue. Your answer did point me in the right direction, thank you again.
I'm coding for a static HTML page which will be used for demos for sales people out in the field so they won't have
to rely on the internet. My JavaScript function captures the data input from the user correctly I tested it, but the way the
real form that uses the internet behaves is when the user hits the register button the form goes back to a certain part
on the page(a tab) which is on the same page. When I do it that way on the static page using DOM manipulation with JavaScript
it wipes out everything. Do you have any suggestions as to how I can keep this information from being wiped out when I
go back to the tab where my Dom information would be. Its written in stone this is the way they won't it to appear. I understand
that using the DOM nothing is actually written to the HTML page.
Thank You, any suggestion is greatly appreciated
PH
On Tuesday, October 8, 2013 12:28:02 AM UTC-5, pame...@aol.com wrote:Hello:
I,m trying to write some code to create a a div with a class and and id. I believe I have that part correct, I then create a <p> element, I then create a text node to go inside the <p> tag the issue is trying to append everything. I need to work dynamically
This is what I'm trying to do
var element = document.getElementsByClassName(" creditCardSummary");
var parent= element.parentNode;
//create div
var newDiv = document.createElement("div");
newDiv.id "newcc";
newDiv.className = "creditCardSummaryWrapper";
//Create a paragraph tag
var para = document.createElement("p");
alert("here")
var node=document.createTextNode("CardNumber:cshadow Experation:monthyear");
//The monthyear and cshadow are variables that hold information I
//captured from a form successfully.
para.appendChild(node);
I can't figure out out how to append all this so div ,<p >and text to show up.
parent.insertAfter(element, para); //I know something is missing.
Your help is greatly appreciated, thanks in advance
PH
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
No virus found in this message.
Checked by AVG - www.avg.com
Version: 2013.0.3408 / Virus Database: 3222/6736 - Release Date: 10/09/13
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.