|
JavaScript - Problem Adding Another Menu In Javascript
Hi,
I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one. I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something. Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included. If I'm not making myself clear, please let me know and I will try to explain it better Thanks walkie index.htm 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>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>
<body>
<div id="leftSide">
<!--Site Title-->
<div id="title">
<!--Main Title-->
<h1><span></span>Identity</h1>
<!--Caption/Sub Title-->
<span class="titleSubText">the portfolio of john smith</span>
</div>
<div id="arrowWrapper"><div id="arrow"></div></div>
<div id="buttonsWrapper">
<!--About Button-->
<div id="aboutButtonWrapper">
<div class="navButton" id="aboutButton"></div>
<div class="navCaption" id="aboutCaption">
<!--About Button: Label-->
<span class="navCaptionText">about</span><br />
<!--About Button: Sub-Label-->
<span class="navSubCaptionText">who I am</span>
</div>
</div>
<!--Portfolio Button-->
<div id="portfolioButtonWrapper">
<div class="navButton" id="portfolioButton"></div>
<div class="navCaption" id="portfolioCaption">
<!--Portfolio Button: Label-->
<span class="navCaptionText">portfolio</span><br />
<!--Portfolio Button: Sub-Label-->
<span class="navSubCaptionText">my work</span>
</div>
</div>
<!--Services Button-->
<div id="servicesButtonWrapper">
<div class="navButton" id="servicesButton"></div>
<div class="navCaption" id="servicesCaption">
<!--Services Button: Label-->
<span class="navCaptionText">services</span><br />
<!--Services Button: Sub-Label-->
<span class="navSubCaptionText">what I do</span>
</div>
</div>
<!--Contact Button-->
<div id="contactButtonWrapper">
<div class="navButton" id="contactButton"></div>
<div class="navCaption" id="contactCaption">
<!--Contact Button: Label-->
<span class="navCaptionText">contact</span><br />
<!--Contact Button: Sub-Label-->
<span class="navSubCaptionText">get in touch</span>
</div>
</div>
</div>
</div>
<div id="contentPanelWrapper">
<div id="contentPanelEdge"></div>
<!--Wrapper That Contains 'About' Content-->
<div class="content" id="aboutContent">
<!--Title-->
<div class="contentTitle">about</div>
<!--Body Text-->
<div id="aboutText">
<h3>Who I Am</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
sagittis id neque.</p><br />
<p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
</div>
</div>
<!--Wrapper That Contains 'Portfolio' Content-->
<div class="content" id="portfolioContent">
<!--Title-->
<div class="contentTitle">portfolio</div>
<!--Image Slider-->
<div id="portfolioSlider">
<div id="sliderToolbar">
<div class="sliderButton" id="prevButton"></div>
<div class="sliderButton" id="nextButton"></div>
</div>
<div id="imageWrapper">
<ul id="imgList">
<!--Portfolio Images Go Here (See Documentation)-->
<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
</ul>
</div>
</div>
</div>
<!--Wrapper That Contains 'Services' Content-->
<div class="content" id="servicesContent">
<!--Title-->
<div class="contentTitle">services</div>
<!--Service 1 Column-->
<div class="serviceColumn" id="serviceColumn1">
<h3>Identity Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 2 Column-->
<div class="serviceColumn" id="serviceColumn2">
<h3>Web Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 3 Column-->
<div class="serviceColumn" id="serviceColumn3">
<h3>Icon + UI Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
</div>
<!--Wrapper That Contains 'Contact' Content-->
<div class="content" id="contactContent">
<!--Title-->
<div class="contentTitle">contact</div>
<div id="contactFormWrapper">
<!--Contact Form-->
<form id="contact" method="post" action="mail.php">
<input type="text" id="name" name="name" value="name" />
<input type="text" id="email" name="email" value="email" /><br /><br />
<textarea id="message" name="message" rows="" cols="">message</textarea>
<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
</form>
<div id="successMessage"></div>
</div>
</div>
</div>
</body>
</html>
javascript.js Code: numImages=0;
currentImage=1;
currentPanel="none";
$(document).ready(function(){
// Initializes FancyBox Lightbox
$("a.sliderImage").fancybox({
'zoomSpeedIn':200,
'zoomSpeedOut':200,
'overlayShow':true,
'padding':4
});
SelectButton("none");
$("#arrow").fadeOut(0);
if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
$("input").css({"height":13});
$("#name").css({"width":155});
};
$("#title").click(function(){
ShowPanel("none");
});
// Handles Formatting the Portfolio Slider
$("#imgList").children().each(function(){
numImages++;
});
$("#imageWrapper").css({"width":(numImages*541)});
// Handles Function of the Portfolio Slider
$("#prevButton").click(function(){
if (currentImage==1){
currentImage=numImages;
} else {
currentImage--;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
$("#nextButton").click(function(){
if (currentImage==numImages){
currentImage=1;
} else {
currentImage++;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
// Handles Rollover and Click For the Nav Buttons
$("#aboutButton").mouseenter(function(){
SelectButton("about");
});
$("#portfolioButton").mouseenter(function(){
SelectButton("portfolio");
});
$("#servicesButton").mouseenter(function(){
SelectButton("services");
});
$("#contactButton").mouseenter(function(){
SelectButton("contact");
});
$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
SelectButton("none");
});
$("#aboutButton").click(function(){
ShowPanel("about");
});
$("#portfolioButton").click(function(){
ShowPanel("portfolio");
});
$("#servicesButton").click(function(){
ShowPanel("services");
});
$("#contactButton").click(function(){
ShowPanel("contact");
});
// Handles Contact Form Behavior
$("#name").focus(function(){
$("#name").css({"background-color":"#FFFFFF"});
if ($("#name").val()=="name"){
$("#name").val("");
$("#name").css({"color":"#444444"});
};
});
$("#name").blur(function(){
if ($("#name").val()==""){
$("#name").val("name");
$("#name").css({"color":"#888888"});
$("#name").css({"background-color":"#ffdddd"});
};
});
$("#email").focus(function(){
$("#email").css({"background-color":"#FFFFFF"});
if ($("#email").val()=="email"){
$("#email").val("");
$("#email").css({"color":"#444444"});
};
});
$("#email").blur(function(){
if ($("#email").val()==""){
$("#email").val("email");
$("#email").css({"color":"#888888"});
$("#email").css({"background-color":"#ffdddd"});
};
if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
$("#email").css({"background-color":"#ffdddd"});
};
});
$("#message").focus(function(){
$("#message").css({"background-color":"#FFFFFF"});
if ($("#message").val()=="message"){
$("#message").val("");
$("#message").css({"color":"#444444"});
};
});
$("#message").blur(function(){
if ($("#message").val()==""){
$("#message").val("message");
$("#message").css({"color":"#888888"});
$("#message").css({"background-color":"#ffdddd"});
};
});
$("#submit").mousedown(function(){
$("#submit").attr({"src":"images/sendButtonSel.png"});
});
$("#submit").mouseup(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#submit").mouseout(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#name,#email,#message").keyup(function(){
if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
EnableSubmitButton();
} else {
DisableSubmitButton();
};
});
$("#submit").click(function(){
DisableSubmitButton();
var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
$.ajax({
type: "POST",
url: "mail.php",
data: dataString,
success: function() {
ResetForm();
$("#successMessage").fadeIn(10);
setTimeout('$("#successMessage").fadeOut(1000);',2000);
}
});
return false;
});
});
function EnableSubmitButton(){
$("#submit").attr({"disabled":""});
$("#submit").attr({"src":"images/sendButton.png"});
};
function DisableSubmitButton(){
$("#submit").attr({"disabled":"disabled"});
$("#submit").attr({"src":"images/sendButtonDis.png"});
};
function ResetForm(){
DisableSubmitButton();
$("#name, #email, #message").css({"background-color":"#FFFFFF"});
$("#name, #email, #message").css({"color":"#888888"});
$("#name").val("name");
$("#email").val("email");
$("#message").val("message");
};
function ShowPanel(panel){
currentPanel=panel;
SelectButton(panel);
$(".content").fadeOut(250);
switch(panel){
case "none":
$("#contentPanelWrapper").animate({"left":"100%"},500);
$("#arrow").fadeOut(50)
break;
case "about":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#aboutContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
break;
case "portfolio":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#portfolioContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
break;
case "services":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#servicesContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
break;
case "contact":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#contactContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
break;
};
};
function SelectButton(button){
if (currentPanel!="about"){
$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"0px 0px"});
};
if (currentPanel!="portfolio"){
$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"0px -64px"});
};
if (currentPanel!="services"){
$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"0px -128px"});
};
if (currentPanel!="contact"){
$("#contactCaption").animate({"left":50},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
$("#contactButton").css({"background-position":"0px -192px"});
};
switch(button){
case "none":
break;
case "about":
$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"65px 0px"});
break;
case "portfolio":
$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"65px -64px"});
break;
case "services":
$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"65px -128px"});
break;
case "contact":
$("#contactCaption").animate({"left":70},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
$("#contactButton").css({"background-position":"65px -192px"});
break;
};
};
Similar TutorialsHi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv Hi Only a very simple beginner (thicko) so please don't laugh :-) I have a very basic allwebco website and in the root I have menu.js which puts a small menu on the top right of every webpage that calls it. The index.html page in the root calls this menu.js and also another page in a folder from the root calls it (I prefix menu.js in this page with '../' so as to step back to the root). Also on this sub-page I call another page which is in the same folder. This also calls up 'menu.js' and again I prefix it '../' in order to access it from the root, which is the preceding folder. However, on this second page, it does not display the menu. I have tried everything by prefixing it with '/', './', '../' and just leaving it as 'menu.js' but it will not find it. I suppose it is because it is a 'recursive' situation. ie keeps calling itself over and over? Can anyone help please? Thanks. Barry I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
the css is as follows: Code:
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul ul ul ul li a {
margin-left: 60px; /* indent level 3 */
}
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
and finally the javascript: Code: var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";
//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;
//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
var url = location.href;
if (url.lastIndexOf("/") == (url.length-1)) {
url = url+menu_default_page;
}
if (url.lastIndexOf("?") >= 0) {
url = url.substring(0, url.lastIndexOf("?"));
}
if (url.lastIndexOf("#") >= 0) {
url = url.substring(0, url.lastIndexOf("#"));
}
menu_url = url;
var main = document.getElementById(menu_id);
if (!main) alert("No element with id '"+ menu_id +"' found");
menu_traverse(main);
}
/* Walks down the subtree and on the way back
sets properties.
returns bit set
1: set = element is a node, unset = element is a leaf
2: set = element contains the active node
4: set = element is the active A node
*/
function menu_traverse(element) {
var props = 0;
// walk down
for (var i=0; i<element.childNodes.length; i++) {
var child = element.childNodes[i];
props |= menu_traverse(child); // aggregate bits
}
// on the way back now
switch (element.tagName) {
case "UL":
props |= 1;
break;
case "LI":
var c1 = (props & 1) ?
((props & (2|4)) ? menu_open_class : menu_closed_class)
: menu_leaf_class;
element.className = element.className ? element.className+" "+c1 : c1;
if (props & 4) {
if (!(props & 2)) element.className += " "+menu_active_class;
props |= 2;
props &= 1 | 2; // reset bit 4
}
break;
case "A":
if (props & 2) break; // once is enough
var href = element.getAttribute("href");
if (menu_isSameUrl(menu_url, href)) props |= 4;
break;
}
return props;
}
//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
if (b[j] == "..") { j-=2; continue; }
if (a[i] == "..") { i-=2; continue; }
if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
if (! (a[i] == b[j])) return false;
i--;
j--;
}
return true;
}
New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper Hello, I am working on my site http://www.alvadesign.com and trying to incorporate an image menu like the one at http://www.phatfusion.net/imagemenu/index.htm. I am new to javascripting and just begining to learn. I have the menu showing up now but not functioning upon rollover. This is all being done in a wordpress theme. This uses mootools.js and truthfully anything I did could be wrong at this point. Im not sure what im doing wrong and any help is greatly appreciated. Thank you, Alva www.alvadesign.com I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. part of index page Code:
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100">BMW</option>
<option value="101">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100">1 series</option>
<option value="3" class="100">3 series</option>
<option value="5" class="100">5 series</option>
<option value="6" class="100">6 series</option>
<option value="7" class="100">7 series</option>
<option value="11" class="101">A1</option>
<option value="23" class="101">A3</option>
<option value="33" class="101">S3</option>
<option value="44" class="101">A4</option>
<option value="54" class="101">S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
js Code: (function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
selected = selected.substr(1);
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load. */
$("option", this).first().attr("selected", "selected");
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
})(jQuery);
show.php Code: <?php
if (isset($_GET['mark']))
{
$papar_car=$_GET['mark'];
}
if (isset($_GET['series']))
{
$papar_ser=$_GET['series'];
}
?>
<!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"/>
</head>
<body>
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
<option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
<option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
<option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
<option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
<option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
<option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
<option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
<option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
<option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
<option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script type="text/javascript" language="javascript">
var car_m= <?php echo $_POST['mark']; ?>
</script>
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST['series']; ?>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
guys, after i done selection in the form1, i press submit button and Im going to show.php page. on show.php page i want categories to be already selected. whats my problem? Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! I'm still very new to Javascript, like really new. I'm trying to use this sliding menu script, and I want to have multiple menus on the same page. Problem is, I can't get multiple ID's for the menus to work, so if I click one menu's slider button, then it will always only affect the first menu, regardless of which I click. Here's where I think I need to modify the code, at the top: Code: <script type="text/javascript"> var sliderIntervalId = 0; var sliderHeight = 232; var sliding = false; var slideSpeed = 10; function Slide() And where the ID value is defined: Code: function SlideUpRun()
{
slider = document.getElementById('exampleSlider'),
slider = document.getElementById('slider2');
if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);
Obviously, these are just snippets of the whole code, I didn't know if less/more is needed to be shwon. Can anyone help on this? I just need to know how to separate it, so I can add multiple menus to the same page. Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers. My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon. I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated. Here is the existing function which tells a link to be active or selected: Code: var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code: Code: <ul class="topnav"> <li><a href="#">Home</a></li> <li><a onclick="CngClass(this);" href="#">Top Link 2</a> <ul> <li><a onclick="CngClass(this);" href="#">Cookies</a></li> <li><a onclick="CngClass(this);" href="#">Events</a></li> <li><a onclick="CngClass(this);" href="#">Forms</a></li> <li><a onclick="CngClass(this);" href="#">Games</a></li> <li><a onclick="CngClass(this);" href="#">Images</a></li> <li><a onclick="CngClass(this);" href="#">Navigations</a> <ul> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">JQuery</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tutorials</a> <ul> <li><a onclick="CngClass(this);" href="#">HTML</a></li> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">Java</a> <ul> <li><a onclick="CngClass(this);" href="#">JSP</a></li> <li><a onclick="CngClass(this);" href="#">JSF</a></li> <li><a onclick="CngClass(this);" href="#">JPA</a></li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> <li><a onclick="CngClass(this);" href="#">Upload script</a></li> </ul> Thanks for any help or advice. have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser. Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/ implements a tooltip for multiple select drop down menu.Can you modify the code for single select I 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 have a script which opens an HTML page and passes the current URL to a form on the page. I'm also using RokBox, which open a window as an overlay on the current page rather than as a popup. It is triggered by adding rel="rokbox" to any link. For instance, the following link opens moreinfo.htm using RokBox: Code: <a rel="rokbox" href="/modules/mod_S5tellafriend/moreinfo.htm">More Info</a> Problem is the link doesn't pass the URL. The following code passes the URL but doesn't trigger RokBox: Code: <input type="button" class="button" value="MORE INFORMATION" onclick="s5_open_taf_popup()"/>
<script type="text/javascript">
var s5_taf_parent = window.location;
function s5_open_taf_popup() {
window.open('/modules/mod_S5tellafriend/moreinfo.htm','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=570,left=50,top=50,titlebar=yes')
}
</script>
Is there a way to add rel="rokbox" to the script? Or maybe pass the URL with the link instead? Thanks! hi, Guys can u help me currently iam running clicksor ads on my blog but its decrease page load time and page stuck where javascrip is located can u help me . how can i put this javascript in iframe so that this javascript loads but never stuck the page thanx Regards Fawad I have a simple problem. I want to add the current page's url to a link, like this: <code> <a href="http://www.somesite.com/somepage.aspx?a="> </code> After the 'a=' I need to add javascript that will return the current url. It can be the full url (example: http://www.codingforums.com/newthrea...=newthread&f=2) or a partial one (example: /newthread.php?do=newthread&f=2). Can someone help me with an example? I am trying to set up a web that new times will be displayed when they add current times to a form. here is the static HTML <form method="POST" > current time is 11:32 AM</p> <p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p> <p>add another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p> <p><input type="submit" value="Submit" name="B1"></p> <p><input type="reset" value="Reset" name="B2"></p> </form> I would like to have the new times to change dynamically as they type in either (or both) input boxes I have found a code to help me learn how to add forms in javascript, but it's limited to text input forms. Code: <script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>
Where the inputs sum1 and sum2 are text fields you put whatever numbers you want in. That works fine. Great. Now what I'm having trouble with is modifying the code so that it will add one form with an input number with a form that spits out a randomly generated number. Code: <input type="button" value="D20" onclick="this.form.display.value = Math.round (20 * Math.random())" class="buttonHi" /> <input name="display" type="text" size="6" value="" /> This is what I'm using for my random number generator. So basically I want to be able to put, say, 5, into the input text field above this. And then click on the d20 button to get a random number, say, 15, and then have the first code add the inputted 5 with the randomly generated 15. Is this possible? How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?
|
|||||||