I'ld like to insert a feature seen in www.k10k.net and www.rangermag.com whereby once a link is clicked it instantly reveals a hidden layer - seems a great way of quick navigation of info.
View 1 RepliesI am trying to create a basic menu where if you put your mouse over a button you get a bit of descriptive text or an image appearing somewhere else on the page. I have tried to do this with hiding/revealing hidden divs - works fine with IE but no others.
<html>
<head>
<script language="javascript">
var descriptions = new Array();
descriptions[0] = "<p>See whats been added to the web site recently</p>";
descriptions[1] = "<p>Find out more about me</p>";
descriptions[2] = "<p>Check out me links</p>";
function showDescription(descriptionIndex){ .....
I have a site with hidden layers [url. I would like to have the scrollbar customized but I'm having problems finding anything that will work with hidden layers. Anyone know of something I can use with hidden layers to customize a scrollbar?
View 1 Replies View RelatedI was wondering if there was a way to have a customized scroll bar with hidden layers? I have about 10 links and when you roll over each link a hidden layer appears. The scroll bar appears in the middle of the page and I'd like to customize it so it matches the site. I cannot really find any javascript or jquery that works with hidden layers.
View 2 Replies View Related<html>
<head>
<title>Braxton's Homepage</title>
</style>
<link rel="stylesheet" href="normal.css" />
<style type="text/css">
div#secret{
border: medium double black ;
[Code]...
why this doesn't work! It's supposed to make the "secret" div reappear.
I'm new to DOM and javascripting and have constructed a hide/show menu. I can't find a way to keep IE6 from revealing all the sub-lists onload. The code (inspired by PPK and Jeremy Keith's recent books) follows:
window.onload = function () {
var topnav = document.getElementById ("navmain");
var parent = document.getElementsByTagName("ul");
for (var i=0;i<parent.length;i++) {
if (parent[i].className != "section") continue;
parent[i].style.display = "none";
var header = parent[i].previousSibling;
if (header.nodeType != 1)
header = header.previousSibling;
header.relatedTag = parent[i];
header.onclick = openClose;
}
}
function openClose () {
var currentValue = this.relatedTag.style.display;
var newValue = (currentValue == "none") ? "block" : "none";
this.relatedTag.style.display = newValue;
}
Markup:
<div id="navmain" class="clearfix">
<ul><li><h4>Markets</h4>
<ul class="section">
<li><a href="/corporate/">Corporate</a></li>
<li><a href="/govt/">Govt/Agency</a></li>
<li><a href="/municipal/">Municipal</a></li>
<li><a href="/mbsabs/">MBS/ABS/CDO</a></li>
<li><a href="/funding/">Funding</a></li>
</ul>
</li></ul>
</div>
Hoping for some simple solution, but all advice is welcome.
I am having trouble with the following code. Right now the user clicks the button and it shows all of the blogs from the blog array. However I want it to just reveal 2 then two more and two more and so on as the user clicks button. I have tried multiple things but can't seem to get it right. Most of the things i try either reveal the entire blog on start or when the user clicks hides all of them.
[Code]...
Below is the code for a Facebook "Like" button. When I click the Like button, I would like it to show some html code below.
[Code]....
I need to implement a pretty basic javascript functionality in my site, but have never used it and wonder if there is a script available or if someone can give me the basics.
I have a nav bar at the top of the page with four links, and then divs for each of the links. The link you click on displays the associated div and hides the rest of them. Pretty simple, right?
I am a relatively inexperienced programmer and what I want to do here is to have an onClick for a div that reveals a random hint (one at a time) from a selection of 3 (they are all currently on top of eachother and hidden using body onLoad.)
[Code]...
I was just wondering if there is a JavaScript tutorial online that shows you how to do similar hover effect to what Twitter does with the trending topics. Such as Inception. When you hover over it and a black bubble appears. Also I'm not sure what it is called.
View 1 Replies View RelatedI'm using a bog standard script which reveals content when something is clicked. This script works fine everywhere else (or it did before I tweeked it a bit to get it to work on this one page; an easy thing to do), however, on this one page, it shows the content, but messes up the layout.
[Code]...
I have hidden div, that i want to show by sliding it in from topborder.The problem is that i don't know how to make it "slide in" instead of"wipe in".I want it all to move with it's content instead of showing more andmore of it.
View 1 Replies View RelatedI am trying to get a simple set of Javascript tabs to work properly. I have just two tabs and I want to set up the script to have the second tab automatically hidden prior to reading the javascript code because right now it shows the contents of both tabs when the page is loading and then the second tab disappears after all the script has loaded.
I have the jquery script linked to on the page and here is the way my script looks to run the tabs:
Code:
I want to add something like style="visibility:hidden;" to the DIV that isn't shown on page load and have it added and removed as necessary when users click on the tabs. So basically I would like the generated code to look like this:
Code:
Specifically, assume I have a div tag of absolute dimensions. I need
to figure out, first, whether or not the text inside the div tag is
partially hidden by the overflow setting, and if so, what the hidden
text is.
Is this even possible? Obviously, the rendering engine in the browser
"knows" this information, but is it accessible through Javascript?
When viewed with Firefox. The show/hide function doesn't work as expected (evident when viewed). Anyone know why? Which bit is FF not liking and how can it be altered to be
cross browser friendly?
Hey guys, im just learning how to use layers in css, and am trying to change a div like a targeted frame so that I can change content that is floating ontop of another image. So far I got that to work, except when I put in any embedded videos or image tags, then it stops working.[code]
View 1 Replies View RelatedAnyone know of any good beginners guide to layers online, preferably with
examples of form elements (initially populated from a database) updating the
parent page?
I have the basic functionality working with a popup window and
'opener.document.form1', but this doesn't look that good and I can't get it
to fill anything but a form element on the parent page.
Where can I find some examples about javascript and the use of layers?
View 1 Replies View RelatedI have a DIV that becomes visible when a link above it is moused over.
The DIV has links in it like so:
<div class="popup" onmouseout="hideLayer(this);">
<a class="popuplink" href="page1.html">Link 1</a><br/>
<a class="popuplink" href="page2.html">Link 2</a><br/>
<a class="popuplink" href="page3.html">Link 3</a><br/>
<a class="popuplink" href="page4.html">Link 4</a><br/>
</div>
When you mouse out of the div, it goes back into hidden. But as soon as I
touch any of the links, it hides, thinking I've left the DIV.
Now, I'm assuming this is a z-index layer issue, but I've tried every
combination of things I could think of to prevent the mouseout action when
mouseing over one of the links.
I tried setting div.popup's z-index higher than a.popuplink's, lower than
a.popuplinks, and the same as. (I did set each to a position as well.)
What am I missing?
If the syntax for IE is:
document.getElementById(layerID)
What if I want to use layers ?
document.layers ?????????
I made this script, always works but for some weird resion it just doesn`t work any more,
Does any one know why.
<script>
function layers( divID )
{
if (document.getElementById) { obj = document.getElementById(divID); }
else if (document.all) { obj = document.all[divID]; }
else if (document.layers) { obj = document.layers[divID]; }
return obj;
}
function show_layer ( divID )
{
var obj = layers ( divID );
obj.style.display == ''
}
show_layer ( 'test' );
</script>
<div id='test' style='display:none;'> this is a test layer </div>
Does anyone know where i can find a tutorial on how to change the content of a layer like this: Writing to layers.
View 1 Replies View RelatedThe following code works well in IE5 and Netscape 7, apparently my page is
not working in Netscape 4.6 and it has been suggested that i need a third
option dwellig around the document.layers object, could someone tell me what
line I need to make it compatable for earlier browsers?
***************************
if(document.all){
parent.Slave.document.all.hillList.style.pixelTop= parent.Slave.document.body
..scrollTop+100
parent.Slave.document.all.hillList.style.pixelLeft =600
parent.Slave.document.all.hillList.innerHTML=divHT ML
}
if(!document.all && document.getElementById){
parent.Slave.document.getElementById("hillList").style.top=parent.Slave.docu
ment.body.scrollTop+100+ "px"
parent.Slave.document.getElementById("hillList").style.left=600+ "px"
parent.Slave.document.getElementById("hillList").innerHTML=divHTML
};
*******************************
I have a layer, which is a DIV that has overflow set to "auto", so it
looks like a little pop-up window, even though it's just a layer.
So if the content of that window makes the user scroll down to read it,
and the user clicks a link while scrolled down, and the AJAX function
calls new data into that DIV, that data, if overflowed, will also be
scrolled down.
So basically it's like if you scrolled down to the bottom of slashdot.org,
clicked a link to usatoday.com, and when you got to usatoday.com, the page
was scrolled to the bottom of the page instead of at the top.
Any way I can make sure when the new data is written to the layer, that
the overflow scrolling is scrolled to the top of the layer?
Code:
The idea is that the blue help text rechtangle will have to remain
visible when mouse over (because there will be soon links in it) and
invisible when onmouseout.
I have now placed javascript on the small numbered balls and within
the rechtangle itself.
But I have it in a way that when "onmouseout" the blue help rechtangle
will be hidden. But now the onmouseout event is acting like
onmouseover. Any Ideas to do this correctly? So right now when you
onmouseover it it will disappear :S
If I get this working I can start thinking of putting a timeout on the
rechtangle for it to disappear within a couple of seconds after
"onmouseout"