1
jurgis
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/
(more http://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
even http://javascript.internet.com/games/javascript-chess-with-cpu-oppo.html

I also found more general js API's out there for dealing with DOM.
http://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 http://www.quirksmode.org

a workaround to deal with non-js browsers
if (document.getElementById){ 
document.write('n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}n')
document.write('')
// 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=0i<alltags.lengthi++){
if (
alltags[i].className==classname)
customcollection[inc++]=alltags[i]
}
}
getElementbyClass("dyncontent")
script>


2
Vargr
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
jurgis
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 at http://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}>');" 

<
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">

script>
<
script type="text/javascript">

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
Vargr
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
Daigoro
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
bennie
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
jurgis
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
jurgis
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

Login

Who's Online

413 user(s) are online (266 user(s) are browsing Support Forums)


Members: 0


Guests: 413


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits