blog.cross-bytes.com

Archive: web

Sliding bar menu

Posted on 12 May 2008 Comments (0)
Tags: web

In this section I will write about how to make sliding bar menu with css.

CSS script :

body{
position:relative;
paddign:0px;
font-size:100%;
}

h2{
color:#FFFFFF;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold;
}

h2 span{
font-size:105%;
font-weight:normal;
}

ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
}

li a{
width:100%;
}

li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

li a:hover{
color:#FFFFFF;
text-decoration:underline;
}

#sideBar{
position: absolute;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:200px;
}

And here the HTML script :

<div id=”sideBar”>

<a href=”#” id=”sideBarTab”>
<img src=”images/slide-button.gif” alt=”sideBar” title=”sideBar” />
</a>

<div id=”sideBarContents” style=”width:0px;”>
<div id=”sideBarContentsInner”>
<h2>side<span>bar</span></h2>

<ul>
<li><a href=”#”>Link One</a></li>
<li><a href=”#”>Link Two</a></li>
<li><a href=”#”>Link Three</a></li>
<li><a href=”#”>Link Four</a></li>
<li><a href=”#”>Link Five</a></li>
</ul>

</div>
</div>

</div>

Building dynamic website with CMS Joomla

Posted on 03 April 2008 Comments (0)
Tags: web

Joomla! is a free, open source content management system written with PHP for publishing content on the world wide web and intranets, using the MySQL database. Joomla! includes features such as page caching to improve performance, RSS feeds, printable versions of pages, news flashes, blogs, polls, website searching, and language internationalization. Joomla! is licensed under the GPL.

Joomla! is a free, award-winning content management system written in PHP that allows users to easily publish their content on the World Wide Web and intranets. It is used all over the world for everything from simple websites to complex corporate applications. Joomla! is easy to install, simple to manage, and reliable.

So, if you wanna know about joomla, here’s I want to share e book how to building website with Joomla.

Download

Free download e book

Posted on 31 March 2008 Comments (0)
Tags: web

We built a website that dedicated to people who love read. Those site content of many ebooks, Fiction and non fiction. The collection includes classic works of Literature, Philosophy, Science, History, novel ect. You can download unlimited ebooks for free anytime to anyone who would like to read it. You’re welcome to disribute it freely as well by any method you prefer.

Okey, enjoy download there

Must read

Posted on 30 March 2008 Comments (0)
Tags: web

Well.. I found good website that you must open. It inspired me how to design cool website..

Just open Smashing magazine

SEF for wordpress

Posted on 19 March 2008 Comments (0)
Tags: web

If you used wordpress for cms, sometimes you will find the directory not search engine friendly (SEF). For example http://blog.cross-bytes/p-2?..

For wordpress it’s to easy to configure permalink to use SEF or short URL. Just go straight to Options menu, click permalink, in custom structure add “/%postname%.html”

If you like, you may enter custom bases for your category and tag URLs here. For example, using /topics/ as your category base would make your category links like http://example.org/topics/uncategorized/. If you leave the category base blank the defaults will be used

It’s so easy, isn’t?

Drad and drop menu

Posted on 16 March 2008 Comments (0)
Tags: web

One day, we’ve some project to built web desktop. We want to the menu in desktop can be drag and drop. So I started to search how to image can be drag and drop in javascript. So here’s the script :

first, you can add the script below in your HTML document inside the HEAD tags <head> and </head>

<style>
<!–
.dragme{position:relative;}
–>
</style>
<script language=”JavaScript1.2″>
<!–

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? “HTML” : “BODY”;

while (fobj.tagName != topelement && fobj.className != “dragme”)
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className==”dragme”)
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function(”isdrag=false”);

//–>
</script>

Note : which the class “dragme” to whichever image you wish draggable

How to stream music or audio from your website

Posted on 09 February 2008 Comments (0)
Tags: web

When we get project Alexnoerdin personal website, we was little bit confuse. Alexnoerdin want to those website could stream music. We use Joomla for cms, and of course there lot of modul or component that provide audio stream. But, I feel that there’s no one can suitable with our design.

About 3 days I was search how to supplied audio stream with less source. And then after 3 days I get *trink..trink..* I made audio stream with m3u files. And here’s the how to..

1. Save your MP3 file to the same directory where you will be playing the sound from, or a sound directory which you know the URL for already,

2. Open up a notepad by clicking Start => Programs => Accessories => Notepad

3. Type in only the exact Address or URL of your MP3 file.

* Type it in as simple as this:

http://www.domain.com/sound/music.mp3

where the domain is your domain, the sound folder is where you placed your MP3, and the music.mp3 is your mp3 file.

*Save this file as music.m3u . Upload this file into the directory where you will place your sound.

4. Open your page up in an editor such as Notepad that will allow you to edit the code on the page.

There is no limit to how may songs you can include in an individual playlist. In a playlist with more than one song, each song is buffered and streamed individually. Therefore, it makes no difference how many songs are referenced in one playlist file. Each song will play one after the other without user intervention. Also, in a playlist with more than one song, the site visitor can use the Media Player controls to skip forward or back a track (song) in the playlist, and also has the option of “previewing” a short clip or a series of short clips of each song in the playlist.

Once you have created your .m3u playlist, upload the file to the same directory where your music file is located.

So.. the problem solved !

SEF for joomla

Posted on 08 February 2008 Comments (0)
Tags: web

Are you built website with Joomla cms? If yes you should know that the default path of Joomla URL are not search engine friendly and easier to know the engine and extension. For example http://www.id-joomla.com/component/option,com_frontpage/Itemid,1/
Of course the search engine hate dynamic pages with lots of parameters.

In this tutorial we describe specific Joomla techniques to convert the above example to this http://www.id-joomla.com/home.html

Joomla default installation allows you to implement basic SEF addresses. This can be done by doing the following:

Using an FTP client or otherwise rename the htaccess.txt file in the root folder of the installation to .htaccess.
Switch on SEF urls in the Global Configuration > SEO
Switch on dynamic page titles, for your titles to reflect the title of your current content item.

The sh404SEF component is a great component for converting dynamic addresses to look like static addresses.

OpenSEF

Download the component from the above page.
Install the component as per standard procedure via the admin backend (Installers > Components > and choose the component zip file.
Change your .htaccess file such that 3rd party SEF components are enabled:

########## Begin - Joomla! core SEF Section
############# Use this section if using ONLY Joomla! core SEF
## ALL (RewriteCond) lines in this section are only required if you actually
## have directories named ‘content’ or ‘component’ on your server
## If you do not have directories with these names, comment them out.
#
#RewriteCond %{REQUEST_FILENAME} !-f
#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteCond %{REQUEST_URI} ^(/component/option,com) [NC,OR] ##optional - see notes##
#RewriteCond %{REQUEST_URI} (/|\.htm|\.php|\.html|/[^.]*)$ [NC]
#RewriteRule ^(content/|component/) index.php
#
########## End - Joomla! core SEF Section

########## Begin - 3rd Party SEF Section
############# Use this section if you are using a 3rd party (Non Joomla! core) SEF extension - e.g. OpenSEF, 404_SEF, 404SEFx, SEF Advance, etc
#
RewriteCond %{REQUEST_URI} ^(/component/option,com) [NC,OR] ##optional - see notes##
RewriteCond %{REQUEST_URI} (/|\.htm|\.php|\.html|/[^.]*)$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.php
#
########## End - 3rd Party SEF Section

As can be seen in the above code the core SEF have been remarked (#), and the 3rd Party SEF have been enabled.
Click on Components > sh404SEF > sh404SEF Configuration in the backed and enable the component. The rest of the options by default are mostly correct unless you have done any particular changes. You can investigate and set to your liking.
Save the configuration and browse through all pages in the your website. On each access of a non-friendly url, the component creates a new friendly URL.
If you don’t like the addresses which have been created you can go to Components > sh404SEF > View / Edit SEF URLs and change them to your liking.
Always remember that you do not have to include your home URL in any of the friendly URLs. The component will do it automatically.