|
JavaScript - (help!) Hiding And Showing Divs - Using Flash, Css And Javascript
Hi,
Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
var obj;
var sel = $_('divContent').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
obj = sel[i].id;
if (obj != IDS) { $_(obj).style.display = 'none'; }
else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
}
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>
<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>
<div id="divContent">
<div id="BIO" class='divElem'>
<p>This is my content for bio</p>
</div>
<div id="News" class='divElem'>
<pThis is my content for news</p>
</div>
<div id="Portfolio" class='divElem'>
<p><This is my content for portfolio </p>
</div>
<div id="Resume" class='divElem'>
<p>This is my content for resume</p>
</div>
</div>
</body>
Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry Similar TutorialsI'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
document.getElementById('per_week').style.display = 'none';
document.getElementById('bond').style.display = 'none';
}
else {
document.getElementById('per_week').style.display = 'block';
document.getElementById('bond').style.display = 'block';
}
}
Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? Hello, I'm new to the forum. I tried coding this myself, but i'm just not that well versed in javascript and need a little help. I am trying to show certain div tags when you click on a hyperlink in an html document. I have four links (bio, news, portfolio, and resume) and four div tags (bio, news, portfolio, and resume). I am just going to show the code for one of the links. This is what I have for the bio link in the head of the html: Code:
function setVisible( setting )
{
var myElement = document.getElementById("bio");
if(setting)
myElement.style.visibility="visible";
else
myElement.style.visibility="hidden";
}
</script>
This is what I have in the style sheet: Code:
#bio {
position: absolute;
font: 9pt arial;
line-height: 10.5pt;
color: #fff;
width: 575px;
height: 300px;
margin-top: 390px;
margin-right: auto;
margin-left: 40px;
margin-bottom: 5px;
z-index: 1;
border: 0px solid #fff;
}
This is what I have on the link in the html doc (I'm assuming this is wrong, I don't know what the proper code should be): Code: <a href="javascript:onClick="setVisible(true)";">BIO</a> Does what I'm trying to do make sense? I'm assuming that it would be the same set up for all four links? Please let me know if I need to be more specific. Any help would GREATLY be appreciated! Thank you, Gerry i am having some problem showing and hiding some div i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option. Code: function Show (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "block";
return false;
}
function Hide (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "none";
return false;
}
the functions work fine i have tested them on input type="checkbox" and they work fine Code: <select name="education" id="education" onfocus="Show(this.options[this.selectedIndex].value);"> <option selected value="00">-الرجاء الاختيار-</option> <option value="highSchoolsDiv">مدرسة ثانوية</option> <option value="universitiesDiv"> كلية </option> <option value="universitiesDiv">درجة البكالوريوس</option> <option value="universitiesDiv">درجة عليا</option> <option value="universitiesDiv">دكتوراه / ما بعد الدكتوراه</option> <option value="07">اسألني فيما بعد</option> </select> </span> </div> </td></tr></table> </div> <div> <div class="Left"></div> <table class="step2" ><tr><td> <div class="Right"> <div class="Inner" id="Inner"> <div id="universitiesDiv" class="Row innerError" style="display:none;"> <div class="Left"> <label for="universities">الجامعة / الكلية</label></div> <div class="Right"> <input type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> </div> </td></tr><tr><td> </div> <div id="highSchoolsDiv" class="Row innerError" style="display:none;"> <div class="Left"> <label for="high_schools">المدرسة الثانوية</label></div> <div class="Right"> <input type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> </div> </div> </div> </div> </td></tr></table> </div> here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!! anyone can help me, that would be great thanks I have this simple checkbox menu http://myresearchfinder.com/dev/checktest.html If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas? Hi, I wondering if anyone can help: I've got rows of divs in this manner <div class="row">This is row 1 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 1</p></div> <div class="row">This is row 2 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 2</p></div> <div class="row">This is row 3 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 3</p></div> <div class="row">This is row 4 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 4</p></div> I wish to have some javascript to toggle the hidden row for its corresponding link. Please can someone help point me to an example if available. Any help will be greatly appreciated hey all, Registered for this forum because I found this thread about hiding and unhiding divs. http://www.codingforums.com/archive/.../t-161166.html I have tried to implement this on a site that I am building and have come up with a weird result. My javascript is very poor so debugging this has become a real headache. Hopefully someone can help out. The issue is that when I click the button to unhide the hidden div, it hides everything and reveals the hidden div on its own without everything else. Hopefully that makes sense. Current code looks as follows- Code: <script type="text/javascript">
function unhide(divID) {
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].className='hidden';
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.hidden {
display: none;
}
.unhidden {
display: block;
}
</style>
</head>
<body>
<div class="container" id="wrap">
<!-- MODULE START -->
<div id="web" class="panelContainer">
<div id="panelBtnContainer">
<li><a href="#" onclick="unhide('test1'); return false;" class="web"><span>Button Text</span></a></li>
</div>
<div class="leftContainer">
<div class="panelShadow"></div>
<div class="panelThumb">
<img src="images/works/t-test.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
</div>
</div>
<div class="rightContainer">
<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</div>
</div>
<div id="test1" class="hidden">
<p>Testing :)</p>
</div>
<!-- MODULE END -->
<!-- MODULE START -->
<div id="web" class="panelContainer">
<div id="panelBtnContainer">
<li><a href="#" onclick="unhide('test2'); return false;" class="web"><span>Button Text</span></a></li>
</div>
<div class="leftContainer">
<div class="panelShadow"></div>
<div class="panelThumb">
<img src="images/works/t-test02.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
</div>
</div>
<div class="rightContainer">
<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</div>
</div>
<div id="test2" class="hidden">
<p>Testing :)</p>
</div>
<!-- MODULE END -->
</div>
Any help would be greatly appreciated. Thanks in advanced Hi, I just installed a javascript library (Walter Zorn drag and drop: http://www.walterzorn.com/dragdrop/dragdrop_e.htm) and one of the properties included is the ability to hide or show divs and images that have been made draggable, using the the following methods: if (window.dd && dd.elements)dd.elements.divID.show() and if(window.dd && dd.elements) dd.elements.divID.hide() I'm wondering if I wanted to make a single button that toggled between hiding and showing a DIV....how would I combine the two methods in a single onclick event? They both work perfectly as separate events on different buttons but I cannot figure out how to combine them. Any help would really be appreciated. I'm hope there's some way to do this w/ the "else" statement but I don't know the proper syntax. Thanks!!! Hi guys I kinda needed help on jQuery/ javascript.. Here's the test page.. http://development.andrewfopalan.com/devpage/test.html# what I'm trying to do is like this.. http://trailers.apple.com/trailers/s...bandofmisfits/ the movie box... so far, I have made the cosmetics.. but the thing I was going to ask was.. when you click on the down arrow.. a popup dropdown list is going to show.. the problem is I am copying the same effect as the one with apple.. when you click outside of the popup dropdown list, the dropdown list should be fading out... but it wouldnt... I tried using doing.. it like this Code: $("#wrap" ).click(function () {
$(".dropdown").fadeOut();
});
but the problem is.. whenever I click the down arrow button.. it continues to fadeout.. as soon as it fadesin... how should I do this? please guide me.. everything works just fine.. just this one.. I am really lost.. i the whole jquery code is in the page sirs... please help me pretty new to javascript/jquery.. Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed. However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior. What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown. Here is the code I am using.. PHP Code: function searchCats(text) { // Set URL for ajax request var url = 'search_cats.php?search_text='+text; // Set up element we're modifying var results = document.getElementById('cat_list'); // Trim string text.replace(/^ss*/, '').replace(/ss*$/, ''); if (text.length < 3) { alert('Please enter a search string more than 2 characters.'); return; } // Send the request, giving it an anonymous function that acts as the oncomplete event ajaxRequest(url, (function(ajaxResponse) { /* Deal with results */ // First we remove all current childs while(results.hasChildNodes()) { while (results.childNodes.length >= 1) { results.removeChild(results.firstChild); } } if (ajaxResponse == '') { // Display no results text document.getElementById('no_results').style.display='block'; } else { // Hide no results text document.getElementById('no_results').style.display='none'; // Display loading text document.getElementById('loading_results').style.display='block'; // Check for occurence of cat seperator (if not there then we know we only have one results) var sep_found = ajaxResponse.indexOf('!@!'); if (sep_found === -1) { // One result only // Seperate ID & cat name var parts = ajaxResponse.split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } else { // Seperate cat data var cats = ajaxResponse.split('!@!'); // Loop through cat data for(i = 0; i < cats.length; i++) { // Seperate ID & cat name var parts = cats[i].split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } } } })); // Hide loading text document.getElementById('loading_results').style.display='none'; } Thanks guys! I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me: http://bedrockstoneanddesign.com/ It only happens in FireFox..... any help is appreciated. thanks Hello there !! I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript...... I want to show multiple divs on select of a <option> box. So lets say there are 3 options Code: <select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>
And a javascript function to show the div`s Code: function showDivs(prefix,chooser) {
for(var i=0;i<chooser.options.length;i++) {
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedvalue = chooser.options[chooser.selectedIndex].value;
if(selectedvalue == "a")
{
displayDivs(prefix,"a");
displayDivs(prefix,"c");
displayDivs(prefix,"d");
}
if(selectedvalue == "b")
{
displayDivs(prefix,"b");
displayDivs(prefix,"c");
}
if(selectedvalue == "c")
{
displayDivs(prefix,"d");
}
}
function displayDivs(prefix,suffix) {
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
And some divs to show Code: <div id="diva" style="display:none;">blabla</div> <div id="divb" style="display:none;">blabla</div> <div id="divc" style="display:none;">blabla</div> <div id="divd" style="display:none;">blabla</div> All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good.. Then I choose option 'c' I get only one div. Thats good.. But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'.. Does anybody understand why?? Thanx allot !!! I dont claim any of the JS below as my own. link to an example page http://www.clansngamers.com/add_new_game.php You see the PS3 checkbox is standard: Working, It brings up the hidden div. The Xbox checkbox is coded exactly the same except it uses the custom checkbox image and it dont work. This is my problem. have tried to code this and failed asking for any help i suck at JS. The Code Im trying to add Code: function showMe(id){ var obj = document.getElementById(id);
if (obj.style.display == "none"){obj.style.display = "inherit";}
else {obj.style.display = "none";}
}
The basic layout Code: <input class="styled" name="foo" type="checkbox" id="foo" value="1" onclick="showMe('div1')" />
<input class="styled" name="bar" type="checkbox" id="bar" value="1" onclick="showMe('div2')" />
<div id='div1' style="display:none;">hidden content 1</div>
<div id='div2' style="display:none;">hidden content 2</div>
Custom Checkbox code Code: var checkboxHeight = "14";
var radioHeight = "14";
var selectWidth = "190";
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.top = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
I want to hide my JavaScript but when I checked the FAQ of this forum, I saw that it said that it isn't possible. But how did worldometers.info did it? Because I cant find the JavaScript source. I have a store that sells certain products. When you add a product to the cart and go to view your cart you can estimate shipping costs. It will list different shipping methods and the cost to ship them. However, there is one shipping method called "Request a Quote" that has a price value of 0.01. This can confuse customers because they sometimes think that the shipping is only $0.01 when it really isn't. So I want to just remove this value, but still list pricing for all the other shipping methods. I know I can just do this using CSS and setting the display to none. But am having trouble getting it to work. Here is the link to the shopping cart page: Folding Chairs and Tables.com - Shopping Cart If you add a product and run the 'estimate shipping and tax' you will see what I'm talking about. How can I remove this value? Any help would be really appreciated. Here is a picture of what the table looks like when you calculate the estimate shipping costs: Thank You I am in the progress of building a new website; the layout and stuff is already done for the most part, but I am having a problem with the two order forms on my website. Well not the forms themselves, more with how they appear (and disappear). Like stated I have 2 forms on my website. When coming to my website they should be hidden (standard). When someone wants to order they press the link for order form A or form B. From here I am running into several problems. Problem #1 I want each form only to appear when they click on a link. For example; when a person clicks on link 1 form A appears. If they click on link 2 form B appears. Problem #2 If form A appears and they click on link 2, than form A should disappear and form B should be visible and the other way around. Problem #3 Is it possible to load a page within the DIV for example I want form B to include extra-info.php. Is this possible? If I understand correctly the above would be possible with Javascript and with the use of hidden DIV's. But I really don't know much about Javascript to pull this of myself. Anyone in here who can help me out and provide me with a working example? I would be very grateful... If something is not clear, please do no hesitate to ask me... I am trying to make an order form I am working on accessible for users who have javascript turned off in their browser, and to do this I would like to hide a div if JS is disabled. Searching the Web has led me to think that styling the div to not display is the way forward and then using JS to display it. It is the JS bit I am struggling with! The div in question is a set of radio buttons to allow a purchaser to choose how many gift memberships they want to buy: Code: <div id="giftmember-buttons" style="display:none";> <h2 class="threepeaksform">How many gift memberships do you wish to purchase?</h2> <fieldset class="threepeaksform"> <legend>Please select the number of people you are buying a gift membership for using the buttons below.</legend> <div class="generalcontactform-group"> <label>1</label><input name="numbergift" type="radio" value="1" checked="checked" onClick="showhidefields(this.value)" /> <label>2</label><input name="numbergift" type="radio" value="2" onClick="showhidefields(this.value);"/> <label>3</label><input name="numbergift" type="radio" value="3" onClick="showhidefields(this.value);"/> <label>4</label><input name="numbergift" type="radio" value="4" onClick="showhidefields(this.value);"/> </fieldset> </div> <br /> </div> I have used a JS switch function lower down the page but that relies on onClick to make it work, I want the above div to display as the page loads - would I do this with the switch function and onLoad applied to the body to make the div display when JS is on? The full page is at: http://yd97.peak1.titaninternet.co.u...sform-gift.htm Thanks for any help. Cheers Stu I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?
Hi there, A client of mine has asked me to change a flash component on his website to something that will work on the ipad/iphone etc. So my guess is that a javascript created slideshow would do the trick. Check out what I am meaning on this page: http://www.it-world.com.au/ It's the flash with "Our Services" "Our Products" "Contact" in it. Can anyone suggest a very easy javascript that I could manipulate to give this same scrolling effect on the click of a link. It needs to be very easy to make changes to as I have no js skills whatsoever other than copying, pasting and making minor changes to obvious pieces of script. hope someone can help! Thanks, Ross I'm not too familiar with javascript and usually do most of my animation/linking with flash. However my client does not want flash because it can't be displayed on the iPhone. If you go he http://www.hosthabitat.com/think/bb2/index.html you will see a menu on the left that starts to scroll through the buttons while showing different images on the right. But if you hover over any button it stops on that image. The buttons are then linked to individual pages. I attempted to try and replicate this technique he http://www.hosthabitat.com/think/bb2/index_test.html However I am not sure how to write or modify my script so that it scrolls through the photos like my flash version does. Any help!!! I'm stuck! Hi, I'm currently working on a Flash pop-up that can be integrated in several websites. I'm currently testing the code. I've got a flash file with a semi-transparant background that loads over the complete page, it also closes the div with the flash content once the end of the swf is reached. The thing is, I want to prevent the user from scrolling whilst the swf is active. That's why I disabled the overflow-Y. Now I've got a javascript code that is supposed to change the body's overflow to visible again, and I'm calling to this code in the same frame as where I disable the div with the flash in it. But for some reason it isn't working. This is my complete Javascript code: Code: <script type="text/javascript">
<!-- Original: Gregor (legreg@legreg.de) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;
function hidelayer(lay) {
if (ie4) {document.all[lay].style.visibility = "hidden";}
if (ns4) {document.layers[lay].visibility = "hide";}
if (ns6) {document.getElementById([lay]).style.display = "none";}
}
function writetolayer(lay,txt) {
if (ie4) {
document.all[lay].innerHTML = txt;
}
if (ns4) {
document[lay].document.write(txt);
document[lay].document.close();
}
if (ns6) {
over = document.getElementById([lay]);
range = document.createRange();
range.setStartBefore(over);
domfrag = range.createContextualFragment(txt);
while (over.hasChildNodes()) {
over.removeChild(over.lastChild);
}
over.appendChild(domfrag);
}
}
<!-- This is the part I added which I thought would show the scrollbar again after the flashpopup is finished -->
function showbar(){
document.getElementsByName('body')[0].style.overflowY = 'visible';
}
</script>
And in the final frame of my flash animation I first stop the swf, and then call to both functions: //stops the movie stop(); //this is the code that triggers the function to hide the div, and the function that should show the scrollbar getURL("javascript:showbar();"); getURL("javascript:hidelayer('newlayer');"); I've also got an online webtest he http://www.haragara.com/banner_test/ And I've included all the files in a zip Can anyone tell me what I'm doing wrong? |
|||||||