|
JavaScript - Problem With Javascript Behavior For Navigation Bar
Hi guys! I'm having trouble deciphering the javascript on my webpage
www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads. Here is the code: Code: jQuery.noConflict(); jQuery(document).ready(function(){
//VAR SETUP
var rightBg = jQuery('#rightBg'),
boxStuff = jQuery('.boxStuff'),
bgControls = jQuery("#bgControls"),
nextImg = jQuery('#nextImg'),
prevImg = jQuery('#prevImg'),
blogNav = jQuery('#blogNav'),
navBox = jQuery("#navBox"),
navBoxa = jQuery("#navBox a"),
navHeight = navBox.height(),
firstImg = jQuery('.wrapperli:first-child'),
lastImg = jQuery('.wrapperli:last-child'),
//iPad,iPhone,iPod...
deviceAgent = navigator.userAgent.toLowerCase(),
iPhone = deviceAgent.match(/(iphone|ipod)/);
//CLOSE FUNCTION
function closeSesame(){
jQuery('.activeBox').fadeOut(600,function(){
navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
jQuery(".activeNav").removeClass('activeNav');
rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
bgControls.fadeIn(600);
}).removeClass('activeBox');
}
//OPEN FUNCTION
function openSesame(){
navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
navBox.fadeIn(600);
});
bgControls.fadeOut(300);
}
//OPACITY STUFF
rightBg.css({opacity:".85"});
//REMOVE TITLE ATTRIBUTE
jQuery("#dropmenu a").removeAttr("title");
//MENU
jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').show();
},function(){
jQuery(this).find('ul:first').hide();
});
jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>›</span>");
//PRETTY PHOTO
jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'normal', // fast/slow/normal
opacity: 0.35, // Value betwee 0 and 1
show_title: false, // true/false
allow_resize: true, // true/false
overlay_gallery: false,
counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2
//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square
hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto
modal: false // If set to true, only the close button will close the window
});
//WINDOW LOAD
jQuery(window).load(function(){
//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
//LOAD MESH BG
jQuery('#mesh').fadeIn(600);
jQuery('#loading').fadeOut(600);
//IF GALLERY PAGE
if(jQuery('body').hasClass('page-template-page_gallery-php')){
navBox.fadeIn(600);
bgControls.fadeIn(600);
jQuery(".wrapperli:first-child a").click();
//IF NOT GALLERY PAGE
} else {
openSesame();
}
});
//FADE CRUMBS IN/OUT ON SCROLL
jQuery('#pageContent').scroll(function(){
if(jQuery('#pageContent').scrollTop()>150){
blogNav.fadeOut(300);
} else {
blogNav.fadeIn(300);
}
});
//NAV BOX STUFF
navBox.css({marginTop:"-"+navHeight/2+"px"});
boxStuff.css({marginTop:"-"+navHeight/2+"px"});
//NAV BUTTON CLICK
navBoxa.click(function(){
//VAR SETUP
var thisBox = jQuery(this).attr('href');
//IF ACTIVE LINK, CLOSE STUFF
if(jQuery(this).hasClass('activeNav')){
closeSesame();
return false;
//IF NOT ACTIVE LINK
}else{
//IF CONTENT OPEN
if(navBox.hasClass("openNav")){
navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
});
//IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
//CLICKING GALLERY IMG
jQuery(".wrapperli a").click(function(){
if(iPhone){
return false;
}else{
//GET HREF
var galleryHref = jQuery(this).attr('href'),
galleryTitle = jQuery(this).attr('title'),
imageInfo = jQuery('#imgInfo'),
itemNumber = jQuery(this).parent().index() + 1;
numberItems = jQuery('.wrapperli').length;
//CHANGE TITLE INFO
if(galleryTitle){
imageInfo.hide().html(galleryTitle + "  /  "+ itemNumber + " of " + numberItems).fadeIn(150);
} else {
imageInfo.hide();
}
//CHANGE CLASSES
jQuery(".wrapperli").not(this).removeClass('activeImg');
jQuery(this).parent().addClass('activeImg');
//IF MENU OPEN, CLOSE IT
if(navBox.hasClass("openNav")){ closeSesame(); }
//CHANGE BACKGROUND
jQuery.backstretch(galleryHref, {speed: 300});
return false;
}
});
//NEXT CONTROLS
nextImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.next().length > 0){
activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
firstImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
//PREV CONTROLS
prevImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.prev().length > 0){
activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
lastImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
// Keyboard shortcuts
jQuery(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode == 39) { nextImg.click();} // right arrow
else if (unicode == 37) {prevImg.click();} // left arrow
});
});
and I changed the open sesame to closed sesame here in the code Code: //IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated! Similar TutorialsSorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question. I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance: Code: <table>
<tr>
<td onmouseout="window.alert('you moused out of td');">
<img src="image0.gif" style="height:50px; width:50px;" />
</td>
</tr>
</table>
In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element. I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You. Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right. Hi! I couldn't find any information about this topic in the internet and I really wonder, how come people do not discuss it anywhere? Okay, jQuery works really great and offers many interesting effects, but what if you have JavaScript disabled? I mean I've browsed through several websites powered by jQuery with JS disabled and they doesn't work or behave weird. I know there aren't much people, who disable JS, but well I do want my page to be seen by all people in the end. I managed to do it with slider on my page (however I want to use other jQuery effects), but, for example, http://www.flowplaye...ools/index.html doesn't provide any information about this. Try to disable JS and see that nothing works. I can use <noscript></noscript> tag, but I have to make two main pages. And what if I want to view it on one page? What would you do? Regards, Aleks. I'm trying to create a demo to display a new way of showing our data. I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working. Any insight into why this may be true? Any help is greatly appreciated Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function selectRow(row) {
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
</head>
<body>
<table id="tbl" border="2">
<thead>
<tr>
<td></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)" onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi, I'm using javascript in addition to a web service (BTBuckets) to display different content to visitors based on actions they take on my site. The javascript is working fine, but I noticed that if I simulate BTBuckets being disabled using Firefox Adblock none of the content shows up. So in the off chance of the service going offline it'll leave some pretty funky holes in the my content. I tried <noscript> tags which works with javascript off, but the content is still blank when I disable BTBuckets. I'm wondering if there's a way to display the default content if the service is unavailable? Here's the code I'm using: In the head: Code: <script type="text/javascript">
//<![CDATA[[
$BTB={s:XXXXX};
$BTB.jsh="http://static.btbuckets.com/bt.js";
//]]>
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + $BTB.jsh.replace(/(https?:)/i,document.location.protocol) + "' type='text/javascript'%3E%3C/script%3E"));
</script>
The code in the body used to replace an image depending on visitor behavior: Code: <script type="text/javascript">
var _t = "";
if ($BTB.clusters["ppc_visitors"]) {
_t = "\"images/top-photo-tracking-number.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
} else {
_t = "\"images/top-photo.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
}
document.write('<img src= ' + _t );
</script>
<noscript><img src="images/top-photo.jpg" alt="Call
Toll-Free: 1-800-XXX-XXXX"></noscript>
Hi guys, I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead. I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!! Working Website: http://17thstop.sg/demo CSS Files: http://17thstop.sg/demo/styles.css http://17thstop.sg/demo/css/default.advanced.css http://17thstop.sg/demo/css/default.css http://17thstop.sg/demo/css/dropdown.css 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">
<!-- #BeginTemplate "index.dwt" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>
<script type="text/javascript" src="gallery/swfobject.js"></script>
<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- End of Menu and JS -->
</head>
<body>
<div id="content">
<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>
<!-- Start of Menu -->
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li class="dir">About Us
<ul>
<li><a href="about_us.htm">The Four Musketters</a></li>
<li class="dir">The Team
<ul>
<li><a href="darren.htm">Darren</a></li>
<li><a href="jon.htm">Jonathan</a></li>
<li><a href="hweek.htm">Hwee Key</a></li>
<li><a href="gavin.htm">Gavin</a></li>
</ul>
</li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir">Services
<ul>
<li><a href="cne.htm">Event & Commercial Photography</a></li>
<li><a href="portrait.htm">Portrait Photography</a></li>
<li><a href="wedding.htm">Wedding Photography</a></li>
<li><a href="studio.htm">Rental of Studio</a></li>
<li><a href="./">Training & Consulting</a></li>
</ul>
</li>
<li><a href="gallery3/gllery.htm">Gallery</a></li>
<li><a href="./">Events</a></li>
<li><a href="./">Careers</a></li>
<li><a href="./" class="dir">Contact Us</a>
<ul>
<li><a href="contact.htm">Enquiry Form</a></li>
<li><a href="locationc.htm">Contact Us & Location</a></li>
</ul>
</li>
</ul>
</div>
<!-- End of Menu -->
<div id="content1">
<!-- #BeginEditable "BodyContent" -->
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<!-- #EndEditable -->
<script type="text/javascript">
var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
fo.addVariable("xmlURL", "gallery/gallery.xml");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery/gallery.xml");
fo.write("flashcontent");
</script></div>
<div id="footer">
<p id="links">
Copyright © 2010 − Four Musketters Studio · Your Number 1 Choice.
</p>
<p>
<a href="#">Home</a>
<a href="#">Practice</a>
<a href="#">Attorneys</a>
<a href="#">Accidents</a>
<a href="#">News</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</p>
</div>
</body>
<!-- #EndTemplate -->
</html>
Hi forums, I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea. This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do. Any assistance is highly appreciated. Hello I have a javascript navigation bar at the top of my page. I would like to split the navigation with 3 links on the left side of my logo and 3 links on the right side. Like this.... Home Designs Services (LOGO IMAGE) About FAQ's Contact Can someone help me figure out how to split a javascript navigation? I don't know if it should be separate navigation for the right and left or if it is just a CSS change? Below is my javascript and CSS. Code: <script type="text/javascript" src="tinydropdown.js"></script>
</script>
<div class="nav">
<ul id="menu" class="menu">
<li class="nodiv"><a href="#">Home</a></li>
<li><a href="#">Designs</a>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="submenu">
<a href="#">Three</a>
<ul>
<li class="noborder"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</li>
<li><span>Services</span>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li class="submenu">
<span>No Link</span><ul>
<li class="noborder"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</li>
<li class="nodiv"><a href="#">About</a></li>
<li><a href="#">FAQ's</a>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="submenu">
<a href="#">Three</a>
<ul>
<li class="noborder"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
<li class="nodiv"><a href="#">Contact</a></li></li>
</li>
</ul>
</div>
<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>
Code: .nav {
height:36px;
color:#fff;
text-shadow:1px 1px #888;
position:absolute;
z-index: 100;
width: 960px;
padding-top: 70px;
padding-left: 0px;
}
.menu a {
float:left;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px;
}
.menu span {
float:left;
color:#eee;
text-decoration:none;
width:120px; height:28px;
padding-top:8px;
}
.menu a:hover {
color:#fff;
}
.menu {
list-style:none;
font:16px Arial,Verdana;
text-align:center;
width:900px;
margin:0 auto;
}
.menu li {
position:relative;
float:left;
width:120px;
z-index:1000;
}
.menu ul {
display:none;
position:absolute;
font:normal 13px Arial,Verdana;
top:36px;
left:0;
background:#aaa;
display:none;
list-style:none;
}
.menu ul li {
float:none;
border-top:1px solid #ccc;
width:120px;
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px;
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999;
color:#fff;
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px;
}
.menu ul ul {
left:120px;
top:0;
}
.menu li.submenu {
font-weight:bold;
}
.menu li.noborder {
border-top:none;
}
li.menuhover a, li.menuhover li.menuhover a {
color:#fff;
background:#999;
}
li.menuhover span, li.menuhover li.menuhover span {
color:#fff;
background:#999;
}
THANKS! Can someone explain to me as to why the "New Art" button in the navigation doesn't have the "on" function as the others where you hover over the button and the text turns orange? Keep in mind, I didn't design/develop this site...I'm merely just trying to insert a button in the nav for a friend of mine. Thanks for your help it is greatly appreciated! Here's the website: http://www.thejam2.com/two/ And the code: Code: }
menuImage = {};
function makeMenu(){
var imgs = ["thejam", "newart", "theartist","viewit","orderit","theCollage","theBorder","detailedImages","theMusicians"];
for(i in imgs){
menuImage[imgs[i]+"off"] = new Image();
menuImage[imgs[i]+"off"].src = "pics/menu_"+imgs[i]+".gif";
menuImage[imgs[i]+"on"] = new Image();
menuImage[imgs[i]+"on"].src = "pics/menu_"+imgs[i]+"_on.gif";
}
document.write('<div id="menu"><table width="'+((ns4) ? 794 : '100%')+'" cellpadding=0 cellspacing=0 border=0>');
if(ns4) document.write('<tr><td><img src="pics/spacer.gif" width="418" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td></tr>');
document.write('<tr><td width="100%"> </td>');
document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=about','thejam','jamMenu') + '<br></td>');
document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('newart.php','newart','newart') + '<br></td>');
document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=mike_keirstead','theartist') + '<br></td>');
document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('jam2.php','viewit','viewMenu') + '</td>');
document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('jam2.php?loc=order','orderit') + '</td></tr>');
document.write('<tr><td> </td><td>');
makeJamMenu();
document.write('</td><td colspan="4" align="center">');
makeViewMenu();
document.write('</td></tr></table></div>');
}
Hi I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question. The code is in Jquery and Javascript and i'm still learning. I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
if (flag==false)
{
try {
checkAnswer(document.getElementById('quizForm'))
flag=true;
return false;
}
catch(err)
{
if (err.number !=-2146823281)
{
alert(err.description);
}
}
}
next_page = (current_page + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
This is what the code looks like now without the changes.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
next_page = (parseInt (current_page) + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing. I put this bit together but it doesn't do anything.... Code: else{
if (document.getElementById('quizForm')){
if (document.quizForm.cc.disabled==true)
document.quizForm.cc.disabled=false
else
{return true;}
Any advise? Thanks. I am trying to figure out how to code this type of horizontal navigation like this site. http://www.maxdesign.com.au/ When you click on, say, "News", the CSS button turns red and white. I am thinking that this is done with JavaScript and a basic CSS list menu. But I cannot seem to find an example of this the of menu anywhere. The Max Design site is based on WordPress and apparently this navigation uses an API built into the WP framework. I need this type of horizontal menu for a custom coded CSS and PHP site. Any and all help would be appreciated. Either code or point me to a tutorial. Thanks, WiLd now i am making a navigation menu using images by on mouse over function, i want to make a div that shows menu using css and javascript function plz find the attached image .. and try to help me due to the version of dreamweaver i have (MX-2004) i have had to hand code a drop down menu myself however i have come across a problem. i'm not sure if the problem is in the Javascript, HTML, or CSS however here go when ever i hover over the menus dont drop down they cascade up and the other problem is that when ever i hover over one of the buttons a menu from another pops up and not the one that should. here is the codes so you can have a look javascript: Code: <script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
HTML code Code: <table align="center" width="950px" border="0" cellpadding="0">
<tr>
<td height="50">
<div align="center">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="100%" height="48" align="center" bgcolor="#CF8D72">
<ul id="sddm"><li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<!-- travel guides drop menu -->
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Guides</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Africa</a>
<a href="#">Asia</a>
<a href="#">Australia</a>
<a href="#">Europe</a>
<a href="#">North America</a>
<a href="#">South America</a>
<a href="#">Vesas</a>
<a href="#">Carnas</a>
<a href="#">Driving Over Sea</a>
</div>
</li>
<!-- adventures drop menu -->
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Adventures</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">up & coming Adventures</a>
<a href="#">The Team</a>
<a href="#">the Journey</a>
<a href="#">pod casts</a>
<a href="#">Photo Gallery</a>
</div>
</li>
<!-- travel news drop menu -->
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Travel News</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Advice</a>
<a href="#">Destinations</a>
<a href="#">Holidays</a>
<a href="#">Cities</a>
<a href="#">Cruses</a>
<a href="#">Hotels</a>
<a href="#">Snow & skis</a>
<a href="#">Expats</a>
<a href="#">Watch Dog</a>
</div>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Chatroom</a></li>
<li><a href="#">Travel Shop</a></li>
</ul>
<div style="clear:both"></div>
</td>
</tr>
</table>
</div></td>
and the CSS Code: #sddm
{
width: 99%;
margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 0px
font-weight: bold;
z-index: 30
}
#sddm li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: "Baskerville Old Face", Baskerville, "Times New Roman" bold 11px;
}
#sddm li a
{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 90px;
background: url(/images/navigation/chromebg4.gif) center center repeat-x;
color: #000000;
text-align: center;
text-decoration: none;
}
#sddm li a:hover
{
background: url(image/navigation/chromebg4-over.gif) center center repeat-x;
}
#sddm div
{
position:absolute;
top: 0;
border: 1px solid #E8BEBE;
border-bottom-width: 0;
font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px;
line-height:18px;
z-index:100;
background-color: white;
width: 140px;
visibility: hidden;
height: 296px;
}
#sddm div a
{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px bold;
}
#sddm div a:hover
{ background-color: #FFECEC;
color: #000000;}
Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! Hi, I am trying to figure out how the get the featured area at http://blueoceanportfolios.com to link to webpages rather than displaying it within the featured box on the left . This area is using JS file to display the videos on content in the featured box when different items on the menu are clicked, here is the working example : http://www.blueoceanportfolios.com/company/ Okay , The problem: Loading a new webpage rather than displaying the content at featured box at http://blueoceanportfolios.com Tried solutions: linking to javascript functions like onclick="window.location="http://someplace.com";" etc but still the content loads up in the featured box , try clicking on 2) it displays http://www.codingforums.com rather than loading new page. Any suggestions Hi everyone Im new here nice forum Hope someone can help out with my problem http://www.testingremote.ucoz.com/ When you click on anything other than home on the nav bar it messes up the appear/fade behavior that I added with dreamweaver any solutions ? Please help ! I have been testing regex test string to match the following pattern (- <any number with/without . decimal point>) ( -[#[.#]] ) here is the code that works the best: Code: var testStr = '99999+((-25.533) - 5)/99*(-25.533)';
var negValTestStr = new RegExp('\\(\-{1}[0-9]*\.?[0-9]*\\)', 'g');
var test = testStr.match(negValTestStr)
alert(test);
The question is: Why does it only work when the open and close parenthesis are double escaped: '\\(' and '\\)' When I use one backslash to escape, it will find -25.533, -5 and -25.533 With two backslashes for escape sequence: (-25.533), (-25.533) Also, I have to escape the - to get just one -. If I do not escape the -, -?; which should read - {0, 1} will match --# without escaping - Thanks for thoughts on this JK I have an interval set that runs indefinitely (backgrounds switching) or until the viewer stops it. I've noticed that when I close a tab while it's running and revisit the page, it "doubles" the interval and the backgrounds get mixed up. Refreshing the page returns it to normal. Does anyone know how to fix this? I've tried clearing the interval with window.onunload and window.onbeforeunload. I'm thinking it has something to do with firefox not clearing its cache for the tab. I'll look into disabling that. Since it is not clear to me where this post should fit in the forum, I'm just posting it here. Is it possible to create a tracking code that would allow me to: (1) a) Find out the identity of visitors to a certain website (a website unrelated to me and the visitors did not visit my website) b) The identity of those who recently searched for a certain keywords and/or... (2) Find out what websites certain individuals have recently visited (or visiting in real-time)? Ok, so I wanted to use the following object to copy the contents of the Report array at index [file][entry]. Code: Selected = {
fileIndex : file,
entryIndex : entry,
Entry : Report[file][entry]
}
This was done so that the user may perform modifications to the entry without updating the entry until I have run validation on the input. Then I used Code: if(valid) Report[Selected.fileIndex][Selected.entryIndex] = Selected.Entry to finish up. I noticed that the Report array was getting the new input even when I didn't validate. I used the following to view all the contents of the Report Array in real time Code: window.setInterval('SHOW_ARRAY();',200);
Report=[];
function SHOW_ARRAY(){
HTML('ReportDebug','') //Reset "ReportDebug" HTML element
for(var t in Report){
for(var y in Report[t]){
for(var u in Report[t][y]){
HTML('ReportDebug','<span style="position:relative ; border:2px solid black">'+Report[t][y][u]+'</span>',1) // last argument signifies to append HTML element
}
}
HTML('ReportDebug','<br />',1)
}
}
And what I discovered was that whenever I stored values in Selected.Entry the Report array would update with those values! This is my first attempt to create an object in this fashion, so my only guess is that Selected.Entry is not independent from Report[file][entry], but instead some kind of pointer... Where have I gone wrong, and how can I accomplish my goal? Let me know if my code samples were too brief. Hi, I used the code on the following example: http://www.w3schools.com/php/php_ajax_livesearch.asp Instead of xml I use mysql but it works the same way. My problem is with this character '#' (shift 3 - on my keyboard, or otherwise known as 'sharp'). Some of the words in my database table contain this character but when I type it, it acts like nothing was typed. Any idea on what to do to make this work like any other character? Thanks |
|||||||