Get XOOPS XOOPSXOOPS FAQFAQ ForumsForums NewsNews ThemesThemes ModulesModules
New Posts New Topics All Posts All Forums Index General Modules Themes Development International XOOPS.org

Search


Advanced Search

Donat-O-Meter

Make donations with PayPal!
Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $65.00
Net Balance: $61.80
Left to go: $38.20
Donations
studioC  ($25)May-17
Anonymous ($15)May-16
Anonymous ($25)May-4

Learn XOOPS Core

Click to see original Image in a new window
OOP with XOOPS

XOOPS API
XOOPS Blue Move XOOPS Giftshop XOOPS Blue Move
Share


Local Support

Advertisement

XOOPS Code hosted on SourceForge

Cumulus Tag Cloud

2 2.5 2.6 3.0 2013 Abuse adslight AntiHarvesting AntiMalUser AntiSpam API Australia Ban banner Beats billige black Blocks blue Captcha cell Christmas chronolabs content Conversion database demo docek download Dresses editor evden eve facebook floor free Google herre Honeypot Human IP jQuery kantor lamps Legal log logger Logging mobile module modules Monster MyAlbum-p Networks newbb news Notices online PageRank pdf Permissions pink Plugin portal Prevention profile project Protector publisher Rights rmcommon Room sale security SERIAL Server site Smarty Spam statistics stem Studio tag tags tdmcreate template Theme themes userlog website Whitepaper Winter XML XooLaT xoops Xoopspoll Xortify xthemes Yolande ZendFramework
more...

New Users

Registering user

# 136033

Arizamartin

Welcome to XOOPS!

Forum Index

Board index » XOOPS Themes and Templates Support forums » Theme design questions » JS rulezz : dynamics not only for menu ;)




Bottom   Previous Topic   Next Topic  Register To Post



#1 Posted on: 2004/2/22 13:02 JS rulezz : dynamics not only for menu ;)
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/ ... -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>



Top

jurgis
Just popping in
Just popping in
Joined:
2003/3/20 13:31
From Lithuania, KTU
Group:
Registered Users
Posts: 72
(Show More) (Show Less)


#2 Posted on: 2004/2/22 13:15 Re: JS rulezz : dynamics not only for menu ;)
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.



Top

Vargr
Not too shy to talk
Not too shy to talk
Joined:
2003/6/19 11:30
Group:
Registered Users
Posts: 130
(Show More) (Show Less)


#3 Posted on: 2004/2/22 14:00 JS: Hide-and-Find blocks
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}>');" > 
<!-- 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

Top

jurgis
Just popping in
Just popping in
Joined:
2003/3/20 13:31
From Lithuania, KTU
Group:
Registered Users
Posts: 72
(Show More) (Show Less)


#4 Posted on: 2004/2/22 14:25 Re: JS: Hide-and-Find blocks
I will just repeat myself from before


Top

Vargr
Not too shy to talk
Not too shy to talk
Joined:
2003/6/19 11:30
Group:
Registered Users
Posts: 130
(Show More) (Show Less)


#5 Posted on: 2004/2/22 18:02 Re: JS: Hide-and-Find blocks
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,





Top

Daigoro
Quite a regular
Quite a regular
Joined:
2003/7/3 16:34
From Tilst, Denmark
Group:
Registered Users
Posts: 223
(Show More) (Show Less)


#6 Posted on: 2004/4/5 0:38 Re: JS: Hide-and-Find blocks
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

Top

bennie
Just popping in
Just popping in
Joined:
2003/7/3 10:46
From the Netherlands
Group:
Registered Users
Posts: 40
(Show More) (Show Less)


#7 Posted on: 2004/4/11 4:33 Re: JS: Hide-and-Find blocks
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

Top

jurgis
Just popping in
Just popping in
Joined:
2003/3/20 13:31
From Lithuania, KTU
Group:
Registered Users
Posts: 72
(Show More) (Show Less)


#8 Posted on: 2004/5/19 15:46 Re: JS rulezz : dynamics not only for menu ;)
one more nice js-thing
http://www.activewidgets.com

Top

jurgis
Just popping in
Just popping in
Joined:
2003/3/20 13:31
From Lithuania, KTU
Group:
Registered Users
Posts: 72
(Show More) (Show Less)



Board index » XOOPS Themes and Templates Support forums » Theme design questions » JS rulezz : dynamics not only for menu ;)

Top   Previous Topic   Next Topic

  Register To Post


You can view topic.
You cannot start a new topic.
You cannot reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You can vote in polls.
You cannot attach files to posts.
You cannot post without approval.
You cannot use topic type.
You cannot use HTML syntax.
You cannot use signature.

[Advanced Search]