Neat Features - Random Thread for showing off?

Notings of Attention™

Acmlmboard 2 Released
Github/GIT | @acmlmboard

Chatting Places
Discord

Affiliates
Super Mario Bros. X | Kuribo64 | NeoRHDN

11-22-24 05:40 AM

Guest: Register | Login

0 users currently in msg db 'Computer Address',0xa | 6 bots

Main - msg db 'Computer Address',0xa - Neat Features - Random Thread for showing off?

Next newer thread | Next older thread

Scrydan

Posted on 04-13-15 07:24 PM (rev. 2 of 04-13-15 07:28 PM by

Scrydan)

Link | ID: 84413

Normal User
Scryforce - A place that still exists. Neat.
Level: 86

Posts: 1891/2020
EXP: 6097053
Next: 45054

Since: 07-18-12
From: USA

Last post: 983 days
Last view: 965 days

I suppose I wanted to share with someone some of the things designed in my board. Considering the fact not many will see its light of day for quite some time.

So lately I've been looking at my schemes/(themes as you know them) editor and thought of some solution to a feature I wanted for quite some time.

Now the following as an example:

<link rel="stylesheet" href=""css/abI.css?tz=-18000&minover=0">

Would need something like (id="schemefile") for this trick to be applied here as well as a style tag right below it. Now I recently added this feature but its quite nice that you can see any Scheme's effects through some JS magic.

The code that makes the magic happen:


function changescheme(cssfile)
          {
           document.getElementById('schemefile').href="{path-to-cssfile}œ²Çâ•æë">           document.getElementById('overridescheme').innerHTML = '';
          }
         function overridescheme()
          {
           document.getElementById('schemefile').href='';
           
           var schemecss = document.getElementById('cssfield').value;
           //I recommend you do some replace function to fix image pathing or you WILL have a broken Theme test when editing!
           //This is because the path is different compared to where ever your CSS is located.
           schemecss = schemecss.replace(/..\/..\/images\//gi, 'boardfiles/images/');
           document.getElementById('overridescheme').innerHTML = schemecss;
          }
         
         $(document).ready(function()
          {
           changescheme('{insert-your-css}');
          });

Now this is an example of what is used on the editor page. The first function is used on the main page, as well as a test page that tests all site elements. You can make display any test element and make sure it looks all right in all available schemes.

The other function is to use the current text input for the CSS to override the Scheme. Thus you can compare the current with the new. I've also linked the current scheme the logged user is using so they can compare user scheme, target scheme, and text scheme.

The result is quite nice and very useful to those who wish to edit and add new schemes/themes to their board.

Do note that this value (cssfile) from the schemes page is automatically filtered to only allow "a-zA-Z_" characters as the file's name on my site's editor. I do not advise on forgetting to filter the values as it could lead to bad results (or broken JS). The hook for the style only applies for the scheme editor page. Optionally you could filter out things like </style> or even < + > when you are using the CSS style. It is still a works in progress idea, but I like it and perhaps someone besides myself can benefit from this code.

I might share some more interesting features here and there. But don't let me have all the fun. Share some of your own here as well. Could be from anything you coded, but make sure it is something you've done.

Edit: Optionally for the overridescheme function; you can instead of no arguments list one optional one that can change the textbox's ID so that it can be used in more than one place but it isn't needed on my site.

Next newer thread | Next older thread

Main - msg db 'Computer Address',0xa - Neat Features - Random Thread for showing off?

Page rendered in 0.052 seconds. (784KB of memory used)
MySQL - queries: 55, rows: 479/513, time: 0.047 seconds.