|
JavaScript - Replace Content Instead Of Show/hide
Can anyone tell me how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?
Here's the code I need to change. <script type="text/javascript"> $(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){ $('#wait_1').show(); $('#result_1').hide(); $.get("func.php", { func: "drop_1", drop_var: $('#drop_1').val() }, function(response){ $('#result_1').fadeOut(); setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } </script> drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one. If I need to post more info to get some help with this please let me know. Thanks in advance. Similar TutorialsHi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Im working on a 2nd case and I could use some help I need to replace the content of the welcome box Code: <div id="welcome"> Today is<br /> Tuesday, May 29, 2007 <br /><br /> Born today<br /> Ian Fleming (1908) - Author </div> with generated text that displays the current date, and the name of a famous person born on that date. Including comments that describe each of the variables used in writing this code and the functions that the code accesses. Hello All, I have a code which works fine for what is does but I want to add in dynamically a new list to the Array...... from an input field. The relevent part of the code reads as this for example........ var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3") but I need a way to dynamically replace the existing.... "ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3" seen above with a new list from an input field which holds the following say....... ca2sb2en2pg1itm1","ca2sb2en2pg1itm2","ca2sb2en2pg1itm3 I have tried various ideas but none seem to be able to inject the new values in the space between the brackets. Any thoughts. Martin. For those just wondering what the code is and want to try it, it is a one piece code which can fire many different functions without requiring lots of individual bits of code to do same. The action usually happens in micro-seconds but I slowed it to a one second count between changes so you can see what is actually happening. Below is a revised code if you want to see it working and also to give an idea about the Array part in which I want to add a different number set. Copy the code and save in notepad as test.html It can be opened as a web page. Remember to change the code tags to the correct script tags Code: var i_x_list=0
function fireFunctionList_x_list()
{
if (document.getElementById("locate_load_x_list").value == "end" || document.getElementById("locate_load_x_list").value == "undefined"){i_x_list=0;document.getElementById("locate_load_x_list").value=""}else{fireFunctionList_x_list_do()}
}
function fireFunctionList_x_list_do()
{
document.getElementById("addto").value="place_";
var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3","ca1sb2en1pg1itm4","ca1sb2en1pg1itm5","ca1sb2en1pg1itm6","ca1sb2en1pg1itm7",
"ca1sb2en1pg1itm8","ca1sb2en1pg1itm9","ca1sb2en1pg1itm10","ca1sb2en1pg1itm11","ca1sb2en1pg1itm12","ca1sb2en1pg1itm13","ca1sb2en1pg1itm14","end")
document.getElementById('locate_load_x_list').value=step_x_list[i_x_list]
i_x_list=i_x_list+1
document.getElementById("addto").value+=document.getElementById("locate_load_x_list").value;
document.getElementById("final_locate_load_x_list").value=document.getElementById("addto").value;
document.getElementById("final_locate_load_x_list").value+=document.getElementById("addto2").value;
var x_list = document.getElementById("final_locate_load_x_list").value;
setTimeout("fireFunctionList_x_list()",1000)
var f_x_list = new Function(x_list); f_x_list();
}
<BR><BR> <button onclick="fireFunctionList_x_list()">run the function list rotation</button> <BR><BR> <input id="addto" type="text" size=25 value="place_"><BR> <input id="addto2" type="text" size=4 value="()"><BR> <input id="locate_load_x_list" type="text" size=20 value=""><BR> the code fires this function if there<input id="final_locate_load_x_list" type="text" size=25 value=""><BR> Code: function place_ca1sb2en1pg1itm4(){alert("ca1 number4 function dummy run as alert");}
Code: function place_ca1sb2en1pg1itm9(){alert("ca1 number9 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm6(){alert("ca2 number6 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm12(){alert("ca2 number12 function dummy run as alert");}
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 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! 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 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>
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 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> 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 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 am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in. I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me. How my list.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // if records present if (mysql_num_rows($result) > 0) { // iterate through resultset // print news titles while($row = mysql_fetch_object($result)) { ?> <b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font> <br> <font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font> <p> <? } } // if no records present // display message else { ?> <font size="-1">No news is bad news</font> <? } How my story.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // get resultset as object $row = mysql_fetch_object($result); // Show me the news if ($row) { ?> <p> <b><? echo $row->title; ?></b> <p> <font size="-1"><? echo nl2br($row->content); ?></font> <p> <font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font> <? } else { ?> <p> <font size="-1">That news post could is not found.</font> <? } If you need more information for this I will provide whatever you need. Hi, My current html file contains as below. <html> <head> ... </head> <body> ... </body> </html> When i receive a reply from WEB server, is there any way using javascript to replace all the contents shown above with the reply (another html). I have seen window.location.replace, but this will make another request to server before replacing the contents. But i just want to take whatever reply i receive from server with the display content. Can any one please give me some pointers on how to proceed with this. Thanks in advance. I have a radio button group, with 2 options. They have the value YES and NO At the onclick I call the function ButChange() However, it's not fully working correctly.. Initially it shows both DIV's, while only 1 should show (the LoginB div) When I select the NO value in the radio group, the correct DIV is showing, meaning it does hide the RegisterB div as it should. When I select the YES value after selecting NO, it does not change... I have a feeling I must be close with my coding and hope someone can help me out? Here's the script: <script type="text/javascript"> function ButChange() { if (document.LoginForm.PassWordExists.value == "YES") { document.getElementById("RegisterB")["style"]["display"] = "none"; document.getElementById("LoginB")["style"]["display"] = "block"; } else { document.getElementById("LoginB")["style"]["display"] = "none"; document.getElementById("RegisterB")["style"]["display"] = "block"; } } </script> <div id="LoginB"><input type="image" src="<%=rslayout("login")%>" name="SubmitCO" id="submit"></div> <div id="RegisterB"><input type="image" src="<%=rslayout("register")%>" name="SubmitCO" id="submit"></div> Thanks in advance for your help! 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 i've been using the show/hide function for this webpage http://dannycremers.com/HELP.html when you click on test 2 it works perfectly but when you click on test 3 there's an error and i don't know how to solve it as you can see 'test 3' pops up on the top of the list automatically.. and when i try to delete it.. the 'test 3' link that i want to keep disappears as well.. and ideas how to solve this easily? 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/ I am trying to make it so when I mouseover on one div another div appears. And when I mouse out, the div disappears again. Here's what I have, it's not working. Both divs are always showing. Code: <script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
This div is visible
</div>
Any way I can make this work any better? Am I supposed to have something in my main.css file? Hi Im looking for a way to show hide text box on select option change PHP Code: <select name="letter_type" id="lt"> <option value="Registered">Registered</option> <option selected="selected" value="Unregistered">Unregistered</option></select> <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" /> i wana show that text box if user select "Registered" from select option. any help would be great sorry for language errors. Thanks |
|||||||