INDEX | RULES & INFORMATION | SUPPORT FORUM | DOCUMENTATION | SEARCH | MEMBERS | TWITTER | TERMS


 
Add Reply
New Topic
New Poll

 Weird code behaviour
Chakka
 Posted: Jan 23 2014, 09:30 AM
Quote

185 POSTS
28 YEARS OLD
N/A
09/29/2013
Male
Offline



So my "Index only Shoutbox" code has had to be rewritten after it was brought to my attention that it no longer worked. The problem is, it does still work, but only on certain skins. Which makes no sense to me laugh.gif

Here's the code (as it was):
CODE
<script>
/* Shoutbox only on Index */

var disc = document.getElementById("navstrip");
var dune = disc.innerHTML.match("<{F_NAV_SEP}>");
var kaboodle = document.getElementsByTagName("div");

if(dune){
for (i=0;i<kaboodle.length;i++)
if(kaboodle[i].className == "tableborder" && kaboodle[i].innerHTML.match(/latest shouts in the shoutbox/i)){
kaboodle[i].style.display="none";

}
}
</script>


The problem with the code seems to be in the variable dune; it can find the navstrip element and understands the Macro placeholder however depending on which special characters comprise the Nav Separator it cannot correctly match the element. So, on my test board, the navstrip is separated by ->, which works fine. On the official Jcink skin, however, the separator is , which does not.
Even more weirdly, the code still correctly fetches , but then doesn't convert it to the HTML &rarr; before displaying (I'm using Chrome), whereas the JS automatically converts it back to raw HTML, seemingly causing the match to return false.

Now it turns out that method was overly complicated and used outdated methods of traversing the forum architecture, so the new code is superior, however the fact this happened at all bugs me and I was wondering if anyone else had any insight as to why different special characters were being treated differently by the JS and the browser, and at what point that occurs? Is it server-side, browser rendering or just a difference in JS and HTML?

This post has been edited by Chakka: Jan 23 2014, 09:31 AM
PM
^
Gunblaza
 Posted: Jan 23 2014, 09:55 AM
Quote

77 POSTS
25 YEARS OLD
N/A
08/16/2013
Male
Offline



One word, Unicode, and that character is a complicated character for innerHTML to convert because of this. There isn't really an easy fix for this that I know of currently.

PS: Javascript is not really needed anymore for this type of function on JFB due to the advanced wrapper variables.

This is an example of your same function, I am only showing you other options wink.gif
CODE
<div class='only-act-<!-- |input_act| --> shoutbox'><% DSHOUTBOX %></div>
<style>
.shoutbox {
display:none;
}
.only-act-idx.shoutbox {
display:block;
}
</style>


Master these variables, and creating scripts will be easier!

This post has been edited by Gunblaza: Jan 23 2014, 09:58 AM
PMWebsite
^
Chakka
 Posted: Jan 23 2014, 10:12 AM
Quote

185 POSTS
28 YEARS OLD
N/A
09/29/2013
Male
Offline



OK, that's pretty cool, now explain it tongue.gif I get how you're using the variable, but why does it not hide the shoutbox when viewing boardurl.b1.jcink.com/index.php?? That page has no act value so shouldn't the shoutbox be hidden?

Also, perhaps this could use some better documentation tongue.gif Or possibly I just don't understand the current version xD Either way, though I now know of input_act and input_display, what else can input variables do and are any other wrapper variables as malleable? I'd always thought they had strict outputs, but if you can actually manipulate them like this... then yes, it would make scripts a lot easier tongue.gif
PM
^
Gunblaza
 Posted: Jan 23 2014, 10:33 AM
Quote

77 POSTS
25 YEARS OLD
N/A
08/16/2013
Male
Offline



So the <!-- |input_act| --> will always fetch the current "act" no matter what the url displays. But also the input variable can be anything like <!-- |input_CODE| --> <!-- |input_ilovelamp| --> <!-- |input_anotherexample| -->

Now the CSS is actually doing all the work in this situation.
The first part hides the shoutbox on all pages, while the second part displays the shoutbox when .only-act-<!-- |input_act| --> is actually .only-act-idx

Most of the variables are strict, but can easily be used in the same situations. Plus more.

<!-- |avatar| --> will display the logged on users avatar, it's great for designs.

You can make the <!-- |g_id| --> display things only for members and only for guest.

In S20, it uses the following.
CODE
<div class='if-group-<!-- |g_id| --> member'>Member only Class</div>
<div class='if-group-<!-- |g_id| --> guest'>Guest only Class</div>


Plus you can do a lot of True or False type functions using the wrapper variables.

It's something you have to play with to understand it fully.

This post has been edited by Gunblaza: Jan 23 2014, 10:34 AM
PMWebsite
^
Chakka
 Posted: Jan 23 2014, 10:54 AM
Quote

185 POSTS
28 YEARS OLD
N/A
09/29/2013
Male
Offline



Okay, still a little unsure on how input works but it's something I'm going to have to play around with for sure. The rest I understood, thanks happy.gif Used a lot of that stuff in the past anyway tongue.gif

And I'm guessing, then, that "act" is more of a deep embed hook than I was realising, if the index page will return a value for act regardless of whether act=idx is part of the url. That's also quite interesting wink.gif

EDIT: okay so been playing around with this for a few hours, pretty neat little concepts however with the exception of URL elements I can't work out any other hook points. The documentation calls this feature similar to GET and POST elements, but from what I gather that's not literally referring to PHP GET and POST commands to make the board obey, but rather user generated GET/POST queries using in built forms etc. So basically, any information that is relayed from the user's browser to the JFB servers (but not necessarily in the opposite direction? unless specifically requested, e.g. urls?). And also, not in real time (makes sense). So, my real question, is there anything other than url fragments and IP addresses that input can read?

This post has been edited by Chakka: Jan 23 2014, 01:14 PM
PM
^
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | Code Discussion | Next Newest »

Topic Options
Add Reply
New Topic
New Poll


 


 


Latest Shouts In The Shoutbox -- View The Shoutbox · Rules -