Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 highlight code area function not working
#
Hello,

We're trying to figure out why the "highlight code area" code isn't working for our basic code template. Below is the script that we're using.

CODE
<script type="text/javascript">
// CODE AREA SCRIPT BY NICOLE/THUNDERSTRUCK OF CTTW @ JCINK
// thank you to stackoverflow for the selectText function

$('table#CODE-WRAP').addClass('nicole-code');
$('table#CODE-WRAP').attr('cellpadding', '0');
$('table#CODE-WRAP #CODE').wrapInner('<div class="code-scroll"></div>');
$('table.nicole-code #CODE').parent('tr').prev('tr').children('td').html('<div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div>');

$('table.nicole-code .code-scroll').each(function() {
if ($(this).height() < 250) {
   $(this).closest('tr').prev('tr').children('td').children('.code-top').children('.code-title').children('.code-toggle').hide();
} else {}
});

$('table.nicole-code .code-toggle').click( function () {
   if ($(this).closest('tr').next('tr').children('td').children('.code-scroll').hasClass('auto-code')) {
       $(this).closest('tr').next('tr').children('td').children('.code-scroll').removeClass('auto-code');
   } else {
       $(this).closest('tr').next('tr').children('td').children('.code-scroll').addClass('auto-code');
   }
});

jQuery.fn.selectText = function(){
var doc = document
   , element = this[0]
   , range, selection
;
if (doc.body.createTextRange) {
   range = document.body.createTextRange();
   range.moveToElementText(element);
   range.select();
} else if (window.getSelection) {
   selection = window.getSelection();        
   range = document.createRange();
   range.selectNodeContents(element);
   selection.removeAllRanges();
   selection.addRange(range);
}
};

$(function() {
$('table.nicole-code .code-highlight').click(function() {
   $(this).closest('tr').next('tr').children('td').children('.code-scroll').selectText();
});
});

// END CODE AREA SCRIPT
</script>
PM
#
You have to place this after the last "</body>" tag http://files.b1.jcink.com/html/emoticons/smile.gif

Please also remember that you have to replace the CSS #Code if you want the style that Nicole has provided for this code. You can either find this on Caution To The Wind in the Skin Building Codes or on her tumblr!

Hope this helps!

signature
user posted image
Made by me!
PM
#
Markiplier! Well, we have placed the script after the last </body> tag already and it does not work. Here is our board wrapper:

CODE
       <!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
           <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<style>@font-face { font-family: "Quenos";
   src: url('http://files.jcink.net/uploads/stormytest/Quenos.otf');}


