|
JavaScript - Using Scrollintoview And Unhide/hide Div Together
I am new to Javascript, and so far I have been fortunate enough to get my code to work. What I have is a page full of hidden images, and checkboxes to unhide the desired images. What I would like is for the page to scrollintoview when that image is unhidden.
I can do one or the other, but I can't seem to get them to work together. Any insight would be appreciated. Code:
<html>
<head>
<script type="text/javascript">
var divs1 = ["div1",];
var divs2 = ["div2",];
var divs3 = ["div3",];
var divs4 = ["div4",];
var divs5 = ["div5",];
var divs6 = ["div6",];
function visiblox(arrDiv, hs) {
var disp = (hs) ? "none" : "block";
for(var x = 0; x < arrDiv.length; x++) {
document.getElementById(arrDiv[x]).style.display = disp;
}
}
function chk(what, item) {
if(item) {
visiblox(what, false);
} else {
visiblox(what, true);
}
}
</script>
<style type="text/css">
<!--
.show
{
display: block;
}
.hide
{
display: none;
}
-->
</style>
</head>
<body bgcolor="PaleGoldenrod" onload="document.forms[0].reset()">
<p><center><img src="top_f_3.png" alt="Overall Performance" /></center></p>
<form name="myform" action="checkboxes.asp" method="post">
<center>
<input type="checkbox" onclick="chk(divs1, this.checked);"> | v1 |
<input type="checkbox" onclick="chk(divs2, this.checked);"> | v2 |
<input type="checkbox" onclick="chk(divs3, this.checked);"> | v3 |
<input type="checkbox" onclick="chk(divs4, this.checked);"> | v4 |
<input type="checkbox" onclick="chk(divs5, this.checked);"> | v5 |
<input type="checkbox" onclick="chk(divs6, this.checked);"> | v6 |
</center>
</form>
<div id="div1" class="hide">
<p> <center> <img src="f3_v1.png" alt="V1"/> </center> </p>
</div>
<div id="div2" class="hide">
<p> <center> <img src="f3_v2.png" alt="v2" /> </center> </p>
</div>
<div id="div3" class="hide">
<p> <center> <img src="f3_v3.png" alt="v3" /> </center> </p>
</div>
<div id="div4" class="hide">
<p> <center> <img src="f3_v4.png" alt="v4" /> </center> </p>
</div>
<div id="div5" class="hide">
<p> <center> <img src="f3_v5.png" alt="v5" /> </center> </p>
</div>
<div id="div6" class="hide">
<p> <center> <img src="f3_v6.png" alt="v6" /> </center> </p>
</div>
</body>
</html>
Similar TutorialsI'm creating a website where I would like to create some kind of tabbed pages. To do that I wrote a javascript where I create an array of all the divs I use to create the pages and then sets them all on style="display: none;" except the one I clicked which should get style="display: block;" But I can't seem to get it to work... This is the script itself: Code: var state = 'none';
var i;
var divs = new Array();
divs[0] = document.getElementById(div1);
divs[1] = document.getElementById(div2);
divs[2] = document.getElementById(div3);
divs[3] = document.getElementById(div4);
divs[4] = document.getElementById(div5);
function showhide(layer_ref) {
divs[0].innerHTML="some contents";
for (i=0;i<divs.length;i++)
{
if(divs[i] == document.getElementById(layer_ref))
{
state = 'block';
}
else
{
state = 'none';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + divs[i] + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[divs[i]].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(divs[i]);
hza.style.display = state;
}
}
}
And this is part of the html of the page: Code: <head>
<script type="text/javascript" src="scriptShowHide.js"></script>
</head>
<div id="navigation">
<ul class="tabContainer2">
<li><a class="orange" href="#" onclick="showhide('div1');">Tab1</a></li>
<li><a class="orange" href="#" onclick="showhide('div2');">Tab2</a></li>
<li><a class="orange" href="#" onclick="showhide('div3');">Tab3</a></li>
<li><a class="orange" href="#" onclick="showhide('div4');">Tab4</a></li>
<li><a class="orange" href="#" onclick="showhide('div5');">Tab5</a></li>
</ul>
</div>
<div id="div1" style="display: block;">This is the content of tab1</div>
<div id="div2" style="display: none;">This is the content of tab2</div>
<div id="div3" style="display: none;">This is the content of tab3</div>
<div id="div4" style="display: none;">This is the content of tab4</div>
<div id="div5" style="display: none;">This is the content of tab5</div>
Can anyone help me plz, I've been staring at this for hours... hey all- i have been thinking about how i wanted to tackle this for a while now, and it is now "down to the wire"... so in my page i have two nav bars, one for js enabled and one for js disabled... they are styled accordingly (the js disabled is display:inherit; and the js enabled is display:none now i may need to tweak those styles after i get the script working, but that i can toy with after i get this working... anyways- my pages get the navbar inherited from a master page- so my thought was (to prevent loops) make a nav bar that had all js disabled links and a navbar that had all js enabled... then in my code i put in this script Code: <script type="text/javascript">
document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";
document.getElementById("Nav_Menu_Content").style.display = "none";
</script>
now i am not amazing with js but i figured this would work... i get an error thrown every time though Quote: Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined now i assume (i am watching in debug) that this is because it is hitting the script before the rest of the page writes... but if i move the script below then the script never fires... ? here are the two nav bar ID's Note: i encapsulated the menus in <div>s and targeted the divs to ensure that there were no conflictions with my asp Code: <div id="Nav_Bar_Menu_Content" class="Nav_Menu"> ......... <div id="Nav_Menu_JS_Content" class="Nav_Menu_JS"> I'd like to know if there are ways to hide/unhide fields like radio options, text fields & others by using JavaScript. If so how do I do it? I do know I will have to check the form every time. Is there a need to refresh the form? Will the refresh clear all the selections? Things I'd like to hide: 1. Upon the selection of a radio option, another radio option will appear. 2. Upon the selection of a radio option, a text field will appear. Sorry for asking so many questions. But I just got to know that I need to use JavaScript in my application and I have no idea how and where to start, just bumping around, & hoping that God will drop some hint. Hi, I'm currently using some javascript to hide and unhide div's. I've been messing around and searching about trying to find something which will only allow one of the hidden div's open at a time. When a new link is clicked, the last div open closes. Unfortuanatly I haven't found anything yet, so I am wondering if anyone on this board can help please? The script I am using is: Code: <script type="text/javascript">
function unhide(divID) {
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>
and the mark-up: Code: <p><a href="javascript:unhide('test1');">Testing 1</a></p>
<div id="test1" class="hidden">
<p>Testing :)</p>
</div>
<p><a href="javascript:unhide('test2');">Testing 2</a></p>
<div id="test2" class="hidden">
<p>Testing again :)</p>
</div>
I hope I have been clear, appreciate any help given. I kinda new to Javascript, and can get by with most of the basic bits and bods I need to do the day to day work on websites, but I've come across something that is causing me some issues, I could use some help. The situation is, we have a webpage with 2 divs on it, one div has a javascript calculator and the other div sows the calculations in 2 separate tabs, the calc works and the tabs work no worries, the tabs are done in jquery. The issue I've got is I need to hide the 2nd div with the tabs in until the user has done the calculation, I had this working no problem, until we switched to using jquery for the tabs, using a simple Code: window.onload = hide;
function hide() {
document.getElementByID('tabs').style.display = 'none';
}
But now I don't know how or where to put this in the whole load of code for the jquery Code: <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tab_header li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tab_header li").click(function() {
$("ul.tab_header li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
Can anyone give me any guidance at all?? Cheers this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [CODE] <!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>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section Hey everybody, I have a script that hide a div like in a menu, bur the text of the div dont hide.... Code: <script>
function aumenta(id) {
target = document.getElementById(id);
setInterval(function(){
new_size = target.style.height;
new_size = new_size.split("px", 1);
new_size -= 10;
new_size = new_size + "px";
target.style.height = new_size;
//target.style.width = new_size;
},1);
}
</script>
</head>
<body >
<div id="da" style="width:300px; height: 300px; background-color: #0066CC;" onmouseover="aumenta('da')">dDffffffffffffffffffdsdsd</div>
</body>
What part I have to fix in my code, for do what I want? Thanks! Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. I have code that hides some check boxes based on what is selected in a radio button, and it works great. I am wondering if it could hide the entire table row instead of just the boxes so it decreases white space on my form, Here is my current code, <tr id="playIntroRow"> <td class="editLabel"><span>*</span>Play Intro:</td> <td> <label>Yes <input type="radio" name="playintro" value="1" onclick="document.getElementById('voiceIntroRow').style.visibility='visible';" /> </label> <label>No <input type="radio" name="playintro" value="0" checked onclick="document.getElementById('voiceIntroRow').style.visibility='hidden';" /> </label> </td> </tr> </cfif> <cfif voiceStatus eq "on"> <tr id="voiceIntroRow" style="visibility: hidden;"> <td class="editLabel"><span>*</span>Intro Message:</td> <td><cfscript>voiceIntroRenderer.Render();</cfscript></td> </tr> </cfif> I have this iframe code. Code: <iframe width="300" height="180" style="margin-bottom:5px; z-index:-1000;" src="http://www.ichartsonline.com/external/tradeback.aspx" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> I have a WP plugin for image lightboxes. When the lightbox pops up, the iframe is overlayed on it. Is there any easy fix for this? Do you need to see the plugin Javascript? Any help will be much appreciated! Thanks I want to be able to hide a DIV within an iframe from the parent document. The usual document.getElementById('element').style.display="none"; doesn't work as I can't point to elements within the iframe with it. What do I need to add to make it look within the iframe and not the parent document? Many thanks in advance. I'm trying to make a comment script with show/hide divs and are so far OK, but... I want to hide one div when another is activated... Here is what I have so far: Code: <?
for ($q = 1; $q <= 5; $q++) {
echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
echo '</div>';
echo '<div id="jdiv'.$q.'" style="display:none;">';
echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
echo '</div>';
?>
<script language="javascript" type="text/javascript">
function jchange<? echo $q; ?>(divname) {
var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
var objDivQ = document.getElementById(divname);
if (currentShowingDivQ && currentShowingDivQ != objDivQ) {
currentShowingDivQ.style.display = 'none';
}
if(objDivQ.style.display == 'none'){
objDivQ.style.display = 'block';
} else {
objDivQ.style.display = 'none';
}
}
</script>
<?
}
?>
So if I activate the first textbox, then when I activates the second I want to be able to hide the first again... Any help i appreciated :-) hello! I currently have 2 UL's that get slide down when you click a button (used for navigation). I currently have it set up so that when you click the "ul#selectService" they slide down, and when you click it a second time it will slide back up and disappear. However, they only way to get the UL's to disappear is to click the "ul#selectService" a second time, so I'm trying to get it set up so that when you click on anything that isn't the UL's it will cause it to slide back up again. i currently have been working on a starting idea to show what I'm basically trying to do so that you can get a rough estimate of my goal: This is my HTML that i'm using: Code: <ul id="selectService">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="secondHalf">
<li></li>
<li></li>
<li></li>
</ul>
Code: var $box = $('#selectService');
$("*:not(#serviceSelect)").click(function(){
if (!$box.has(this).length) { // if the click was not within $box
$('#selectService').hide();
$('#secondHalf).hide();
}
});
Right now nothing is happening when i click out of the UL any thoughts? ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> hi i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files) Now what i need is, onclick of HOme button.. i have written a code like <a href="main_Home.html" onclick="updateObject(this); return false;"> and the javascript i got from dhtml goodies is <script type="text/javascript"> function updateObject(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } </script> now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there.. Pls help.. Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Hello forum, I need some help please. I need a javascript which hides X and shows Y if a button (text) is pressed. Needs to work on a webpage. Can someone help? Hi, I know very little about javascript, but it seems like what I need to do is simple, so I'm hoping someone here could help. In my online store.... I have a <div> called "prodprice" which houses a dynamically loaded price {tag_saleprice}. When the price is $0.00, I want the <div> to be hidden. When the price is anything other than $0.00, I want it to be visible. I have no idea how to code it, but it seems like the general logic would be something like this: <div id="prodprice" style="display:none">{tag_saleprice}</div> document.getElementById('prodprice') If prodprice="$0.00" .style.display = "block"; Am I totally off base? I just have no idea what to do and I have an impatient client! Thank you so much. |
|||||||