implementing javascript on 1 page
-
Hey again,
for one page of my WP-site I’m trying to get something done. I want to have a few collapsible DIV’s.. I’ve tested it here: http://twowaysociety.nl/hidden/wp-content/themes/graphene-child/test.html and it works fine there.
1ST TRY: Unfortunately it doesn’t work when I put the HTML coding in the admins edit page section. It goes totally wrong, displaying the html-input instead of the output… (note: I DO toggle the HTML input tab). The html-coding consists of a lot of tables so maybe that’s the problem. So I tried something else;
2ND TRY; I’ve set up a template using this code:
<?php
/*
Template Name: bio
*/
?>
<?php
global $graphene_settings;
$graphene_settings['column_mode'] = 'one-column';
include( get_template_directory() . '/page.php' );
?>
/*** here I inserted the HTML code for the HEAD's javascript ***/
<?php get_header(); ?>
/*** A lot of html in the <BODY> ***/
<?php get_footer(); ?>So… Does anyone know if and how to do this??? HTML of the code van be found on the test using firebug or sourcecode.. I didn’t want to lengthen this post too much…
So I’m lost now. Saw something about using the slug or ID
Actually, I got this one done, putting the javascript in the header.
<script language="javascript">
function init()
{
var cookie = getCookie('collapse_obj');
if(cookie)
{
var values = cookie.split(',');
for(var i = 0; i < values.length; i++)
{
var itm = getItem(values);
if(itm)
itm.style.display = 'none';
}
}
}
function makeCookie(name, value)
{
var cookie = name + '=' + escape(value) + ';';
document.cookie = cookie;
}
function getCookie(name)
{
if(document.cookie == '')
return false;
var firstPos;
var lastPos;
var cookie = document.cookie;
firstPos = cookie.indexOf(name);
if(firstPos != -1)
{
firstPos += name.length + 1;
lastPos = cookie.indexOf(';', firstPos);
if(lastPos == -1)
lastPos = cookie.length;
return unescape(cookie.substring(firstPos, lastPos));
}
else
return false;
}
function getItem(id)
{
var itm = false;
if(document.getElementById)
itm = document.getElementById(id);
else if(document.all)
itm = document.all[id];
else if(document.layers)
itm = document.layers[id];
return itm;
}
function toggleItem(id)
{
itm = getItem(id);
if(!itm)
return false;
if(itm.style.display == 'none')
itm.style.display = '';
else
itm.style.display = 'none';
////////////////////
cookie = getCookie('collapse_obj');
values = new Array();
newval = new Array();
add = 1;
if(cookie)
{
values = cookie.split(',');
for(var i = 0; i < values.length; i++)
{
if(values == id)
add = 0;
else
newval[newval.length] = values;
}
}
if(add)
newval[newval.length] = id;
makeCookie('collapse_obj', newval.join(','));
return false;
}
</script>There’s just one thing though. Once you toggle the event the page goes to the top. So the user has to scroll it’s way down to see what happened. I found another code that can prevent this, but I don’t know where about in the above code I should put it…
$('a.myLink').toggle(function() {
// run my code
return false;
});Anyone???
Resolved it! In the actual html code for the table there are the links that toggle the collapses to happen. It looked like this
<a href="#" onclick="toggleItem('unknown')>some text</a>. I had to change it to<span onclick="toggleItem('unknown');return false">Unkown</span>Now I’m only looking for a nice way to change the cursor, making it a obvious clickable object…
Well, no help needed 😉 We’re getting there!
Cheers
CSS cursor Property – http://www.w3schools.com/cssref/pr_class_cursor.asp
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.
