JS rulezz : dynamics not only for menu ;) [Theme design questions]

1

JS rulezz : dynamics not only for menu ;)

2004/2/22 19:02
jurgis
Just popping in
Posts: 72
Since: 2003/3/20

Hi, Yesterday I searched a lot about js and css.
found several interesting and even amazing things:

Pure CSS pop-out menus
[to my surprise doesnt work on IE but works on Mozilla :))]
http://www.meyerweb.com/eric/css/edge/menus/demo.html

ToolBox 1
sorting tables, dynamic tree from UL, words search&highlight
http://www.kryogenix.org/code/browser/
Dynamic Tree could be used in threads to reverse the order of posts.
ToolBox 2
Pay attention to "Anchor Position" it can help with Tigra menu in fixed-width columns layout to make it find its position ;)
http://www.mattkruse.com/javascript/

http://www.javascript-games.org/gamelib/

Misc
some nice drag&drop and tooltips
http://www.walterzorn.com
SyntaxHihtglight with js - cute thing
http://simon.incutio.com/js/syntaxHighlight.html
I think, it would also be convenient to use js for message-edit preview (sometimes my bandwith gets on my nerves :\)
FontSize
http://www.dyn-web.com/dhtml/sizefont/
(morehttp://www.stcassociates.com/lab/fontbrowser.html)
fun sutff
http://javascript.internet.com/games/picture-puzzle.html (ups, it made my Moziila not responding..)
http://javascript.internet.com/games/picture-memory.html
evenhttp://javascript.internet.com/games/javascript-chess-with-cpu-oppo.html

I also found more general js API's out there for dealing with DOM.
www.cross-browser.com (X and CBE) //I guess, X is the lightest of all
http://sourceforge.net/projects/dynapi/
http://www.dithered.com/javascript/index.html

a pile of work-arounds www.quirksmode.org

a workaround to deal with non-js browsers


if (document.getElementById){ 

document.write('<style type="text/css">n')

document.write('.dyncontent{display: none; width: 250px; height: 60px;}n')

document.write('</style>')

// could be whatever

}

the idea to get elements by class_name


<script type="text/javascript">

function getElementbyClass(classname){

var inc=0

var alltags=document.getElementsByTagName("*");

for (i=0; i<alltags.length; i++){

if (alltags[i].className==classname)

customcollection[inc++]=alltags[i]

}

}

getElementbyClass("dyncontent")

</script>

2

Re: JS rulezz : dynamics not only for menu ;)

2004/2/22 19:15
Vargr
Not too shy to talk
Posts: 130
Since: 2003/6/19

Thanks for your work writing these things down.

I am bookmarking this thread now and will be back to look through it to get some ideas.

3

JS: Hide-and-Find blocks

2004/2/22 20:00
jurgis
Just popping in
Posts: 72
Since: 2003/3/20

and there is what I managed to use myself
It helps some blocks not to be annoying. U can check athttp://somsa.ktusa.lt/xoops/ (click block Titles :)

theme.html: in column template code I put sth like this


<{foreach item=block from=$xoops_lblocks}> <span style="cursor:hand; cursor: pointer;"  onclick="toggle('<{$block.title}>');" > 

<!-- cursor style : IE - hand, Mozilla - pointer -->

<div class="blockTitle"><{$block.title}></div></span>

            <div id="<{$block.title}>"  class="blockContent"><{$block.content}></div>

            <{/foreach}>

Block template Edit: to hide block content initially


<div id="Recent Topics_inside" style="display:none"> 

template code...

</div>

well, here things depend on "Block Title", so they are kind of hardCoded :\, bul efect is worth it :).

js could be included directly in xoops.js or after it in theme.html file.


<script type="text/javascript">

<!--

<{$xoops_js}>

//-->

</script>

<script type="text/javascript">

<!-- 

// toggle visibility         sinchronizing 2 nested divs

// in my case all blocks are visible by default 

