Comic Fury Webcomic Hosting - Random code snippet archive

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Random code snippet archive
Pages: [1] [2]

"Save place/Bookmark buttons for your comic", 14th Sep 2011, 8:08 PM #1
JustNoPoint

User avatar
Posts: 1323
Registration date: 17th Apr 2011
Location: Judsonia AR


Spoilered because Kyo implemented this within Comic Fury. So it's a bit outdated. However if for some reason you would still prefer this method I'm leaving it spoilered.

Comic Fury's version is here
_______________________
"Having an embeded comment box in your comment area", 14th Sep 2011, 8:46 PM #2
JustNoPoint

User avatar
Posts: 1323
Registration date: 17th Apr 2011
Location: Judsonia AR
This code will place the reply box wherever you would like on your site. So that people can make quick comments without clicking the comment link and using the pop up box.

You can also use various tags listed to alter the way the box looks.

<script type="text/javascript" src="/files/static/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    //Copy-paste tips and other jQuery code after this line
    $(function() {
        var commentFrameLoads = 0;
        $('#frame').load(function() {
            if (commentFrameLoads==1){
                top.location.assign(location);
            }
            commentFrameLoads++;
        });
    });
</script>

Add the above between the <head></head> tags. This will make it so that when a comment is made the page will automatically refresh itself and your commenter will see the new comment right away.

<iframe id="frame" frameBorder="0" src="[v:commentlink]" width="500" height="255"></iframe>


The above line is placed where you want your comment box. This is the best width and length I could determine for the iframe box. It makes it so guests and CF members can see the whole box without much excess space taken up so you will not have a scroll bar. However as the comic author you WILL see a scroll bar because you have more options. If that annoys you increase the height a bit.
Another note the id="frame" needs to be here if you want the comic page to refresh itself with the code given earlier.

Now for the fun stuff so you can customize colors and fonts

bgcolor
tacolor
sepcolor
tatextcolor
h1bgcolor
h1fontcolor
fontcolor
h1bordercolor
formbgcolor
formbordercolor
submitcolor
submittextcolor
submitbordercolor
notitle
isembed - this hides the "Close this window" link

Simply put these behind the [v:commentlink] tag with & like so
[v:commentlink]&bgcolor=e3e9e8&sepcolor=899ba8



Here is the complete code from my site as an example
<iframe id="frame" frameBorder="0" src="[v:commentlink]&bgcolor=e3e9e8&sepcolor=899ba8&h1bgcolor=899ba8&h1bordercolor=5d6a71&formbgcolor=b3bfc7&formbordercolor=5d6a71&submitbordercolor=39703c&submitcolor=5d9760" width="500" height="255"></iframe>
_______________________
"Giving a custom avatar to a commenter that has no avatar", 14th Sep 2011, 8:53 PM #3
JustNoPoint

User avatar
Posts: 1323
Registration date: 17th Apr 2011
Location: Judsonia AR
Kalegiro:Is there a way to place a default avatar on the comments section of the webcomic?
Instead of just virtual air?

(like this… sort of: image)



Credits to Biophysicist this is from him word by word and it works great
Find this code (or something similar - it may be different on different layouts) in your layout:

[c:l.avatar]
<div class="avatar">
<img src="[v:l.avatar]" alt="[v:l.authorname]" /><br />
</div>
[/]




That code displays a div containing the avatar, but only if the poster has an avatar. We're going to make the div always display, but with the src of the img changing if there is no avatar. So, change the code to this:

<div class="avatar">
<img src="[c:l.avatar][v:l.avatar][/][c:!l.avatar]PATH TO DEFAULT AVATAR[/]" alt="[v:l.authorname]" /><br />
</div>




Replacing "PATH TO DEFAULT AVATAR" with the URL of your default avatar. (I'd upload it as an extra file of your comic.)

Note that the removal of the first and last lines from the first code is intentional.
_______________________
19th Sep 2011, 11:16 PM #4
TanteiSakana

User avatar
Posts: 606
Registration date: 29th Dec 2009
To make edit/delete buttons only show up for the people they apply to:

Add this once anywhere:
<script type="text/javascript" src="http://comicfury.com/getcfdata.php"></script>


Replace the defualt code for the edit/delete links with this:
<script type="text/javascript">
	<!--
	/*
		COMMENT BUTTON DISPLAY SCRIPT V1
		By TanteiSakana
	*/

	// Only display edit/delete buttons if you're logged in.
	if (comicfury.loggedin == 1) {
		// If the person who wrote the comment is logged in, write
		// the edit button code for that comment to the page.
		if (comicfury.user.username == "[v:l.authorname]") {
			document.write("<a href=\"[v:l.editlink]\" onClick=\"var new_window = window.open('[v:l.editlink]', '.', 'height=320, width=420'); new_window.focus(); return false;\">Edit</a> ");
		}
		
		// If the person logged in is an author of the comic that can
		// delete comments, display the delete button.
		//
		// This has to be manually specified, since you can't get a list
		// of authors of a comic through JavaScript. (Yet.) If you're the
		// only author of your webcomic, just replace YOUR-USERNAME
		// with your username. Otherwise, separate them with the JavaScript
		// OR statement, like this:
		//
		//	(comicfury.user.username == "AUTHOR-1" || comicfury.user.username == "AUTHOR-2" . . . )
		//
		// ....and so on and so forth.
		if (comicfury.user.username == "YOUR-USERNAME") {
			document.write("<a href=\"[v:l.deletelink]\" onClick=\"var new_window = window.open('[v:l.deletelink]', '.', 'height=320, width=420'); new_window.focus(); return false;\">Delete</a> ");
		}
	}
	//-->
</script>


(...I might've commented it a bit much.)

It's pretty basic JavaScript, so it shouldn't be too hard to mess with it if you want.

Kyo says this is coming as a feature later, but I'm impatient.
_______________________
image
imageimageimageimageimageimage
image image image
19th Sep 2011, 11:37 PM #5
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
uhm there's kind of that already, I'm not quite sure why I never finished implementing this

basically look at this:
http://comicfury.com/cflayoutjs.js.php?cc=inline&wcid=1 (change wcid to your webcomicid)

you can kinda see where I was going with this already, basically it adds some CSS to the page which just needs to be applied to the button as a class

it'll do what yours does basically.

there's these classes;
cc, for comments in general (the wrap for both edit and delete links) -- this was mostly in case you have a box around the comments. It's kinda redundant now seeing as how we added replies
cce, which is the generic class for editing comments (hidden by default)
ccd, same for deletion
cce[userid], ccd[userid], to make the ones that YOU wrote not hidden

I guess I kinda stopped at the point at which I was going to add a thing that generates the class-string for you to the comment loops

Still, the functionality is there. The variable for author ids in comments is "authorid"

edit: BTW, getcfdata is redundant if you include cflayout.js, which all default layouts do for quite a while now
_______________________
hello
30th Oct 2011, 1:50 PM #6
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
<script type="text/javascript">
document.onkeydown = function(e) {
	e = e || window.event;
	var keycode = e.keyCode || e.which;

	var nextpg = "[v:nextcomic]";
	var prevpg = "[v:prevcomic]";

	if (keycode == 39) {
		if (nextpg) window.location = nextpg;
		return false;
	} else if (keycode == 37) {
		if (prevpg) window.location = prevpg;
		return false;
	}
};
</script>


to use arrow keys to navigate. Just paste this on the top of the comic strip display layout section

some thanks to killersteak
_______________________
hello
7th Nov 2011, 6:29 PM #7
Meed

User avatar
Posts: 1424
Registration date: 24th Aug 2011
Location: Huntington Beach, California
Wow. This is great. Thanks!
_______________________
Buttchinians Unite
18th Dec 2011, 12:43 PM #8
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
_______________________
hello
17th Jan 2012, 7:57 AM #9
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
This is now in all default layouts, so if you edited your layout before yesterday, you will need to add it manually:
comic bookmarks, or: "save my place"

code for the links:
      <div id="saveplace"><a href="#" onclick="savePlace(this,[v:comicid]);return false;">Save My Place</a> | <a href="#" onclick="loadPlace();return false;">Load My Place</a></div>


note you will need to slightly edit your overall also

find:
<script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php"></script>


replace with:
  <script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php?wcid=[v:webcomicid]"></script>



for those who have it, here is a useful trick:

By default, the "Save my place" link will changed to "Saved" if clicked. This may not be how you want it to behave, if, for example, you have icons for the save my place gig.

If you make a javascript function called "customOnSave" that accepts one element, which is the link element, you can make a custom behaviour

for example:
<script type="text/javascript">
function customOnSave(link) {
	alert('Bookmark saved');
}
</script>


or even if you just want the text "Saved" to be in a different language

<script type="text/javascript">
function customOnSave(link) {
	link.innerHTML = 'Gespeichert';
}
</script>


just toy with it a bit
_______________________
hello
23rd Jan 2012, 1:55 PM #10
AJHunter
Witness of History
User avatar
Posts: 933
Registration date: 6th Sep 2011
Location: funky town
This is one that I use. I've gotten feedback ranging from "Annoying" to "Awesome" on the...
ANIMATED TITLE THINGGY SCRIPT

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginn
//THIS SCRIPT IS FROM AN OLD VERSION OF NEWRAFAEL.COM WHICH IS A TOTES COOL SITE.
var message = new Array();
// Set your messages below -- follow the pattern.
// To add more messages, just add more elements to the array.
message[0] = "";
// Set the number of repetitions (how many times the arrow
// cycle repeats with each message).
var reps = 2;
var speed = 200;  // Set the overall speed (larger number = slower action).
// DO NOT EDIT BELOW THIS LINE.

var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doTheThing() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 35) { s = 1;}

// you can fiddle with the patterns here...

if (s == 1) { document.title =  'H'+T+''; }
if (s == 2) { document.title =  'Hu'+T+''; }
if (s == 3) { document.title =  'Hun'+T+''; }
if (s == 4) { document.title =  'Hunt'+T+''; }
if (s == 5) { document.title =  'Hunte'+T+''; }
if (s == 6) { document.title =  'Hunter'+T+''; }
if (s == 7) { document.title =  'Hunter\''+T+''; }
if (s == 8) { document.title =  'Hunter\'s'+T+''; }
if (s == 9) { document.title =  'Hunter\'s '+T+''; }
if (s == 10) { document.title =  'Hunter\'s F'+T+''; }
if (s == 11) { document.title = 'Hunter\'s Fr'+T+''; }
if (s == 12) { document.title = 'Hunter\'s Fra'+T+''; }
if (s == 13) { document.title = 'Hunter\'s Frac'+T+''; }
if (s == 14) { document.title = 'Hunter\'s Fract'+T+''; }
if (s == 15) { document.title = 'Hunter\'s Fractu'+T+''; }
if (s == 16) { document.title = 'Hunter\'s Fractur'+T+''; }
if (s == 17) { document.title = 'Hunter\'s Fracture'+T+''; }
if (s == 18) { document.title = 'Hunter\'s Fractured'+T+''; }
if (s == 19) { document.title = 'Hunter\'s Fractured '+T+''; }
if (s == 20) { document.title = 'Hunter\'s Fractured J'+T+''; }
if (s == 21) { document.title = 'Hunter\'s Fractured Jo'+T+''; }
if (s == 22) { document.title = 'Hunter\'s Fractured Joh'+T+''; }
if (s == 23) { document.title = 'Hunter\'s Fractured John'+T+''; }
if (s == 24) { document.title = 'Hunter\'s Fractured Johns'+T+''; }
if (s == 25) { document.title = 'Hunter\'s Fractured Johnso'+T+''; }
if (s == 26) { document.title = 'Hunter\'s Fractured Johnson'+T+''; }
if (s == 27) { document.title = 'Hunter\'s Fractured Johnson'+T+''; }
if (s == 28) { document.title = 'Hunter\'s Fractured Johnson'+T+''; }
if (s == 29) { document.title = 'Hunter\'s Fractured Johnson'+T+''; }
if (s == 30) { document.title = 'Hosted at'+T+''; }
if (s == 31) { document.title = 'Hosted at'+T+''; }
if (s == 32) { document.title = 'Hosted at'+T+''; }
if (s == 33) { document.title = 'ComicFury.com'+T+''; }
if (s == 34) { document.title = 'ComicFury.com'+T+''; }
if (s == 35) { document.title = 'ComicFury.com'+T+''; }
if (C < (35 * reps)) {

sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doTheThing();
   }
}
doTheThing();
//  End -->
</script>

