PDA

View Full Version : Javascript target in catergories menu

flyguye
02-09-2007, 05:50 AM
Hi there, Im learning how to create a custom skin & am toying with a stripped down version of Luna skin. Can anyone help with this issue, i would like to know how to put a javascript in the catergories menu to set a target window.
I'll see if i can explain better. At www.mapa.org.my/index.php i have an ajax script which launches the requested page in the DIV called "iframe" . If you click the link called "test" below the catergories menu in, you"ll see what i mean. What i want to do is to be able to have links from my catergories menu also target that "iframe" DIV. What code do i put to get my links "target" from the catergories menu to show up in the DIV. Below is the page source to see the whole script. Please help as i am not good at this.
----------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Website Title - Home</title>
<meta name="description" content="Website description" />
<meta name="keywords" content="Website Keywords" />
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=pag e_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
<base href="http://mapa.org.my/"/>
<script type="text/javascript">
<!--
var TMenu_path_to_files="http://mapa.org.my/includes/javascript/hovermenu/";
//-->
</script>
<script type="text/javascript" src="includes/javascript/skin_functions.js"></script>
<script type="text/javascript" src="includes/javascript/hovermenu/menu.js"></script> <link rel="stylesheet" type="text/css" href="skins/luna/styles.css" />
<link rel="stylesheet" type="text/css" href="skins/luna/menu.css" />
<link rel="stylesheet" type="text/css" href="skins/mapabeta1/styles.css" />
</head>
<body>

<div id="login">


<form action="http://mapa.org.my/index.php?categoryid=1" method="post" name="loginbox">
<input type="hidden" name="login" value="login" >
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>
<style="padding-bottom: 0px;">
<input name="loginusername" value="username" onFocus="if(this.value==this.defaultValue)this.value=''" onBlur="if(this.value=='')this.value=this.defaultValue" type="text" size="15" style="color: #709DB3; font-family: Trebuchet MS;font-size: 8pt; background-color: #234669; border: 1px solid #709DB3;"></td></tr>
<tr><td>
<style="padding-bottom: 4px;">
<input name="loginpassword" value="********" onFocus="if(this.value==this.defaultValue)this.value=''" onBlur="if(this.value=='')this.value=this.defaultValue" type="password" size="15" style="color: #709DB3; font-family: Trebuchet MS;font-size: 8pt; background-color: #234669; border: 1px solid #709DB3;">&nbsp; <input type="image" name="Submit now" value="Login" src="../images/loginbuttforum.gif" width="43" height="17"></td></tr>
<tr><td>
<style="padding-bottom: 4px;">

<input class="checkbox" type="checkbox" name="rememberme" unchecked="unchecked" style="color: #709DB3; background-color: #234669; border: 1px solid #709DB3;"/> Remember Me
</td></tr><tr>
<td><a href="http://mapa.org.my/forum/profile.php?mode=sendpassword">Forgot your password?</a></td>
</tr></table>
</form>








</div>


<div class="navigation_4"><table border="0" cellpadding="0" cellspacing="0" summary="Not Available"><tr><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=1" class="sdcategory">Home</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=2" class="sdcategory">Guestbook</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=3" class="sdcategory">Image Gallery</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=4" class="sdcategory">Links</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=5" class="sdcategory">Contact</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=6" class="sdcategory">Register</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=7" class="sdcategory">Profile</a></td><td class="bullet_2" onMouseOver="this.className='bullet_2_hover'" onMouseOut="this.className='bullet_2'"><a href="http://mapa.org.my/index.php?categoryid=10" class="sdcategory">Test</a></td></tr></table></div>

<a href="javascript:ajaxpage('../history.htm', 'iframe');">test</a>
<a target="iframe" href="../history.htm">testing</a>
<div id="iframe"></div>


</body>
</html>
william
02-09-2007, 06:43 AM
Very interesting....currently no one has done this, but many have requested something similar including myself. Currently the closest thing available is Article Placer by HeavyEddie. This only deals with the article system and not categories. He has stated he would add this ability in time, but he is a bit busy to do this at present time. However, if someone picks this up, this would be a great feature!
jessenco
02-09-2007, 09:38 AM
Find this in categories.php:
echo '<td class="bullet_2" onMouseOver="this.className=\'bullet_2_hover\'" onMouseOut="this.className=\'bullet_2\'"><a href="'.$categorylink[$i].'" class="sdcategory">'.$categoryname[$i].'</a></td>';

and replace with this:
echo '<td class="bullet_2" onMouseOver="this.className=\'bullet_2_hover\'" onMouseOut="this.className=\'bullet_2\'"><a href="javascript:ajaxpage(\''.$categorylink[$i].'\', \'iframe\');" class="sdcategory">'.$categoryname[$i].'</a></td>';


EDIT : 02-09-2007
flyguye
02-09-2007, 11:31 AM
Hi Jessenco,
I tried the code you gave me, but now all catergory menu links have errors. Maybe you can have a look & tell me at www.mapa.org.my/index.php .

Thanks again,
flyguye
jessenco
02-09-2007, 05:41 PM
Oh :eek:
Code updated. :D
Try again.

BTW in the piece of code you pasted initially in this thread I've spoted few typos in your login JS:

Here's what you should I have:

<input name="loginusername" value="username" onFocus="if(this.value==this.defaultValue)this.value=''" onBlur="if(this.value=='')this.value=this.defaultValue" type="text" size="15" style="color: #709DB3; font-family: Trebuchet MS;font-size: 8pt; background-color: #234669; border: 1px solid #709DB3;">


<input name="loginpassword" value="********" onFocus="if(this.value==this.defaultValue)this.value=''" onBlur="if(this.value=='')this.value=this.defaultValue" type="password" size="15" style="color: #709DB3; font-family: Trebuchet MS;font-size: 8pt; background-color: #234669; border: 1px solid #709DB3;">&nbsp; <input type="image" name="Submit now" value="Login" src="../images/loginbuttforum.gif" width="43" height="17">
flyguye
02-11-2007, 03:23 PM
Hi Jessenco, I've just tried the updated code & YES! it works great. I think i've sorted the login script typos. Looks like i've created a couple of problems for myself now.
1)How can i make ONLY the "Home" catergory link appear as per normal & not in the "iframe" DIV?

2) Also how can i add a code that will make all links that appear in "iframe" DIV to load inside it?

Thank you again
flyguye
jessenco
02-11-2007, 09:03 PM
I'm a bit confuse by your site. :confused:
It seems to me you have in your site's root directory an index.php AND an index.htm file at the same time.

You can't have both. :(
(you can change your index.htm file name and fix any links to it though).

I guess instead of redoing all your site you want to show the actual content in an IFRAME.

Ok :cool:

In the categories admin panel you can provide an alternative URL where each menu items (categories) point at and how they behave. Where you see this:

Category Link
Load a different page when the category is clicked:
Examples: forum/index.php, www.yoursite.com/index.htm, etc...

This means - in your case - I believe you want the HOME menu item to point to your index.htm file. As mentionned you can do it in the admin panel. This will override the default category.


2) Also how can i add a code that will make all links that appear in "iframe" DIV to load inside it?

Links that are menu items... where you see this you simply specify the url (as above) and the window name in the following target setting. In your case : iframe.

Target for Category Link
Examples: "_blank" to open in new window
(Note: older skins may not support this feature)

...Normal links like the ones you place in your content, like this:
<a href="http://www.mysite.com/myfolder/myfile.php" target="iframe">mylink that will open in the iframe window</a>

Quickly learn how links behave:
_blank, _self, _top , _parent , windowname (frame) (http://www.htmlcodetutorial.com/linking/_A_TARGET.html)

Finally, just to let you know that the SD Article placer plugins can handle your static html pages within SD just like dynamic pages.
This plugins really deserve more attention.
It can do amazing stuff and may serve as a templates engine if you want to.
flyguye
02-13-2007, 05:59 AM
I am sorry for the confusion. The reason there is an "index.htm" & a "index.php" is bcoz right now the site runs using "index.htm". I'm rebuilding the site using "index.php for future launch. right now im doing some testing, hence all my queries.

Im not planning to use "Home" catergory link to show "index.htm" . Please ignore that page as "index.php" will replace it when the site redesign is complete. I'll see if i can clearly express what i wanted to do. I've placed an ajax script that make an assigned DIV work just like an "iframe" does except that content will display in the assigned DIV without it refreshing itself. My intention is to have all catergory menu items to load within this assigned DIV except for the "Home" menu.(i may have added more confusion to you by calling the DIV "iframe", but it is not). Meaning to say i would like "home" menu to load as per normal & not within the assigned DIV.



Right now no matter what i set in admin under target for catergory link, it will still come up in the assigned DIV. I just need only the "home" menu link to appear as per normal ie"the whole page refreshes".

With regards to having all links that appear in the assigned DIV to load within the assigned DIV, i was thinking something along the lines of a code attached to the DIV tags of in the <head> area instead of individually adding it to every link manually. This way, dynamically created links that appear in the assigned DIV will also open within the assigned DIV. Phew! i do hope i have cleared the air a bit. Once again i thank you taking the time to even bother with my issues.

cheers,
flyguye

p.s - i will look into the article placer plugin to see what it is all about.
flyguye
02-18-2007, 08:51 AM
Anybody???