cZarte Design » Tutorials

My first unobtrusive JavaScript

czarte — Wed, 28 Apr 2010 09:40:51 +0000

First realy unobtrusive JavaScript using Jquery.

In <head> area in our HTML document we link in twho files:

1) jquery latest

2)unobtrusive script

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="mujskript.js"></script>

mujskript.js contains javaScript, which is trigered all needed elements from outside, so we can clen “onMouseOver” and so from our HTML .

 $(document).ready(function(picshow){
        $(".post").hover(
          function () {
            var postID = this.id;
            $("#image-" + postID).parent().animate({opacity: "0.95"}, 1);
            $("#image-" + postID).attr("style","z-index: 5");
            $("#image-" + postID).parent().animate({opacity: "1"}, "fast");
          },
          function () {
           var postID = this.id;
           $("#image-" + postID).attr("style","z-index: 1");
          }
        );
    });

In HTML we will create only structure with IDs and CLASSes.

<div class="widget thin">
 <div id="wrapimages">

  <div id="postmenu">

  <ul>
    <li><a class="post" id="post-73" href="http://www.domena.cz/kategorie/stavby/
         hotely/hotel-savanah/" title="Hotel Padova">Hotel Padova</a></li>
    <li><a class="post" id="post-84" href="http://www.domena.cz/kategorie/
         stavby/hotely/hotel-thalia-eurostar/" title="Hotel Euroforte">Hotel Euroforte</a></li>
  </ul>
  </div>

  <h2 class="nodisplay">Hotel Savanah</h2>
  <img src="http://www.domena.cz/uploads/StatueDome.jpg" alt="" id="image-post-73" />
  <h2 class="nodisplay">hotel thalia eurostar</h2>
  <img src="http://www.domena.cz/uploads/301_2Exterior_thalia.jpg" alt="" id="image-post-84" />
  </div>

 <div class="cleaner">&nbsp;</div>

 </div>
</div>

And in CSS we`ll define selectors.

#wrapimages {position: relative;}
#wrapimages img {position: absolute;}
#wrapimages #postmenu {position: absolute; z-index: 20;}

Add post in WordPress admin

czarte — Tue, 26 Jan 2010 15:08:51 +0000

Today we get focus at adding post in WordPress admin. Basic login supose to be at www.mydomain.com/wp-admin, there we insert login name and password and than press button under form.

At picture no.1 we can watch basic dashboard of administration. At left side is situated basic menu where are selection of basic fields of actions posibly used for web enhancement or maintainance.

At picture we can see sign on the item “posts” – “add new” which will send us to page with input fields for new post at website.

At next picture we will see this form for add new post. Here we have signs at form fields, which will be described in next step.

1) Title of post

2) Uploading media files

3) Switch between visual and html editor

4) Control elements od visual editor

5) Body of the Post

6) Excerpt of post – if empty and template supports excerpt, but without condition to show alternate content, will be shown part of the body of the Post. Approx. 50 words.

7) Here you can add trackback for quoted websites

Custom fields must be supported by theme. Thane we can add here plain text nor html

9) Name of custom field – must be supported in template. Contain some kind of name, which point to some content of custom fields. You can fill under one name many content, and if is supported in template, you can print all of them on page or post, what ever you want. If some fields alredy attached to any Post on your page, you can select some of them to attache more of these fields to this post we are editing. If we want to attach brand new field with different name not exist in this select box, we can press “enter new” link under this area.

10)Content of custom field – must be supported in template. All text, hyperlinks, html and so could be entered

11) Button for attaching field to the Post.

12) Here you can allow comments and trackbacks.

13) Attaching the Post to some of the caregories. You can add one post to multiple categories.

14) Tags are banding posts to thematic groups. We can add several posts to one Tag, and if we put some widget to our sidebar, we can show the tag cloud there, possibly known from lot of modern websites.

15) Publishing panel. Here we can publish the Post, change his status as “Pending Preview”, “Draft” , unpublish or delete it.

Tutorial for WP-image-slider

admin — Sun, 11 Oct 2009 10:50:03 +0000

We bringing picture tutorial for use wp-image-slider plugin, which allowed us to enter animated galleries to pages or posts. If we want to create new gallery, od edit complete one, we must go in administration at panel “WP image slider” as we can see at picture no. 1.

picture no. 1

Here, if we alredy have some galleries – see at picture no.2 – we will see list of them, including special tags (wp bracket) /point no. 4/ which allowed us to paste it in post or page to show our gallery in content. We can also use button for edit it, or delete it /no. 2 and 3/. At this page we can find button for create new gallery /no. 1/

pic no. 2

The enviroment of editing and creating galleries looks almost same – see at picture no.3 – so I put here only picture with creation of new gallery. Pictures we can add by checking boxes under picture. In case editing of some existing gallery are included pictures already selected. If we create new gallery, we must enter its name /no. 1/. Than we cane define width and height of gallery /no. 2 and 3/ and at last also align of galery in page /no. 4/. We finish creation by submit it with button under gallery and save that informations /no.5/

pic no. 3