Welcome to page 2. Remember you can request more code samples and I can email these examples to you if you find that easier. It is
very hard to include everything I have done and most code I have done is not allowed to be shared due to contracting.
There will be more coming soon!
Eric
Ivan
SoukenkaWeb Developer & Computer Specialist
Na Panenske 1800/6
Roztoky U Prahy
252 63 Czech Republic
contact form
contact form
Translate to Czech
Code Snippets
FreeMarker- CSS
- Jquery
Freemarker is a language that works side by side with Java. It is nice to use when working with a team and keeps this separate. The Java coders
at my work do not know Freemarker well so I end up doing all of it. This is not a well known language but is used by many companies. The best
way to explain it would be a light version of PHP. You still use functions, if statements, loops, trim strings, do math variables, and much more.
The best way to show you is by letting you browse some of the code I have written at work. For anyone that knows PHP you will understand everything
in this code. I can't provide much as Newstin owns this code but here is a small snippet releasing none of there personal information. I am an expert
in this language have read the manual up and down and written newstin.com with this language.
Freemarker functions.pdf
Freemarker functions.pdf
Any web developer knows CSS. I am extremely proficient in CSS and consider it one of my strongest languages. I write very clean and
optimized CSS that meets W3C standards and is cross browser compliant. It is important to me also to keep CSS code neat and well thought out
so that sites can easily be modified. I can list off the top of my head almost every CSS parameter. There is not A lot of web coders that will
tell you they really understand CSS but I can.
I can't post the code from Newstin My current place of employment but everything you see there was written by me. However still in the process of optimizing it and splitting it up you will see allot of great skills here. This has been the HARDEST CSS job I have ever done because this site uses the same CSS for several languages including Arabic. And wow is Arabic CSS challenging. I have to always think about how text will be longer in other languages. I am assuming if your reading this you know how to view CSS from another site so feel free to go check that.
Couple of different sites of mine CSS code
I can't post the code from Newstin My current place of employment but everything you see there was written by me. However still in the process of optimizing it and splitting it up you will see allot of great skills here. This has been the HARDEST CSS job I have ever done because this site uses the same CSS for several languages including Arabic. And wow is Arabic CSS challenging. I have to always think about how text will be longer in other languages. I am assuming if your reading this you know how to view CSS from another site so feel free to go check that.
Couple of different sites of mine CSS code
/* THIS PAGE */
body {background-color:#6E7D8B;}
#pageTable {background-color:#6E7D8B;width:950px;}
ul { padding:0px;margin:0px; }
.left ul li img,.right ul li img { width:15px;display:none;float:left;margin-top:5px; }
h4 {padding:0px 0px 10px 0px;margin:0px;}
#link { text-decoration:underline;cursor:pointer; }
a {color:navy;}
a:hover {color:#ff6501;text-decoration:none;}
#hide { display:none; }
#header {margin-top:10px;margin-bottom:10px;overflow:hidden;width:980px;}
#header .name {margin-left:50px;float:left;font-size:36px;color:#ff6501;}
#header .title {float:left;text-decoration:underline;font-size:18px;margin:20px 0 0 20px;}
#header .contact {clear:both;font-style:italic;margin-left:50px;}
#menu {float:left;width:230px;}
#menu ul {list-style-type:disc;}
#menu li {margin:0 0 20px 20px;}
#menu .title {font-size:18px;font-weight:800;margin-bottom:10px;}
#contents {float:left;width: 730px;margin-left:20px;}
#contents .title {font-size:22px;text-align:center;font-weight:700;padding:20px;clear:both;}
#contents #threePart .left {width:138px;min-height:500px;float:left;overflow:hidden;color:navy;border-right:1px solid #ddd;margin-right:5px;padding-right:5px;}
#contents #threePart ul {list-style-type:none;}
#contents #threePart li {margin-bottom:10px;}
#contents #threePart .body {float:left;width:350px;overflow:hidden;margin:0 15px 0 15px;font-family:Zapf Chancery, cursive;font-size:20px;}
#contents #threePart .main .help {font-weight:800;color:red;margin-top:60px;width:100%;text-align:center;font-style:italic;}
#contents #threePart .right {float:left;width:148px;min-height:500px;overflow:hidden;color:navy;padding-left:5px;border-left:1px solid #ddd;}
#contents #twoPart .left {float:left;overflow:hidden;width:200px;min-height:500px;border-right:1px solid #ddd;color:navy;}
#contents #twoPart .body {margin-left:20px;width:450px;float:left;overflow:hidden;font-family:Zapf Chancery, cursive;font-size:20px;}
#contents #twoPart .body .moreContact {margin-top:20px;}
#contents #twoPart .body .moreContact h2 {border-top:1px solid #ddd;color:#660066;font-size:1.0em;padding:10px 0px 20px 0px;margin:0px;}
#contents #twoPart ul {clear:left;list-style-type:none;margin-left:15px;}
#contents #twoPart li {margin-bottom:10px;}
#contents #singlePart .body {margin:0px 20px 0px 20px;font-family:Zapf Chancery, cursive;font-size:20px;}
#contents #singlePart ul {clear:left;list-style-type:disc;margin-left:20px;}
#contents #singlePart li {margin-bottom:10px;}
#contents .bottom {padding:20px;font-size:12px;clear:both;text-align:center;color:#ff6501;}
#bottomSpacer {clear:both;text-align:center;width:100%;padding-top:20px;padding-bottom:20px;}
#source {border:1px solid yellow;background-color:black;color:#fff;white-space:pre;height:300px;width:100%;overflow:scroll;}
.pager {margin-top:80px;margin-left:20px;}
.roundedcornr_box_328763 {background: #fff;}
.roundedcornr_top_328763 div {background: url(../images/roundedcornr_328763_tl.png) no-repeat top left;}
.roundedcornr_top_328763 {background: url(../images/roundedcornr_328763_tr.png) no-repeat top right;}
.roundedcornr_bottom_328763 div {background: url(../images/roundedcornr_328763_bl.png) no-repeat bottom left;}
.roundedcornr_bottom_328763 {background: url(../images/roundedcornr_328763_br.png) no-repeat bottom right;}
.roundedcornr_top_328763 div, .roundedcornr_top_328763,.roundedcornr_bottom_328763 div, .roundedcornr_bottom_328763 {width: 100%;height: 20px;font-size: 1px;}
.roundedcornr_content_328763 {margin: 0 20px;}
/*
<div class="roundedcornr_box_328763"><div class="roundedcornr_top_328763"><div></div></div><div class="roundedcornr_content_328763">
</div><div class="roundedcornr_bottom_328763"><div></div></div></div>
*/
/* end of this page */
/* THE BLOG GALAXY ADMIN SECTION THIS IS STILL HEAVILY IN DEVELOPMENT FOR INSTANCE UCCK I USED GREEN FOR A COLOR! */
/*modify builtins*/body {background-color:#e4ffc9;}h1,h2,h3,h4,h5,p {margin:0px;padding:0px;}a{color:#000;}a:hover{text-decoration:none;}input,select,textarea {border: 1px solid #000;background-color: #ccc;margin:0px;}label {font-family: Tahoma, Geneva, sans-serif;font-weight: bold;font-size: 12px;}.submit {border: 2px solid #333;background-color: #862222;font-family: Courier New, Courier New, Courier, monospace;color: #fff;}input.btnhov{border-top-color:#c63;border-left-color:#c63;border-right-color:#930;border-bottom-color:#930;background-color:#FFFF99;}
#loading {background:url(../images/000033.gif);position:fixed;left:0px;top:0px;z-index:100;width:100%;height:100%;margin:0px;padding:0px;}
#loadingImage {width:100px;height:100px;background:url(../images/ajax-loader.gif) no-repeat;position:absolute;left:0px;top:0px;}
#adminMenu {}
#informationWrapper {border:10px solid #c5d885;background-color:#fff;color:black;text-align:center;color:#000;height:40px;width:100%;margin-bottom:20px;}
#informationWrapper #status {line-height:40px;float:left;margin-left:20px;margin-top:auto;}
#informationWrapper #username {line-height:40px;float:left;margin-left:20px;}
#informationWrapper #editorInfo {line-height:40px;float:right;}
#informationWrapper #elm {display:inline;color:green;vertical-align:super;}
#informationWrapper #page_name {color:green;display:inline;vertical-align:super;}
#pageSelector {background-color: #c5daaf;width:330px;border:1px solid #000;}
#pageSelector .pageTitle {background-color:#f1ffd8;width:330px;height:30px;clear:both;color:green;text-align:center;font-size:18px;cursor:pointer;}
#pageSelector #ssSelectorContainer { background-color:#6f6363;width:328px;height:520px;float:left;border:1px solid purple; }
#pageSelector #ssSelectorContainer img {clear:left;float:left;padding-top:2px;padding-bottom:2px;border:1px solid #6f6363;}
#pageSelector #ssSelectorContainer img:hover {border:1px solid red;}
#pageSelector #ssSelectorContainer #ssHLRF .leftWrapper , #pageSelector #ssSelectorContainer #ssHLRF .rightWrapper , #pageSelector #ssSelectorContainer #ssHLRF {float:left;}
#pageSelector #ssSelectorContainer #ssWidgets {float:left;margin-top:20px;background-color:#cecac7;}
#pageSelector .modifyPosts {color:#000;border:5px solid #c5d885;margin-top:10px;margin-bottom:10px;clear:left;float:left;width:125px;background-color:#fff;}
#newPage {background-color:#c5d885;}
/*you must edit advanced menu inline*/
#newPostExtras {margin-left:25px;margin-bottom:10px;}
#editor , #rawEditor{border:1px solid #fff;width:450px;margin-left:20px;overflow:hidden;color:#000;}
#saveReload {font-size:16px;margin:5px;}
#blogBrowser {overflow:scroll;margin:auto;position:relative;top:5px;width:400px;height:200px;background-color:#fff;}
/* yep the end lots more examples are available. */
As part of my dynamic site that allows several users I had to create a customizable CSS file. This file will parse a default unchangeable CSS and implement changes with MySQL and Javascript to generate a new CSS file that works just with there site. This shows extreme skills in CSS and many other languages. It is too long to post here but feel free to right click the link below and save it to view on your own.
Powerful script Right click this to save.
Jquery is a Javascript library that I have been learning. I am starting to really realize the potential this language has. It organizes
coding saves page size and is written extremely well. For people that do not know what Jquery is but know Javascript I think you will look
at the following code and go WOW!
jquery.pdf
Click here to open in a popover window for easier viewing
jquery.pdf
Click here to open in a popover window for easier viewing
/* THIS SITES JQUERY */
$(document).ready(function() {
$(".left li , .right li").click(function() {
if(this.className!='') {
$(".body").children().hide();
var toggler='.body .'+this.className;
$(toggler).fadeIn();
}
});
$(".left li , .right li").hover(function() {
if(this.className!='') {
var hoverler='.'+this.className+' img';
$(hoverler).show();
}
},
function(){
if(this.className!='') {
var hoverler='.'+this.className+' img';
$(hoverler).hide();
}
}
);
});
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
/* YEP THATS THE END SO SMALL SIMPLE AND REALLY POWERFUL other random snippets below */
/*MORE BELOW FROM ANOTHER SITE*/
$("#search-toggle-drop").mouseout(function() {
arrDrop[1]=setTimeout('$("#search-toggle-drop").hide()',closeTimer);
});
$("#search-toggle-drop").mouseover(function() {
clearTimeout(arrDrop[1]);
});
$("#hot-topics-toogle").click(function() {
$("#hot-topics-drop-down").toggle();
arrDrop[2]=setTimeout('$("#hot-topics-drop-down").hide()',hideTimer);
});
$("#hot-topics-drop-down").mouseout(function() {
arrDrop[2]=setTimeout('$("#hot-topics-drop-down").hide()',closeTimer);
});
$("#hot-topics-drop-down").mouseover(function(){clearTimeout(arrDrop[2]);});
$(".sort-li").click(function() {
$(".sort-li").children("ul").hide();
$(this).children("ul").toggle();
clearTimeout(arrDrop[3]);
arrDrop[3]=setTimeout('$(".sort-li").children("ul").hide()',hideTimer);
});
$(".sort-li").children("ul").mouseout(function() {
arrDrop[3]=setTimeout('$(".sort-li").children("ul").hide()',closeTimer);
});
$(".navi").children("ul").children("li").children("span").click(function() { <#-- written differently due to possibility of multiple pull down boxes on one page with same class -->
thisHolder=$(this).parent().children("ul"); <#-- needed because this.parent() doesn't exist after timer goes off below -->
$(".navi").children("ul").children("li").children("ul").hide();
clearTimeout(arrDrop[4]);
thisHolder.toggle();
arrDrop[4]=setTimeout('thisHolder.hide()',hideTimer);
thisHolder.mouseout(function() {
arrDrop[4]=setTimeout('thisHolder.hide()',hideTimer);
});
thisHolder.mouseover(function() {
clearTimeout(arrDrop[4]);
});
});
This is probably boring for everyone but me.
© 2008 Cyclon Solutions All Rights Reserved.
