Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2

Author Topic: javascript problem  (Read 5901 times)

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
javascript problem
« on: December 05, 2009, 03:04:59 PM »

Hello. I have tree type list based dhtml menu from dhtmlgoodies. You can see it in http://www.sietuva.lt (on right). Menu problem is that, when I open one of the links in sub-categories, menu closes himself. You can try it, for example in my site press Apie mokyklą, then Istorija, and then Mūsų mokykloje mokėsi. When new page will open, you'll see that menu had closed. I need that it could be opened even after new page opens.
Here is the menu javascript code:
Code: [Select]
var activeMenuItem = new Array();
function isUlInArray(inputObj,ulObj){
while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
if(inputObj==ulObj)return true;
inputObj = inputObj.parentNode;
}
return false;
}
function showHideSub(e,inputObj)
{
if(!inputObj)inputObj=this;
var parentObj = inputObj.parentNode;
var ul = parentObj.getElementsByTagName('UL')[0];
if(activeMenuItem.length>0){
for(var no=0;no<activeMenuItem.length;no++){
if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
activeMenuItem[no].style.display='none';
activeMenuItem.splice(no,1);
no--;
}
}
}
if(ul.offsetHeight == 0){
ul.style.display='block';
activeMenuItem.push(ul);
}else{
ul.style.display='none';
}
}
function showHidePath(inputObj)
{
var startTag = inputObj;
showHideSub(false,inputObj);
inputObj = inputObj.parentNode;
while(inputObj){
inputObj = inputObj.parentNode;
if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false;
}
}
function initMenu()
{
var obj = document.getElementById('dhtmlgoodies_listMenu');
var linkCounter=0;
var aTags = obj.getElementsByTagName('A');
var activeMenuItem = true;
var activeMenuLink = true;
var thisLocationArray = location.href.split(/\//);
var fileNameThis = thisLocationArray[thisLocationArray.length-1];
if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));
for(var no=0;no<aTags.length;no++){
var parent = aTags[no].parentNode;
var subs = parent.getElementsByTagName('UL');
if(subs.length>0){
aTags[no].onclick = showHideSub;
linkCounter++;
aTags[no].id = 'aLink' + linkCounter;
}
if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){
if(aTags[no].parentNode.parentNode && aTags[no].parentNode.parentNode.id!='dhtmlgoodies_listMenu'){
var parentObj = aTags[no].parentNode.parentNode.parentNode;
var a = parentObj.getElementsByTagName('A')[0];
if(a.id && !activeMenuLink){
activeMenuLink = aTags[no];
activeMenuItem = a.id;
}
}
}
}
if(activeMenuLink){
activeMenuLink.className='activeMenuLink';
}
if(activeMenuItem){
if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));
}
}
window.onload = initMenu;

I think that problem is with initMenu() function. Maybe someone can help me?
Logged
Aurea praxis, sterilis theoria.

centered

  • Guest
Re: javascript problem
« Reply #1 on: December 05, 2009, 09:47:59 PM »

Which sNews version is that?  I don't remember it having that functionality.... It you go on the dhtml goodies forums, some are having similar problems.. with no solution. IMO if the active category has the current class attached, then JS should open that item up (it's parent if it's a child).   
« Last Edit: December 06, 2009, 01:11:48 AM by equilni »
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #2 on: December 05, 2009, 11:06:46 PM »

sNews version is 1.7. I'm talking not about snews function, but about menu function. I still think its javascript's problem, because I took it straight from dhtml goodies website and simply changed
Quote
var activeMenuItem = false;
var activeMenuLink = false;
to
Quote
var activeMenuItem = true;
var activeMenuLink = true;

Maybe here in this forum is somenone, who understands javascript and can help me?
Logged
Aurea praxis, sterilis theoria.

centered

  • Guest
Re: javascript problem
« Reply #3 on: December 06, 2009, 02:24:29 AM »

Well, I could have helped you quicker if I could recreate it in sNews, but no matter....

Playing with the demo, and saving it....

I am leaving the script as is and just modifying the links for a sNews like environment, I think I see where the issue is...

Your issue seems to lie in the next lines down:
var fileNameThis = thisLocationArray[thisLocationArray.length-1];

sNews appends the trailing slash and this comes up empty, you can change it to this:
var fileNameThis = thisLocationArray[thisLocationArray.length-2];