@font-face { font-family: "Butler UL";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Ultra_Light.otf');}

@font-face { font-family: "Butler L";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Light.otf');}

@font-face { font-family: "Butler R";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Regular.otf');}

@font-face { font-family: "Butler M";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Medium.otf');}

@font-face { font-family: "Butler B";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Bold.otf');}

@font-face { font-family: "Butler BLK";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Black.otf');}

@font-face { font-family: "Butler EB";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_ExtraBold.otf');}


@font-face { font-family: "Cross EL";
   src: url('http://files.jcink.net/uploads/stormytest/crossten_extralight.ttf');}

@font-face { font-family: "Cross EB";
   src: url('http://files.jcink.net/uploads/stormytest/Crossten_ExtraBold.ttf');}</style>


<% CSS %>
<% JAVASCRIPT %>
<script>
/* Clip the Recent Topic Activity display to another location
Add to the footer below the copyright
*/
$("#recent-topics").appendTo("#recent-topics-clip");
</script>

<script>
if('<!-- |input_act| -->' == 'ST') {
          $( ".signature" ).hide();
}
</script>

<script>
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
    var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
    modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
    $(document.body).append(fadeBackground, modalWindow);
    $(document).on("click", ".modal-link", function(e) {
        $("#fade-background").css({ "opacity": "0.85" }).fadeIn("fast");
                var newContents = $("#" + $(this).data("modal-target")).html();
                $("#modal-window").html(newContents);
        $("#modal-window").fadeIn("fast");
        e.preventDefault();
    });
    $(document).on("click", "#fade-background", function() {
        $("#fade-background").fadeOut("fast");
        $("#modal-window").fadeOut("fast");
    });
    $(document).keypress(function(e) {
        if(e.keyCode == 27) {
            $("#fade-background").fadeOut("fast");
            $("#modal-window").fadeOut("fast");
        }
    });
});
</script>

       <script>
// jQuery Style My Tooltips
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>


       
   </head>

<body class="body-<!-- |g_id| -->" ID="<!-- |input_act| -->">

<div id="topbar">

<div class="mem-only">
     
<a href="index.php?act=Login&CODE=03&key=1b74aa8bfc7e6a81e64b5e733cc3927e" rel="popup_logout" class="poplight" title="logout">
<div class="toplinks"  style="height: 10px; color: #fff;"><i class="fas fa-sign-out-alt"></i></div></a>

       <a href="index.php?act=Members" class="poplight" title="members"><div class="toplinks" style="height: 10px; color: #fff;"><i class="fa fa-address-book"></i></div></a>

<a href="index.php?act=Search&CODE=getactive" class="poplight" title="active threads"><div class="toplinks" style="height: 12px; color: #fff;"><i class="fa fa-bolt"></i></div></a>

<a href="index.php?act=UserCP&CODE=01" class="poplight" title="user-settings" ><div class="toplinks" style="height: 10px; color: #fff;"><i class="fa fa-cogs"></i></div></a>

<a href="index.php?act=Pages&pid=1" class="poplight" title="guidebook" ><div class="toplinks" style="height: 10px; color: #fff;"><i class="fa fa-book"></i></div></a>

<div class="staffonly"><div class="acp-<!-- |g_access_cp| --> mod-<!-- |g_is_supmod| --> mcp-<!-- |g_is_supmod| -->">

<a href="mod.php" title="mod cp"><div class="toplinks"  style="height: 10px; color: #fff;"><i class="far fa-star"></i></div></a>

<a href="admin.php" title="admin cp"><div class="toplinks"  style="height: 10px; color: #fff;"><i class="fa fa-star"></i></div></a>

</div> </div> </div>

                 </div>

<div id="content">

<div id="wrapper">

   

     <div id="innerwrapper">
 <div class="header">
  <div class="move">
   <div class="headermid">
    <div class="headertext">
      <a href="/index.php">The <span>Weight</span><br>of Yesterday.</a>
    </div>

   <div class="header-below">

<div class="headerrowtop"></div>
<div class="headertop">
                <div id="group<!-- |g_id| -->"><div class="headername">Welcome, <a href="/index.php?showuser=<!-- |id| -->"><i><!-- |name| --></i></a> !</div></div>
               </div>



<div class="header-break"></div>
<div class="header-container">

<div class="header-row">

<div class="header-icon"><div class="headerib"><div class="header-icon-inside" style="background-image: url(<!-- |field_7| -->);"></div></div> </div>
<div class="mem-only">
<div class="header-accounts"><% SUBACCOUNTS %> </div>
<div class="header-info">
<span><b><!-- |posts| --></b> Posts</span><BR>

<span><a href="/index.php?act=Msg&CODE=01" target="_blank"><b><!-- |new_msg| --></b> New Messages</a></span><BR>
<span><a href="/index.php?act=UserCP&CODE=alerts" target="_blank"><b><!-- |new_alerts| --></b> New Alerts</a></span>

</div> </div>

<div class="guest-only">
<div class="header-info">
<span><a href="/index.php?act=Reg&CODE=00">Register</a></span><BR>
<span><a href="/index.php?act=Login&CODE=00">Log In</a></span><BR>
</div> </div>

<div class="headersub">
<a href="#" data-modal-target="nav" class="modal-link"><b>001.</b> navigation</a>
<a href="#" data-modal-target="staff" class="modal-link"><b>002.</b> staff</a>
<a href="#" data-modal-target="up" class="modal-link"><b>003.</b> updates</a>
</div>  
</div>
 </div>
  </div>

   </div>
  </div>

 

 </div>

</div>

                <div id="bh"><% BOARD HEADER %></div>
     <% BOARD %>
     <div id="skin_selector">
         <% SKIN_SELECTOR %>
     </div>
     <% COPYRIGHT %>
     <script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
<script>
document.forms['REG'].elements["field_36"].value='display: none;';
document.forms['REG'].elements["field_38"].value='display: none;';
document.forms['REG'].elements["field_40"].value='display: none;';
document.forms['REG'].elements["field_42"].value='display: none;';
document.forms['REG'].elements["field_44"].value='display: none;';
document.forms['REG'].elements["field_46"].value='display: none;';
document.forms['REG'].elements["field_48"].value='display: none;';
document.forms['REG'].elements["field_50"].value='display: none;';
document.forms['REG'].elements["field_52"].value='display: none;';
document.forms['REG'].elements["field_54"].value='display: none;';
document.forms['REG'].elements["field_56"].value='display: none;';
</script>
    </div>
</div><br>
</div>
</div>

<div class="push-menu">
<div class="side-tabs">
 <% NAVIGATION %>
</div></div>

<div id="nav" class="modal-content"><div class="modalbox1"><div class="modal-block">
<div class="modal-num">001</div>
<div class="modal-title">Navigation</div>
<div class="modal-links"><BR><BR><BR>
<a href="/index.php?act=Pages&pid=1">The WoY Handbook</a><BR>
<a href="/index.php?showtopic=45">Moderation</a><BR>
<a href="/index.php?showforum=70">Site Templates</a><BR>
<a href="/index.php?showtopic=30&st=0&#entry11223">Application Template</a><BR>
<a href="/index.php?showforum=15">Claims</a><BR>
<a href="/index.php?act=ST&f=15&t=2533">Points Shop</a><BR>
<a href="/index.php?showforum=16">Plotting</a><BR>
<a href="/index.php?showforum=24">Missions</a><BR>
<a href="/index.php?showforum=17">Want Ads</a><BR>
<a href="/index.php?showforum=42">Advertising</a><BR>
</div></div></div>

</div>

<div id="staff" class="modal-content"><div class="modalbox2">
<div class="modal-num">002</div>
<div class="modal-title">Staff</div>
<div class="staff-row"><div class="staffcont">
<div class="staff-icon1"><a href="/index.php?showuser=194"><div class="staff-name">Flashy<BR><span>18. he/him</span> </div></a></div>
<div class="staff-icon2"><a href="/index.php?showuser=134"><div class="staff-name">Foggy<BR><span>19. he/him</span> </div></a></div>
<div class="staff-icon3"><a href="/index.php?showuser=135"><div class="staff-name">Frosty<BR><span>19. he/him</span> </div></a></div>
<div class="staff-icon4"><a href="/index.php?showuser=3"><div class="staff-name">Stormy<BR><span>19. he/him</span> </div></a></div>
<div class="staff-icon5"><a href="/index.php?showuser=4"><div class="staff-name">Sunny<BR><span>22. she/her</span> </div></a></div>
</div>
</div>
</div>

<div id="up" class="modal-content"><div class="modalbox3">
<div class="modal-num">003</div>
<div class="modal-title">Updates</div>
<div class="modal-about">The Weight of Yesterday is a DCU based RP site, drawing inspiration primarily from the events of DC Rebirth, and choosing to blend in pieces of the New 52 and New Earth eras. Here at tWoY we're primarily focused on delivering the spirit of the DC universe. With our own unique, ever-evolving site canon. <p>
What role will <b><i>you</i></b> take in our universe?

<div class="modal-update">

<div class="modal-date">UPDATE: 06/10/2018</div>
Welcome Back to <i>WoY!</i> Please read the newest announcement and begin updating your characters!
</div>


</div>

</div></div>

</div>

   </body>

<script>
// CODE AREA SCRIPT BY NICOLE/THUNDERSTRUCK OF CTTW @ JCINK
// thank you to stackoverflow for the selectText function

$('table#CODE-WRAP').addClass('nicole-code');
$('table#CODE-WRAP').attr('cellpadding', '0');
$('table#CODE-WRAP #CODE').wrapInner('<div class="code-scroll"></div>');
$('table.nicole-code #CODE').parent('tr').prev('tr').children('td').html('<div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div>');

$('table.nicole-code .code-scroll').each(function() {
if ($(this).height() < 250) {
   $(this).closest('tr').prev('tr').children('td').children('.code-top').children('.code-title').children('.code-toggle').hide();
} else {}
});

$('table.nicole-code .code-toggle').click( function () {
   if ($(this).closest('tr').next('tr').children('td').children('.code-scroll').hasClass('auto-code')) {
       $(this).closest('tr').next('tr').children('td').children('.code-scroll').removeClass('auto-code');
   } else {
       $(this).closest('tr').next('tr').children('td').children('.code-scroll').addClass('auto-code');
   }
});

jQuery.fn.selectText = function(){
var doc = document
   , element = this[0]
   , range, selection
;
if (doc.body.createTextRange) {
   range = document.body.createTextRange();
   range.moveToElementText(element);
   range.select();
} else if (window.getSelection) {
   selection = window.getSelection();        
   range = document.createRange();
   range.selectNodeContents(element);
   selection.removeAllRanges();
   selection.addRange(range);
}
};

$(function() {
$('table.nicole-code .code-highlight').click(function() {
   $(this).closest('tr').next('tr').children('td').children('.code-scroll').selectText();
});
});

// END CODE AREA SCRIPT
</script>

<script src="https://unpkg.com/@widgetbot/html-embed"></script>
</html>
 
PM
#
I'm pretty sure the reason that code isn't working is because it assumes that the post row template is default. It should work with the default, but you have a custom layout so it's broken. Unfortunately I don't know which portion of the code needs to be changed, or added to in order to compensate for this -- sorry about that.

signature
email: admin@jcink.com :: blog: John C.
#
CODE
<script>
// jQuery Style My Tooltips
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

That's the script causing it not to work.

signature
user posted image
PM
#
thanks John, not your fault!

thanks Cory, removing that worked!
PM
#
Thanks Cory I missed that.

Glad you got this solved!

signature
email: admin@jcink.com :: blog: John C.
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll