How do I get the amount of scroll in a div tag using JavaScript? Please provide me with an example.
I don't want to use jQuery, only JavaScript.
Try this code snippet
<!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 runat="server">
<title></title>
<script type="text/javascript">
function scrollPos() {
var div = document.getElementById("myDiv").scrollTop;
document.getElementById("pos").innerHTML = div;
}
</script>
</head>
<body>
<form id="form1">
<div id="pos">
</div>
<div id="myDiv" style="overflow: auto; height: 200px; width: 200px;" onscroll="scrollPos();">
Place some large content here
</div>
</form>
</body>
</html>
you use the scrollTop attribute
var position = document.getElementById('id').scrollTop;
Related
I wrote this code but still print preview option is coming...
this.contentWindow.print() for printing purpose
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function printPage()
{
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="PrintDemo.aspx" onload="this.contentWindow.print();"></iframe>';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button onclick="printPage()">prin`enter code here`t</button>
<div id="printerDiv" ">
This Page Is for print demo`enter code here`
</div>
</div>
</form>
</body>
</html>
I am trying to trigger the FB subscribe event, but the alert does not work.
The FB like button displays but when I click the like button there is no alert:
Code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="facebook.aspx.cs" Inherits="iFrame.facebook" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=&href=www.goal.com"
scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 47px;
height: 20px;" allowtransparency="true"></iframe>
</div>
</form>
</body>
</html>
<script type="text/javascript">
FB.Event.subscribe('edge.create',
function (response) {
alert('You liked the URL: ' + response);
});
</script>
You need to be using the XFBML version of the Like button or else the event isn't detectable.
If the Javascript SDK didn't initialise the Like button then it also won't have access to the event fired. Use the XFBML version of the Like button instead of the iframe version and the rest of your code should work - it looks fine.
In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`
i get obj expected error when click on asp button. where is the problem?
code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type"text/javascript">
Hmove=-100;
function moveObjRight(obj) {
obj.style.left=Hmove;
Hmove+=2;
if(Hmove<100)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#AS
{
top: 141px;
left: 118px;
position: absolute;
height: 25px;
width: 25px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img alt="asd" src="pic 3-4.jpg" id="AS"/>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="moveObjRight(AS);"/>
</div>
</form>
</body>
</html>
Your code is inconsistent about how it references the object it is moving.
On this line you are missing the quotes - there is no AS object, it's the string id of the oject
OnClientClick="moveObjRight(AS);"
should be
OnClientClick="moveObjRight('AS');"
Your function is expecting an object not a string
function moveObjRight(obj)...
should be
function moveObjRight(objId) {
var obj = document.getElementById(objId);
...
now this line will work
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
but you could just use
window.setTimeout("moveObjRight(" +objId+ ");", 0);
This code attempts to dynamically switch the class of the StateContainer div from StateOne to StateTwo to alternate the visibility of the DIV.
When I run it, I always see the following both before and after clicking the button.
Visible first
Visible first
Visible first
Visible first
Would appreciate any suggestions for why this code does not work the way I'm expecting.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('.x').click(
var s = document.GetElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
);
});
</script>
</head>
<body>
<button class="x">Change StateContainer</button>
<div class="StateOne" id="StateContainer">
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
</div>
</body>
</html>
It looks like you're not using the click event properly. You need to provide it with a function:
$('.x').click(function() {
var s = document.getElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});
Also, if you're already using jQuery, the following syntax is much shorter than document.getElementById (which doesn't have a capital G, by the way):
var s = $("#StateContainer")[0];
Steve