Just put that anywhere between the <head> tag, and you're good to go, with some minor edits. Specifically to what is said in the title bar.

You see that big ol' array?
if (s == 1) { document.title =  'H'+T+''; }
if (s == 2) { document.title =  'Hu'+T+''; }
if (s == 3) { document.title =  'Hun'+T+''; }
etc...

You can change that to be any length. Just update the numbers in the array, and the number in this line:
if (s > 35) { s = 1;}

And this line:
if (C < (35 * reps)) {


As is so clearly stated in the beginning of the script, this isn't my own work. I'm just posting it here for easy access.
_______________________
image
Twitter | Twitch | RedBubble | GNU Terry Pratchett | CF Chat
I have a crush on every cute avatar
29th Jan 2012, 3:36 AM #11
AndreStv

User avatar
Posts: 546
Registration date: 3rd Aug 2011
Location: The Land of Bananas
Don't know if anybody noticed it, but I use this:
CODE FOR A RANDOM HEADER ON LOAD (every time a page is loaded the header/banner changes [like the alligator of ComicFury][actually it drafts an image from the ones you linked, so sometimes it will not change]).

Put this inside your <head> tag in "Overall":
<script type="text/javascript">
/*<![CDATA[*/
var el="header";
var bgimg=new Array("link to the first image", "link to the second image", "link to the third image", "and so on...");
var random=Math.round((bgimg.length-1)*Math.random());
var cssStr="#"+el+" { background: url("+bgimg[random]+") no-repeat top center } ";
var style=document.createElement("style");
style.setAttribute("type","text/css");
if(style.styleSheet){
  style.styleSheet.cssText=cssStr;
}else{
  var cssText=document.createTextNode(cssStr);
  style.appendChild(cssText);
}
document.getElementsByTagName("head")[0].appendChild(style);
/*]]>*/
</script>


You can do the same for other parts of your layout, just change this:
var el="element where you want to apply your randomness"


This isn't mine. Here's the source (with a better explanation and a thing that generates the code with the image links you provide).
29th May 2012, 1:48 PM #12
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
Just something neat I built into the new template system just now (because it was requested a while ago)

This is what a normal loop looks like:
[l:loopname]


now here is how you reverse it:
[l:@loopname]


this will make the last item show first, et cetera
_______________________
hello
30th May 2012, 4:12 PM #13
Ephemeros

User avatar
Posts: 1256
Registration date: 12th Aug 2011
Location: England
Kyo:
  <script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php?wcid=[webcomicid]"></script>



Should this now be [v:webcomicid]?
Well, I mean this applies in lots of the above code. But just to clarify, ALL variables should now have the v: prefix, right?
_______________________
30th May 2012, 6:14 PM #14
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
yes. And loop variables are [v:l.loopvariable]

syntax documentation can be found in a link in the news post about the engine.
_______________________
hello
2nd Jun 2012, 8:59 AM #15
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
you can now compare in conditions.

Take this example for the comic strip display:
comments>18?: [c:comments>18]yes[/]<br />
comments<18?: [c:comments<18]yes[/]<br />
comments=18?: [c:comments=18]yes[/]<br />
comments!=18?: [c:comments!=18]yes[/]<br />


will show the first yes, if there are more than 18 comments
the second if there are less
the third if there are 18 comments
the fourth if there are not exactly 18 comments (i.e. less or more than 18)


this works with text too, e.g.

prevcomic = /comics/23?: [c:prevcomic=/comics/23]yes[/]<br />
prevcomic != /comics/23?: [c:prevcomic!=/comics/23]yes[/]<br />


will show

yes
no

if on page 24, otherwise

no
yes

(of course it would be easier and more reliable to check for [c:comicnumber=23], but this is just to demonstrate it works with text)


Naturally this works with loop conditions as well. Take the comment loop for example:
[c:l.authorname=Kyo]this comment was written by a little shit[/]<br />


this will make any comment left by the user kyo precede with "this comment was written by a little shit"
_______________________
hello
2nd Jun 2012, 9:02 AM #16
MatthewJA
Usertitle Hater
User avatar
Posts: 18998
Registration date: 26th Sep 2010
Location: Australia
outdated ;-;
_______________________
OnlyFoolsAndVikings:god, upon creating life: [matthewja voice] its a feature
3rd Jun 2012, 9:19 AM #17
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
uh, matt, the archive loops both have a variable called [v:l.comicimgurl]
_______________________
hello
3rd Jun 2012, 9:20 AM #18
MatthewJA
Usertitle Hater
User avatar
Posts: 18998
Registration date: 26th Sep 2010
Location: Australia
fiiiine, I'll make something else

e: be prepared for unbelievable awesomeness

e: alright, how about this one
mirroring a comic from another comic?

you could just use an iframe I guessssssss but what if you want the other comic to keep working?

on an extrapage of your site:
<p>
	<style type="text/css">
body {
 margin:0;
 padding:0;
}
display {
 width:100%;
 height:80%;
}
nav {
 width:100%;
 height:20%;
}	</style>
</p>
<div id="display">
	&nbsp;</div>
<div id="nav">
	&nbsp;</div>
<script>
var get = window.location.search.replace( "?", "" );
var intGet = parseInt(get, 10);
var next = intGet + 1;
var prev = intGet - 1;
document.getElementById('display').innerHTML = '<iframe src="http://jradeiswrong.cfw.me/viewcomic?' + get + '" frameborder="0" scrolling="auto" height="80%" width="100%"></iframe>';
document.getElementById('nav').innerHTML = '<a href="/jiw?' + prev + '">Previous</a> <a href="/jiw?' + next + '">Next</a>';
</script>
<p>
	&nbsp;</p>

change jiw to the url of your extrapage

meanwhile, on the comic you are going to mirror, make an extra page called viewcomic

give it this code:
<script>

var get = window.location.search.replace( "?", "" );
var link = '/comics/' + get;
	var comicPage = new XMLHttpRequest();
	var regex = /\/images\/comics\/(.*?)"/;
	var commentsRegex = / /;
	comicPage.open("GET", link, true);
	comicPage.onreadystatechange = function() {
	  if (comicPage.readyState === 4) {
		if (comicPage.status === 200) {
			allHTML = comicPage.responseText; 
			var comicURL = allHTML.match(regex)[0];
document.write('<img src="' + comicURL + '">');
		}
	  }
	}
	comicPage.send(null);

</script>


format your frame and you are done

now someone give me something more useful to code
_______________________
OnlyFoolsAndVikings:god, upon creating life: [matthewja voice] its a feature
3rd Jun 2012, 2:10 PM #19
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
you can now compare variables to each other

[c:comicwidth=v:comicheight]comic width and height are the same[/]
[c:comicwidth>v:comicheight]comic width is bigger than height[/]

_______________________
hello
5th Jun 2012, 11:37 AM #20
Kyo
family life
User avatar
Posts: 17734
Registration date: 6th Jul 2008
Location: Germany
Only showing 5 comments and then a link to show (expand) the rest of them:

After
[l:comments]

paste:
[c:l.aiteration=5]<div style="display:none;" id="hidec">[/]


after the closing tag of the comments loop, paste:
[c:l.aiteration>4]</div><a href="#" onclick="document.getElementById('hidec').style.display = 'block';this.style.display = 'none';return false;">Show more comments</a>[/]


this is a fairly simplistic mockup, but you get the point. (This is also showcasing how you can use loop variables after a loop has ended, for your own benefit)
_______________________
hello
Forum > Layouts, HTML, CSS & Javascript > Random code snippet archive
Pages: [1] [2]