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.
I have a script that when you click a link it changes a layer visibility. IE: one layer becomes visible while another hidden.
It works great in NS and IE but when I try it in mozilla(firebird) it won't work. Any have a code I could use or know of a resource where I can get one.
I want to have a single window with 6 or so links at the top that display fixed pages for the first 4 and the final two "Brow" and "se-H" or "se-S". When you double click "Brow" a script prompt asks to enter where they want to go. The script then adds http:// to the front of it and places it as the src for an iframe in a <div></div> layer that has its visibility as hidden. "se-H"/"se-S" Hide and show the layer wich has a zindex higher than that of all other layers on the screen. The other links that just have the code strung out in the onClick action are working just fine as does the Brow link the only resultant error is the "se-H"/"se-S" links they change back and forth indicating the script is running and the outerHTML code is ok but the zindex just isn't changing nor the visibility. I am asking for any suggestions and if I have not included all necessary code please tell me as I only took the pieces I thought may be causing the trouble:
<SCRIPT>
function show()
/*show*/{
fun2.style.visibility='visible'
/*show*/}
function hide()
/*hide*/{
fun2.style.visibility='hidden'
/*hide*/}
var go_to=""
function disp_pop()
/*disp_pop */{
go_to = prompt("Where do you want to go? ","")
/*disp_pop */}
function get_there()
/*get_there */{
if(go_to !="" && go_to!=null)
fun2.outerHTML='<div id=fun2 style="position:absolute; top:55; left:10; z-index:15; overflow:scroll;"><iframe src="http://'+go_to+'" width=475 height=395></iframe></div>'
else
fun2.outerHTML='<div id=fun2 style="position:absolute; top:55; left:10; z-index:15; overflow:scroll;"><iframe src="http://google.com" width=475 height=395></iframe></div>'
fun2.style.visibility='visible'
/*Everyone else back*/
guide.style.zIndex=2;
autoguide.style.zIndex=0;
webmail.style.zIndex=1;
/*Everyone else back*/
/*get there */}
var swap_1 ='<a id=myH4 onclick="this.outerHTML=swap_2;hide();">wse-H</a>'
var swap_2 ='<a id=myH4 onclick="this.outerHTML=swap_1;show();">wse-S</a>'
</script>
The links I am using in the page are as follows
<a href="#" onclick="guide.style.zIndex=2; autoguide.style.zIndex=2; webmail.style.zIndex=3;">Mail</a>
<a href="#" onclick="guide.style.zIndex=1; autoguide.style.zIndex=3; webmail.style.zIndex=2;">TxGuide</A>
<a href="#" onclick="guide.style.zIndex=3; autoguide.style.zIndex=1; webmail.style.zIndex=2;">Guidelines</A>
<A HREF="#" onmouseover="reappear()" onmouseout="disappear()">AuxDetail</A>
<A HREF="#" ondblclick="tada()" onclick="hideit()">Fun</A>
<a onClick='toggleAddress("")'>Refresh</a>
<a id=myH3 ondblclick="disp_pop()" onclick="get_there()">Bro</a>
<a id=myH4 onclick="this.outerHTML=swap_1;show();">wse-S</a>
if I'm using IE only I can get around just fine, but I haven't really had a lot of experience sniffing out other browsers and trying to create different code branches to create the same effect on a particular browser.
In this case I've got a series of layers that correspond to some links. When someone mouses over the link, the layer becomes visible. When someone mouses out, I want the layer to fade out. Code:
I am using CSS text-shadow but of course IE doesn't like it. I've looked into some methods for achieving the same effect in IE, but it's not at all the same so I've opted for another method..I'm going to have two layers. In layer1, it will be standard text, shadowed with CSS. I then screenshotted that and will use the resulting jpeg for layer2.I was then planning to find a script that:1. Detects if browser is IE2. If IE, layer2 is visible, layer1 is invisible3. If not IE, layer1 is visible, layer2 is invisibleThe problem is that I can't find a simple script to detect if the browser's IE or not. I can find loads of scripts that check what version of IE someone's using. The version isn't important!
View 5 Replies View RelatedLayer writing in Netscape. This is pretty straightforward >> However I'm trying to write to a <div> layer within a <div> layer.
My div:
Code:
<div id="blah">
<div id="aight">
</div>
</div>
I'm trying to write to "aight"
How should my code look?
I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously.
The html page is as follows:
Many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create.
Signing Scripts. In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to.
With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client.
A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it.
Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following:
Unambiguously assigns ownership of the script to a person or organization.
Allows an HTML page to use multiple signed scripts.
Places the signed script into a Java Archive (JAR) file.
Places the source of the script in the JAR file.
Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script.
JAVASCRIPT FILE IS AS FOLLOWS:
AND CSS FILE IS AS FOLLOWS:
At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable.
I've been looking all over the place in order to find a script like they use on Foliostars, where you see a sliding semi-transparant text layer over a thumbnail image when you hover. how to achieve this using JS or an Ajax framework (preferably JQuery)?
View 2 Replies View RelatedI 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 RelatedI 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:
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.
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?
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.
Im trying to change the visibility of a div from hidden to visible "onMouseOver" .. Code:
View 7 Replies View RelatedI 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 RelatedI'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?
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 RelatedI 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 RelatedI'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.
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>
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.
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]....
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 RelatedI'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.
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].....
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: