|
JavaScript - Adding If/else To Existing Function For Js Menu
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. Similar TutorialsI am working on a site which is pretty old school.. i have a vertical drop down menu using javascript which uses <img src tag>.. Check the tab fountains at http://www.texaslakesandponds.com/index_html.html (it has a vertex and kasco dropdown) I want to add a similar dropdown for Aerators with the same format and color. I dont know how to do that since it uses a <ul><li> format and the image is called in the css class. Can someone please help me with the code. I need help adding an additional function to some existing java script code I already have. In addition to the functions already on this js, I want make it so the banner displays one of the images randomly on each new page load. I have an external js file that this page also links too. Not sure if I need to post that also. I was hoping to just add to this code. Any help is greatly appreciated <script type="text/javascript" src="js/homepage-banners/simplegallery.js"> </script> <script type="text/javascript"> var mygallery=new simpleGallery({ wrapperid: "simplegallery1", dimensions: [250, 180], imagearray: [ ["img/headers/automotive.jpg", "http://www.visionsystem.com/applications/automotive_metal.php", "", ""], ["img/headers/electrical.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/food-packaging.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/medical-pharmaceutical.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/semiconductor.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/automation.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""] ], autoplay: [false, 2500, 2], persist: false, fadeduration: 500, oninit:function(){ }, onslide:function(curslide, i){ } }) </script> 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 Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave hi all, i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function reformatMe() {
var divObj = document.getElementById('reformatMe');
var numRows = document.getElementsByTagName("tr");
var z = "1";
for (i = 0; i < numRows.length; i++) {
if (numRows[i].childNodes[0].innerHTML == "2") {
var markStart = numRows[i];
alert(markStart.nextSibling);
var closeTable = document.createElement("/table");
var addTable = document.createElement("table");
//var tbody = document.createElement("tbody");
//addTable.appendChild(tbody);
addTable.setAttribute("id", "subOptionID" + z);
if(numRows[i+1] != null){
numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
}
z++;
}
}
alert(divObj.innerHTML);
}
</script>
</head>
<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">
<tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr>
</table>
</div>
</body>
</html>
Hi all, I have what I hope will be a simple question for someone to help me with. I simply want to add a timeout to the folowing code: Code: $(function(){
$('#slides').slides({
effect: 'fade',
crossfade: true,
preload: true,
preloadImage: '<?php bloginfo('template_directory'); ?>/img/loading.gif',
play: 4500,
pause: 500,
hoverPause: false,
animationStart: function(current){
$('.caption').animate({
bottom:-35,
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
As you can see this is a slideshow code. All I want to do is delay the first slide sliding in when the slideshow loads. I have tried wrapping the whole function in a settimeout but to no avail. Thanks in advance Dan Hey guys, I'm using a couple of JQuery plugins: Quicksand - Shuffle/re-order PrettyPhoto - standard lightbox type image viewer I'm using Quicksand to filter my images, like a gallery, sorted into categories for my work; illustration, website, applications etc. This is working fine. I'm using PrettyPhoto to allow the user to click these images and see them in a larger size. This works fine when 'all' is selected from the quicksand menubar. However, if I filter the list to any other option, PrettyPhoto doesn't work and clicking the image results in it opening in a new page. Essentially, I need to re-call or re-load PrettyPhoto after the animation for filtering ends. But I don't know how. You can see my galllery at: http://www.gurugroup.net/#3 You can view the PrettyPhoto and Quicksand Javascript files he http://www.sim-modding.com/stuff/javascripts/ I assume the re-call line would go somewhere around he Code: // Gets called when any animation is finished Thankyou in advance. Ste. 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, 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;
};
};
I am working on an HTML project that displays a field with a number in the field by each day. What it does is start at 0 on day one. Each day it adds a 1 to the field. Day 2, the field would say 1, then day 3 would say 2, and so on. I am not sure how to approach this. This is also displayed in an HTML format. I want to to be automatic and change as the date changes. I will also need a way to reset it back to zero if possible.
Heya guys I'm looking for someone with a vast knowledge of Javascript... by any chance someone over here has some time to help a newby out? (I think 10 minutes should be enough) <INPUT TYPE="button" NAME="addToArray " VALUE=" ATA " OnClick="addToArray() "> <!--Add To Array --> <INPUT TYPE="button" NAME="clearArray" VALUE=" CA " OnClick="clearArray()"> <!--Clear Array --> <INPUT TYPE="button" NAME="showArray" VALUE=" SA " OnClick="showArray() "> <!--Show Array --> These are my buttons. What I want them to do is simply add something to an array, clear the array and show them on my screen. Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event. It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it. I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event. Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch. I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled). Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)? Code: /*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/
### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
wp_enqueue_script('jquery');
}
### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
// Variables
$post_id = get_the_id();
// Extract ShortCode Attributes
extract(shortcode_atts(array(
'type' => 'show',
'more_text' => __('View Full Post'),
'less_text' => __('Close Post'),
'hidden' => 'yes'
), $atts));
// Determine Whether To Show Or Hide Content
$hidden_css = 'display: none;';
if($hidden == 'no') {
$hidden_css = 'display: block;';
$type = 'hide';
$tmp_text = $more_text;
$more_text = $less_text;
$less_text = $tmp_text;
}
// Format HTML Output
$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';
$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
return $output;
}
### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
echo '<script type="text/javascript">'."\n";
echo '/* <![CDATA[ */'."\n";
echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
echo '/* ]]> */'."\n";
echo '</script>'."\n";
}
Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with! I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below: function checkAvailibility() { // re-calculate... calculate (); if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) { document.ordersummary.emailQuote.value = "No"; setValue(); return true; } else { return false; } } function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name") document.ordersummary.Name.focus(); return false; } return true; } function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address") document.ordersummary.Address1.focus(); return false; } return true; } function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town") document.ordersummary.Town.focus(); return false; } return true; } function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County") document.ordersummary.County.focus(); return false; } return true; } function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode") document.ordersummary.Postcode.focus(); return false; } return true; } function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email") document.ordersummary.YourEmail.focus(); return false; } return true; } function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date") document.ordersummary.FuncDate.focus(); return false; } return true; } function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address") document.ordersummary.emailonly.focus(); return false; } return true; } Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area! Sam 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 I am learning to programme in HTML5 and Java, and I'd like some assistance with what I am sure is a pretty basic matter, if possible please? If anyone can assist it would be most appreciated? I am using Dreamweaver (latest version)... This code here below when run produces a google map with a street address look up input. I am wanting to learn how to look up an address and submit this to resolve within the map, and also to insert a place holder... I'd like the look up box to sit within (and overlay) the map top left area - at the moment it sits below the map - which i guess is because I haven't inserted a frame?? Many Thanks grin): ***CODE*** <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #map-canvas { height: 100%; margin: 5; padding: 5;} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: { lat: -34.397, lng: 150.644}, zoom: 8 }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> <head> <title>Place Autocomplete Address Form</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> <script> // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initialize() { // Create the autocomplete object, restricting the search // to geographical location types. autocomplete = new google.maps.places.Autocomplete( /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), { types: ['geocode'] }); // When the user selects an address from the dropdown, // populate the address fields in the form. google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); }); } // [START region_fillform] function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } } } // [END region_fillform] // [START region_geolocation] // Bias the autocomplete object to the user's geographical location, // as supplied by the browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation)); }); } } // [END region_geolocation] </script> <style> #locationField, #controls { position: relative; width: 480px; } #autocomplete { position: absolute; top: 0px; left: 0px; width: 99%; } .label { text-align: right; font-weight: bold; width: 100px; color: #303030; } #address { border: 1px solid #000090; background-color: #f0f0ff; width: 480px; padding-right: 2px; } #address td { font-size: 10pt; } .field { width: 99%; } .slimField { width: 80px; } .wideField { width: 200px; } #locationField { height: 20px; margin-bottom: 2px; } </style> </head> <body onload="initialize()"> <div id="locationField"> <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input> </div> <table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td> <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td> </tr> <tr> <td class="label">City</td> <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td> </tr> <tr> <td class="label">State</td> <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td> <td class="label">Zip code</td> <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td> </tr> </table> </body> </html> 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 Hi All, i have an auto suggest function which suggests results to the user from my db. now if i click on one of the suggestions with the mouse it redirects to the relivant url which is stored in the db, however if i use the arrow keys and select a suggestion with the enter key nothing happens can anyone please help me to get this working so that if i press enter when a suggestion is selected it goes to that stores url? thanks and my index.php code PHP Code: <div class="main"> <form id="test" name="form1" method="post" action=""> <div id="holder"> <input type="text" id="keyword" tabindex="0"><img src="images/loading.gif" id="loading"> </div> <div id="ajax_response"></div> </div></form> here is my ajax_server.php page code PHP Code: <?php include("config.php"); $keyword = $_POST['data']; $sql = "select storeName,storeLink from ".$db_table." where ".$db_column." like '".$keyword."%' limit 0,20"; //$sql = "select name from ".$db_table.""; $result = mysql_query($sql) or die(mysql_error()); if(mysql_num_rows($result)) { echo '<ul class="list">'; while($row = mysql_fetch_array($result)) { $str = strtolower($row['storeName']); $link = $row['storeLink']; $start = strpos($str,$keyword); $end = similar_text($str,$keyword); $last = substr($str,$end,strlen($str)); $first = substr($str,$start,$end); $final = '<span class="bold">'.$first.'</span>'.$last; echo '<li><a href="'.$link.'">'.$final.'</a></li>'; } echo "</ul>"; } else echo 0; ?> and my script.js file Code: $(document).ready(function(){
$(document).click(function(){
$("#ajax_response").fadeOut('slow');
});
$("#keyword").focus();
var offset = $("#keyword").offset();
var width = $("#keyword").width()-2;
$("#ajax_response").css("left",offset.left);
$("#ajax_response").css("width",width);
$("#keyword").keyup(function(event){
//alert(event.keyCode);
var keyword = $("#keyword").val();
if(keyword.length)
{
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
{
$("#loading").css("visibility","visible");
$.ajax({
type: "POST",
url: "ajax_server.php",
data: "data="+keyword,
success: function(msg){
if(msg != 0)
$("#ajax_response").fadeIn("slow").html(msg);
else
{
$("#ajax_response").fadeIn("slow");
$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
}
$("#loading").css("visibility","hidden");
}
});
}
else
{
switch (event.keyCode)
{
case 40:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
$("li:last").addClass("selected");
}
break;
case 13:
$("#ajax_response").fadeOut("slow");
$("#keyword").val($("li[class='selected'] a").text());
break;
}
}
}
else
$("#ajax_response").fadeOut("slow");
});
$("#ajax_response").mouseover(function(){
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$("#keyword").val($(this).text());
$("#ajax_response").fadeOut("slow");
});
});
});
any help would be appreciated thanks Luke Hi 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 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 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 |
|||||||