jQuery and CSS menu this is really simply one :)
March 4th, 2009 by adminLet’s begin 
what we gonna do :
a simple vertical menu for the small site
what we need :
jQuery library and little CSS file
css :
<style type=”text/css”>
<!–
body{
font-size:12px;
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
}
ul, li{
margin:0;
padding:0;
list-style:none;
}
.menu_1 {
display:none;
width:199px;
border-right:1px solid #cdcdcd;
border-bottom:1px solid #cdcdcd;
border-left:1px solid #cdcdcd;
}
.menu_1 li{
background-color: #CCC;
}
.menu_1 li.alt{
background-color: #FFF;
}
.menu_1 li a{
color:#333;
text-decoration:none;
padding:5px;
display:block;
}
.menu_1 li a:hover{
padding:10px 5px;
font-weight:bold;
}
–>
</style>
now we gonna add jQuery :
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>
small javascript :
<script type=”text/javascript”>
$(document).ready(function () {
$(”ul.menu_1 li:even”).addClass(”alt”);
$(’img.menu_main’).click(function () {
$(’ul.menu_1′).slideToggle(’medium’);
});
$(’ul.menu_1 li a’).mouseover(function () {
$(this).animate({ fontSize: “14px”, paddingLeft: “15px” }, 50 );
});
$(’ul.menu_1 li a’).mouseout(function () {
$(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
});
});
</script>
and our html code :
<body>
<img src=”http://blog.branding-studio.com/examples/m.png” width=”201″ height=”27″ class=”menu_main” />
<ul class=”menu_1″>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item2</a></li>
<li><a href=”#”>Item3</a></li>
<li><a href=”#”>Item4</a></li>
</ul>
</body>
thats all !!!!:)
jQuery menu few simple steps ;)
January 29th, 2009 by adminhere is an example of code if you can’t understand something pls ask me 
but i think this is very simple for you we you will use just really small javascript and css that’s all
what you gonna do :
1 – made html file for example “menu.html”
2 – open file “menu.html”
3 – copy this html code below
4 – paste this code into your “menu.html” file
5 – save “menu.html”
6 – run it in FireFox for example
7 – made a changes in this code if you need it
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Menu Demo</title>
<script src=”http://jquery.com/src/jquery.js”></script>
<script>
$(document).ready(function(){
$(”dd:not(:first)”).hide();
$(”dt a”).click(function(){
$(”dd:visible”).slideUp(”slow”);
$(this).parent().next().slideDown(”slow”);
return false;
});
});
</script>
<style>
body { font-family: Arial; font-size: 12px; }
dl { width: 100px; }
dl,dd { margin: 0; }
dt { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 2px; }
.s { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
.s a { color: #FFF; }
</style>
</head>
<body>
<dl>
<dt><a href=”/”>Menu jQuery</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/12/simple-css-menu/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/12/the-technology-validation-of-the-forms/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/ajax-email-validator-ajax-php/”>Item 3</a></li>
</ul>
</dd>
<dt><a href=”/Menu1/”>Menu1</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/11/your-own-scrollbar-color/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/css-image-effect-you-can-use-it-in-your-gallery/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/some-rules-for-web-designers/”>Item 3</a></li>
</ul>
</dd>
<dt><a href=”/Menu2/”>Menu2</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/7-simple-ways-to-get-repeat-websitetraffic/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/do-you-want-build-your-website-what-do-i-need-to-do-for-star-my-online-project-first-steps/”>Item 2</a></li>
</ul>
</dd>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/how-to-build-a-great-web-site/”>Menu3</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/09/web-design-web-development-seo/”>Menu4</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/4-stages-of-web-site-design/”>Menu5</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/category/for-all/”>Menu6</a></div>
<dt><a href=”/Menu7/”>Menu7</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/what-is-specification-how-its-look-like/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/09/here-some-sites/”>Item 2</a></li>
</ul>
</dd>
</dl>
</body>
</html>
an example
be happy !!!
Simple CSS menu :)
December 19th, 2008 by adminReally simple CSS menu but looking nice
<style type=”text/css”>
<!–
ul.sea{margin:0;padding:0;list-style-type:none;display:block;font: 12px Verdana, Geneva, sans-serif sans-serif;line-height:165%;width:135px;}
ul.sea li{margin:0;padding:0;}
ul.sea li a{display:block;text-decoration:none;color:#ab3b42;padding:0 0 0 20px;width:115px;}
ul.sea li a:active{background:#fff no-repeat 0 9px;}
ul.sea li a:hover{
background:#ab3b48 url(”http://more-bulgaria.com/images/link.png”) no-repeat 0 9px;
color:#fff;
background-position: 0% 50%;
}
–>
</style>
<ul class=”sea”>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Aplication Form</a></li>
<li><a href=”#”>Price-List</a></li>
<li><a href=”#”>Contract</a></li>
<li><a href=”#”>Pers. tour calculation</a></li>
<li><a href=”#”>Guided tours</a></li>
<li><a href=”#”>Contacts</a></li>
<li><a href=”#”>To agencies</a></li>
</ul>
i think you have no questions now
but if you have just mail me
The technology validation of the forms
December 9th, 2008 by adminFirst part :
<script type=“text/javascript”>
//<![CDATA[
function checkform()
{
document.getElementById('urltosend').action="addmess2.php";
document.forms['addform'].target=”process”;
top.document.forms['addform'].submit();
}
//]]>
</script>
…
<form id=“urltosend” name=“addform” method=“post” action=“addmess.php”>
…
<input type=“button” onclick=“checkform()” value=“Отправить данные”>
…
<iframe name=“process” id=“process” width=“0″ height=“0″ style=“visibility: hidden”></iframe>
…
<div id=“alerts”></div>
Second part:
<?php
/*
$alerts.=”Error1<br />”;
$alerts.=”Error2<br />”;
и так далее.
*/
print ‘<script type=”text/javascript”>’.“n”;
print ‘//<![CDATA['."n";
if ($alerts)
{
print "top.document.getElementById('alerts').innerHTML='".$alerts."<br />';"."n";
}
else
{
print "top.document.getElementById('alerts').innerHTML='all is great !<br /><br />';"."n";
print "top.document.getElementById('urltosend').action='addmess.php';"."n";
print "top.document.forms['addform'].target=’_top’;”.“n”;
print “top.document.forms['addform'].submit();”.“n”;
}
print ‘//]]>’.“n”;
print ‘</script>’.“n”;
Just simple example javascript and php
Ajax Email validator :) AJAX PHP
November 17th, 2008 by adminI think the most important aspects of building and processing a form is how you validate data here is a script build via AJAX and PHP with example how to check if your email address is real one :
this is HTML part :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; ” />
<title>Email Validator AJAX and PHP</title>
<script language=”JavaScript” type=”text/javascript”>
var request;
/**
* Load XMLDoc function
* here you need put your backend-script url
*/
function doLoad(url) {
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
request.onreadystatechange = processRequestChange;
request.open(”GET”, url, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject(”Microsoft.XMLHTTP”);
if (request) {
request.onreadystatechange = processRequestChange;
request.open(”GET”, url, true);
request.send();
}
}
}
/**
* Event on request change
*/
function processRequestChange() {
document.getElementById(”resultdiv”).style.display = ‘none’;
abortRequest = window.setTimeout(”request.abort();”, 10000);
// if all is ok
if (request.readyState == 4) {
clearTimeout(abortRequest);
if (request.status == 200) {
document.getElementById(”resultdiv”).style.display = ‘block’;
document.getElementById(”responseHTML”).innerHTML = request.responseText;
} else {
alert(”Sorry can’t receive your dates :n” + request.statusText);
}
}
}
</script>
</head>
<body>
<input type=”text”
id=”emails”
value=”Enter your email pls:”
onFocus=”this.value=”; document.getElementById(’resultdiv’).style.display=’none’;”/>
<input type=”button”
value=”send”
onClick=”doLoad(’q.php?email=’+document.getElementById(’emails’).value);”/><br /><br />
<div id=”resultdiv” style=”display: none;”>
Results:
<span id=”responseHTML”></span>
</div>
</body>
</html>
now we need a php script we will call it q.php:
<?php
/**
* here we receive a headers
*/
header(”Content-type: text/plain; charset=utf-8″);
header(”Cache-Control: no-store, no-cache, must-revalidate”);
header(”Cache-Control: post-check=0, pre-check=0″, false);
$emailw = $_GET["email"];
if (!preg_match(”/^(?:[a-z0-9]+(?:[-_]?[a-z0-9]+)?@[a-z0-9]+(?:[-_.]?[a-z0-9]+(?:[-_]?[a-z0-9]+))?\.[a-z]{2,5})$/”,trim($emailw))){
echo “Pls enter correct email”;
exit;
}
else
{
$email_arr = explode(”@” , $emailw);
$host = $email_arr[1];
if (!getmxrr($host, $mxhostsarr))
{
echo “We try to find $host but can’t .Can you enter another email or check this one pls $emailw”;
exit;
}
getmxrr($host, $mxhostsarr, $weight);
echo “Congratulations your mail is valid : $emailw <br>”;
}
?>
that’s all
if you have any questions pls let me konow Branding-Studio.com
Your own Scrollbar color
November 4th, 2008 by adminIn IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The below CSS shows the relevant CSS properties for scrollbar coloring. Note that if your page uses a doctype that triggers a “Strict” mode in IE, the scrollbar properties need to be assigned to the “HTML” tag instead of the conventional “BODY” in order to work.
The CSS (for non “strict” doctypes):
body{
scrollbar-face-color:#EBF5FF;
scrollbar-base-color:#EBF5FF;
scrollbar-arrow-color:black;
scrollbar-track-color:#F3F3F3;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}
The CSS (for “strict” doctypes):
html{
”
”
}
CSS image effect ;) you can use it in your gallery;)
November 1st, 2008 by adminThis is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.
CSS code:
<style type=”text/css”>
/*URL: http://www.Branding-Studio.com.com/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image’s height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
HTML code:
<div class=”gallerycontainer”>
<a class=”thumbnail” href=”#thumb”><img src=”images/firstimage.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/firstimage.jpg” /><br />Simply beautiful.</span></a>
<a class=”thumbnail” href=”#thumb”><img src=”images/ocean.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/ocean.jpg” /><br />Beautiful OCEAN</span></a>
<br />
<a class=”thumbnail” href=”#thumb”><img src=”images/fun.jpg” width=”100px” height=”75px” border=”0″ /><span><img src=”images/fun.jpg” /><br />Is it FUN?</span></a>
<a class=”thumbnail” href=”#thumb”><img src=”images/horse.jpg” width=”100px” height=”70px” border=”0″ /><span><img src=”images/horse.jpg” /><br />RUN RUN RUN</span></a>
<br />
<a class=”thumbnail” href=”#thumb”>Super Man<span><img src=”images/super.gif” /><br />Super Man</span></a>
<br />
<a class=”thumbnail” href=”#thumb”>Google<span><img src=”images/google.gif” /><br />Google</span></a>
</div>
Just change some files or paste your own images in this html code
CSS Background Position Shortcuts
October 31st, 2008 by adminI often use divs and background images on a constant basis to get a modern look and feel to a website. When doing so it is important to know the CSS shortcuts for the element background-position.There are two basic ways of writing this in your stylesheet, 1.with Keywords and 2. with Percentages or Lengths.
Keywords
Horizontal keywords: left, center, right
Vertical keywords: top, center, bottom
CSS Progress bar ;)
October 29th, 2008 by adminThoughts
We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.
