Hi! I came across your posts/pages on collapsible elements. I was playing around with them and was wondering if you there was a way to float/position the show/hide toggle, so that the toggle is beside some text or next to a section heading.
An example is shown here, where the toggle is next to the word "Notes". I "cheated" though, by putting it in a table. However, the toggle moves back to float right, when the hidden content is expanded (and the table expanded), which is not what I want (I want the toggle fixed in place next to "Notes").
I know about the custom toggle class (from reading Help:Collapsing, but would ideally like to retain the original toggle, where the wording can change from "Expand" to "Collapse". I also prefer the "link-style" rather than the "button-style".
Oh, and I don't want to change this for the whole wiki, just one instance on a page.
Hope you can offer some advice on this. Maybe to use templates or change/create some CSS. Sorry for the long post. Thanks in advance!
P.S. Oh! You are also the one who replied to my question on community central. Thanks! :)
P.P.S. For the example, the toggle floated right when I pasted the code from the above link here. So I just linked to the site instead.
It's possible to use CSS to move the positioning of the toggle, to an extent. The limitation is that it can't be "properly" moved next to the section heading without manually setting the toggle HTML so that it's inside of the header tag, or right after it. The only way to do that is to use the custom toggle class to place the toggle where it needs to be, which you said you don't want to do because you want to retain the original toggle where the wording changes from "Expand" to "Collapse".
So in order to satisfy the requirements that you've imposed, there's not really a "proper" solution, so far as I know. But if this is a very special case that you only want to use for a single section on a single page, I suppose a bit of a "hack" solution may be acceptable, such as this: http://mathmagician.wikia.com/wiki/Collapsible_tables_2
What I mean by "hack" is that it's a very poor design decision (coding-wise) that cannot be made to work for multiple divs/tables/pages. It's dependent on the section header having a fixed length. If you change the section header, it won't work and the coding would need to be adjusted again.
It's possible that I'm mistaken about the "you can't do it without a custom toggle class part" -- I have a few more ideas, but it would take more time to explore them to see if they work or not. Let me know if the easy "hack" solution is sufficient to do what you want. If that's not quite what you want, I can try a few more things to see if there are other solutions.
Hi! Thank you for your help! Right now, I only have one instance where I want to use it, so I suppose the "hack" solution is fine. I can see how this "hack" solution is less than ideal though. If you have the time and the interest, I would definitely be interested in seeing a better solution.
Some thoughts:
Does it make a difference (in terms of coding difficulty) if the toggle is placed beside a section heading or beside some text in the main body?
What about adding the "Expand/Collapse" word change feature to the custom toggle class instead of adding the "move" functionality to the default toggle?
I have no idea if these thoughts are helpful or not... haha. In any case, you give me hope that there is a better solution. Thanks for being so helpful!
Here is what I would consider a better solution: Collapsible tables 3. You can see the collapsible toggle floating just to the right of the text.
The reason it's close to the text is because the width of the container has been restricted. Edit that page and change the widths (the part that says style="width: 180px;") to see what happens.
What about adding the "Expand/Collapse" word change feature to the custom toggle class instead of adding the "move" functionality to the default toggle?
This is impossible at the user level. A MediaWiki developer would have to change the source code of the collapsible tables feature to allow for that.
I'm trying to make something to help with breeding monsters. Is it possible to make a page where a person would select 2 monsters and then it would show all possible outcomes? Or is that a kind of scripting that doesn't work on wikia?
That sounds like an interactive type of application (like the user has to pick the two monsters, and the output is different depending on what they they picked)
I don't think there's anyway to create an interactive application on a single page with normal wiki markup, but I know it's definitely possible to create that with JavaScript.
JS is supported on Wikia, you just have to write the code and put it in your MediaWiki:Wikia.js page (see Help:JavaScript and CSS Cheatsheet for more info). Do you or anyone else you know on your wiki have a bit of coding experience in JavaScript?
Kind of. It's a lot different from editing normal wiki pages or making templates, and very few wikis have users with scripting experience.
If you want, I do know JavaScript, so I could try making something like that for you? It wouldn't take too long to at least make a little demo to show you what I came up with, and then you can look at it and I can tweak it until it's more in line with what you want.
I don't think it would be too much work to make. I made a small demo in about 1 hour. It may take longer depending on how many changes you want to make / how fancy you want it to look.
Wow that is awsome. So using this, when a new monster comes out we'd just have to list is then it's parents underneath it? Could the data list be customized to show images or something?
Yes, with this set up, when a new monster comes out all you'd have to do is add it and its parents to the list. Everything else would update automatically, all you'd have to manually edit is the list.
Yes, the data list can be customized in many ways (for example, adding images or descriptive text). If the images are uploaded to your wiki and they all have standardized filenames, for example:
File:<monster>.png
where <monster> would be replaced with the name of the monster, for example File:Tree Monster.png or File:Earth Monster.png, then this would be very easy to do. If the filenames aren't standardized... well, still possible, but it would be a lot more work :/
Basically just let me know what you want me to change (for example, if you can make a screenshot or something to show me what you want it to look like), and I'll see what I can do.
we sort of have a standard names for monsters. Usually it's the file name from the game file off the phone. Mind you we could always make a 2nd file just for this thing. Let me talk to my other admin as to to look and get back to you.
A question about this layout.. would take much time to tweak this for use on other page. We have a page we use for eggs. Well it was suppose to be just about the egg images but kinda grew and is getting too long page wise. I was thinking of something like, you got a 24 hour breed time but not sure what it is. So the you'd pick from the drop down and select the 24 hours from the list and then it would show all the monsters with that time as well as the egg image & maybe more info like elements, etc.
Hello, I'm helping Hartmana on the other wiki and I like what I see here. I didn't think JS was allowed on the wikia, but I know enough that I should be able to maintain whatever we put in place.
Perhaps instead of showing the matches between the two dropdowns, hide the stuff from the existing table that doesn't match. So when the person first loads the page, they see the whole table. Changing one of the dropdowns will filter out the rows that don't match. Choosing the second dropdown will do a second filter, so then you would see the intersection of the two parents. Of course, the filter would need to work symmetrically - there is an Earth-Plant creature and a Plant-Earth, but both should be shown no matter which is order the parent choices are in.
Or if you like, I can keep working on it with you guys and then hand it off to you when it's in a more "complete" state.
By the way, yes, Wikia supports JavaScript, CSS and you can even inject whatever HTML you want into a wiki page. Here's a couple help pages that you might find informative about this:
Hartmana wrote: I was thinking of something like, you got a 24 hour breed time but not sure what it is. So the you'd pick from the drop down and select the 24 hours from the list and then it would show all the monsters with that time as well as the egg image & maybe more info like elements, etc.
Can you create a template for this, or make a design sketch in your image editing software, or something to show me? This sounds like a great idea, I'd just like to get a visual representation of what you want it to look like. I just don't know enough about Tiny Monsters and your wiki to really create a good design myself. But if you give me a design to work with, I can definitely integrate it with the JavaScript to make it user-interactive with the dropdown boxes etc.
Also if you wanted to I have another wikia called http://tm-testing.wikia.com that we use for testing before putting it on the main site, your free to use it if it helps. Either myself or snow can give you admin rights if you need.
Can you explain the picture a bit so I know what you're trying accomplish? This looks a lot different from your original question, which was about picking 2 monsters and seeing what new monster you can get by breeding those 2.
Oh sorry, this was a different idea from the 2 monsters thing but I'm not sure how well it would work so might scrap the idea and just stick to the original one you made.
Hey, that crafting thingy is pretty neat. I made a template out of it on Minecraft Fan Fiction Wiki and it seems to be working fine. Although if I leave a square empty without an image, it shows the lines of code from the template. Can you help me fix that? Here's the link And the test page - Here.
I'm making a pub/sub script like jquery.callbacks except a billion times awesomer :P... but seriously it let's you do a lot of cool stuff like set priorities for your pub/subs so when you "publish" an event, the "subscriber" with the highest priority will receive that action first. Not only that but it let's you lock and disable certain subscriptions only and a bunch of other stuff I don't remember off the top of my head. I have one question though... should I include jquery.deferred like functionality?
Beats me, the pub/sub stuff Pecoes was talking about a while back was confusing to me. I think I understand it conceptually, but I've still never had a use for it. And the jQuery deferred stuff I'm not really good at either, so I don't know :/
Well, it's about more than pub/sub. It's basically jQuery callbacks in fire (hence the name flame) and I'm thinking about adding in deferred like functionality to augment the library
heh, that's why I came to you guys. I know quite a bit about callbacks by now, but only have some a basic understanding about deferred. My codebase is really extensible, so if you want to code something up, feel free to. If not, any ideas?
Original Authority wrote:
Hi, Math, if you look at my history, I had your import and others like chat hacks but then it wouldn't work so i borrowed Pecoes to see if it would work but it never....And yes you have my permission
I have removed PortableCSSPad from your JavaScript (again, there are problems with it, please don't use it until I can fix those problems)
Everything in your global.jsshould be working now. If chat hacks aren't working for you, erase the code I put in there and replace it with the old chat hacks code you had, which was this:
Hey, I have now finished working out some bugs in the CSS Pad script you were asking about. If you want, you can now find the script at http://dev.wikia.com/wiki/PortableCSSPad and install it by following the instructions there
Content on Wikia is licensed CC-BY-SA, meaning anyone is free to copy or modify code from a Wikia wiki and place it on any other website. The license requires attribution, meaning if somebody copies your text/template/etc., they're supposed to provide a link to your wiki.
Note: Images uploaded to your wiki are NOT necessarily CC-BY-SA. They're copyrighted to whoever owns them, or they may be being used under "Fair Use"
So, you can't prevent the person from copying your content. You could ask the person to attribute the copied content, as required by the license (described on the page I just linked).
If you ask the person to attribute the content and they refuse (i.e. they're violating the license) ... there's not much you can do.
In that case, you could file a complaint to Wikia staff at Special:Contact/general letting them know that someone is copying your content to another Wikia wiki and violating the CC-BY-SA license by refusing to attribute it to you after you asked them to attribute it.
I want to make some thing like this for my monster page. Not sure if you ever played TM's or not but I wanted to make an base image like the one above as the default background for all the pages, and then I would just place the monster info within that box. Almost like this:
But just a different layout. Would I have to create the base image as an image or would I have to create it with code? I'm hoping this is not something too advance for me.
Erm, if you want an image -- like the gizmonauts thing -- you would have to create an image (e.g. with Photoshop, or whatever other image editing software you use). Making the image is the hard part.
Once you have the image ready, then you'd have to set it up to be the background for the table/infobox you want to put the monster information inside. That's the easy part, it's just a tiny bit of CSS code.
The Dragonbox from dragonvale wiki doesn't use any background image. It just uses a color. It's really easy to make a background which is just a color (not an image). For example:
The background of this text is green
which was just made with
<div style="background-color: green;">The background of this text is green</div>
I want to make mine like the dragonvale setup. They use a master list that all the info is fed from. I just have to learn how to make the base template for all the info to be displayed.
I made a new wiki called TM Testing to try everything out.
Oh gosh, that Dragonbox is one of the most complicated infoboxes around Wikia. I honestly recommend not copying the code from it. If you want to make a table like that ... it would probably be better to make it from scratch. Seriously, that Dragonbox template uses like a couple dozen other templates inside of it and it's like... yeah, very complicated.
Oh okay, yeah, that's what it is. You were probably looking at w:c:dragonvale:Dragonbox_Guide where it says Master List.
Yeah... I am not a fan of that "master list" idea. It's an unnecessarily complicated style of coding.
Rather than putting all the dragon data into the w:c:dragonvale:Template:Dv, the data should go on the individual dragon pages, and the template should instead be used like:
{{Dragonbox
| name = My dragon
| exp = number
| more params = something blah blah
... a lot more data
}}
This is how it is usually done on other wikis.
You don't really gain anything useful from having a master list, other than the fact that it's easy to use the template multiple times. But all the monsters in the game are unique? So why would you ever want to pull the data for the same monster on two different pages?
Hartmana wrote: So I just need to make the image then and the hard part would be placing the information in the right spots I guess?
Basically, yeah. Are you wanting the background to be different for different elements? So for example, there would be a fire background for fire monsters, a water background for water monsters, etc?
Because if you want that, there would be several different images -- one for each element
I figured just 1 basic background for all. That is a neat idea though.
Now when placing the info, let's say for the description, it runs over the allotted space. Would a scroll button appear or would I have to pre-plan for a long one and just make more room.
What essentially needs to be done is some text needs to be placed inside a container (going to need some CSS coding to get the positioning just right). The image itself can't change size... so if there's a really long text description, it will run outside the boundary of the image.
To compensate for that, you would either have to A) manually code a scrollbar or B) make the background image large enough that you KNOW it will contain the largest possible description.
A) is probably the safest solution.
B) is possible I suppose... you'd have to play the game and look at all the descriptions for every monster to figure out the longest one -- then pick the background image of that size. But if there's a game update with a new monster introduced that has a longer description, well, everything's ruined and you have to set up the image again.
So the basics would (On the left side) at the top a square for the image of the monster, underneath would be the cost to buy. On the right a box for the level unlock, beside that it's habitat(s) (using the element templates) and underneath both is the description.
Forgot the other boxes are for sell price, XP Gained & Hatch time.
Hartmana wrote: Ya I like the scroll idea. Just in case.
So the basics would (On the left side) at the top a square for the image of the monster, underneath would be the cost to buy. On the right a box for the level unlock, beside that it's habitat(s) (using the element templates) and underneath both is the description.
Forgot the other boxes are for sell price, XP Gained & Hatch time.
I don't see sell price, XP Gained or Hatch time in the image you showed me.
Is there such thing as a monster that has more than 1 habitat? For example, would there be a monster that goes in 4 habitats? Because then you'd have 4 habitat images and maybe it would overflow?
How much of the page do you want the infobox to take up? Should it be the full available width of the page? Or do you want it to be skinnier like a normal infobox so that you can have part of the article text next to it?
#2 is usually how infoboxes work on other wikis. But your wiki is about a game where there's really not that much of an article to write ... you basically just put the data in tables and pictures and stuff and there's not really paragraphs for an actual article. So maybe you would want to do things more like #1 (Dragonvale) ?
Hartmana wrote: I'm going to get started on the image for now and then maybe you can help me with the layout if your not too busy.
Oh okay. I was actually probably going to go to sleep pretty soon, I was just trying to help bounce some ideas around. I won't have free time tomorrow since I have another family get-together to attend. I can help out with layout / coding part of it another day if you want.
I'm making the image using Illustrator. Should I make the image a certain size?
Well, the full article width is 670 pixels. You'd probably want a bit of margin on the sides... I'd try making the image maybe 650 pixels width? Or maybe 630. Depends how much margin you want on the left/right sides
I wanted to try the info pull thing just to see how it looks. Gotta say, worked out well.
Having one issue though. If you see the area where you can toggle the different images, for some reason it's displaying the egg on a separate line but in the Switch template it's all on one line. Any idea's?
For me it display's egg on a separate line in the template as well as on the pages, on a laptop in the Chrome browser. It's probably just /barely/ overflowing, I'd try making the container width bigger or the font size smaller.
Good job on the template though, that's pretty impressive that you came up with that in like 1 day
Sorry, I was looking at w:c:tm-testing:Template:MonsterBox. I didn't realize you actually made a template called "Switch", I thought you were referring to a #switch parser function.
Anyways, after looking at it closely, it turned out the problem was that the very last span tag that had "Egg" in it was outside of the <p> tag containing all the other ones. (The MediaWiki software tends to modify the HTML of webpages a bit, e.g. inserting p tags etc.)
If you see the description box, the edges are touching the main box. I tried using margin: 5px 5px 5px 5px but doesn't seem to work. Maybe it's the wrong use?
Hey Math. I'm currently in the process of making a javascript anti-vandal program. The UI is just about done and I'm about to start the actual coding. Interested?
Sounds interesting, I wouldn't mind helping out in a small way, maybe like with testing / giving feedback. I'm not sure I have enough free time to help with actual development though, sorry :(
It's all good. Btw, congrats on the CC adminship.... I'll have to watch out now with Math on my tail :P. Also, what exactly are you working on right now for development? And if you don't mind me asking, I saw your userpage about your friend who works at amazon so I was wondering where you work now (this is completely optional to answer)
Thanks, now you have one more person to bug when the spam needs cleaning up :P - otherwise I'll just keep editing the forums and commenting on the staff blogs like usual.
Development projects, well, Railgun, although I don't always have much time for that, as I'm busy at work, studying, filling out job applications, and watching like... *counts on fingers* ... 7? different anime currently airing this season + a couple older ones. I'm getting closer and closer to the point where I need Pecoes' preferences to be stable in order to continue working on Railgun.
I work at a community college in a tutoring center.. not exactly the career I had in mind. Trying to poke my head into the developers community in the Seattle area (I'd love to be an Android developer... or even Windows 8 would be cool, C# is basically Java without coffee creamer, so no problems there).
Had a couple interviews, but still having trouble getting past recruiters in general without good contacts. Tech leads know that mathematics is a perfectly good STEM degree, but sadly most recruiters don't, and will just toss your resume into the "no" pile if you don't have the computer engineering degree / experience listed on the job posting. Puts me at a bit of a disadvantage. Fallback plan is to go back to school, grab a teacher's certificate and/or master's degree and go into teaching. I'd much rather be an engineer though...
That's an impressive sounding thread title, isn't it? So let me come right out and say: I don't know what it means. I looked at the Wikipedia page for all of five minutes and decided I don't need to know the details...
I found the link to that Wikipedia page in the jshint documentation under the "maxcomplexity" setting. That setting seems to be a new addition. Either that or I didn't notice it before.
I found this setting to be uniquely useful. The theory that higher cyclomatic complexity correlates to more errors seems true to me. I also notice that this setting alerts me to passages I end up rewriting anyway. The magic number seems to be 5. Anything up until 4 is fine. 5 is usually okay. But 6 needs to be edited. Badly. Even if there are no errors in it. Because reading that code gives me headaches.
I've tinkered a bit, though not too much. My usage of JSHint revolves around copy/pasting my code into the text box at http://www.jshint.com/, clicking a few checkboxes, and pressing the Lint button. I've looked at the documentation maybe once or twice just to see what the checkbox I'm clicking actually does.
Unfortunately, the web form doesn't have checkboxes for all the different options, it just has some of the most popular ones. You can set maxcomplexity with a comment though (and I presume you can do all this from the console using the global JSHINT function). To use the Wikipedia example:
(function(){/*jshint maxcomplexity:2 */// will throw a JSHint error because// Cyclomatic Complexity is 3 > 2function c1(){}function c2(){}function f1(){}function f2(){}function f3(){}function f4(){}if(c1()){
f1();}else{
f2();}if(c2()){
f3();}else{
f4();}}());
In the wikipedia article, the only particularly interesting part is the Implications for Software Testing section. Before that is just a description of what a Control Flow Graph is (it's a graph data structure) and a semi-formal mathematical definition / proof of the Cyclomatic Complexity formula using vector spaces and topology... mathmaticians might find that interesting but computer scientists don't really need to know...
Brief summary:
You have a Control Flow Graph of a program
Cyclomatic Complexity is a fancy name for a number that is derived from the graph via a formula.
Cyclomatic Complexity is an upper bound (maximum) for the number of test cases needed to cover all branches of the program.
Cyclomatic Complexity is a lower bound (minimum) for the number of test cases needed to cover all paths through the program.
Note: in practice, some paths may be impossible (e.g. if you have an if statement whose condition is known to always evaluate to true), so the number of actual paths could be smaller.
Oh. Wow! Thanks for reading all of that :) You shouldn't have. Really. You shouldn't have. The reason I haven't read that entire article was not that it may have been too complicated. I just skimmed it to find out if the idea in general makes sense.
It's kinda like in computer games. There's probably a formula governing how much taking out that one guard will raise the awareness of all the other guards. But you don't want that formula. You want that formula to make sense on an intuitive level and get a feel for how you should behave for optimal results.
It does look to me like cyclomatic complexity is one of those formulas that make sense on an intuitive level. It did find the passages in my code that made me feel a little queasy.
I'm not so sure about the right number though. Five may be overly aggressive. I seem to be okay with certain sixes. I've removed the eights though and good riddance. The article suggests tens are okay. I haven't seen tens yet...
Whatever the options, I do very much like jshint! There are quite a few gnarly errors that jshint found immediately and that may have taken me a long time to detect. It's quite the shortcut!
The reason I read more of the article was because I needed to in order to understand what the point of it all was :)
Yeah, JSHint has helped me find quite a few errors too. Adding maxcomplexity to my comment list is probably a good idea. While I'm at it, I think I'll also steal some others from your list too. I'm not sure exactly if I want to let Cyclomatic Complexity shape how I write code. For now, I think I'll just set it to 1 and let it count the complexity of my code so I can get a feel for what the complexity of most of the code I'm writing actually is.
P.S. your comment has unused:true appearing twice. I guess you reeeeally want to make sure you don't have unused variables :)
I'd rather you not make any immediate changes to it, because both Lunarity and I have been tweaking it a lot over the past day or two and are currently involved in a discussion on the talk page over on the dev wiki.
If you could wait a couple more days until we're done actively tweaking things, that would be great, as it's not good to have too many people working on it all at once.
Well, the script has a "permissions" configuration option so that admins can make it so that the script only works for users with specific rights.
However, the script should also be able to be used in global.js.
In the case where a wiki has set permissions to block a user, but the user ALSO has the script in their global.js, here's what should happen:
The script should run once for MediaWiki:Common.js, and fail because the user doesn't have permission
The script should run a 2nd time when loaded from global.js and succeed always.
The problem is that importScriptURI internally tracks all scripts that have loaded via the loadedScripts global variable. So if you try to load a script a 2nd time, it won't work. Lunarity is basically working on a monkey patch to get around that problem, and I just tested it here on my test wiki and it doesn't appear to be working.