|
JavaScript - Suggestion Or Guidance Needed For Customized Tree Menu
Hello,
I have a specific need in javascript. Can I be guided in this context if its possible or not??? I am using virtuemart extension in joomla to make an ecommerce website. I will try to explain my requirement with the example. Following is the sample category tree with number. 1.0 .....1.1 ..........1.1.1 ..........1.1.2 .....1.2 ..........1.2.1 ..........1.2.2 .....1.3 ..........1.3.1 ..........1.3.2 2.0 .....2.1 ..........2.1.1 ..........2.1.2 .....2.2 ..........2.2.1 ..........2.2.2 .....2.3 ..........2.3.1 ..........2.3.2 Now I have a drop down main menu as 1.0 and 2.0. I want that when i click on 1.0 all the nodes of 1.0 should be opened and 2.0 should be closed and similarly when i click on 2.0 all its child nodes should be opened and 1.0 should be closed. What happen with most extensions is that at a time only one child is opened. If i click on 1.0 then only 1.1 or 1.2 or 1.3 will remain open at a time. Does this kind of customization can be done or is available in javascript .... I hope i will be helped... Thanks a lot for the time. Similar TutorialsI am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); I would like to create a slideshow like what most wedding sites have but I would like to have some fancy transitions like "Random dissolve, checkerboard, spiral" e.t.c, how can I add any of those to my slideshow, this is a regular fade slideshow I have: Code: var speed=40; /* this is the image fade speed - higher value=slower, lower value=faster */
var timer=4000 /* this is the time that each image is static - 4000=4 seconds */
var pics=new Array();
pics[0]='images/autumn.jpg';
pics[1]='images/lace.jpg';
pics[2]='images/lotus1.jpg';
pics[3]='images/lotus.jpg';
pics[4]='images/apple.jpg';
pics[5]='images/apple4.jpg';
pics[6]='images/girl.jpg';
pics[7]='images/clouds.jpg';
pics[8]='images/blood.jpg';
pics[9]='images/buddha.jpg';
/****************** these links are optional and can be removed if not required ******************/
var links=new Array();
links[0]='http://www.google.com/';
links[1]='http://www.guardian.co.uk/crossword/';
links[2]='http://www.htmlforums.com/';
links[3]='http://www.w3schools.com/';
links[4]='http://www.alistapart.com/';
links[5]='http://news.bbc.co.uk/';
links[6]='http://validator.w3.org/';
links[7]='http://en.wikipedia.org/';
links[8]='http://tools.dynamicdrive.com/gradient/';
links[9]='http://www.hoogerbrugge.com/';
/*************************************************************************************************/
var topop=100;
var botop=0;
var topnum=0;
var botnum=1;
var test=0;
function init() {
objt=document.getElementById('top');
if(document.getElementById('link')) {
objl=document.getElementById('link');
}
else {
objl=document.getElementById('container');
}
bimg=document.createElement('img');
bimg.setAttribute('id','bot');
bimg.setAttribute('src',pics[1]);
objl.appendChild(bimg);
objb=document.getElementById('bot');
fader=setTimeout(function(){fadeout()},timer);
}
function fadeout() {
if(document.getElementById('link')) {
objl.href='#';
objl.style.cursor='default';
}
test==0?(topop--,botop++):(topop++,botop--);
if(objt.filters) {
objt.style.filter='alpha(opacity='+topop+')';
objb.style.filter='alpha(opacity='+botop+')';
}
else {
objt.style.opacity=topop/100;
objb.style.opacity=botop/100;
}
if(topop==0){
test=1;
topnum+=2;
if(topnum==pics.length+1) {
topnum=1;
}
if(topnum==pics.length){
topnum=0;
}
objt.src=pics[topnum];
clearTimeout(fader);
return stop();
}
if(topop==100){
test=0;
botnum+=2;
if(botnum==pics.length) {
botnum=0;
}
if(botnum==pics.length+1){
botnum=1;
}
objb.src=pics[botnum];
clearTimeout(fader);
return stop();
}
setTimeout(function(){fadeout()},speed);
}
function stop(){
if(document.getElementById('link')) {
objl.style.cursor='pointer';
}
if(test==0){
objl.href=links[topnum];
topop=100;
botop=0;
}
if(test==1){
if(document.getElementById('link')) {
objl.href=links[botnum];
}
topop=1;
botop=99;
}
setTimeout(function(){fadeout()},timer);
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
See below:
I found a menu I really like at the top of the page at www-dot-sachscreative-dot-com but can't figure out how it works from the source code. Can someone tell me how to make something like it which is browser independent and uses javascript and/or CSS? It's been years since I did javascript work and I've forgotten must of what I used to know. Thanks.
Hey everyone! This is my first post, so let me go ahead and say hey to everyone at the forums. I myself don't know a whole lot about programming/coding, but I do run my business completely off the internet so I'm not clueless. I have a firm grip on HTML, and I can edit CSS files usually whenever I need to. All my sites use Wordpress now anyway, so there's rarely any need to check or edit the code. Anyways, to my dilemma. I basically have an old website of my own (http://www.knowtheirbackground.blogspot.com). It's a pretty old site I hosted on Blogger, and if anyone is familiar with Blogger it's pretty simple. I downloaded that theme from a site and since all Blogger themes are XML I never really looked at the code. Basically, I want to have a menu like you see on the right of the site I linked you to. A tabbed javascript menu (from what I looked at of the code recently I thought the menu was pretty much made using javascript and css). I've tried Googling and Bing-ing and yahoo-ing tutorials to make a tabbed menu and haven't been successful yet. I want one that operates just like the one on Know Their Background, only things I would change is the text and maybe the colors. I've looked and tried for days and have been unsuccessful. Any help I would GREATLY appreciate. P.S. I also tried using jQuery or something along those lines and nothing. Tried some wordpress plug ins too but they only work in widgets when they do work.. I want my menu in a sticky post on the front page. Dear all, Below are my current script. I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.) Please guide me how to do so.. Thank you in advance. <script type="text/javascript"> /* Triple Combo Script Credit By Philip M: http://www.codingforums.com/member.php?u=186 Visit http://javascriptkit.com for this and over 400+ other scripts */ var categories = []; categories["startList"] = ["Wearing Apparel","Books"] categories["Wearing Apparel"] = ["Men","Women","Children"]; categories["Books"] = ["Biography","Fiction","Nonfiction"]; categories["Men"] = ["Shirts","Ties","Belts","Hats"]; categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"]; categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"]; categories["Biography"] = ["Contemporay","Historical","Other"]; categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"]; categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"]; var nLists = 3; // number of select lists in the set function fillSelect(currCat,currList){ var step = Number(currList.name.replace(/\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms['tripleplay']['List'+i].length = 1; document.forms['tripleplay']['List'+i].selectedIndex = 0; } var nCat = categories[currCat]; for (each in nCat) { var nOption = document.createElement('option'); var nData = document.createTextNode(nCat[each]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } function getValue(L3, L2, L1) { alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3); } function init() { fillSelect('startList',document.forms['tripleplay']['List1']) } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <form name="tripleplay" action=""> <select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Make a selection</option> </select> <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> <option selected>Make a selection</option> </select> <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Make a selection</option> </select> </form> </body> </html> Hello all, Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it. I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent. The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html and the script is: Code: var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
with Code: var menu=new menu.dd("menu");
menu.init("menu","menuhover");
used on my html page to call the script. I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3). I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible. I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it. I'd appreciate anyone's insight on this. Thanks Tom Hi Guys, Im in need of some help with regards to forms. I am looking to build as basic as possible, a form that has 3 select dropdowns that have predetermined options. The user will select the first option and based on that option the second will populate and based on that, the third one will give the last option. Now, when the last one is selected, i need a div or a paragraph displaying information to be displayed. So here's the framework. Option 1 = fruit or vegitables of which fruit is selected is selected by the user Option 2 = Apples, Grapes, and pears of which apples is then selected Option 3 = Red, Green and Yellow of which Green is selected. Once green is selected, I need a description about the green aple to be displayed. Can anyone help me out on this? I am not sure where to begin and my boss is adament it must be done like yesterday. Ay help will be appreciated. Thanks. hello everyone im coding a website at the moment using aspx and i have came to a snag. im trying to make a dropdown list which is populated by an array call my chaletDetails.aspx page - each item in the array will be directed to this page. ive diffled abit, but the more i do the more im afraid of breaking something lol. if someone could maybe look at the code and show me how this could be achieved id appriciate it very much. The code i have for my dropdown list is as follows... this is in divResorts.js var resorts = new Array("Adelboden", "Auron", "Oppdal", "Las Lenas", "La Pierre St Martin", "Val Ceneis", "Les Menuires", "Champex-Lac", "Puy St Vincent"); function populateSelectList() { var mystring = document.getElementById('divResort').innerHTML mystring += "<h4>Our Resorts</h4><select name='resorts'>" mystring += "<option>Choose a Resort</option>" for (i = 0; i < resorts.length; i++) { mystring += "<option value='" + resorts[i] + "'>" mystring += resorts[i] + "</option>" } mystring += "</select>" mystring += "<h4>Our Chalets</h4>" document.getElementById('divResort').innerHTML = mystring } within the body i have this called as: <div id="divResort"> <script type="text/javascript">populateSelectList();</script> </div> Hi Guys, I noticed a feature on http://zendesk.com and other places around the net, where on zendesk the top horizontal nav bar kind of stays at the top of the screen once you have scrolled down the page a little bit. Please take a look at it. I really would like to learn how to do it, but I haven't got a clue what it would be called. I assume its done in javascript since its using DOM. Can anyone help me with either a name or a good tutorial on how to do it? That would be super! Thanks in advance. Hi, I'm currently building a website at the moment & I have a feature on the page that I would like to perform a nice slideshow. However, its not just in a single square frame, i've made it nice and complicated for myself that i've kind of got myself in a muddle trying to work out the best way of going about this feature. Below is an image that'll hopefully save me from babbling too much. So as you can see, in photoshop i've used masking on the images to produce the effect. So at the moment, two images are showing...each taking up four of these rectangles. I'd like every 7 seconds lets say, for both images to slide off and two more to replace them. Whats the best way to do this? As i'm wanting to use jquery/javascript for this feature. thanks for any advice. Hello all. I need to use javascript to validate 6 text inputs to make sure data is entered and they are not empty. However, there is a checkbox above this and if the checkbox is checked I need these areas to NOT validate as they become optional at that point. Here is what I have: Code: function validateCheckbox() {
if(document.forms["form1"].sales.checked) {
if(document.forms["form1"].input1.value.length < 1) { // x
return false;
}
else {
return true;
}
}
}
The above is if the box is checked to validate the field. I want it to do the opposite. How would you do the above with the If statement referring if the check box is NOT checked? And how could I add more fields to check then just one? I am new to javascript so any help or guidance is appreciated. Hi All, I am working on a page with a webform and a subform. I have two related tables where my main form will populate the one side of the relationship and the subform will be for the many side. I am thinking about using an HTML table to hold my subform fields with javascript to dynamically add rows for additional records. I am having trouble with the design of the form processing script, however as since the index on the parent record does not exist at the time of processing I can't think of a way to populate the link field for the child records. The only thing I can think of is to have my page's onload event create a "blank" record (generating the index and storing it in a hidden field) and then essentially make the proceesing script be an update rather than a create. This of course would involve creating some sort of delete function if the user leaves the page without submiting the form. I am not sure this is the best approach but it is all I can come up with. I am open to any ideas or guidance from the community on either my subform idea or processing script idea and I thank you in advance. Kind regards, Ken I am very new to web development and I need a push in the right direction here. This is my problem; I am making a web page that will be used privately by two people. I need to find a way to go to an FTP site that can only be accessed by web browser (that is what IT told me) and download a file that has a constant name "prevhour.log" and save this file to a directory so that it can be read (not sure how, my boss is doing that end) and the data will be dumped, and this data will be extrapolated into a gas gauge style dashboard. I need some way of this to be done as automated as possible. Thank you for your time. Rick Hi, I have this code to get hints (PHP file): Code: <?php
include("include/session.php");
$GetNames = "SELECT firstname, lastname, username FROM users";
$GetNamesConnect = $database->query($GetNames);
While($row = mysql_fetch_array($GetNamesConnect))
{
$a[$row['username']] = $row['firstname'] . " " . $row['lastname'];
}
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint.", ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$id = $row['username'];
$response= "<a href='profile.php?user=$row['username']'>$hint</a>";
}
//output the response
echo $response;
?>
This is the display part (Javascript/Ajax) 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>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</body>
</html>
What I want to do it to limit the names suggested to 10, how would I do this? Hello, I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? So far this only is working for Chrome. My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions? CSS: Code: header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}
#contentBody {
min-height:48em;}
footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }
#aboutPage {
display:none;}
#productPage {
display:none;}
#contactPage {
display:none;}
.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}
.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}
Script: Code: function $_(IDS) { return document.getElementById(IDS); }
function ani(){
document.getElementById(classID).className ='aniOut';
}
function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }
function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}
HTML: Code: <!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer></footer>
I am starting a new project soon. Now, the project is still in the stage of planning. But I am quite confuse now which programming language to implement. I am going to design a system where the normal users will update the data with the system while the data required changes will need system administrator to apporve it. I will need a database to keep those records (the data required update) so that the system admin can refer to the database and make changes. Do I have another choice instead of using Microsoft Access 2007 macros or VBA ? I prefer a web-based programming. Any suggestion, please ? Hi; I am implementing a Ajax auto suggestion search from database. I find an example from http://www.roscripts.com/Ajax_autosu...abase-154.html . I have not problem with the php part about search from database, but i got a problem from the search from, i added a listerner to input tag, but it still not auto suggest anyword when i type any of word, Could any one help me, Thanks. PHP Code: <html> <head> <title>roScripts - Ajax auto-suggest</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="lib/prototype.js" type="text/javascript"></script> <script src="src/scriptaculous.js" type="text/javascript"></script> <script src="src/unittest.js" type="text/javascript"></script> <script src="lib/builder.js" type="text/javascript"></script> <script src="src/controls.js" type="text/javascript"></script> <script src="src/effects.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <form method="post" action="response.php"> <label for="testinput">Search</label><br /> <input type="text" id="search" name="search" autocomplete="off" class="input" value="" onkeyup="autoSuggest();" /><br /> <div id="update" style="display:none;position:relative;"></div> <input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" /> </form> <script type="text/javascript" language="javascript" charset="utf-8"> function autoSuggest(){ new Ajax.Autocompleter('search','update','response.php', { tokens: ','} ); Autocompleter.show(); } </script> </div> </body> </html> I've been using Coffeecup free version for HTML/CSS needs and it works fine as if you forget say one or two values, the prompt feature works fine. Im now getting into Javascript and can see that it is a very useful language, however are there any editors that will provide prompt/suggestion pop ups when editing which are free? If possible, one that combines HTML/CSS/Javascript all together. I've seen this:- http://download.cnet.com/Free-JavaSc...-10907077.html And was going to give it a download. But anyone know of any others or can recommend the above? Thanks Hi all, I'm looking to find a way to making a FAQ selection search which has a hierarchy effect. For example: Whats your favorite color? Red Blue Green Say you select red What shade of red do you prefer? Dark Light Say you select Light Final page that will contain the information that you had rounded down through the search. Does any one have any ideas on how I can do this as I cant seem to find anything on the net! Thanks |
|||||||