The css really needs to be extracted from the plugin code. Preferably to a boltwire editable page. Apart from that it's looking really good!
On Aug 13, 12:46 am, The Editor <[email protected]> wrote: > Yes, there is some improvements on the script that need to be made. > I'm tinkering quite a bit with it, and think we may need an external > style sheet or something, as it can really vary. The problem is down > in the script there is a style the limits the ul secton tgood!o a width of > 420px or something. I didn't catch it at first and noticed the same > thing. Try finding that parameter and just deleting it. > > I'll release an upgrade eventually, but I'm still tinkering a bit. > Feel free to report other bugs or problems. I like this script a > lot... > > Cheers, > Dan > > On Wed, Aug 12, 2009 at 5:29 PM, karlh626<[email protected]> wrote: > > > One more question on this plugin... > > > I gave a demonstration of what I am seeing > > onhttp://boltwire.com/index.php?p=test.dropdown > > > When there are more than a certain number of drop down menus they wrap > > around to the next line. > > > Why is this and would it be possible to adjust that so the drop downs > > are all on one line. > > > Thanks again > > Karl > > > On Aug 12, 11:14 am, The Editor <[email protected]> wrote: > >> I decided to use a different symbol for the links that open a div, > >> '+'. You can see the script in operation here: > > >>http://www.boltwire.com/index.php?p=test.dropdown > > >> Basically it's a one click install of the plugin, then you create code > >> similar to the example. Note you can put anything you want in the > >> hidden divs, including tables, pix, forms, whatever. The ability to do > >> fancy things with the top links is still a bit limited, but we could > >> probably smarten it up also if we needed. > > >> Please check on different browsers. To change the css you have to > >> modify the plugin. We could perhaps put that in a css page but it's > >> easier this way. A quick and dirty hack, but it's pretty cool. > > >> Cheers, > >> Dan > > >> P.S. I set up a solutions page here: solutions.javascript.dropdown > > >> On Wed, Aug 12, 2009 at 10:53 AM, karlh626<[email protected]> wrote: > > >> > I like it - nice and simple > > >> > On Aug 12, 9:37 am, The Editor <[email protected]> wrote: > >> >> Actually, as I'm in the process of doing the plugin, it might be worth > >> >> some input on the markup we would want to use. I was thinking > >> >> something like this: > > >> >> <dropdown> > >> >> [[Link1]] > >> >> * [[sub1]] > >> >> * [[sub2]] > >> >> * [[sub3]] > >> >> [[Link2]] > >> >> * [[sub1]] > >> >> * [[sub2]] > >> >> * [[sub3]] > >> >> </dropdown> > > >> >> What do you think? > > >> >> Cheers, > >> >> Dan > > >> >> On Wed, Aug 12, 2009 at 9:32 AM, The Editor<[email protected]> wrote: > >> >> > Karl, > > >> >> > I've been meaning to do something like this for awhile too. I'm > >> >> > working on a plugin based on this code shortly, if it's ok with Linly. > >> >> > Should make it very easy to set it up with markup. But as for cutting > >> >> > and pasting the code into your skin directly, that's fine. So far > >> >> > I've been able to reduce it down to this in the header: > > >> >> > <style type='text/css'><!-- > >> >> > #dd { margin: 0; padding: 0; z-index: 30; } > >> >> > #dd li { margin: 0; padding: 0; list-style: none; float: left; font: > >> >> > bold 12px arial; } > >> >> > /* The Visible Links */ > >> >> > #dd li a { display: block; margin-right: 2px; padding: 2px 10px; > >> >> > background: #000; color: #fff; text-align: center; } > >> >> > #dd li a:hover { background: #123456; } > >> >> > /* The Hidden Links */ > >> >> > #dd div { position: absolute; visibility: hidden; margin: 0 ; padding: > >> >> > 0px; background: #000; border: 1px solid #000; } > >> >> > #dd div a { position: relative; margin: 0; padding: 3px 20px; > >> >> > width: > >> >> > auto; white-space: nowrap; text-align: left; background: #fff; color: > >> >> > #000; font: 12px arial; } > >> >> > #dd div a:hover {color: #cc99cc;} > >> >> > #dd div br {display: none;} > >> >> > --></style> > > >> >> > And this somewhere in the body: > > >> >> > <script type="text/javascript"> > >> >> > var timeout = 500; > >> >> > var closetimer = 0; > >> >> > var ddmenuitem = 0; > >> >> > function mopen(id) { > >> >> > mcancelclosetime(); > >> >> > if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; > >> >> > ddmenuitem = document.getElementById(id); > >> >> > ddmenuitem.style.visibility = 'visible'; > >> >> > } > >> >> > function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = > >> >> > 'hidden'; } > >> >> > function mclosetime() { closetimer = window.setTimeout(mclose, > >> >> > timeout); } > >> >> > function mcancelclosetime() { > >> >> > if(closetimer) { > >> >> > window.clearTimeout(closetimer); > >> >> > closetimer = null; > >> >> > } > >> >> > } > > >> >> > document.onclick = mclose; > >> >> > </script> > > >> >> > <ul id="dd" style=" width:420px; margin: 0 auto"> > >> >> > <li><a href="Link1" onmouseover="mopen('m1')" > >> >> > onmouseout="mclosetime()">One</a> > >> >> > <div id="m1" onmouseover="mcancelclosetime()" > >> >> > onmouseout="mclosetime()"> > >> >> > <a href="1" >1</a><br /> > >> >> > <a href="2">2</a><br /> > >> >> > <a href="3">3</a><br /> > >> >> > <a href="4">4</a><br /> > >> >> > <a href="5">5</a><br /> > >> >> > </div> > >> >> > </li> > > >> >> > <li><a href="Link2" onmouseover="mopen('m2')" > >> >> > onmouseout="mclosetime()">Two</a> > >> >> > <div id="m2" onmouseover="mcancelclosetime()" > >> >> > onmouseout="mclosetime()"> > >> >> > <a href="1" >1</a><br /> > >> >> > <a href="2">2</a><br /> > >> >> > <a href="3">3</a><br /> > >> >> > <a href="4">4</a><br /> > >> >> > <a href="5">5</a><br /> > >> >> > </div> > >> >> > </li> > > >> >> > <li><a href="Link3" onmouseover="mopen('m3')" > >> >> > onmouseout="mclosetime()">Three</a> > >> >> > <div id="m3" onmouseover="mcancelclosetime()" > >> >> > onmouseout="mclosetime()"> > >> >> > <a href="1" >1</a><br /> > >> >> > <a href="2">2</a><br /> > >> >> > <a href="3">3</a><br /> > >> >> > <a href="4">4</a><br /> > >> >> > <a href="5">5</a><br /> > >> >> > </div> > >> >> > </li> > >> >> > </ul> > > >> >> > I'll have it all automated and generated within BoltWire shortly... > >> >> > Thanks Linly for scouting this out for us. > > >> >> > Cheers, > >> >> > Dan > > >> >> > On Wed, Aug 12, 2009 at 9:19 AM, karlh626<[email protected]> wrote: > > >> >> >> Linly, > > >> >> >> That is exactly what I am looking for. Unfortunately, I know almost > >> >> >> nothing about javascript. > > >> >> >> Was this javascript that you found something that you made into a > >> >> >> plugin? Or did you include the javascript right into the skin page > >> >> >> (I > >> >> >> don't know if something like this would be possible)? > > >> >> >> Thank you. > > >> >> >> Karl --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "BoltWire" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/boltwire?hl=en -~----------~----~----~----~------~----~------~--~---