Try here as it seems to work for me....
Code: (Untitled.php) [Select]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple list based menu</title>
<style type="text/css">
/* The following CSS is only for the demo */
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
height:100%;
font-size:0.9em;
line-height:130%;
background-color:#E2EBED;
text-align:center;
}

#mainContainer{
width:760px;
margin: 0 auto;
border-left:1px solid #000;
border-right:1px solid #000;
height:100%;
text-align:left;
background-color:#FFF;
}
#leftColumn{
width:140px;
float:left;
padding-left:10px;
}
#mainContent{
width:590px;
padding-left:10px;
padding-right:10px;
float:left;
}
#topBar{
height:100px;

}
/* End of demo CSS */

/****************************************************************************************
* LAYOUT CSS FOR THE MENU
****************************************************************************************/
#dhtmlgoodies_listMenu a{ /* Main menu items */
color:#000;
text-decoration:none;
font-weight:bold;

}
#dhtmlgoodies_listMenu ul li a{ /* Sub menu */
color: #F00;
font-weight:normal;
}
#dhtmlgoodies_listMenu ul li ul li a{ /* Sub Sub menu */
color: #000;
font-style:italic;
font-size:0.9em;
font-weight:normal;
}

#dhtmlgoodies_listMenu .activeMenuLink{ /* Styling of active menu item */
color:blue;
}


/*
No bullets
*/
#dhtmlgoodies_listMenu li{
list-style-type:none;
}

/*
No margin and padding
*/
#dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
margin:0px;
padding:0px;
}

/* Margin of sub menu items */
#dhtmlgoodies_listMenu ul{
display:none;
margin-left:10px;
}
</style>

<script type="text/javascript">

/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/


var activeMenuItem = new Array();

function isUlInArray(inputObj,ulObj){
while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
if(inputObj==ulObj)return true;
inputObj = inputObj.parentNode;
}
return false;
}

function showHideSub(e,inputObj)
{


if(!inputObj)inputObj=this;
var parentObj = inputObj.parentNode;
var ul = parentObj.getElementsByTagName('UL')[0];
if(activeMenuItem.length>0){
for(var no=0;no<activeMenuItem.length;no++){
if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
activeMenuItem[no].style.display='none';
activeMenuItem.splice(no,1);
no--;
}
}
}
if(ul.offsetHeight == 0){
ul.style.display='block';
activeMenuItem.push(ul);
}else{
ul.style.display='none';
}
}

function showHidePath(inputObj)
{
var startTag = inputObj;
showHideSub(false,inputObj);
inputObj = inputObj.parentNode;
while(inputObj){
inputObj = inputObj.parentNode;
if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false;
}
}

function initMenu()
{
var obj = document.getElementById('dhtmlgoodies_listMenu');
var linkCounter=0;
var aTags = obj.getElementsByTagName('A');
var activeMenuItem = false;
var activeMenuLink = false;
var thisLocationArray = location.href.split(/\//);
var fileNameThis = thisLocationArray[thisLocationArray.length-2];
if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));

for(var no=0;no<aTags.length;no++){
var parent = aTags[no].parentNode;
var subs = parent.getElementsByTagName('UL');
if(subs.length>0){
aTags[no].onclick = showHideSub;
linkCounter++;
aTags[no].id = 'aLink' + linkCounter;
}

if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){
if(aTags[no].parentNode.parentNode && aTags[no].parentNode.parentNode.id!='dhtmlgoodies_listMenu'){
var parentObj = aTags[no].parentNode.parentNode.parentNode;
var a = parentObj.getElementsByTagName('A')[0];
if(a.id && !activeMenuLink){
activeMenuLink = aTags[no];
activeMenuItem = a.id;
}
}
}
}


if(activeMenuLink){
activeMenuLink.className='activeMenuLink';
}
if(activeMenuItem){
if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));
}
}

</script>
</head>

<body>
<div id="mainContainer">
<div id="leftColumn">
<ul id="dhtmlgoodies_listMenu">

<li><a href="#">Products</a>
<ul>
<li><a href="http://localhost:8888/Untitled.php/products/menus/">Menus</a></li>
<li><a href="http://localhost:8888/Untitled.php/products/cal_scripts/">Calendar scripts</a></li>
<li><a href="http://localhost:8888/Untitled.php/products/window_scripts/">Window scripts</a></li>
<li><a href="http://localhost:8888/Untitled.php/products/form_widgets/">Form widgets</a></li>

