|
JavaScript - Jquery Show/hide
Hi Guys!
I found one great solution for show/hide JQuery but i can't figure out how to make JS,css and html code all together, so please if anybody can make that code together for me and post me here! -Thanks in advance!!! here is code with example: http://jsfiddle.net/9XmVT/14/ Similar Tutorialshi! i am doing a site using jquery address deep linking and within the content i need to implement a show/hide div function but it doesn't seems to be working. jquery address source: http://www.asual.com/jquery/address/ demo: http://www.asual.com/jquery/address/...tabs/#Overview my show/hide div: <a href="javascript:toggle('clickHere','here' true)">click here</a> <div id="here" style="visibility:hidden; display:none">xxxx</div> function toggle(target,imgname, isOn){ window.onresize = null; obj=document.getElementById(target); obj2=document.getElementById(imgname); if(isOn){ obj.style.visibility='hidden'; obj.style.display='none'; obj2.style.visibility='visible'; obj2.style.display='inline'; } else{ obj.style.visibility='visible'; obj.style.display='inline'; obj2.style.visibility='hidden'; obj2.style.display='none'; } } * the same set of show/hide codes work when the site is not implemented with jquery address (deep linking) * so what could be the issue here? please help! Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc. This is my code for jquery show/hide: Code: <script type="text/javascript">
$(document).ready(function(){
$('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
});
$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>
What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show. Much appreciated Coders! 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 What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code. Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
suggestions.hide();
// On the change of the id_location text search for matching results.
$('#text').keyup(function(){
// Get the value of the id location.
var text = $('#text').val();
// Trim any unnecessary white spaces.
text = jQuery.trim(text);
// Start guessing after the length of text if greater than one.
if (text.length > 1) {
// Create a query string for ajax.
var qry_str = '?suggestion=' + text;
// Send an ajax json request.
$.getJSON('http://example.com/page.html' + qry_str, function(data){
// Empty the suggestions box.
$('#suggestions').empty();
// Show the suggestions box.
$('#suggestions').show();
if (data.length > 1) {
// Start a list for the suggestion.
$('#suggestions').append('<ul class="suggestion_list"></ul>');
// Loop through all the results.
for (i = 1; i < data.length; i++) {
// Get the name.
$('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
}
// If an id selection was made then place its complete text in the box and its id in the id location box.
$('.suggestion').click(function(){
// Get the id from the substring of the html id.
var html_id = $(this).attr("id");
var id = html_id.substring(11);
// Get the name from the text.
var name = $(this).html();
// Alert just to test if you have the id.
alert(id);
// Set the value of the text box to the complete name.
$('#text').val(name);
// Hide and empty the suggestion box.
$('#suggestions').hide();
// Turn the focus back to the text.
$('#text').focus();
});
/* This is the part that messes up the suggestion click function if turned on. */
// Hide the box when focus is else where.
$('#container').focusout(function(){
alert('test');
// $('#suggestions').hide();
});
});
}
});
});
</script>
<div id="container">
<input type="text" id="text" name="text" value="">
<div id="suggestions">
<ul class="suggestion_list">
<li id="suggestion_1" class="suggestion">Option 1</li>
<li id="suggestion_2" class="suggestion">Option 2</li>
<li id="suggestion_3" class="suggestion">Option 3</li>
<li id="suggestion_4" class="suggestion">Option 4</li>
</ul>
</div>
</div>
The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help. Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}
and here is the code related to this function: Code: <div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
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. Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much 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> 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 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 I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code:
<script type="text/javascript" >
function showSample() {
if (document.getElementById('input').value='SW001') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW002') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='block';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW003') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='block';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW004') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW005') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='block';
}
}
</script>
<style type="text/css">
<!--
#main {
width: 400px;
margin-right: auto;
margin-left: auto;
height: 125px;
}
#imageArea {
float: right;
width: 200px;
}
#formArea {
float: left;
width: 200px;
height: 125px;
}
.image {
height: 125px;
width: 125px;
margin-right: auto;
margin-left: auto;
display: none;
}
#SW001 {
background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="imageArea">
<div class="image" id="SW001"></div>
<div class="image" id="SW002"></div>
<div class="image" id="SW003"></div>
<div class="image" id="SW004"></div>
<div class="image" id="SW005"></div>
</div>
<div id="formArea">
<form action="" method="get">
<input type='text' name="input" id='input' />
<input name="" type="button" onclick="showSample(this.selectedIndex)"/>
</form>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! 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> I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code: Code: <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids? Thanks> I am quite confident with html but don't know javascript. I have some script to hide/unhide a div when clicking a link but it isn't quite what I want. Any help to modify it would be great. Code: <script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
I understand that this checks if a div is hidden or not and changes it. What I actually want is:- I have a string called $hiddendiv I want the function to hide the div $hiddendiv let $hiddendiv = (DivID) unhide(DivID) The code for this would be great. Thanks in advance. Ady Good afternoon all, I need a bit fo help with unhiding a selection. I have a 10 checkboxes on a form. When the user clicks one of the boxes the rest are hidden and a comments box shows. That works great, the part I can't figure out is how to make all the boxes show again if the user unchecks the checkbox and make the comments box hide again. Here is the code I am using to do the hide: Code: function HideComments()
{
var a1 = document.getElementById("crmForm_answer1").checked;
var a8 = document.getElementById("crmForm_answer8").checked;
var a2 = document.getElementById("crmForm_answer2").checked;
var a3 = document.getElementById("crmForm_answer3").checked;
var a4 = document.getElementById("crmForm_answer4").checked;
var a5 = document.getElementById("crmForm_answer5").checked;
var a6 = document.getElementById("crmForm_answer6").checked;
var a7 = document.getElementById("crmForm_answer7").checked;
var a9 = document.getElementById("crmForm_answer9").checked;
var a10 = document.getElementById("crmForm_answer10").checked;
if(a1==true)
{
document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';
if(a8==true)
{
document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none';
if(a2==true)
{
document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';
if(a3==true)
{
document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';
if(a4==true)
{
document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';
if(a5==true)
{
document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';
if(a6==true)
{
document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';
if(a7==true)
{
document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';
if(a9==true)
{
document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none';
if(a10==true)
{
document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none';
}
Thanks in advance for the help, Sam. How can i make a function that a div container is hiding when i move with my mose over and it should be showed when i move with my mouse out. i tried it like that: <script type = text/javascript> function show() { document.getElementById("sidebar").style.visibility = "hidden"; } function hide() { document.getElementById("sidebar").style.visbility = "visible"; } </script> <div id ="sidebar"> <a href ="#" onmouseover = "show()"; onmouseout = "hide()"> </div> please tell me how i can solve this problem. and sorry for my english, i am from austria ;-) thanks Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-color: #CC6; } </style></head> <body> <div id="header-wrap"> <div id="header-container"> <div id="header"> <h1>JavaScript</h1> </div> </div> </div> <div id="ie6-container-wrap"> <div id="container"> <DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'" onmouseout="this.style.fontSize='12pt'"> <div id="content"> <h1>Mainframe</h1> <p>Enter the content of your website within this area.</p> </div></DIV> </div> </div> <div id="footer-wrap"> <div id="footer-container"> <div id="footer"> <center> <body onLoad="dateandtime()"> <script> var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else document.write(cdate) } if (!document.all) getthedate() function dateandtime(){ if (document.all) setInterval("getthedate()",1000) } </script> <span id="clock"></span> </center> </div> </div> </div> </body> </html> CSS: body { font: 62.5% Arial, Helvetica, sans-serif; color: #597347; margin: 0; padding: 0; background: #beffbf; } h1, h2 { color: #87ac6d; font-family: Tahoma, Arial, Geneva, sans-serif; margin: 20px 0 10px; } h1 { font-size: 2.5em; } p { margin: 10px 0; padding: 0; } blockquote { font-style: italic; } #header-wrap { position: fixed; top: 0; left: 0; width: 100%; } #header-container { height: 90px; background: url(../images/banner.jpg) repeat-x left bottom; } #header { width: 940px; margin: 0 auto; position: relative; } #header h1 { color: #beffbf; text-align: right; width: 290px; margin: 0; position: absolute; left: 476px; top: 32px; } #header h1 em{ color: #90b874; font-size: small; display: block; } #header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; } #header ul li { float: left; margin-right: 5px; } #header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; } #header ul li a:hover { color: #beffbf; } #container { width: 940px; margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 90px 0 40px; } #content { float: left; width: 100%; } #sidebar { float: right; width: 275px; margin-top: 10px; } #footer-wrap { position: fixed; bottom: 0; left: 0; width: 100%; } #footer-container { height: 40px; background-color: #000; } #footer { width: 940px; margin: 0 auto; position: relative; } Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got: Code: <body>
<script type="text/javascript">
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
<select name="select" id="select">
<option>0</option>
<option onclick="toggle_visibility('1');" >1</option>
<option onclick="toggle_visibility('1','2');">2</option>
<option onclick="toggle_visibility('1','2','3');">3</option>
<option onclick="toggle_visibility('1','2','3','4');">4</option>
</select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>
Any help would be appreciated, cause I'm lost. Hey there, I want a div element only to show when you hover over an anchor of the main menu. The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions. That's the menu. This is what should appear when you're hovering one of the items. Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor. Here's the website:www.chabuya.net I already tried hundreds of show/hide scripts, solving this via css but nothing works for me. I'd be grateful for any suggestions. Thanks in advance, Kevin |
|||||||