|
JavaScript - Open Menu With 2 Levels Items
I would like to create a 2-level menu similar to the one use in: http://www.pagina12.com.ar/diario/principal/index.html
It is done with CSS? Thanks! Similar TutorialsHi, This code works as it should, but I want to enhance it so that it does a search by category within the Regions/Provinces selected. But I'm not an expert with Javascript, actually the complete reverse. This if for a classified ads website, so the categories are like cars, homes, etc Code: <html>
<head>
<title></title>
<meta content="">
<style></style>
<script language="JavaScript">
function loadPage(list) { location.href=list.options[list.selectedIndex].value }
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<form>
<div align="center">
Search by
<select name="file" size="1"
onchange="loadPage(this.form.elements[0])"
target="_parent._top"
onmouseclick="this.focus()">
<option value select="selected">Regions</option>
<option value="http://www.apple.com">Region 1</option>
<option value="http://www.apple.com">Region 2</option>
<option value="http://www.apple.com">Region 3</option>
</select>
</form>
</td>
<td>
<form>
or
<select name="file" size="1"
onchange="loadPage(this.form.elements[0])"
target="_parent._top"
onmouseclick="this.focus()">
<option value select="selected">Provinces</option>
<option value="http://www.apple.com">Province 1</option>
<option value="http://www.apple.com">Province 2</option>
<option value="http://www.apple.com">Province 3</option>
</select>
</div></form>
</td></tr></table>
</body>
</html>
Any help would be appreciated. Or any improvements would also be appreciated. Also, any help in converting the table to CSS would be appreciated. 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 really need urgent help. I am using a javascript on a DotNetNuke CMS site to allow the user to choose text/background colour, basically it changes stylesheets. Here is the code that I have used: http://www.dynamicdrive.com/dynamici...etswitcher.htm and here is my example: http://lrptintranet.com.dnnmax.com/ - you can see the colour image buttons top right under the main menu. The style sheet changer seems to work on the top menu level items but as soon as you choose a submenu the javascript doesn't seem to work. I don't know anything at all about javascript - can anyone offer any advice how I can get this working on the sub menu pages?
Hi all. I am creating a website and it utilizes the Apple Touch Icon: Code: <link rel="apple-touch-icon" href="/customIcon.png"/> Basically, I want to be able to change the bolded part from a drop down menu. Like, the user would select a certain item in the drop down menu and it would change the bolded part to a different link (the one corresponding to the drop down menu selection). Any ideas? Not sure how easy this is, but I would like to have 4 checkboxes that effect the items shown in a drop down menu. For example: [x] School #1 [x] School #2 [ ] School #3 The drop down (select) box will only show the majors that are offered at the checked schools. I know this involves either hiding or showing the certain elements of the drop down menu, but I'm not well versed in JS. Thanks in advance. 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 Hi, I mainly do PHP/MySQL coding, but I wanted to add this Javascript Accordion Menu to my site: Javascript And CSS Tutorial - Accordion Menus | Switch on the Code It works fine, but I was wondering if there was a simple way to modify the code so that the currently open menu stays open from page to page instead of closing upon each page reload? Thanks for the help, --Anamaniac Ok, first let me explain what I try to do. I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible. So, here is the code I have so far: Code: <div id="topnav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Over Meves</a>
<ul class="submenu">
<li><a href="#" class="suba">Historie</a></li>
<li><a href="#" class="suba">Onze mensen</a></li>
<li><a href="#" class="suba">Werkzijze</a></li>
</ul>
</li>
<li>
<a href="vervolg3.html">Disciplines</a>
<ul class="submenu">
<li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
<li><a href="#" class="suba">Elektrotechniek</a></li>
<li><a href="#" class="suba">Sanitaire techniek</a></li>
<li><a href="#" class="suba">Energiebesparingstechniek</a></li>
<li><a href="#" class="suba">Bouwfysica en geluid</a></li>
<li><a href="#" class="suba">Diensten energiebesparing</a></li>
</ul>
</li>
<li>
<a href="#">Expertise</a>
<ul class="submenu">
<li><a href="#" class="suba">Woningbouw & Utiliteit</a></li>
<li><a href="#" class="suba">Zorg & Welzijn</a></li>
<li><a href="#" class="suba">Milieu & Energie</a></li>
<li><a href="#" class="suba">Beheer & Onderhoud</a></li>
<li><a href="#" class="suba">EPA & EPC</a></li>
<li><a href="#" class="suba">Legionella beheersing</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="submenu">
<li><a href="#" class="suba">Adres & route</a></li>
<li><a href="#" class="suba">Werken bij</a></li>
</ul>
</li>
</ul>
</div>
The javascript: Code: <script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('a').each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr('href');
if (currentURL = thisURL) {
$(this).parents('ul.submenu').css('display', 'block');
}
// else {
// $(this).parents('ul.submenu').css('display', 'none');
// }
});
});
</script>
And the css: Code: #topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Hope I explained it clear. Thanks for any help. I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category. But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open? Code: <!-- start show cat list -->
<br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div>
<ul class="catMenuItem">
<li><a style="background-image: url("images/triangle_down.gif");" href="#" class="titleTriangle"><span>cat1</span></a></li>
<li style="display: block;" class="catSubMenu">
<a href="?cat=2">sub 1-2</a> (0)<br>
<a href="?cat=7">sub 1-3</a> (2)<br>
<a href="?cat=8">sub 1-4</a> (0)<br>
<a href="?cat=9">sub 1-5</a> (0)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat2</span></a></li>
<li style="display: none;" class="catSubMenu">
<a href="?cat=3">sub 2-1</a> (0)<br>
<a href="?cat=4">sub 2-2</a> (0)<br>
<a href="?cat=5">sub 2-3</a> (0)<br>
<a href="?cat=6">sub 2-4</a> (1)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat3</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat4</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat5</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<script type="text/javascript"><!--
/* Categories Menu START */
var prevCat;
function menu(newCat) {
var mens;
var anchors;
if (prevCat) {
mens = prevCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)';
prevCat.style.display = 'none';
}
if (newCat != prevCat) {
mens = newCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)';
newCat.style.display = 'block';
prevCat = newCat;
} else {
prevCat = null;
}
}
onload = function() {
var menus = document.getElementsByTagName('ul');
for (var a=0,x=menus.length; a<x; a++) {
if (menus[a].className === 'catMenuItem') {
menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
}
menus[a].getElementsByTagName('li')[1].style.display = 'none';
}
}
}
/* Categories Menu END */
--></script>
<!-- end show cat list -->
Hello everyone, For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript: Code: $(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("ul.pMenu li").hoverIntent(config);
$("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");
});
My css that corresponds to this is: Code: .pMenu{
margin:0;
padding:0;
}
#health{
width:10%;
padding-left:14%;
padding-right:2%;
}
#insurance{
width:13%;
padding-right:2%;
}
#shopping{
width:12%;
padding-right:2%;
}
#dating{
width:10%;
padding-right:2%;
}
#education{
width:13%;
}
ul.pMenu li{
float:left;
list-style:none;
}
ul.pMenu li a{
display:block;
color:#FFF;
background:#900;
border:3px ridge #C00;
text-decoration:none;
text-shadow:1px 1px 1px #000;
white-space:nowrap;
padding-left:2%;
padding-right:2%;
padding-top:10px;
padding-bottom:10px;
}
ul.pMenu li a:hover{
background:#FF0;
border:3px ridge #FF6;
color:#FF0;
}
ul.pMenu li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li a{
width:auto;
background:#CCC;
border:1% outset #999;
font-size:95%;
padding:2%;
padding-left:4%;
padding-right:10%;
text-shadow:1px 1px 1px #000;
color:#000;
}
ul.pMenu li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
ul.pMenu li ul li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
border-right:none;
width:100%;
display:inline-block;
}
ul.pMenu li ul li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li ul li a{
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu li ul li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
ul.pMenu li ul li ul li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu li ul li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li ul li a{
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu li ul li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
Hello, I've tried various things I've found online but cannot seem to get the right code to open the links in a drop down menu in a new window. Code: <form id="quicklinks" name="quicklinks" action="">
<select name="quicklinkitem" onchange="openWin(quicklinkitem.value)">
<option value="/lib/board.html">Select a Date</option>
<option value="/lib/boardreports/03-08-12.pdf">March 8, 2012</option>
<option value="/lib/boardreports/02-09-12.pdf">February 9, 2012</option> </select>
</form>
I appreciate any help. Elbee hey I have a page in which I already have a 3 level combox that works fine. I want to add to that page another combobox of 2 level. When I tried to do it I find out that they control of each other. I tried changing the variables names. (changing "x" into "w" in the second combobox) Well that worked. Can you please help me figure it out? here is the end of the first form: var temp1=document.isc.stage3 function redirect1(y){ for (m=temp1.options.length-1;m>0;m--) temp1.options[m]=null for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){ temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value) } temp1.options[0].selected=true } function redirect2(z){ parent.mainframe.location=temp1[z].value; and here is the end of the second combobox: var temp=document.doublecombo.stage2A function redirect(w){ for (n=temp.options.length-1;n>0;n--) temp.options[n]=null for (k=0;k<groupa[w].length;k++){ temp.options[k]=new Option(groupa[w][k].text,groupa[w][k].value) } temp.options[0].selected=true } function go(){ location=temp.options[temp.selectedIndex1].value } Thanks Elad 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! Hi everyone, I was hoping you could help me with a faily easy question. I was asked to edit some script and I figured out most of it, however I can't seem to be able to make the links in my java script menu open in new pages. Any help would be appreciated. Below is a copy of the script. It's a very long script, so I just sent a section of it. Pleasse scroll down to the bottom to see where the links are (ex. http://www.korg.com, etc) Thank you, Paul. <!-- function mmLoadMenus() { if (window.mm_menu_1107110519_0) return; window.mm_menu_1107110519_0 = new Menu("root",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107110519_0.addMenuItem("Parts Department","location='/e/support/accessories.html'"); mm_menu_1107110519_0.addMenuItem("Warranty Registration","location='/e/support/warranty.html'"); mm_menu_1107110519_0.addMenuItem("F.A.Qs","location='/e/support/faqs.html'"); mm_menu_1107110519_0.addMenuItem("Tutorials & Guides","location='/e/support/tutorials.html'"); mm_menu_1107110519_0.addMenuItem("Related Products","location='/e/support/related_products.html'"); mm_menu_1107110519_0.addMenuItem("Downloads","location='/e/support/downloads.html'"); mm_menu_1107110519_0.addMenuItem("Newsletter","location='/e/support/newsletter.html'"); mm_menu_1107110519_0.addMenuItem("Owner’s Manual","location='/e/support/manual_request.html'"); mm_menu_1107110519_0.addMenuItem("Korg Proview Request","location='/e/support/literature_request.html'"); mm_menu_1107110519_0.addMenuItem("Suggested Retail Prices","location='/e/products/pricelists.html'"); mm_menu_1107110519_0.hideOnMouseOut=true; mm_menu_1107110519_0.menuBorder=1; mm_menu_1107110519_0.menuLiteBgColor='#2a4960'; mm_menu_1107110519_0.menuBorderBgColor='#000000'; mm_menu_1107110519_0.bgColor='#000000'; window.mm_menu_1107105559_0_1 = new Menu("KORG",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107105559_0_1.addMenuItem("KORG.com","location='http://www.korg.com'"); mm_menu_1107105559_0_1.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'"); mm_menu_1107105559_0_1.hideOnMouseOut=true; mm_menu_1107105559_0_1.menuBorder=1; mm_menu_1107105559_0_1.menuLiteBgColor='#2a4960'; mm_menu_1107105559_0_1.menuBorderBgColor='#000000'; mm_menu_1107105559_0_1.bgColor='#000000'; window.mm_menu_1107105559_0_2 = new Menu("VOX",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107105559_0_2.addMenuItem("VOX.co.uk","location='http://www.voxamps.co.uk'"); mm_menu_1107105559_0_2.addMenuItem("VOX online Newsletter","location='http://www.f3studios.com/vox'"); mm_menu_1107105559_0_2.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'"); mm_menu_1107105559_0_2.hideOnMouseOut=true; mm_menu_1107105559_0_2.menuBorder=1; mm_menu_1107105559_0_2.menuLiteBgColor='#2a4960'; mm_menu_1107105559_0_2.menuBorderBgColor='#000000'; mm_menu_1107105559_0_2.bgColor='#000000'; window.mm_menu_1107105559_0_3 = new Menu("SAMSON",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107105559_0_3.addMenuItem("SAMSON WIRELESS","location='http://www.samsontech.com/products/brandpage.cfm?brandID=1'"); mm_menu_1107105559_0_3.addMenuItem("SAMSON AUDIO","location='http://www.samsontech.com/products/brandpage.cfm?brandID=2'"); mm_menu_1107105559_0_3.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'"); mm_menu_1107105559_0_3.hideOnMouseOut=true; mm_menu_1107105559_0_3.menuBorder=1; mm_menu_1107105559_0_3.menuLiteBgColor='#2a4960'; mm_menu_1107105559_0_3.menuBorderBgColor='#000000'; mm_menu_1107105559_0_3.bgColor='#000000'; window.mm_menu_1107105559_0_3a = new Menu("HARTKE",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107105559_0_3a.addMenuItem("HARTKE","location='http://www.samsontech.com/products/brandpage.cfm?brandID=3'"); mm_menu_1107105559_0_3a.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'"); mm_menu_1107105559_0_3a.hideOnMouseOut=true; mm_menu_1107105559_0_3a.menuBorder=1; mm_menu_1107105559_0_3a.menuLiteBgColor='#2a4960'; mm_menu_1107105559_0_3a.menuBorderBgColor='#000000'; mm_menu_1107105559_0_3a.bgColor='#000000'; window.mm_menu_1107105559_0_4 = new Menu("LIGHTSNAKE",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107105559_0_4.addMenuItem("LIGHTSNAKE","location='http://www.soundtech.com'"); mm_menu_1107105559_0_4.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'"); mm_menu_1107105559_0_4.hideOnMouseOut=true; mm_menu_1107105559_0_4.menuBorder=1; mm_menu_1107105559_0_4.menuLiteBgColor='#2a4960'; mm_menu_1107105559_0_4.menuBorderBgColor='#000000'; mm_menu_1107105559_0_4.bgColor='#000000'; window.mm_menu_1107105559_0 = new Menu("root",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true); mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_1,"location='http://www.korg.com'"); mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_2,"location='http://www.voxamps.co.uk'"); mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_3,"location='http://www.samsontech.com'"); mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_3a,"location='http://www.samsontech.com/products/brandpage.cfm?brandID=3'"); mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_4,"location='http://www.soundtech.com'"); mm_menu_1107105559_0.addMenuItem("Promotions","location='/e/promotions.html'"); mm_menu_1107105559_0.addMenuItem("Suggested Retail Prices","location='/e/products/pricelists.html'"); mm_menu_1107105559_0.hideOnMouseOut=true; mm_menu_1107105559_0.childMenuIcon="/images/nav/arrows.gif"; mm_menu_1107105559_0.menuBorder=1; mm_menu_1107105559_0.menuLiteBgColor='#2a4960'; mm_menu_1107105559_0.menuBorderBgColor='#000000'; mm_menu_1107105559_0.bgColor='#000000'; mm_menu_1107105559_0.writeMenus(); } // mmLoadMenus() //--> Hi, I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case -- 1) When parent page is opening popup window, it is getting refreshed (required from client for some reason). 2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side). With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same. Currently I am using below code to open popup [CODE] function OpenWindow() { if(winPop && !winPop.closed) { alert("Popup is already open"); } else { winPop = window.open('MyPopupPage.aspx'); } } [CODE] Please help me to get rid of this problem. Thanks in advance. - Bhasker I do write some php, but have not much idea about JavaScript. I use window.open to open 10 pages simultaneously. I prefer to open them with a time delay from each other to put less load on the target server. This is my code with no delay. (I played around with setTimeout but can't get it to work.) PHP Code: <a href='http://www.".$new[9]."' onclick="window.open('http://www.".$new[0]."/'); window.open('http://www.".$new[1]."/'); window.open('http://www.".$new[2]."/'); window.open('http://www.".$new[3]."/'); window.open('http://www.".$new[4]."/'); window.open('http://www.".$new[5]."/'); window.open('http://www.".$new[6]."/'); window.open('http://www.".$new[7]."/'); window.open('http://www.".$new[8]."/')\" target='new300/'>Open 10</a> hi all, i have written a code for simple shopping cart with 4 items.when i selecting the quantity and clicking the add to cart button it is not taking the values.it is displaying the array values what i have given.kindly tell me what is the problem and how to solve it... below is my "index.html" [HTML] <!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> <title> JavaScript jQuery</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-1.6.2"></script> <script type="text/javascript"> $(document).ready(function() { // call the cart function $("#sc_cart").smartCart(); }); </script> <!--<link rel="stylesheet" type="text/css" href="css/cart.css" /> --> </head> <body> <center><h2>Select Your products</h2></center> <form method="post" action="results.php"> <div id="smartcart" class="Container"> <!-- open "contanier" class --> <div id="sc_productlist" class="ProductList"> <!-- open "ProductList" class" --> <div class="ProductListItem"> <!-- open apple Iphone --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product0.jpg" /></td> <td><strong><span id="prod_name100">Apple IPhone 3G</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price100" style="color:red">1450.75</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty100" size="3" type="text"> <input type="button" rel="100" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close apple iphone --> <hr/> <div class="ProductListItem"> <!-- open icepot --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product1.jpg" /></td> <td><strong><span id="prod_name101">Ice Pot</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price101" style="color:red">10.25</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty101" size="3" type="text"> <input type="button" rel="101" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close icepot --> <hr/> <div class="ProductListItem"> <!-- open "ProductListItem" style stand --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product2.jpg" /></td> <td><strong><span id="prod_name102">Style Stand</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price102" style="color:red">6.15</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty102" size="3" type="text"> <input type="button" rel="102" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close style stand--> <hr/> <div class="ProductListItem"> <!-- for coffee maker --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product3.jpg" /></td> <td><strong><span id="prod_name103">Coffe Maker</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price103" style="color:red">120.35</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty103" size="3" type="text"> <input type="button" rel="103" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close coffee maker --> <!-- end "ProductList" class" --> <!-- cart list--> <div id="sc_cart" class="Cart"> <select id="product_list" name="product_list[]" style="display:none;" multiple="multiple"> </select> <div class="CartListHead"> <table width='50%'> <tr> <td width='100px'>Product</td> <td width='100px'>Quantity</td> <td width='150px'>Amount($)</td> </tr> </table> </div> <div id="sc_cartlist" class="CartList"> </div> <div class="CartListHead"> <table width='100%'> <tr> <td><span id="message"></span></td> <td width='100px'>Subtotal($):</td> <td width='120px'><span id="subtotal"></span></td> </tr> </table> </div> </div> <br> <input style="width:200px;height:35px;float:right;" type="submit" class="Btn" value="Checkout"> </div> </div> </form> </body> </html> [/HTML] the array elements given here is displaying in the output.how to remove that one.below is my "results.php" 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>
<title> JavaScript jQuery</title>
<!-- <link rel="stylesheet" type="text/css" href="css/cart.css" /> -->
</head>
<body>
<center><h2>Selected Products</h2></center>
<div id="sc_cart" style="width:950px;" class="Container">
<?php
// creating product array
$product_array = array("100" =>array('product_id'=>'100', 'product_name'=>'Apple IPhone 3G', 'product_price'=>'1450.75', 'product_img'=>'images/product0.jpg'),
"101" =>array('product_id'=>'101', 'product_name'=>'Ice Pot', 'product_price'=>'10.25', 'product_img'=>'images/product1.jpg'),
"102" =>array('product_id'=>'102', 'product_name'=>'Style Stand', 'product_price'=>'6.15', 'product_img'=>'images/product2.jpg'),
"103" =>array('product_id'=>'103', 'product_name'=>'Coffee Maker', 'product_price'=>'120.35', 'product_img'=>'images/product3.jpg'));
// get the selected product array
// here we get the selected product_id/quantity combination as an array
$product_list = $_REQUEST['product_list'];
if(!empty($product_list))
{
?>
<div class="CartListHead">
<table width='100%'>
<tr>
<td> Product</td>
<td width='80px'>Quantity</td>
<td width='130px'>Amount($)</td>
</tr></table>
</div>
<?php
$sub_total = 0;
foreach($product_list as $product)
{
$chunks = explode('|',$product);
$product_id = $chunks[0];
$product_qty = $chunks[1];
$product_name = $product_array[$product_id]['product_name'];
$product_amount = $product_array[$product_id]['product_price']*$product_qty;
$sub_total = $sub_total + $product_amount;
?>
<div class="CartListHead">
<table width='100%'>
<tr>
<td> <?php echo $product_name; ?></td>
<td width='80px'><?php echo $product_qty; ?></td>
<td width='130px'><?php echo $product_amount; ?></td>
</tr>
</table>
</div>
<?php
}
?>
<div class="CartListHead">
<table width='100%'>
<tr>
<td><span id="message"></span></td>
<td width='100px'>Subtotal($):</td>
<td width='120px'><span id="subtotal"><?php echo $sub_total; ?></span></td>
</tr>
</table>
</div>
<br>
<form action="index.php" method="post">
<?php
if(isset($product_list))
{
foreach($product_list as $p_list)
{
$prod_options .='<input type="hidden" name="product_list[]" value="'.$p_list.'">';
}
echo $prod_options;
}
?>
<input style="width:200px;height:35px;float:left;" type="submit" class="Btn" value="Continue Shopping">
</form>
<?php
}
else
{
echo "<strong>Your Cart is Empty</strong>";
}
?>
</div>
</body>
</html>
here too below is my "index.php"..... 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>
<title> JavaScript jQuery </title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// call the cart function
$("#sc_cart").smartCart();
});
</script>
<!--<link rel="stylesheet" type="text/css" href="css/cart.css" /> -->
<?php
// creating product array
$product_array = array("100" =>array('product_id'=>'100', 'product_name'=>'Apple IPhone 3G', 'product_price'=>'1450.75', 'product_img'=>'images/product0.jpg'),
"101" =>array('product_id'=>'101', 'product_name'=>'Ice Pot', 'product_price'=>'10.25', 'product_img'=>'images/product1.jpg'),
"102" =>array('product_id'=>'102', 'product_name'=>'Style Stand', 'product_price'=>'6.15', 'product_img'=>'images/product2.jpg'),
"103" =>array('product_id'=>'103', 'product_name'=>'Coffe Maker', 'product_price'=>'120.35', 'product_img'=>'images/product3.jpg'));
// get the product list
$product_list = $_REQUEST['product_list'];
$prod_options ='';
if(isset($product_list)){
foreach($product_list as $p_list){
$prod_options .='<option value="'.$p_list.'" SELECTED></option>';
}
}
?>
</head>
<body>
<center><h2>Select Your products</h2></center>
<form action="results.php" method="post">
<div id="smartcart" class="Container">
<div id="sc_productlist" class="ProductList">
<?php
foreach($product_array as $p)
{
?>
<div class="ProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="<?php echo $p['product_img']; ?>" /></td>
<td><strong><span id="prod_name<?php echo $p['product_id']; ?>"><?php echo $p['product_name']; ?></span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price<?php echo $p['product_id']; ?>"><? echo $p['product_price']; ?></span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="scText" id="prod_qty<?php echo $p['product_id']; ?>" size="3" type="text">
<input type="button" rel="<?php echo $p['product_id']; ?>" class="ItemButton Btn" value="Add Product"></td>
</tr>
</table>
</div>
<?php
}
?>
</div>
<div id="sc_cart" class="Cart">
<select id="product_list" name="product_list[]" style="display:none;" multiple="multiple">
<?php
echo $prod_options;
?>
</select>
<div class="CartListHead">
<table width='100%'>
<tr>
<td> Product</td>
<td width='80px'>Quantity</td>
<td width='140px'>Amount ($)</td>
</tr>
</table>
</div>
<div id="sc_cartlist" class="CartList">
</div>
<div class="CartListHead">
<table width='100%'>
<tr>
<td><span id="message"></span></td>
<td width='100px'>Subtotal ($):</td>
<td width='120px'><span id="subtotal"></span></td>
</tr>
</table>
</div>
<br>
<input style="width:200px;height:35px;float:right;" type="submit" class="Btn" value="Checkout">
</div>
</div>
</form>
</body>
</html>
kindly tell me where went wrong and how to solve it....... I am building a shopping cart in Volusion. I've come really far and can find my way around HTML and CSS. But the template I am using has a zebra function that it uses on the shopping cart screen. The colors it is using are terrible, and I can't figure out how to change them. By zebra, I mean it picks every other row in a table and assigns a different background color. I am noticing in firebug that the div-ids of the items in the cart have div-ids taht are not listed in any of the CSS files in the theme. I figured out that this type of coding is usually done in JavaScripting. I tried editing that file in every logical way, and I can get no response out of it aside from my browser hanging. I even tried commenting out different sections. Also, the div-ids coming up in firebug aren't found in the .js file either. I'm not sure if you are at all familiar with Volusion, but they provide absolutely no assistance and try very hard to make things as hard as possible so customers will be desperate for their design services. All support will say is, "we are prohibited from providing any coding information. Would you like me to transfer you to sales?" They routinely remove resources that were once helpful. Nice customer service. Anyway, I've been working at this for days and I've come so far I hate being stuck at this point even though I'm just about ready to dump V. Can anyone give me any ideas on what to try? I feel like I've tried everything. I attached the file and here is the URL to the test site: http://v806427.kp5zkqan3xyu.demo22.volusion.com/ Thanks in advance, I'm dying over here. I've been stuck on a piece of code for awhile. I have two items but they won't run at the same time only one will work: Code: function loadProductK ( prSrc, imgSrc, prDesc, pr$, prStock, prAnchor, rank )
{
var product ='<div class="productDiv" id="'+prAnchor+'"><img src="'+imgSrc+'" width="150" height="150" title="'+prDesc+'"/><div class="productname">'+prDesc+'</div><div class="product$">€'+pr$+'</div><div class="productstock">'+prStock+'<div class="productvisit"><li onclick="loadPage("'+prSrc+'")">Check product >></li></div></div>'
var productpage = document.getElementById("imgLoad")
productpage.innerHTML=product
loadProductK ('page/p/bead1.html','page/i/bead1.jpg','Round Bead','1,22','In Stock','Bead1','1' )
loadProductK ('page/p/Bead2.html','page/i/Bead2.jpg','Three Round Beads','6,99','In stock','Bead2','2' )
}
Now i need the function loadProductK to work for both of the loadProductK's as seen below. Really need some help on this one. Hi all, I having a problem. I am having 10 images, and I three places on a webpage where I want to show 3 out of those 10 images randomly. But when for example image 5 is shown on spot 1, it cannot be shown on spot 2 or 3 and the same for spot 2 and 3. Is this possible with Javascript? Greetz, Bob |
|||||||