Element Visibility During Scrolling
Nov 23, 2005
I'm trying to figure out which elements of a document are visible as the user scrolls the Firefox browser. I haven't written the code yet but I think I should be able to do it by keeping track of the current display using the following properties:
window.content.scrollX, window.content.scrollY,
window.content.innerWidth, window.content.innerHeight. -- with these 4
I can determine which part of the document is visible.
Then for each element I can figure out its display position using, offsetWidth, offsetHeight, offsetTop, offsetLeft. This would entail traversing the DOM and perculating the offset values down to all the children.
While this would likely work, it seems inefficient. Do you know of any other ways to determine which elements are actually on the screen?
View 1 Replies
ADVERTISEMENT
Nov 23, 2010
I'm back from a web dev hiatus. I'm writing a new site but have found myself a bit rusty. I'm trying to change the visibility of an element with no luck. nothing happens. I'll supply the code. Don't lick the kitten.
View 9 Replies
View Related
Jul 9, 2010
jquery i have a problem like
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
[code]...
my code always call when i click "dt a" but i dont want like this. i want like that if i click element visible don't do anything. my code call when i click element "dt a" unvisible.
View 1 Replies
View Related
Nov 19, 2010
So, I have a list of items that need to have a new preset list item appear based on what day it is. I have the date script working (to test, change the first case to some random date and change the third case to todays date - 10192010 - It will fire that document.write). What I need the cases to do though, is set the visibility of certain list items.
This is just an example, there will be around 20 list items in the final project. As you can see in the first two cases, I've tried a couple different routes to no avail.
The Code (class references are irrelevant to this example, they belong to the final project):
<html>
<head>
<script type="text/javascript" language="JavaScript">
/*
[Code]....
View 2 Replies
View Related
Sep 6, 2009
I found this little script and it works fine but the only thing is when the page first loads it displays the "This is foo" text. I would like it to not display the text until it is clicked. So instead of it displaying "This is foo" when the page loads I would like it to not display anything.
Here is the script:
Code:
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
</body>
View 9 Replies
View Related
Feb 17, 2011
jQuery - Scrolling browser Window. I have two demos of scrolling page content with jQuery.
This one - [url] is scrolling the contents inside a container and it works as I wanted on Mac/PC
Code:
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - [url]
Code:
Problem here is on the Mac the transition are jumpy and it seems to flash the first yellow div before sliding up or down. Testing on a PC it will slide down but won't slide up. How can I get the whole browser window to slide up and down with a smooth transition.
View 1 Replies
View Related
Aug 6, 2010
im searching for a plugin/code example for text scrolling. I got some text in a <div> if text is longer than for example 300px it gets cut and is scrolling from start to end, stops for a second and then scrolls back, stops and all over, and if its not long enough than 300px then just displays normaly. Something similar to the Song name scrolling inin anyMP3 player.
View 2 Replies
View Related
Jul 20, 2005
I was wondering if there is anyway to capture an event for when the scroll bar would appear while rendering a page with dymanic results driven questions. Such that answer to q1 would lead to another question, need to know what would be the last question before the scroll bar would appear.
View 1 Replies
View Related
Jul 20, 2005
I am trying to set up a page where there are a couple of checkboxes, and
based on the selected checkbox, certain input fields are required. For the
required fields, I want to display a red asterick as an image (
required.jpg ) next to the field iteslf. Thus, I am trying to write a
JavaScript function that will get called via the "onchange" action for each
checkbox.... this function willl either set the visibility to "visible" or
"hidden" for the red asterick ( required.jpg ) next to each input ( name,
address, email, etc... ). I am able to get this working in Netscape (
7.02 ), however I can't seem to get it to work for Internet Explorer (
6.02 ).
Here is a trimmed down, working ( at least in Netscape ) sample of what I am
trying to do. Any idea on what I need to do differently to get this to work
in IE? Code:
View 2 Replies
View Related
Aug 18, 2006
I would like to change the visibility of the contents of a DIV by clicking a button or link. If possible, I'd like the button to toggle the visibility on/off. If not, I'll just have two buttons, one to make it visible, the other to hide it.
Also, I'd like the page content under the DIV to move up/down as the DIV is hidden/visible (as if the text inside the DIV did not exist when the it was hidden).
The code I tried before posting was this:
function visibility(id){
document.getElementById(id).style.visibility=hidden;
}
I couldn't find any documentation on the Visibility property, so I didn't know how to use it correctly. Also if there is a better way to achieve the effect I want than using style.visibility, please post it.
View 3 Replies
View Related
Jun 19, 2006
I want to add a caption to certain images on a website I'm building when the user moves their mouse over it, along the lines of "Click to Enlarge". The HTML code I've got is as follows:
<div class="overlay">
<a href="#"><img src="image/example-4.jpg" alt="Example Image" /></a>
<div><p>Click to enlarge image</p></div>
</div>
The DIV with the caption is set in the CSS to display:none; and I have the following JavaScript code which is supposed to change this property to block on hover:
window.onload = function(){
var overlay = document.getElementsByTagName('div');
for(var i=0; i<overlay.length; i++){
if(overlay[i].className == 'overlay') {
overlay[i].onmouseover = function() { this.getElementsByTagName('div').style.display = 'block' }
} } }
But this gives this error:
Error: this.getElementsByTagName("div").style has no properties
Any idea what I've done wrong?
View 5 Replies
View Related
Jul 28, 2006
I have two text inputs. The second input is "visibility hidden".
I need to have it visible when the first input value is changed to something that is > 1.
View 1 Replies
View Related
Dec 5, 2001
Im trying to change the visibility of a div from hidden to visible "onMouseOver" .. Code:
View 7 Replies
View Related
Jul 8, 2011
I have a web page that has javascript running an html5 page where as the embedded movie plays, the captions play below the movie. What I'd like to do is to have a button that turns the captions' visibility on and off, but I can't seem to get it to work. Probably easier to just show you the web page so you can see the files and view source: [URL] Click the test.html file and hit the play button for the movies to see the captions. I think it might have something to do with the captions being within the media div, but I'm not sure how to address the caption id other than the way I have.
View 3 Replies
View Related
May 1, 2010
This is my code:
Now i want the second layer to appear when i hover over the first, which it does. however i want it so that when i move my cursor away from the second layer it dissapears but the problem is it doesn't seem to work.
View 4 Replies
View Related
Feb 16, 2011
I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this. how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.
View 3 Replies
View Related
Oct 29, 2011
I've got a script that toggles the visibility of a div on "dashboard.html":
$(document).ready(function(){
$("#add_networks_wrapper, .remove_box").hide();
$(".toggle_add_networks").show();
$('.toggle_add_networks').click(function(){
$("#add_networks_wrapper, .remove_box").slideToggle();
});
});
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it. What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
View 1 Replies
View Related
May 10, 2005
I am trying to loop through the ID's from the DIV's to toggle visibility on and off. The first time through my loop the visibility property returns null. Is there a known issue with Javascript and the visibility property?
The code is like this:
for(i = 1; i <= 3; i++)
{
if (document.getElementById('t' + i).style.visibility == 'visible')
{
document.getElementById('t' + i).style.visibility = 'hidden'
}
<STYLE TYPE="text/css">
<!--
#t1
{
position: absolute;left: 100px; top: 80px; height: 400px; width: 100px; z-index:1; visibility:visible; }
#t2
{
position: absolute;left: 100px; top: 80px; height: 400px; width: 100px; z-index:2; visibility:hidden; }
#t3
{
position: absolute;left: 100px; top: 80px; height: 400px; width: 100px; z-index:3; visibility:hidden; }
-->
</STYLE>
</head>
<body>
<form>
<div id="t1">Testimonial 1</div>
<div id="t2">Testimonial 2</div>
<div id="t3">Testimonial 3</div>
View 3 Replies
View Related
Oct 29, 2011
I've got a script that toggles the visibility of a div on "dashboard.html":
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.
What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
View 7 Replies
View Related
Feb 19, 2009
I'd like to be able to toggle the existence of a DIV using the onclick attribute.
HTML Code:
<input type="radio" value="1" checked="checked"
onclick="document.getElementById('div').style.visibility='hidden';"> 1
[code]....
View 2 Replies
View Related
Sep 6, 2011
I am trying to achieve an effect similar to this: Our Recent Work | StudeoYou'll notice that if you click on any of the 'filters', the items below are sorted shown/hidden accordingly.
View 4 Replies
View Related
Oct 29, 2011
I've got a script that toggles the visibility of a div on "dashboard.html":
Code:
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.
What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.
View 2 Replies
View Related
Jan 9, 2009
Was wondering how to accomplish this.I have several table rows that I would like to hide all with the push of a button.For instance:
Code:
<tr id="objects_row1"><table class="apples">
<tr id="apples_row1"><td>asdf</td></tr>
[code].....
View 4 Replies
View Related
Jul 23, 2005
Opera seems to have different ideas about the visibility of Javascript
functions than other browsers. For example, if I have this code:
if (1==2) {
function invisible() {
alert("invisible() called");
}
}
then most browsers will consider invisible() to be undefined. But in
Opera you can call it! You can try this online here: Code:
View 5 Replies
View Related
Dec 5, 2006
I have a strange problem using Internet Explorer.
My page has a table included in a <DIV>
I have a checkbox that shows the div when checked
and hides it when unchecked.
var division = document.getElementById("passport") ;
Then I use
division.style.visibility = "visible" ;
or
division.style.visibility = "hidden" ;
Everything works perfectly under FireFox or Safari showing or
hidding the table.
BUT, in IExplorer 6 or 7, just checking the checkbox doesn't
change anything. You have to first click on the actual division
position to make it appear. Same for unchecking: click on the
displayed table and it will disappear. Code:
View 2 Replies
View Related
May 3, 2011
The following snippets are not equivalent, what am I doing wrong? This one does not actually show the div
$('#edit_div').css.visibility= 'visible';
whereas this one does.
[Code]...
View 1 Replies
View Related