// _inside block gives ability to make a blok invisible through "Templates management"

function toggle( targetId ){

     target = xoopsGetElementById( targetId );

     target2 = xoopsGetElementById( ''+ targetId + '_inside' ); 



var base_display_property;

if (target2) { base_display_property = target2.style.display;} // if some value is forced through templates

else { base_display_property = target.style.display;};

if ( target.style.display == 'none') 

 base_display_property = 'none';  // outer div

if (target) // I could check it earlier ;)

{if ( base_display_property == "none"){

       target.style.display = "block";

       if (target2) target2.style.display = "block";

    } else {

       target.style.display = "none";

       if (target2) target2.style.display = "none";

     }

   }

}

-->

</script>

would be useful some cookie or other session stuff to remember, whicth blocks (contents) (in)visible

some other block-dynamics examples:
http://www.dynamicdrive.com/dynamicindex17/agallery.htm
http://simon.incutio.com/code/js/easytoggle/example2.html
http://www.dyn-web.com/dhtml/slide/slide-onclick.html

4

Re: JS: Hide-and-Find blocks

2004/2/22 20:25
Vargr
Not too shy to talk
Posts: 130
Since: 2003/6/19

I will just repeat myself from before

5

Re: JS: Hide-and-Find blocks

2004/2/23 0:02
Daigoro
Quite a regular
Posts: 223
Since: 2003/7/3 2

Jurgis,

I like your Hide & Show hack!

But one thing is missing: It would be nice to save the hidden/shown status of the blocks in cookies. This way one could descide what to see, and what not to see every time one is visiting the site.

The rest looks interesting, too.

Best regards,

6

Re: JS: Hide-and-Find blocks

2004/4/5 5:38
bennie
Just popping in
Posts: 40
Since: 2003/7/3 1

Hey Jurgis,

i'm having trouble getting the menu blocks to hide innitialy, they hide but stay that way, so i can't access the menu links, further more is there a way to show the menu sublinks only after you have selected the main link. i.e. klick news and than the sublinks show. submit news etc.

i like the work you've don on the menu very much, thanks Ben

7

Re: JS: Hide-and-Find blocks

2004/4/11 9:33
jurgis
Just popping in
Posts: 72
Since: 2003/3/20

remember, You must add
div id="block name_inside" in block description
and "block name" should be exaclty the same as it is (case sensitive I suspect).

stuff with submenus (the way I know how) :
once U decide your main-menu is good enough,
1) take its' html code AND put it into new html block (System->blocks-> pgDown ;)
2) enclose grouped submenus into div's (and assign id="submenu_whatever" )
3) add some code to menu_item, whitch has submenu_x , sth like
onClick="toggle('submenu_x');"

http://tikiwiki.org/ does it nicely

8

Re: JS rulezz : dynamics not only for menu ;)

2004/5/19 20:46
jurgis
Just popping in
Posts: 72
Since: 2003/3/20

one more nice js-thing
http://www.activewidgets.com

Stats
Goal:	$100.00
Due Date:	Apr 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

JS rulezz : dynamics not only for menu ;)

Re: JS rulezz : dynamics not only for menu ;)

JS: Hide-and-Find blocks

Re: JS: Hide-and-Find blocks

Re: JS: Hide-and-Find blocks

Re: JS: Hide-and-Find blocks

Re: JS: Hide-and-Find blocks

Re: JS rulezz : dynamics not only for menu ;)

Login

Search

Recent Posts

Re: Rebuilding and Updating a 20 years old Xoops Website from 2.0.18? to 2.5.11

Rebuilding and Updating a 20 years old Xoops Website from 2.0.18? to 2.5.11

Re: NewBB v 5.1.0 b 6

Re: NewBB v 5.1.0 b 6

NewBB v 5.1.0 b 6

Re: XOOPS 2.5.11 search user is not working

Re: oledrion

Re: oledrion

Re: oledrion

Re: oledrion

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}