</ul>
</li>
<li><a href="#">Support</a>
<ul>
<li><a href="http://localhost:8888/Untitled.php/support/phone/">Phone</a></li>
<li><a href="http://localhost:8888/Untitled.php/support/email/">Email</a></li>
<li><a href="http://localhost:8888/Untitled.php/support/qna/">QnA</a></li>

</ul>
</li>
<li><a href="#">History</a>
<ul>
<li><a href="#">1900 - 1940</a>
<ul>
<li><a href="#">Support</a>
<ul>

<li><a href="http://localhost:8888/Untitled.php/history/support/active/">Active link</a></li>
</ul>
</li>
<li><a href="http://localhost:8888/Untitled.php/history/another_link/">Another link</a></li>
</ul>
</li>
<li><a href="http://localhost:8888/Untitled.php/history/1980/">1941 - 1980 </a></li>

<li><a href="http://localhost:8888/Untitled.php/history/present/">1981 - Present time</a></li>
</ul>
</li>

<li><a href="#">Locations</a>
<ul>
<li><a href="http://localhost:8888/Untitled.php/locations/norway/">Norway</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/united-states/">United States</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/uk/">United Kingdom</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/sweden/">Sweden</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/denmark/">Denmark</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/finland/">Finland</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
</body>
</html>

Additionally, per the site's rules and the copyright within the demo, please leave the copyright notice of the script on your site.
http://www.sietuva.lt/js/meniu.php
« Last Edit: December 06, 2009, 03:35:19 AM by equilni »
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #4 on: December 06, 2009, 09:34:24 AM »

Ok, I've added the copyright. With number -2 it seems to work. But another thing: when
Quote
var activeMenuItem = false;
var activeMenuLink = false;
are false, on page startup meniu opens the first category list. When
Quote
var activeMenuItem = true;
var activeMenuLink = true;
are true, meniu stays closed and my first problem comes again. Maybe there is possible to make both, and keep meniu closed on first page and tu make it open category in which I am? I also tried to play with these true/false, but it doesnt work.
Logged
Aurea praxis, sterilis theoria.

centered

  • Guest
Re: javascript problem
« Reply #5 on: December 07, 2009, 02:16:43 AM »

Well I rewrote this script using jquery.  The original script is VERY confusing to test and follow (was it written in '05??).

Please test the code on a local test install:

Code: [Select]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple list based menu</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://localhost:8888/jquery.js"></script><!-- You will need jquery -->
</head>
<body>
<div id="mainContainer">
<div id="leftColumn">
<ul id="nav">
<li><a href="http://localhost:8888/Untitled.php">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="http://localhost:8888/Untitled.php/products/menus/">Menus</a></li>
<li><a href="http://localhost:8888/Untitled.php/products/cal_scripts/">Calendar scripts</a></li>
<li><a href="http://localhost:8888/Untitled.php/products/window_scripts/">Window scripts</a></li>
<li><a href="http://localhost:8888/Untitled.php/products/form_widgets/">Form widgets</a></li>

</ul>
</li>
<li><a href="#">Support</a>
<ul>
<li><a href="http://localhost:8888/Untitled.php/support/phone/">Phone</a></li>
<li><a href="http://localhost:8888/Untitled.php/support/email/">Email</a></li>
<li><a href="http://localhost:8888/Untitled.php/support/qna/">QnA</a></li>

</ul>
</li>
<li><a href="#">History</a>
<ul>
<li><a href="#">1900 - 1940</a>
<ul>
<li><a href="#">Support</a>
<ul>

<li><a href="http://localhost:8888/Untitled.php/history/support/active/">Active link</a></li>
</ul>
</li>
<li><a href="http://localhost:8888/Untitled.php/history/another_link/">Another link</a></li>
</ul>
</li>
<li><a href="http://localhost:8888/Untitled.php/history/1980/">1941 - 1980 </a></li>

<li><a href="http://localhost:8888/Untitled.php/history/present/">1981 - Present time</a></li>
</ul>
</li>

<li><a href="#">Locations</a>
<ul>
<li><a href="http://localhost:8888/Untitled.php/locations/norway/">Norway</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/united-states/">United States</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/uk/">United Kingdom</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/sweden/">Sweden</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/denmark/">Denmark</a></li>
<li><a href="http://localhost:8888/Untitled.php/locations/finland/">Finland</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
//find each ul child to parent li relationship and hide them
$("li > ul").each(function() {
$(this).hide();
});
// if the a link is the current link, then show all elements to the top parent
$("a").each(function(){ // each a tag...
if ($(this).attr("href") == window.location) {
$(this).parents().show(); // show all prev generation items
}
});
// if the a link has a # in it, then use it to toggle the next element a -> ul
$("a").click(function(){
if ($(this).attr("href") == "#" ) {
$(this).next().toggle();
}
});
});
</script>
</body>
</html>
« Last Edit: December 07, 2009, 02:47:34 AM by equilni »
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #6 on: December 07, 2009, 10:03:19 AM »

Nop, doesnt work. Well, it works, but doesnt stay opened when new page opens.
Logged
Aurea praxis, sterilis theoria.

centered

  • Guest
Re: javascript problem
« Reply #7 on: December 07, 2009, 12:19:01 PM »

No, you don't have the same set up so it wouldn't work.  I was working against the demo and not your site.

Your site's links don't reflect the whole url and you need to get the base url from the <base> tag and connect it with the href link to check against the current link
In addition, your expandable links don't have an href attached to them, so that code needs to be changed as well.

Let me know if you need help with it.
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #8 on: December 07, 2009, 02:43:16 PM »

Yes, when links are full it works. But maybe it is possible to make, that I should not you # in category? Because it is not practical to use.
Logged
Aurea praxis, sterilis theoria.

centered

  • Guest
Re: javascript problem
« Reply #9 on: December 07, 2009, 03:15:06 PM »

Right, based on your site code, you don't have href in the expandable links so...

Code: [Select]
<script type="text/javascript">
$(document).ready(function() {
//find each ul children to the parent li and hide them all
$("li > ul").each(function() {
$(this).hide();
});

// Get the base href...
var base = $('base').attr("href");
// if the a link is the current link, then show all elements to the top parent
$("a").each(function(){
// connect the base href to the a link and check against the current link
if (base + $(this).attr("href") == window.location) {
$(this).parents().show();
}
});
// if the a link does not have a href attribute, then use it to toggle the next element a -> ul
$("a").click(function(){
if (!$(this).attr("href")) {
$(this).next().toggle();
}
});
});
</script>
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #10 on: December 07, 2009, 03:20:34 PM »

Now it works like the older code and closes meniu after new page open.
Logged
Aurea praxis, sterilis theoria.

centered

  • Guest
Re: javascript problem
« Reply #11 on: December 07, 2009, 03:57:20 PM »

I am not sure how else to help you out.   ???
I have your menu code on a separate document working with the code already given. If it doesn't work for you, the code is commented enough to help you fix your problem.
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #12 on: December 07, 2009, 04:22:00 PM »

After the last code edit, the problem why it didnt worked was that I didnt removed the http://localhost on the href :) Thank you very much! :)
« Last Edit: December 07, 2009, 04:24:19 PM by Creatium »
Logged
Aurea praxis, sterilis theoria.

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: javascript problem
« Reply #13 on: December 07, 2009, 04:28:20 PM »

Now I saw, that all the li and ul lists ar like menu. Maybe there is possibility to make js code to work only for menu list?
Logged
Aurea praxis, sterilis theoria.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: javascript problem
« Reply #14 on: December 07, 2009, 06:23:55 PM »

Now I saw, that all the li and ul lists ar like menu. Maybe there is possibility to make js code to work only for menu list?

Yes, there are some javascript-based menu scripts that work with simple <li> and <ul> arrangements. You might download, install (locally) and explore Poppoll's Aqueous Theme package. It uses a neat side-bar menu system that aways stays open where you have it... when you refresh a page or change pages. Javascript is not my 'cup of tea' (a little pun there, hehe) but I've been re-theming Poppoll's package for a school reunion site project I am working on... and I noticed that the categories and subcategories functions in the snews.php file are still in their default state (not modified) so Poppoll's menu system is working with the default functions.

In my case, though, for this particular project, I did make some minor changes to the 2 functions in snews.php... to have more flexibility over the use of image icons (and other item-specific styling changes) for category and subcategory items.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU
Pages: [1] 2