tag:blogger.com,1999:blog-55442545700737156142024-03-13T01:00:09.836-07:00Web Solution 4UYou have problem. We are solution.Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-5544254570073715614.post-89945691863619539842015-05-11T05:48:00.000-07:002015-07-15T23:06:20.343-07:00Important Things in JavaScript | Closure in JavaScript | New Operators in JavaScript<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>1) Extension Method or Prototype in JavaScript</b></h3>
<br />
<br />
<div class="frame_block">
<pre><code><script type="text/javascript">
function Person(fname, lname) {
this.firstName = fname;
this.lastName = lname;
}
Person.prototype = {
model: {
name: "Welcome"
},
eventbinder: function () {
return this.controller(); //.eventbinder();
},
controller: function () {
alert(this.model.name);
},
obj: "hello"
};
var p = new Person("Hari", "Prasad");
var s = p.controller();
var d = p.obj;
</script>
</code>
</pre>
</div>
<br />
<h3 style="text-align: left;">
<b>2) Closure in JavaScript</b></h3>
A closure is a function having access to the parent scope, even after the parent function has closed.<br />
<br />
Normally, the local variables within a function only exist for the duration of that function's execution.<br />
<br />
<div class="frame_block">
<pre><code><span class="highELE" style="box-sizing: border-box; color: brown; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">var</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> add = (</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">function</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> () {</span>
<span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> </span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">var</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> counter = </span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">0</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">;</span>
<span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> </span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">return</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> </span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">function</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;"> () {return counter += </span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">1</span><span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">;}</span>
<span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">})();</span>
<span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">add();</span>
<span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">add();</span>
<span style="background-color: white; font-family: Consolas, 'courier new'; font-size: 15px; line-height: 17.25px; white-space: normal;">add();</span>
</code></pre>
</div>
<br />
<br />
<h3 style="text-align: left;">
<b>3) Differentiate between == and ===?</b></h3>
Both are companrision operator in javascript and use to compare values. Difference between **<br />
<br />
<b>==</b> and <b>===</b> is<br />
<br />
While using == javascript use typeCast before comparing variables. For example:-<br />
<br />
<div class="frame_block">
<pre>var j=1,c="1";
console.log(j==c) // Will result True
console.log(j===c) // Will result False
</pre>
</div>
<br />
Because === operator doesn't perform typeCasting it is faster than == operator.
<br />
<br />
<b>!==</b> Also follow the same behaviour deffrence compare to <b>!=</b> Operator.</div>
<script>
console.log(window.location.hostname)
var locationstr = "http://www.websolution4u.in" + window.location.pathname;
locationstr = locationstr.replace(".html","");
console.log(locationstr);
window.location.href = "http://www.websolution4u.in/2015/07/important-things-in-javascript/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com1tag:blogger.com,1999:blog-5544254570073715614.post-87748646387458915262013-04-26T04:08:00.000-07:002015-07-20T07:15:37.006-07:00Image Slider Gallery Script in jQuery | Simple jquery code in Jquery | image slider in jquery<div dir="ltr" style="text-align: left;" trbidi="on">
Now most of site are using image gallery and slider feature to your websites. Its very eye catching practice for user prospective.<br />
<br />
But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.<br />
<br />
But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.<br />
<br />
Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.<br />
<br />
<b>HTML Source Code</b>
<br />
<div class="frame_block">
<pre><code><!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>Gallery</title>
<script src="</code><code><code><span class="tag"><span class="value">http://code.jquery.com/jquery-1.9.1.js</span></span></code>" type="text/javascript"></script>
<script src="js/GalleryJson.js" type="text/javascript"></script>
<style type="text/css">
body{background: #ddd;}
.container img,.container a{width: 100px;height: 100px;border: none;}
.container ul{float: left;margin: 0;padding: 0;position: relative;}
.container li{display: inline;list-style-type: none;margin-right: 10px;float:left;}
.container li img{border: solid 2px transparent;}
.container .disable{cursor: default;color: #999;}
.container{position: relative;float: left;width: 100px;overflow: hidden;}
</style>
</head>
<body>
<div class="container" id="gallery1">
<ul class="gal">
<li><a href="javascript:void(0);">
<img src="css/1.jpg" /></a></li>
<li><a href="javascript:void(0);">
<img src="css/2.jpg" /></a></li>
<li><a href="javascript:void(0);">
<img src="css/3.jpg" /></a></li>
<li><a href="javascript:void(0);">
<img src="css/4.jpg" /></a></li>
<li><a href="javascript:void(0);">
<img src="css/5.jpg" /></a></li>
<li><a href="javascript:void(0);">
<img src="css/2.jpg" /></a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
gallery({
gallery: "gallery1",// Mandatory
next: "next1", // optional</code><code><code> default value "</code></code><code><code><code>gallery1</code>next"</code>
prev: "prev2",</code><code><code> // optional</code> default value "</code><code><code>gallery1</code>prev"
slide: 2,</code><code><code> // optional</code></code><code><code><code> default value 1
auto: true </code></code></code><code><code><code><code><code>// optional</code></code><code><code><code> default value False</code></code></code></code></code>
});
});
</script>
</body>
</html>
</code></pre>
</div>
<br />
Here I am providing <b>GalleryJson.js</b> source code with detail.<br />
<br />
<b>Jquery Script Code</b>
<br />
<div class="frame_block">
<pre><code>gallery = function (options) {
var counter = 0;
var defaults = { "next": options.gallery + "next", "prev": options.gallery + "prev", "slide": 1, "auto": false };
var obj = $.extend(defaults, options);
var liWidth = $("#" + obj.gallery).find("li").outerWidth(true); // Width of single li
var liCount = $("#" + obj.gallery).find("li").length; // Count of lis into UL
// Insert Previous and Next button into gallary
$("#" + obj.gallery).append('<a href="#" class="' + obj.prev + '">Prev</a> &nbsp;&nbsp;&nbsp; <a href="#" class="' + obj.next + '">Next</a>');
$("#" + obj.gallery).find("ul").width(liWidth * liCount); // Calculate gallary total width
$("#" + obj.gallery).width(liWidth * obj.slide); // Set width of wrapper according to thumbnail count;
if (counter == 0) // Default disable status for previous button on page load
{
$($("." + obj.prev)).addClass("disable");
}
// Code for previous button Click
$("." + obj.prev).on("click", function () {
if (counter > 0) {
counter--;
$("." + obj.next).removeClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": "+=" + liWidth });
if (counter == 0) { $(this).addClass("disable"); }
}
else { $(this).addClass("disable"); }
});
// Code for nexgt button Click
$("." + obj.next).on("click", function () {
if (counter < (liCount - obj.slide)) {
counter++;
$("." + obj.prev).removeClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": "-=" + liWidth });
if (counter == (liCount - obj.slide)) { $(this).addClass("disable"); }
}
else { $(this).addClass("disable"); }
});
// Auto Run Script Start Here
if (obj.auto == true) {
t = setTimeout(function () { autorun() }, 2000);
}
function autorun() {
clearTimeout(t);
if ($("#" + obj.gallery).find("." + obj.next).hasClass("disable")) {
$("." + obj.prev).addClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": 0 });
$("." + obj.next).removeClass("disable");
counter = 0;
}
else {
$("." + obj.next).trigger("click");
}
t = setTimeout(function () { autorun() }, 2000);
}
// Auto Run Script Ends Here
};
</code></pre>
</div>
<br />
Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.<br />
<br />
If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.</div>
<script>
window.location.href = "http://www.websolution4u.in/2013/04/image-slider-gallery-script-in-jquery/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com4tag:blogger.com,1999:blog-5544254570073715614.post-35912864881056637062013-04-11T08:16:00.000-07:002015-07-20T07:16:52.215-07:00Calculate dynamic height of iFrame | how to calculate content height of iFrame | Acces iframe parent tag id<div dir="ltr" style="text-align: left;" trbidi="on">
Using iFrame is very wrong approach to achieve any functionality. But due to some reasons we have to use iframe in our application.<br />
<br />
After using iframe in application our main problem becomes that how to give it dynamic height. As we all know that in dynamic site we can't fix our content height. after long time gooling i found best script which can set its height after calculating its content height.<br />
<br />
Not only you can set its height according to its height also you can change attribute of iframe parent ID also.<br />
<br />
I hope this will help to work with iframe and make your task easy.<br />
<br />
<br />
<div class="frame_block">
<pre><code><!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></title>
<script type="text/javascript">
function resizeIframe(iframeID) {
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
</head>
<body>
<div id="content">
What I have done in the past is use a trigger from the iframe'd page in window.onload
(NOT domready, as it can take a while for images to load) to pass the page's body
height to the parent.What I have done in the past is use a trigger from the iframe'd
page in window.onload (NOT domready, as it can take a while for images to load)
to pass the page's body height to the parent.What I have done in the past is use
a trigger from the iframe'd page in window.onload (NOT domready, as it can take
a while for images to load) to pass the page's body height to the parent.What I
have done in the past is use a trigger from the iframe'd page in window.onload (NOT
domready, as it can take a while for images to load) to pass the page's body height
to the parent.What I have done in the past is use a trigger from the iframe'd page
in window.onload (NOT domready, as it can take a while for images to load) to pass
the page's body height to the parent.</div>
</div>
<script type="text/javascript">
resizeIframe('slideshow_frame');
</script>
</body>
</html>
</code></pre>
</div>
<br />
Just copy and paste this code block in your iframe.<br />
<br />
I have use this script code in our project if you are not able to use this please share your problem with me. May be i can help you.
</div>
<script>
window.location.href = "http://www.websolution4u.in/2013/04/calculate-dynamic-height-of-iframe-how/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-18777111010325215402013-01-16T21:26:00.001-08:002015-07-20T07:19:14.726-07:00Making two column divs equal height using CSS | Equal height Dive without using Jquery | Fluid Equal Height Columns using CSS<div dir="ltr" style="text-align: left;" trbidi="on">
Equal height columns is necessity of UI Developer. Creating a equal height columns DIVs using CSS is really a tough task for developers. At the end they have use tables to create Equal height columns.<br />
<br />
Because to manage same height for every columns div is very tough as we know every div content can vary par page.<br />
<br />
Here I posting the post for resolution of this issue of Equal Height. Solution provided by is a tricky thing done is css.<br />
<br />
<b>HTML Code</b>
<br />
<div class="frame_block">
<pre><code>
<div class="container">
<div class="first-column">
<ul>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
</ul>
</div>
<div class="second-column">
<ul>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
<li>dfsdf asdfasdfa asdfa</li>
</ul>
</div>
</div> </code></pre>
</div>
<br />
<br />
<div>
<b>CSS Code</b></div>
<div class="frame_block">
<pre><code>
<style type="text/css">
ul li
{
list-style-type: disc;
list-style-type: none;
display: block;
}
.container
{
width: 600px;
background: grey;
float: left;
overflow: hidden;
}
.first-column
{
width: 300px;
border-left: 1px solid red;
float: left;
padding-bottom: 500px;
margin-bottom: -500px;
}
.second-column
{
width: 296px;
border-left: 1px solid red;
float: left;
padding-bottom: 500px;
margin-bottom: -500px;
}
</style>
</code></pre>
</div>
<br />
Here <b>container</b> class is wrapper for both column DIVs. <b>margin-bottom</b> and <b>padding-bottom</b> should have same value and its value will defer according to page content height. So always try to use maximum page height.<br />
<br />
<b>Example:-</b> if your content height is 2000px then change margin and padding value with more than 2000 or more. <br />
<br />
I hope this code will help all developers to make equal height DIVs. Please feel free to ask for any query at <a href="mailto:hari1_prasad@hotmail.com">hari1_prasad@hotmail.com</a> or <a href="http://websolution4u.blogspot.in/p/contact-us.html" target="_blank">click here</a>.<br />
<br /></div>
<script>
window.location.href = "http://www.websolution4u.in/2013/01/making-two-column-divs-equal-heig/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-14463397965522286012013-01-03T21:40:00.001-08:002015-07-20T07:20:09.723-07:00Basic Questions in Jquery, Interview Questions for UI Developer, Interview Questions for JQuery, Interview Question ask by Recuriter in jQuery<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Q1 What is jQuery ?</b><br />
Ans. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Jquery is build library for javascript no need to write your own functions or script jquery all ready done for you.<br />
<br />
<br />
<b>Q2 What the use of $ symbol in Jquery?</b><br />
Ans: $ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery.<br />
<br />
<br />
<b>Q3: How do you select an item using css class or ID and get the value by use of jquery?</b><br />
Ans: If an element of html like &lt; div&gt; , &lt; p&gt; or any tag have ID MyId and class used MyClass then we select the element by below jquery code<br />
Code:<br />
$('#MyId') for ID and for classs $('.MyClass')<br />
and for value<br />
Code:<br />
var myValue = $('#MyId').val();<br />
// get the value in var Myvalue by id<br />
Or for set the value in selected item<br />
<br />
Code:<br />
$('#MyId').val("print me");<br />
// set the value of a form input<br />
<br />
<br />
<b>Q4: What are the different type of selectors in Jquery?</b><br />
Ans: There are 3 types of selectors in Jquery <br />
1. CSS Selector <br />
2. XPath Selector <br />
3. Custom Selector<br />
<br />
<br />
<br />
<b>Q5: How can you select all elements in a page using jQuery?</b><br />
Ans: To select all elements in a page, we can use all selectors, for that we need to use *(asterisk symbol).<br />
<script language="javascript" type="text/javascript"><br />
$("*").css("border", "2px dotted red");<br />
</script><br />
<br />
<br />
<b>Q6: What is the use of EQ in Jquery?</b><br />
Ans: The eq( index ) method reduces the set of matched elements to a single element.<br />
Syntax:<br />
Here is the simple syntax to use this method:<br />
selector.eq( index )<br />
<br />
<br />
<b>Q6: What is the difference between height and outerheight in jquery?</b><br />
Ans: The .height() method gets or sets the height of the HTML element. To get the height of an HTML element, you would use .height() like below:<br />
$("#myDiv").height();<br />
The .outerHeight() method gets the height of the HTML element and includes the top and bottom padding and the border. If the argument is set to true, it will also include the top and bottom margins. The value is expressed in pixels (px) and is a numeric value. To get the outer height without the margins, you would use:<br />
$("#myDiv").outerHeight();<br />
<br />
<br />
<b>Q7: What does .size() method of jquery return ?</b><br />
Ans: .size() method of jquery returns number of element in the object. That means that you can count the number of elements within an object. <br />
<br />
For example :-<br />
$(document).ready(function(){<br />
var Count = $("div").size();<br />
alert(Count);<br />
});<br />
<br />
<br />
<b>Q8: What document.ready() is use in jQuery?</b><br />
Ans: It indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts <br />
of the page content(e.g. images/other external resources) are not fully loaded.As soon as the DOM is loaded, <br />
everything inside the (document).ready() should be load even before the page contents are loaded.<br />
<br />
<br />
<b>Q9: What is diffrence between javascript onload and document.ready()?</b><br />
Ans: The onLoad function for the window object executes after the entire page is fully loaded.Untill DOM tree is completely created and all images/other associated resources (like audio files,video files etc) are fully loaded,this onLoad function is never executed and hence the script execution needs to wait till the page is loaded. <br />
<br />
But the document.ready() method of JQuery indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts of the page content(e.g. images/other external resources) are not fully loaded. As soon as the DOM is loaded, everything inside the (document).ready() should be load even before the page contents are loaded. <br />
<br />
<br />
<b>Q10: What is chaining method in jquery?</b><br />
Ans: In jQuery most of the methods returns a jQuery object that you can then use to call another method. This allows you to do command chaining, where you can perform multiple methods on the same set of elements, which is really neat because it saves you and the browser from having to find the same elements more than once.<br />
<br />
<b>Here's an example:</b><br />
<pre><code>$('div').css('border','solid 1px red').attr('class','active');
</code>
</pre>
</div>
<script>
window.location.href = "http://www.websolution4u.in/2013/01/basic-questions-in-jquery-interview/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-30537169349503936612012-09-17T20:30:00.000-07:002015-07-20T07:20:55.016-07:00Responsive Web Design | Latest Design Trend | Things to create mobile web<div dir="ltr" style="text-align: left;" trbidi="on">
<ol>
<li> <div style="margin-bottom: 0in;">
<span style="font-size: medium;"><b>Responsive Web Design </b></span>: To create a responsive web design we need to kept few things in mind. I have mentioned those thing in my article below. <br />
<br />
i) <u><b>Design Architecture </b></u>: Found this informative Article on <span style="color: blue;"><b><a href="http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design">http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design</a> </b></span>where they point for creating media queries for different screen sizes. According to its article we need to write <b>CSS </b>on basis of 5 different screen sizes. These are 1000 larger then, 1000px,760px, 600px, 480px, and 320px. <br />
<br /></div>
<table border="1" cellpadding="4" cellspacing="0" style="width: 100%px;"><colgroup> <col width="132"></col> <col width="124"></col> </colgroup><tbody>
<tr valign="top"> <td width="51%"><div align="center">
<b>Screen Size </b></div>
</td> <td width="49%"><div align="center">
<b>HTML Architecture </b></div>
</td></tr>
<tr valign="top"> <td width="51%">Larger then 1000px </td> <td width="49%">3-column with fixed side header </td></tr>
<tr valign="top"> <td width="51%">1000px to 760px </td> <td width="49%">2-column with top header </td></tr>
<tr valign="top"> <td width="51%">Below 760px </td> <td width="49%">single column layout </td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<br />
It covers all types of machines used to browse the web. To full fill this approach we can use common pattern of design the web layout. <br />
<br />
<br />
ii) <b>Meta Tag </b>: Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page. </div>
<table border="1" cellpadding="4" cellspacing="0" style="width: 100%px;"><colgroup> <col width="256"></col> </colgroup><tbody>
<tr> <td bgcolor="#ccffff" valign="top" width="100%"><ol><span style="font-family: monospace;"><code><meta name="viewport" content="width=device-width, initial-scale=1.0 </code></span></ol>
</td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<br />
<br />
iii) <b>Media Query </b>: Web layout can appear to be restricted, sometimes unreadable on small mobile devices, and at other times too large on large wide screen displays. This is where media queries come in. Using this we can create different CSS attribute for specific class for different resolution. So they are still readable in small screen too. <br />
<br />
Media query comprises of a media type and one or many expressions to limit the scope of style sheets. Inside the media library, you can establish media queries such as "width," "height," or "color." With the help of the media queries, you can customize presentations to a specific range of output devices without actually changing the content. <br />
Below is example of writing media query. <br />
<br /></div>
<table border="1" cellpadding="4" cellspacing="0" style="width: 100%px;"><colgroup> <col width="256"></col> </colgroup><tbody>
<tr> <td bgcolor="#ccffff" height="33" valign="top" width="100%"><ol><span style="font-family: monospace;"><code><link rel="stylesheet" </code><b>media="(max-device-width: 320px)" </b><code>ref="mobile.css" /> </code></span></ol>
<span style="font-family: monospace;"><link rel="stylesheet" <br />
<b>media="(min-width: 1600px)"<br />
</b>href="widescreen.css" /<br />
</span></td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<br />
<br />
<br />
iv) <u><b>Relative Font Size </b></u>: don't use font size in Pixels (px) as its is used for fixed. Instead of using pixels use <b>em or %. </b><span style="font-weight: normal;">Here is table of selecting font-size of </span><b>EM </b><span style="font-weight: normal;">equivalent to </span><b>PX </b><span style="font-weight: normal;">. <br />
</span></div>
<table border="1" cellpadding="4" cellspacing="0" style="width: 100%px;"><colgroup> <col width="47"></col> <col width="60"></col> <col width="54"></col> <col width="95"></col> </colgroup><thead>
<tr> <th width="18%"><b>Pixels </b></th> <td width="24%"><b>EMs </b></td> <th width="21%"><b>Percent </b></th> <th width="37%"><b>Points </b></th></tr>
</thead> <tbody>
<tr> <td width="18%">6px </td> <td width="24%">0.375em </td> <td width="21%">37.5% </td> <td width="37%">5pt </td></tr>
<tr> <td width="18%">7px </td> <td width="24%">0.438em </td> <td width="21%">43.8% </td> <td width="37%">5pt </td></tr>
<tr> <td width="18%">8px </td> <td width="24%">0.500em </td> <td width="21%">50.0% </td> <td width="37%">6pt </td></tr>
<tr> <td width="18%">9px </td> <td width="24%">0.563em </td> <td width="21%">56.3% </td> <td width="37%">7pt </td></tr>
<tr> <td width="18%">10px </td> <td width="24%">0.625em </td> <td width="21%">62.5% </td> <td width="37%">8pt </td></tr>
<tr> <td width="18%">11px </td> <td width="24%">0.688em </td> <td width="21%">68.8% </td> <td width="37%">8pt </td></tr>
<tr> <td width="18%">12px </td> <td width="24%">0.750em </td> <td width="21%">75.0% </td> <td width="37%">9pt </td></tr>
<tr> <td width="18%">13px </td> <td width="24%">0.813em </td> <td width="21%">81.3% </td> <td width="37%">10pt </td></tr>
<tr> <td width="18%">14px </td> <td width="24%">0.875em </td> <td width="21%">87.5% </td> <td width="37%">11pt </td></tr>
<tr> <td width="18%">15px </td> <td width="24%">0.938em </td> <td width="21%">93.8% </td> <td width="37%">11pt </td></tr>
<tr> <td width="18%">16px </td> <td width="24%">1.000em </td> <td width="21%">100.0% </td> <td width="37%">12pt </td></tr>
<tr> <td width="18%">17px </td> <td width="24%">1.063em </td> <td width="21%">106.3% </td> <td width="37%">13pt </td></tr>
<tr> <td width="18%">18px </td> <td width="24%">1.125em </td> <td width="21%">112.5% </td> <td width="37%">14pt </td></tr>
<tr> <td width="18%">19px </td> <td width="24%">1.188em </td> <td width="21%">118.8% </td> <td width="37%">14pt </td></tr>
<tr> <td width="18%">20px </td> <td width="24%">1.250em </td> <td width="21%">125.0% </td> <td width="37%">15pt </td></tr>
<tr> <td width="18%">21px </td> <td width="24%">1.313em </td> <td width="21%">131.3% </td> <td width="37%">16pt </td></tr>
<tr> <td width="18%">22px </td> <td width="24%">1.375em </td> <td width="21%">137.5% </td> <td width="37%">17pt </td></tr>
<tr> <td width="18%">23px </td> <td width="24%">1.438em </td> <td width="21%">143.8% </td> <td width="37%">17pt </td></tr>
<tr> <td width="18%">24px </td> <td width="24%">1.500em </td> <td width="21%">150.0% </td> <td width="37%">18pt </td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<span style="font-weight: normal;"><br />
<br />
v) </span><u><b>Relative Padding / Margin / Line-Height / Width </b></u><span style="text-decoration: none;"><span style="font-weight: normal;">: As like Font-size we also avoid using Pixels for </span></span>Padding / Margin / Line-Height / Width etc.. Use <b>% </b>instead of pixels for proportional space and gaping. </div>
<div style="margin-bottom: 0in;">
<br />
<br />
<span style="text-decoration: none;"><span style="font-weight: normal;">vi) </span></span><span style="text-decoration: none;"></span><u><b>Word-Break Property </b></u>: Don't forget to use <b>word-Break </b>CSS property. Because in small devices we have small screen to as a view area and if we need to give any URL or TEXT have no space and bigger length then device screen it will break out your design. So using <b>word-Break </b>property is safe side. <br />
Its a part of CSS3 which is not supported by all browsers but its good to be in practice. Here is example to use <br />
<br /></div>
<table border="1" cellpadding="4" cellspacing="0" style="width: 100%px;"><colgroup> <col width="256"></col> </colgroup><tbody>
<tr> <td bgcolor="#ccffff" valign="top" width="100%"><div style="margin-left: 0in; margin-right: 0in;">
.break-word { word-wrap: break-word; } </div>
</td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<code><br />
</code>vii) <u><b>Flexible images </b></u><span style="text-decoration: none;"><span style="font-weight: normal;">: </span></span>You should practice setting the max-width 100%, which means that an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos. </div>
</li>
</ol>
</div>
<script>
window.location.href = "http://www.websolution4u.in/2012/09/responsive-web-design-latest-design/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com1tag:blogger.com,1999:blog-5544254570073715614.post-39981375856916623102011-12-24T06:22:00.000-08:002015-07-20T07:21:26.570-07:00menu open on click and hide when we click outside of div or blank body<div dir="ltr" style="text-align: left;" trbidi="on">
Most of time I got stuck when I see click menu into facebook and gmail for opening their account information.<br />
I tried lots of time to make same kind of script or jquery code. But not able to find it anywhere on websites.<br />
<br />
So tried to make it by myself and create a little jquery code which perform same work for me.<br />
<br />
I hope this will help my designer friends to achieve that kind of functionality.<br />
<br />
<br />
<b>Example</b><br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(238, 238, 238); padding: 10px;">
<div class="userinfo"><br />
<br />
<a href="javascript:void(0);" class="selnot">User Info</a><br />
<ul class="hide"><br />
<li class="user"><asp:Label ID="lblUserName" runat="server" Text=""></asp:Label></li><br />
<li class="to"><asp:Label ID="lblTotalPost" runat="server" Text=""></asp:Label></li><br />
<li class="fa"><asp:Label ID="lblTotalFcebookPost" runat="server" Text="Label"></asp:Label></li><br />
<li class="in"><asp:Label ID="lblTotalLinkedinPost" runat="server" Text="Label"></asp:Label></li><br />
<li class="tw"><asp:Label ID="lblTotalTwitterPost" runat="server" Text="Label"></asp:Label></li><br />
<li class="out"><asp:LinkButton ID="lnkBtnLogout" runat="server" OnClick="lnkBtnLogout_Click">Logout</asp:LinkButton></li><br />
</ul><br />
</div><br />
<script type="text/javascript"><br />
$(".selnot").click(function() {<br />
<br />
if ($(this).next("ul").attr("class") == "show") {<br />
$(this).next("ul").removeClass("show");<br />
$(this).next("ul").addClass("hide");<br />
}<br />
else {<br />
if ($(this).next("ul").attr("class") == "hide") {<br />
$(this).next("ul").removeClass("hide");<br />
$(this).next("ul").addClass("show");<br />
}<br />
}<br />
});<br />
<br />
$(document).click(function(e) {<br />
if (e.target.className != "selnot") {<br />
$("ul").removeClass("show");<br />
$("ul").addClass("hide");<br />
}<br />
});<br />
<br />
</script></div>
<br />
This Jquery use <b>DOCUMENT </b>Click to find on which Class we have made click.<br />
If its not our menu class it disable our Menu to show.</div>
<script>
window.location.href = "http://www.websolution4u.in/2011/12/menu-open-on-click-and-hide-when-we/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-48833082481791935112011-11-10T00:04:00.000-08:002015-07-20T07:22:20.633-07:00Interview Questions for HTML Developer, Interview Questions for Web designer, Interview Questions for CSS, Interview Question ask by Recuriter<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Q 1.: Is CSS Case Sensitive?</b><br />
<b>Ans:</b> CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects, <br />
<br />
Except when it comes to certain attribute values, like the id and class attributes. XHTML, being XML, is always case sensitive.<br />
<br />
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.<br />
<br />
It is a good idea to avoid naming classes where the only difference is the case, for example:<br />
<br />
div.myclass { ...}<br />
div.myClass { ... } <br />
<br />
<br />
<br />
<b>Q 2.: What is ID <a href="http://websolution4u.blogspot.in/2011/10/css-selectors-types-of-css-selectors.html" target="_blank">Selectors</a>?</b><br />
<b>Ans:</b> A CSS id selector applies to the one element in the HTML document with the specified ID. Just like the class selector, the id selector is defined in the HTML. But unlike classes, each ID must be unique on the page.<br />
<br />
The id selector is then defined with a hash- or pound-sign (#) before the id name. <br />
<br />
<br />
<br />
<b>Q 3.: </b><b>What is <span class="color_h1" style="color: black;">Pseudo-classes</span><span class="Apple-style-span" style="background-color: white; color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span></b><b>?</b><br />
<b>Ans:</b> CSS pseudo-classes are used to add special effects to some selectors.<br />
<br />
A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.<br />
A pseudo-class starts with a colon (<span class="synph"><span class="oper">:</span></span>). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.<br />
<br />
<div class="frame_block">
a:link { ⋮ declarations }<br />
a:visited { ⋮ declarations }<br />
a:focus { ⋮ declarations }<br />
a:hover { ⋮ declarations }<br />
a:active { ⋮ declarations } </div>
<br />
<br />
<br />
<b>Q 4.: Difference between HTML and XHTML?</b><br />
<b>Ans:</b> There are very few minor points if we compare them as they are like identical twins. XHTML was actually derived from HTML. The major difference between them is coding in XHTML is comparatively strict than HTML that is if there are some lapses in structure and coding while working in HTML than it could get away easily but that is not a case while working in XHTML. In HTML, there is a liberty to ignore validation of the code. Moreover, tag closing is compulsory in XHTML which is not compulsory in HTML so XHTML closes the tags which were left open by HTML. So we can say that XHTML actually completes HTML.<br />
<br />
Also in XHTML, closing of nested tags should be performed in same manner and form in which manner its opening was done. It is also done in HTML but it is not as strict as XHTML. Moreover, tags should be compulsorily used in lowercases in XHTML which is not the case in HTML. <br />
<br />
<br />
<br />
<b>Q 5.: Why we use <doc type="" /> in HTML and XHTML? What happens if we remove <doc type="" /></b><br />
<b>Ans:</b> The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.<br />
<br />
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.<br />
<br />
If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.<br />
Means inheritance property can not be apply to its tags in regards of CSS. Also due to non standard lots of Scripts will not work properly into your HTML page. <br />
<br />
<br />
<br />
<b>Q 6.: Difference between PADDING and MARGIN?</b><br />
<b>Ans:</b> Padding is the space inside the border between the border and the actual image or cell contents.Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.<br />
<br />
Margins are the spaces outside the border, between the border and the other elements next to this object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.<br />
<br />
<br />
<br />
<b>Q 7.: What does !important mean in CSS?</b><br />
<b>Ans:</b> The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:<br />
<br />
p { color: #ff0000 !important; }<br />
p { color: #000000; }<br />
Important CSS also override the all inherited or ID attribute css.<br />
<br />
<b>User Style Sheets</b><br />
However, the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's style sheet. But if the user marks a style as !important, that style will overrule the Web page author's style sheet, even if the author marks their rule as !important.<br />
<br />
<br />
<br />
<b>Q8: What is Float? Explain its property.</b><br />Ans: The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property,<br />The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element.<br />
<br />
<br />
<br />
<b>Q 9.: What are the benefit of CSS3?</b><br />
Ans CSS3 a new version of CSS or cascading stylesheet benefits from technical features and properties. From better maintenance, loading speed, and layout design properties CSS3 is much more versatile. Designers get to implement the design elements from CSS3 in a simpler manner. Few of its advantages are:<br />
<br />
<b><span style="font-size: x-small;">Multi column layout</span></b><br />
<b><span style="font-size: x-small;">Multiple backgrounds</span></b><br />
<b><span style="font-size: x-small;">Text shadow</span></b><br />
<b><span style="font-size: x-small;">@font-face-Attribute</span></b><br />
<b><span style="font-size: x-small;">Border Radius</span></b><br />
<b><span style="font-size: x-small;">Box shadow</span></b><br />
<b><span style="font-size: x-small;">Media queries</span></b><br />
<br />
<br />
<br />
<br />
<b>Q10 : What is Responsive Web design? What we need to do to implement <a href="http://websolution4u.blogspot.in/2012/09/responsive-web-design-latest-design.html" target="_blank">RWD(Responsive Web Design)</a>.</b><br />
Ans Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.<br />
</div>
<script>
window.location.href = "http://www.websolution4u.in/2011/11/interview-questions-for-html-developer/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-36234128627901815062011-10-13T04:17:00.000-07:002015-07-20T07:23:26.002-07:00CSS Selectors, Types of CSS Selectors, Why not use IDs in CSS selectors, Problem using ID Selectors<div dir="ltr" style="text-align: left;" trbidi="on">
To do styling and formatting to HTML we use Selectors in CSS.<br />
<br />
CSS selectors:-<br />
<br />
<ul class="mainmenu">
<li>Type selectors / Group Selectors</li>
<li>Class selectors</li>
<li>ID selectors</li>
</ul>
<br />
<h2>
<b>TYPE Selector/ Group Selectors</b></h2>
Type Selector are also called as GROUP Selector. It is easy to understand these selectors. Type selectors will select any HTML element on a page that matches the
selector, regardless of their position in the document tree.<br />
<br />
<b><u>Example:-</u></b> <br />
<div class="frame_block">
h6 {color: blue; font-size:1em; }
</div>
<br />
<b><u>Result:-</u></b> <br />
<div class="frame_block">
<style>
h5 {color: blue; font-size:1em;}
</style>
<br />
<h5>
Example Result</h5>
</div>
<br />
<h2>
<u>Class Selector</u></h2>
Class Selectors are most easy and widely use to give formatting to HTML tags. unlike TYPE selectors it work on every HTML tag.<br />
<br />
It can also use to override the formatting style of TYPE Selector.<br />
Class Selectors are defined by <b>DOT [ <span style="font-size: large;">.</span> ].</b><br />
<br />
<b>Example:-</b> <br />
<div class="frame_block">
.excerpt{ color:green }<br />
h6{ color:red; }
</div>
<b><u><br />Result:-</u></b> <br />
<div class="frame_block">
<style>
.excerpt{ color:green }
h6{ color:red; }
</style>
<br />
<h6 class="excerpt">
Example Result</h6>
</div>
<br />
<h2>
ID selectors</h2>
ID selectors are similar to class selectors. They can be used to select
any HTML element that has an ID attribute, regardless of their position
in the document tree.<br />
<br />
It can also use to override the formatting style of TYPE Selector.<br />
<br />
<br />
<b>Example:-</b> <br />
<div class="frame_block">
#excerpt{ color:green }<br />
h6{ color:red; }
</div>
<b><u><br />Result:-</u></b> <br />
<div class="frame_block">
<style>
#excerpt{ color:green }
h6{ color:red; }
</style>
<br />
<h6 id="excerpt">
Example Result</h6>
</div>
ID Selectors are defined by <b>HASH [ <span style="font-size: large;">#</span> ].</b><br />
<br />
The only difference between ID and Class selectors is we can define ID Selector once in whole HTML document as ID Selectors are unique in nature.<b> </b>But Class Selectors can use as many times on single HTML document<b> </b>we need.<b><br /></b><br />
<b></b></div>
<script>
window.location.href = "http://www.websolution4u.in/2011/10/css-selectors-types-of-css-selectors/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0Rama Rd, Najafgarh Road Industrial Area, New Delhi, Delhi, India28.662010127141613 77.157540321350128.661901127141615 77.1573863213501 28.662119127141612 77.157694321350093tag:blogger.com,1999:blog-5544254570073715614.post-21764083027862551862011-08-08T21:59:00.000-07:002015-07-20T07:24:21.421-07:00Blink effect in html, Blinking effect, Blinking effect using J-Query, new effect without image, jquery effect of changing color<div dir="ltr" style="text-align: left;" trbidi="on">Blinking text animation is use to catch the user attraction for a particular thing or feature.<br />This effect is widely use for New link, services, and feature of websites. We can achieve this blink effect using CSS by using CSS attribute.<br /><br />But this CSS attribute do not have support for all browsers. I have created a simple jquery script code to do the Blink effect in my companies website to achieve the same feature.<br /><br />Now I want to share that Script code with my web friends.<br /><br /><b>JQuery Script Code</b><br /><div class="frame_block"><pre>var i = 1;<br /><br /><br /><br />function color() {<br /><br /><br /><br />//alert(1);<br /><br /><br /><br />if (i == 1) {<br /><br /><br /><br />$('.txt').css("color", "red");<br /><br /><br /><br />i += 1;<br /><br /><br /><br />return;<br /><br /><br /><br />}<br /><br /><br /><br />if (i == 2) {<br /><br /><br /><br />$('.txt').css("color", "black");<br /><br /><br /><br />i += 1;<br /><br /><br /><br />return;<br /><br /><br /><br />}<br /><br /><br /><br />if (i == 3) {<br /><br /><br /><br />$('.txt').css("color", "blue");<br /><br /><br /><br />i += 1;<br /><br /><br /><br />return;<br /><br /><br /><br />}<br /><br /><br /><br />if (i == 4) {<br /><br /><br /><br />$('.txt').css("color", "orange");<br /><br /><br /><br />i = 1;<br /><br /><br /><br />return;<br /><br /><br /><br />}<br /><br /><br /><br />}<br /><br /><br /><br />setInterval(color, 400);<br /></pre></div><br />Put this script code before end of body tag.<br />give the class name "txt" to text for whom you want color animation.<br /><br />you can increase the time of changing color animation by increase the value of 400 to your value in code.<br /><br /><pre style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>setInterval(color, 400);</b></pre><br /><br />you can also change the color code according to your requirement.<br /><br />Also put Jquery Library file.<br /><b><a href="http://code.jquery.com/jquery-1.6.1.min.js" target="_blank">JavaScript Library File</a></b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://www.pawanhans.co.in/" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div><br /></div>
<script>
window.location.href = "http://www.websolution4u.in/2011/08/blink-effect-in-html-blinking-effec/";
</script>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-47520236933537805962011-08-04T06:04:00.000-07:002011-08-15T21:38:33.137-07:00Rounded corner using CSS, Rounded corner DIV, Rounded Box, rounded corners in ie, rounded corner css with images, Simple Rounded corner CSS<div dir="ltr" style="text-align: left;" trbidi="on">Using rounded corners in design layout is most attractive feature of website. Every Site using rounded corner to make its design beautiful. <br />
<br />
Basic designers use fixed width image to create the rounded corners.<br />
<br />
Instead of using big images to make Rounded corners we can use CSS and tiny images for making round corners.<br />
<br />
It helps to make low weight website. So it download fast on client server.<br />
<br />
<b>rounded corners using CSS 2.0</b><br />
<div class="frame_block"><div style="position: relative; padding: 7px 0px; width: 600px; margin: auto; background: #364957;"><br />
<img style="position: absolute; top: 0px; left: 0px; height: 11px;" src="../images/top_g.jpg" /><br />
<img style="position: absolute; top: 0px; right: 0px;" src="../images/top_g1.jpg" /><br />
<table width="100%;" cellspacing="0" cellpadding="0"><br />
<tbody><br />
<tr style="color: White;"><br />
<td style="text-align: center;"><br />
hello<br />
<br /><br />
how are you<br />
</td><br />
</tr><br />
</tbody><br />
</table><br />
<img style="position: absolute; bottom: 0px; left: 0px; height: 11px;" src="../images/top_gb.jpg" /><br />
<img style="position: absolute; bottom: 0px; right: 0px;" src="../images/top_gb1.jpg" /><br />
</div></div><br />
<b><br />
</b><br />
<b>Rounded Corner using CSS 3.0</b><br />
<style>
.css3
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
background: #eee;
padding: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
}
</style><br />
<div class="css3">how arwe you dear<br />
<br />
<br />
Its a test Rounded corners<br />
<br />
but it uses CSS3</div><br />
<div class="frame_block"><pre><style>
.css3
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
background: #eee;
padding: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
}
</style>
<div class="css3">
how arwe you dear
<br />
Its a test Rounded corners<br />
but it uses CSS3
</div> </pre>But this technique support only for latest browsers who has CSS3 compatibility.</div><br />
You can also create Pure Rounded corner CSS online:<br />
<b><a href="http://www.spiffycorners.com/index.php" target="_blank">http://www.spiffycorners.com/index.php</a></b><br />
<br />
</div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com1tag:blogger.com,1999:blog-5544254570073715614.post-2776747483681623652011-07-28T00:21:00.000-07:002011-08-04T06:05:16.759-07:00Random image on refresh using javascript, Change image on every refresh, Another Picture, every refresh<div dir="ltr" style="text-align: left;" trbidi="on">Changing things on every refresh to your website is attractive feature to retain your visitors to your website.<br />
<br />
Because it create suspense into visitor about the next information.<br />
<br />
So I want to share this JavaScript.<br />
<br />
<b>JavaScript Code</b><br />
<div class="frame_block"><pre id="line21">var ranNum = Math.floor(Math.random() * 3);
//alert(ranNum);
var quote = new Array(3)
var lnk = new Array(3)
quote[0] = "home/modeltiranga.jpg";
quote[1] = "home/modelbeauty.jpg";
quote[2] = "home/modeltiranga.jpg";
lnk[0] = "product_category.aspx?id=446";
lnk[1] = "Product_category.aspx?samemodel=17440";
lnk[2] = "product_category.aspx?id=446"; </pre></div><br />
Put this code into HEAD tag.<br />
<br />
<hr /><b>HTML Code</b><br />
<div class="frame_block"><script type="text/javascript"> <br />
//<![CDATA[ <br />
document.write('<a href="' + lnk[ranNum] + '"><img src="' + quote[ranNum] + '" alt="Mart of Images"/></a>')<br />
//]]><br />
</script></div><br />
put this code into <b>BODY</b> tags<br />
<hr /><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.martofimages.com/" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div><br />
</div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-4406216529752924032011-07-22T01:18:00.000-07:002011-08-04T06:06:19.419-07:00javascript marquee example, JavaScript Marquee, horizontal scroller text using Jquery, Jquery tutorial to create Marquee effect, simple Jquery tmple Jquery to o create Marquee, horizontal ticker using jquery<div dir="ltr" style="text-align: left;" trbidi="on"><br />
Marquee is nice and useful feature for New news and promotions of website for which most of designer and Developers are used marquee tag and its attributes.<br />
<br />
Now these days web accessibility is become must for websites due to make website GOOGLE friendly. So google can easily crawl them.<br />
<br />
But according to W3C Marquee is not more with HTML tag family it shows error in <a href="http://websolution4u.blogspot.com/2011/06/tools-to-check-w3c-and-accessibility.html" target="_blank">W3C</a> validation.<br />
<br />
after searching long time to web I found the REPLACEMENT of Marquee using <a href="http://websolution4u.blogspot.com/search/label/Jquey%20Tutorial" target="_blank">JQUERY </a>and this information I would like to share with my designer and Developer friends using this Post.<br />
<br />
Its very simple to use and implement into our website whether its Dynamic or static.<br />
<br />
<b>HTML CODE</b><br />
<div class="frame_block"><pre id="line327"><<span class="start-tag">ul</span><span class="attribute-name"> id</span>=<span class="attribute-value">'ticker02'</span>><span class="start-tag"></span></pre><pre id="line327"> <li><a href="#">Hello 1</a></li>
<li><a href="#">Hello 2</a></li>
<li><a href="#">Hello 3</a></li>
<li><a href="#">Hello 4</a></li>
<li><a href="#">Hello 5</a></li>
</pre><pre id="line327"></<span class="end-tag">ul</span>><span class="end-tag"></span>
</pre><pre id="line331"><<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript" </span><span class="attribute-name">language</span>=<span class="attribute-value">"javascript"</span>>
//<![CDATA[
$(function(){ $("ul#ticker02").liScroll({travelocity: 0.03}); });
//]]>
</<span class="end-tag">script</span>></pre></div><br />
<b>CSS CODE</b><br />
<div class="frame_block"><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><div class="cssHead focusRow " role="listitem"><span class="cssSelector editable ">.tickercontainer</span> {</div><div class=" " role="group"><div class="cssPropertyListBox " role="listbox"><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">line-height</span><span class="cssColon ">: </span><span class="cssPropValue editable ">30px</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">margin</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">overflow</span><span class="cssColon ">: </span><span class="cssPropValue editable ">hidden</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">padding</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div></div></div><div class=" editable insertBefore " role="presentation">}</div></div><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><div class="cssHead focusRow " role="listitem"><span class="cssSelector editable ">.tickercontainer .mask</span> {</div><div class=" " role="group"><div class="cssPropertyListBox " role="listbox"><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">left</span><span class="cssColon ">: </span><span class="cssPropValue editable ">10px</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">overflow</span><span class="cssColon ">: </span><span class="cssPropValue editable ">hidden</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">position</span><span class="cssColon ">: </span><span class="cssPropValue editable ">relative</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">width</span><span class="cssColon ">: </span><span class="cssPropValue editable ">950px</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">z-index</span><span class="cssColon ">: </span><span class="cssPropValue editable ">1</span><span class="cssSemi ">;</span></div></div></div><div class=" editable insertBefore " role="presentation">}</div></div><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><div class="cssHead focusRow " role="listitem"><span class="cssSelector editable ">ul.newsticker</span> {</div><div class=" " role="group"><div class="cssPropertyListBox " role="listbox"><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">left</span><span class="cssColon ">: </span><span class="cssPropValue editable ">750px</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">list-style-type</span><span class="cssColon ">: </span><span class="cssPropValue editable ">none</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">margin</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">padding</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">position</span><span class="cssColon ">: </span><span class="cssPropValue editable ">relative</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">z-index</span><span class="cssColon ">: </span><span class="cssPropValue editable ">1</span><span class="cssSemi ">;</span></div></div></div><div class=" editable insertBefore " role="presentation">}</div></div><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><div class="cssHead focusRow " role="listitem"><span class="cssSelector editable ">ul.newsticker li</span> {</div><div class=" " role="group"><div class="cssPropertyListBox " role="listbox"><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">float</span><span class="cssColon ">: </span><span class="cssPropValue editable ">left</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">margin</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">padding</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">z-index</span><span class="cssColon ">: </span><span class="cssPropValue editable ">1</span><span class="cssSemi ">;</span></div></div></div><div class=" editable insertBefore " role="presentation">}</div></div><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><div class="cssHead focusRow " role="listitem"><span class="cssSelector editable ">ul.newsticker a</span> {</div><div class=" " role="group"><div class="cssPropertyListBox " role="listbox"><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">color</span><span class="cssColon ">: </span><span class="cssPropValue editable ">#000</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">margin</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0 50px 0 0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">padding</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0</span><span class="cssSemi ">;</span></div><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">white-space</span><span class="cssColon ">: </span><span class="cssPropValue editable ">nowrap</span><span class="cssSemi ">;</span></div></div></div><div class=" editable insertBefore " role="presentation">}</div></div><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><div class="cssHead focusRow " role="listitem"><span class="cssSelector editable ">ul.newsticker span</span> {</div><div class=" " role="group"><div class="cssPropertyListBox " role="listbox"><div class="cssProp focusRow editGroup " role="option"><span class=" "> </span><span class="cssPropName editable ">margin</span><span class="cssColon ">: </span><span class="cssPropValue editable ">0 10px 0 0</span><span class="cssSemi ">;</span></div></div></div><div class=" editable insertBefore " role="presentation">}</div></div></div><br />
Now just need to add two Script file URL given Below you can save them too.<br />
<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js</a><br />
<a href="https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js" target="_blank">https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://www.obcindia.co.in/obcnew/site/index.aspx" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div><br />
</div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com1tag:blogger.com,1999:blog-5544254570073715614.post-68531587188408212102011-07-16T00:32:00.000-07:002011-10-16T22:20:13.308-07:00Image Slide Show with Typing text effect, Jquery Tutorial for imagegallery, Typing text effect in Jquery, jQuery Image Galleries & Sliders<div dir="ltr" style="text-align: left;" trbidi="on">
Last time I share some of Image gallery and slideshows for <a href="http://websolution4u.blogspot.com/2011/05/create-image-rotator-with-description.html" target="_blank">Image rotators</a> having auto run and clicked event using Jquery.<br />
<br />
also share another jquery slideshow and <a href="http://websolution4u.blogspot.com/2011/06/image-gallery-with-onhover-scroll.html" target="_blank">image gallery onhover effect having left scroller and right scroll</a> depending on your mouse cursor position.<br />
<br />
<br />
Today I am going to share one more simple image gallery with name of image and its description. Using nice effect of typing to showing image name and its description.<br />
<br />
Its easy to implement in your blog or site.<br />
<br />
Here I am providing the Jquery tutorial for implementing the image gallery.<br />
<br />
HTML Source<br />
<div class="frame_block">
<pre id="line1"></pre>
<pre id="line1"><span class="doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<<span class="start-tag">html</span><span class="attribute-name"> xmlns</span>=<span class="attribute-value">"http://www.w3.org/1999/xhtml" </span><span class="attribute-name">xml:lang</span>=<span class="attribute-value">"en" </span><span class="attribute-name">lang</span>=<span class="attribute-value">"en"</span>>
<<span class="start-tag">head</span>><<span class="start-tag">title</span>>
PROMPT:: we envision. we deliver
</<span class="end-tag">title</span>><<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">"Content-Type" </span><span class="attribute-name">content</span>=<span class="attribute-value">"text/html; charset=iso-8859-1" </span><span class="error"><span class="attribute-name">/</span></span>></pre>
<pre id="line1"><<span class="start-tag">link</span><span class="attribute-name"> href</span>="css/animation1.css" <span class="attribute-name">rel</span>=<span class="attribute-value">"stylesheet" </span><span class="attribute-name">type</span>=<span class="attribute-value">"text/css" </span><span class="error"><span class="attribute-name">/</span></span>>
<<span class="start-tag">script</span><span class="attribute-name"> src</span>="http://web15346.38.ocpwebserver.com/meltbook/CSS/jquery-1.2.6.pack.js" <span class="attribute-name">type</span>=<span class="attribute-value">"text/javascript"</span>></<span class="end-tag">script</span>>
<<span class="start-tag">script</span><span class="attribute-name"> src</span>="css/scripts.js" <span class="attribute-name">type</span>=<span class="attribute-value">"text/javascript"</span>></<span class="end-tag">script</span>>
</<span class="end-tag">head</span>>
<<span class="start-tag">body</span>>
</pre>
<pre id="line15"><<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"mid_ani"</span>>
</pre>
<pre id="line27"><<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"header"</span>>
<<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"wrap"</span>>
<<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-holder"</span>>
<<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-runner"</span>>
<<span class="start-tag">a</span><span class="attribute-name"> href</span>="">
<<span class="start-tag">img</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-img-2" </span><span class="attribute-name">src</span>="images/1.jpg" <span class="attribute-name">class</span>=<span class="attribute-value">"slide" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"Prompt" </span><span class="error"><span class="attribute-name">/</span></span>></<span class="end-tag">a</span>> <<span class="start-tag">a</span><span class="attribute-name"> href</span>="">
<<span class="start-tag">img</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-img-3" </span><span class="attribute-name">src</span>="images/4.jpg" <span class="attribute-name">class</span>=<span class="attribute-value">"slide" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"Prompt Solution" </span><span class="error"><span class="attribute-name">/</span></span>></<span class="end-tag">a</span>> <<span class="start-tag">a</span><span class="attribute-name"> href</span>="">
<<span class="start-tag">img</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-img-4" </span><span class="attribute-name">src</span>="images/3.jpg" <span class="attribute-name">class</span>=<span class="attribute-value">"slide" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"Prompt Solution Inc" </span><span class="error"><span class="attribute-name">/</span></span>></<span class="end-tag">a</span>>
</pre>
<pre id="line35"><<span class="start-tag">a</span><span class="attribute-name"> href</span>="">
<<span class="start-tag">img</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-img-5" </span><span class="attribute-name">src</span>="images/0.jpg" <span class="attribute-name">class</span>=<span class="attribute-value">"slide" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"Prompt Slide" </span><span class="error"><span class="attribute-name">/</span></span>></<span class="end-tag">a</span>>
<<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-controls"</span>>
<<span class="start-tag">p</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-client" </span><span class="attribute-name">class</span>=<span class="attribute-value">"text"</span>>
<<span class="start-tag">strong</span>>post: </<span class="end-tag">strong</span>><<span class="start-tag">span</span>></<span class="end-tag">span</span>>
</<span class="end-tag">p</span>>
<<span class="start-tag">p</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-desc" </span><span class="attribute-name">class</span>=<span class="attribute-value">"text"</span>>
</<span class="end-tag">p</span>>
</pre>
<pre id="line43"><<span class="start-tag">p</span><span class="attribute-name"> id</span>=<span class="attribute-value">"slide-nav"</span>>
</<span class="end-tag">p</span>>
</<span class="end-tag">div</span>>
</<span class="end-tag">div</span>>
<span class="comment"><!--content featured gallery here --></span>
</<span class="end-tag">div</span>>
<<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>>
if (!window.slider) var slider = {}; slider.data = [
{ "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" },
{ "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" },
{ "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" },
{ "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here"}];
</<span class="end-tag">script</span>>
</pre>
<pre id="line67"></<span class="end-tag">div</span>>
</<span class="end-tag">div</span>>
<span class="comment"><!--/header--></span>
</<span class="end-tag">div</span>>
</<span class="end-tag">body</span>>
</<span class="end-tag">html</span>>
</pre>
</div>
<br />
<br />
<pre id="line1"><span style="font-size: large;"><b>scripts Code</b></span></pre>
<div class="frame_block">
<pre id="line1">window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
+'\nError description: \t'+desc
+'\nPage address: \t'+page
+'\nLine number: \t'+line
);*/
}
$(function(){
$('a').focus(function(){this.blur();});
SI.Files.stylizeAll();
slider.init();
$('input.text-default').each(function(){
$(this).attr('default',$(this).val());
}).focus(function(){
if($(this).val()==$(this).attr('default'))
$(this).val('');
}).blur(function(){
if($(this).val()=='')
$(this).val($(this).attr('default'));
});
$('input.text,textarea.text').focus(function(){
$(this).addClass('textfocus');
}).blur(function(){
$(this).removeClass('textfocus');
});
var popopenobj=0,popopenaobj=null;
$('a.popup').click(function(){
var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
var pobj=$('#'+pid);
if(!pobj.length)
return false;
if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
popopenobj.hide(50);
$(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
popopenobj=null;
}
return false;
});
$('p.images img').click(function(){
var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
$(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
$(this).parent().find('img').removeClass('on');
$(this).addClass('on');
return false;
});
$(window).load(function(){
//$.each(css_ims,function(){(new Image()).src=_siteRoot+'../images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
$('div.sc-large div.img:has(div.tml)').each(function(){
$('div.tml',this).hide();
$(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
}).click(function(){
$(this).siblings('div.tml').slideToggle();
return false;
}).focus(function(){this.blur();});
});
});
var slider={
num:-1,
cur:0,
cr:[],
al:null,
at:10*1000,
ar:true,
init:function(){
if(!slider.data || !slider.data.length)
return false;
var d=slider.data;
slider.num=d.length;
var pos=Math.floor(Math.random()*1);//slider.num);
for(var i=0;i<slider.num;i++){
$('#'+d[i].id).css({left:((i-pos)*1000)});
$('#slide-nav').append('<a class="num" id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
}
$('img,div#slide-controls',$('div#slide-holder')).fadeIn();
slider.text(d[pos]);
slider.on(pos);
slider.cur=pos;
window.setTimeout('slider.auto();',slider.at);
},
auto:function(){
if(!slider.ar)
return false;
var next=slider.cur+1;
if(next>=slider.num) next=0;
slider.slide(next);
},
slide:function(pos){
if(pos<0 || pos>=slider.num || pos==slider.cur)
return;
window.clearTimeout(slider.al);
slider.al=window.setTimeout('slider.auto();',slider.at);
var d=slider.data;
for(var i=0;i<slider.num;i++)
$('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
slider.on(pos);
slider.text(d[pos]);
slider.cur=pos;
},
on:function(pos){
$('#slide-nav a').removeClass('on');
$('#slide-nav a#slide-link-'+pos).addClass('on');
},
text:function(di){
slider.cr['a']=di.client;
slider.cr['b']=di.desc;
slider.ticker('#slide-client span',di.client,0,'a');
slider.ticker('#slide-desc',di.desc,0,'b');
},
ticker:function(el,text,pos,unique){
if(slider.cr[unique]!=text)
return false;
ctext=text.substring(0,pos)+(pos%2?'-':'_');
$(el).html(ctext);
if(pos==text.length)
$(el).html(text);
else
window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
}
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
htmlClass:'SI-FILES-STYLIZED',
fileClass:'file',
wrapClass:'cabinet',
fini:false,
able:false,
init:function(){
this.fini=true;
},
stylize:function(elem){
if(!this.fini){this.init();};
if(!this.able){return;};
elem.parentNode.file=elem;
elem.parentNode.onmousemove=function(e){
if(typeof e=='undefined') e=window.event;
if(typeof e.pageY=='undefined' && typeof e.clientX=='number' && document.documentElement){
e.pageX=e.clientX+document.documentElement.scrollLeft;
e.pageY=e.clientY+document.documentElement.scrollTop;
};
var ox=oy=0;
var elem=this;
if(elem.offsetParent){
ox=elem.offsetLeft;
oy=elem.offsetTop;
while(elem=elem.offsetParent){
ox+=elem.offsetLeft;
oy+=elem.offsetTop;
};
};
};
},
stylizeAll:function(){
if(!this.fini){this.init();};
if(!this.able){return;};
}
};</pre>
<br /></div>
<br />
<b><span style="font-size: large;">Animation1 CSS Code</span></b><br />
<div class="frame_block">
<pre id="line1">a img {
border : 0;
}
div.wrap a,div.wrap a:hover
{
color:#fff;
}
div.wrap {
width : 980px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 980px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 235px;
background : url(../images/ani.png) no-repeat left top ;
}
div#header div#slide-holder {
z-index : 40;
width : 980px;
height : 236px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 1px;
left : 1px;
width : 975px;
height : 224px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 0px;
width : 973px;
height : 30px;
display : none;
position : absolute;
background : url(../images/images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display:none;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 5px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 17px;
display : inline;
margin : 2px 5px 0 0;
font-size : 0px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
color:#fff;
line-height:22px;
margin : 0 5px 0 0;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(../images/images/silde-nav1.png);
}
div#nav ul li a {
background : url(../images/images/nav.png) no-repeat;
}</pre>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div>
</div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-73806093250909035412011-07-12T04:43:00.000-07:002011-08-04T06:07:50.932-07:00Jquey Tutorial for Slideshow, Jquery Image gallery, Image galley with description using Jquery, Image Slideshow using Lightbox in Jquery Image Slideshow using Lightbox in Jquery<div dir="ltr" style="text-align: left;" trbidi="on">while searching for Slideshow(image gallery) I found <a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">Jquery light box plugin</a> which use <a href="http://websolution4u.blogspot.com/2011/06/model-box-in-javascript-simple.html" target="_blank">Modelbox (Light box)</a> to view show gallery image and its description.<br />
<br />
This image gallery is too easy to implement on our websites.<br />
<br />
<b style="font-weight: normal;">jQuery lightBox plugin</b> is simple, elegant, unobtrusive, no need extra markup and is <b style="font-weight: normal;">used to overlay images on the current page</b> through the power and flexibility of jQuery's selector.<br />
<br />
Here I am providing the tutorial to implement the image gallery.<br />
<br />
<b>HTML Source Code</b><br />
<div class="frame_block"><div id="gallery"><br />
<ul><br />
<li><br />
<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here"><br />
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" /><br />
</a><br />
</li><br />
<li><br />
<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg" title="put your descript here"><br />
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image2.jpg" width="72" height="72" alt="" /><br />
</a><br />
</li><br />
<li><br />
<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg" title="put your descript here"><br />
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image3.jpg" width="72" height="72" alt="" /><br />
</a><br />
</li><br />
<li><br />
<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image4.jpg" title="put your descript here"><br />
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image4.jpg" width="72" height="72" alt="" /><br />
</a><br />
</li><br />
<li><br />
<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image5.jpg" title="put your descript here"><br />
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image5.jpg" width="72" height="72" alt="" /><br />
</a><br />
</li><br />
</ul><br />
</div></div><br />
<b>CSS and Script</b> <br />
<div class="frame_block"><a href="http://119.82.71.124/fb/jquey_lightbox/js/jquery.js" target="_blank">http://119.82.71.124/fb/jquey_lightbox/js/jquery.js</a><br />
<a href="http://119.82.71.124/fb/jquey_lightbox/js/jquery.lightbox-0.5.js" target="_blank">http://119.82.71.124/fb/jquey_lightbox/js/jquery.lightbox-0.5.js</a><br />
<a href="http://119.82.71.124/fb/jquey_lightbox/css/jquery.lightbox-0.5.css" target="_blank">http://119.82.71.124/fb/jquey_lightbox/css/jquery.lightbox-0.5.css</a><br />
<script type="text/javascript"><br />
$(function() {<br />
$('#gallery a').lightBox();<br />
});<br />
</script><br />
<style type="text/css"><br />
/* jQuery lightBox plugin - Gallery style */<br />
#gallery {<br />
background-color: #444;<br />
padding: 10px;<br />
width: 520px;<br />
}<br />
#gallery ul { list-style: none; }<br />
#gallery ul li { display: inline; }<br />
#gallery ul img {<br />
border: 5px solid #3e3e3e;<br />
border-width: 5px 5px 20px;<br />
}<br />
#gallery ul a:hover img {<br />
border: 5px solid #fff;<br />
border-width: 5px 5px 20px;<br />
color: #fff;<br />
}<br />
#gallery ul a:hover { color: #fff; }<br />
</style></div><br />
<b>Modification</b><br />
Here we mention the <b>ID selector</b> name in which the gallery exist.<b> </b>you can use any of <b>id exist</b> in you webpage.<br />
<b><br />
</b><br />
<b><span style="font-size: x-small;">$(function() {<br />
$('#gallery a').lightBox();<br />
});</span></b><br />
<br />
<br />
<b>Image and thumbnail information</b><br />
<br />
<b>BIG Image: </b>Anchor tags href contain the URL of Bigger image which has to be open after click on image thumbnails.<br />
<b><br />
</b><br />
<b>Description: </b>For inserting Description of image we need to mention all description into anchor tag's TITLE attribute.<br />
<br />
<b>Thumb:</b> For Thumbnail we use IMG tag as small image.<br />
<br />
<span style="font-size: x-small;"><a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here"><br />
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" /><br />
</a></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://119.82.71.124/fb/jquey_lightbox/index.htm" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://119.82.71.124/fb/jquey_lightbox/jquery-lightbox-0.5.zip" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" /></a></div></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-90161783166827561282011-07-06T22:07:00.000-07:002013-01-03T04:53:18.892-08:00jquery tutorial for check all checkbox, Select Multiple checkbox, JQuery Check and Uncheck All Checkboxes<div dir="ltr" style="text-align: left;" trbidi="on">
This function is specially designed for dynamic pages with varying numbers of checkboxes.<br />
<br />
I found same functionality in JavaScript too but we can't use same script for two control.<br />
<br />
So i decide to create Jquery for same script here I am providing both SCRIPT code for JavaScript and Jquery.<br />
<br />
JavaScript<br />
<div class="frame_block">
<pre><code>function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}</code></pre>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span id="goog_976805676"></span><a href="http://www.somacon.com/p117.php" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a><span id="goog_976805677"></span></div>
<br />
<br />
Jquery<br />
<div class="frame_block">
<pre><code>
$('#ctl00_ContentPlaceHolder1_chkPending').live('click',function() {
if(pending==0){
$("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", false);
$("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
$(this).attr("checked", false);
});
pending=1;
}
else
{
$("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", true);
$("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
$(this).attr("checked", true);
});
pending=0;
}
});
</code></pre>
</div>
<br />
Please do not forget to add Jquery library file.<br />
<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js</a><br />
<br />
You all need to do is put two id's into script.<br />
<span style="font-size: x-small;"><b>$("#ctl00_ContentPlaceHolder1_GridView1_ctl01_ChkAll").toggle</b></span><br />
<br />
<span style="font-size: x-small;">here you need to put id of whom click you want to check all check-box<b> .</b></span><br />
<span style="font-size: x-small;"><b><br />
</b></span><br />
<span style="font-size: x-small;"><b>$("#accordion1 input:checkbox").each</b></span><br />
here you need to mention in which all check-box should be checked. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://119.82.71.124/fb/123Start.htm" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><br />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://119.82.71.124/fb/123Start.zip" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><br />
</a></div>
</div>
Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-82251954434353088832011-07-05T21:42:00.000-07:002011-10-07T00:25:37.743-07:00Jquery Smooth Navigation menu, DropDown Menus, MultiLvel DropDown Menu in Jquery, MultiLevel Menu on Click event<div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-size: x-small;">Smooth Navigation Menu is a multi level, CSS list based menu powered using <a href="http://www.jquery.com/" target="_blank">jQuery</a> that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or <a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" target="_blank">an external file and fetched via Ajax instead</a>. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the <b>horizontal</b><b>vertical</b> (sidebar) orientation.</span> and <br /><br /> This menu i found from Dynamic Drive <a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" target="_blank">Smooth Navigation Menu</a> and used for multiple website.<br /><br />because it provides the orientation based Menu. Means we can use this menu as <b>HORIZONTAL</b> and <b>VERTICAL</b> also.<br /><br />But this menu is work on hover event.<br /><br />By modifying its jquery I able to run it on click event.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaPTQ5NmPKLBrV2tevpWpRUGjShfmZBSscU-r6etlFlkvoYlGhkUsMeGiPVbfbGUVpm3uqUtf8FXW6NjSvzfrjfIBANWD_tf76iUBdwfQzOoky8fE0nJ-1kAFd0wkcLoaXUzrBoIFUulw/s320/menu.jpg" width="320" /> </div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://119.82.71.124/fb/smooth.htm" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://119.82.71.124/fb/ddsmoothmen%5Bmodified%5D.zip" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" /></a></div></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-83653198493636636802011-06-28T21:59:00.000-07:002011-12-12T23:34:36.944-08:00Model Box In JavaScript, Simple JavaScript to create Light Box, Light Box Tutorial in javascript<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Now these days Light box / Model box are widely use in website to show content or some other information.<br /><br />and tutorial provide by website for creating Lightbox or Model box are too complex to alter the things.<br /><br />Here I am providing simple light box and Model box tutorial with using few lines of script code.<br /><br /><b>JavaScript Code</b> <br /><div class="frame_block"><pre id="line21">function gray_box1() {<br />document.getElementById('light1').style.display = 'block';<br />document.getElementById('fade').style.display = 'block';<br />document.getElementById('fade').style.height='2000px';<br />}</pre></div><br /><br /><br /><b>HTML Code</b> <br /><div class="frame_block"><pre id="line222"><<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"fade" </span><span class="attribute-name">class</span>=<span class="attribute-value">"black_overlay"</span>><br />div> </pre><pre id="line222"><div class="white_content" id="light1"></div></pre><pre id="line222"><a href="javascript:void(0)" onclick="document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'" style="float: right;"><br />X<br /></a> </pre><pre id="line222">Hello! this is light box example. </pre><pre id="line222"></pre></div></div><br /><b>CSS Code</b><br /><div class="frame_block"><div class="cssRule cssEditableRule insertInto editGroup " role="presentation"><pre>.white_content {<br />background-color:white;<br />border:2px solid #FFFFFF;<br />display:none;<br />left:3%;<br />overflow:auto;<br />padding:2px;<br />position:absolute;<br />text-align:left;<br />top:35%;<br />width:450px;<br />z-index:1002;<br />}<br /><br />.black_overlay {<br />background-color:black;<br />display:none;<br />height:100%;<br />left:0;<br />opacity:0.4;<br />filter: alpha(opacity=40);<br />position:fixed;<br />top:0;<br />width:100%;<br />z-index:1001;<br />}</pre></div><br /></div><a href="http://www.martofimages.com/" target="_blank"><b>Online Link</b></a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://www.martofimages.com/" target="_blank"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuglX9P_Jg9FYcB6AgEixd8ouDWplxWvIlG43rkgjp91XFnExz1J22_W8R57Qw3IchumGHDupRpNs0LTnRCYNegP8tiN9yMsWpzCmzSg633oMO8aMj2qUT7-ipHxypah2zhcBS3oWd4TI/s400/moi.jpg" width="400" /></a></div><br /></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-28373976336243394162011-06-23T22:24:00.000-07:002011-08-04T06:10:03.245-07:00Multi Level CSS DropDownn, DropDown Menu, MiltiLevel menu, DropDown menu using CSS<div dir="ltr" style="text-align: left;" trbidi="on">Tomorrow I found an another Simple menu style which using CSS to create its drop down list and also it works upto 4 four level.<br />
<br />
it use different CSS style for this menu to work in IE6 using conditional CSS.<br />
<br />
So I decided to put that complete code here so that my Designer friends can use and learn easily.<br />
<br />
<br />
<b>Head Code Section</b><br />
<div class="frame_block"><pre id="line1"><<span class="start-tag">style</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/css" </span><span class="attribute-name">media</span>=<span class="attribute-value">"screen, tv, projection"</span>>
/*<![CDATA[*/
/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
.example {
background: #eee;
padding: 50px;
}
/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
top: 100%; /* 1st level go below their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END -- */
/* -- sticky.submenu --
it should not disappear when your mouse moves a bit outside the submenu
YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
if you do it, make sure you 110% know what you do */
.menu ul {
background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
/*background: #f00;*/ /* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */
/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */
.menu, .menu ul li {
color: #eee;
background: #234;
}
.menu ul {
width: 11em;
}
.menu a {
text-decoration: none;
color: #eee;
padding: .4em 1em;
display: block;
position: relative;
}
.menu a:hover, .menu li:hover>a {
color: #fc3;
}
.menu li li { /* create borders around each item */
border: 1px solid #ccc;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
color: #567;
}
/* Fix for IE5/Mac \*//*/
.menu a {
float: left;
}
/* End Fix */
/*]]>*/
</<span class="end-tag">style</span>>
<span style="font-size: large;"><b><span class="comment"><!--</span> Conditional CSS for IE6 <span class="comment">--></span></b></span>
<span class="comment"><!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */
/*
this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
of course, that means that it might require different styling then.
in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
*/
.menu ul {
visibility: visible;
position: static;
}
.menu, .menu ul { /* float.clear */
zoom: 1;
}
.menu li.adxmhover {
z-index: 10000;
}
.menu .adxmhoverUL { /* li:hover>ul selector */
visibility: visible;
}
.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
top: 100%;
left: 0;
}
.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu ul a { /* fix clickability-area problem */
zoom: 1;
}
.menu li li { /* fix white gap problem */
float: left;
width: 100%;
}
.menu li li { /* prevent double-line between items */
margin-top: -1px;
}
.menu a:hover, .menu .adxmhoverA { /* li:hover>a selector */
color: #fc3;
}
.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
/*]]>*/
</style>
<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]--></span></pre></div><br />
<br />
<br />
<b>HTML Source Code</b><br />
<div class="frame_block"><div class="example"><br />
<ul class="adxm menu"><br />
<li><a href="#">Main menu:</a></li><br />
<li><a href="#" title="My writings">Blog</a><br />
<ul><br />
<li><a href="#">Home</a></li><br />
<li><a href="#feeds/">Feeds</a></li><br />
<li><a href="#archive/">Archive</a></li><br />
</ul><br />
</li><br />
<li><a href="#adxmenu/" title="Nested fly-out menu, standard-compliant">ADxMenu</a><br />
<ul><br />
<li><a href="#">1st submenu</a></li><br />
<li><a href="#adxmenu/">Overview</a></li><br />
<li><a href="#adxmenu/instructions/">Instructions</a></li><br />
<li><a href="#adxmenu/examples/">Examples</a><br />
<ul><br />
<li><a href="#">2nd submenu</a></li><br />
<li><a href="#adxmenu/examples/htb/">Top to bottom</a></li><br />
<li><a href="#adxmenu/examples/hbt/">Bottom to top</a><br />
<ul><br />
<li><a href="#">3rd submenu</a></li><br />
<li><a href="#">Item 2</a></li><br />
<li><a href="#">Item 3</a></li><br />
<li><a href="#">Item 4</a></li><br />
</ul><br />
</li><br />
<li><a href="#adxmenu/examples/vlr/">Left to right</a></li><br />
<li><a href="#adxmenu/examples/vrl/">Right to left</a></li><br />
</ul><br />
</li><br />
<li><a href="#adxmenu/trouble/">Troubleshooting</a></li><br />
</ul><br />
</li><br />
<li><a href="#wch/" title="Windowed Controls Hider, for Win IE">WCH</a><br />
<ul><br />
<li><a href="#wch/">Overview</a></li><br />
<li><a href="#wch/instructions/">Instructions</a></li><br />
<li><a href="#wch/examples/">Examples</a></li><br />
<li><a href="#wch/trouble/">Troubleshooting</a></li><br />
</ul><br />
</li><br />
<li><a href="#lab/" title="Reusable web techniques">Lab</a><br />
<ul><br />
<li><a href="#css/z-pos">z-index tutorial</a></li><br />
<li><a href="#css/forms/">Styling forms</a></li><br />
<li><a href="#css/cfl/">Centered frame layout</a></li><br />
<li><a href="#css/tabs2/">Tabs with variable height</a></li><br />
<li><a href="#css/nestedtabs2/">2-level navigation</a></li><br />
<li><a href="#css/ow/">Tabs: Overlapping Windows</a></li><br />
<li><a href="#scripts/windowopen/">Unobtrusive window.open</a></li><br />
<li><a href="#scripts/fif/">Floating iFrame</a></li><br />
</ul><br />
</li><br />
<li><a href="#deliver/" title="Various sites I (co-)did">Delivered</a><br />
<ul><br />
<li><a href="#deliver/sites/">Sites &amp; proof of concepts</a></li><br />
<li><a href="#deliver/wp/">WordPress goodies</a></li><br />
</ul><br />
</li><br />
<li><a href="#about/" title="Relevant info about me">Colophon</a></li><br />
<li><a href="#about/contact/">Contact me</a></li><br />
</ul><br />
</div></div><br />
<b>JavaScript link</b><br />
<pre id="line1"><a href="http://aplus.rs/adxmenu/examples/code/ADxMenu.js" target="_blank"><span class="comment">ADxMenu.js</span></a></pre><pre id="line1"><span class="comment"> </span></pre><div class="separator" style="clear: both; text-align: center;"><a href="http://aplus.rs/adxmenu/examples/htb/" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-ZK919GNa58Y/TgQVp067WLI/AAAAAAAAAIY/S20mNbnA8oo/s1600/button_demo_hv.jpg" /></a></div><pre id="line1"> </pre><div class="separator" style="clear: both; text-align: center;"><a href="http://119.82.71.124/fb/htb.zip" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" /></a></div><pre id="line1"> </pre></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-7609315146718476992011-06-22T22:35:00.000-07:002011-08-04T06:10:36.063-07:00JavaScript Captcha implement, Form Captcha validation, captcha implementation using image and MD5<div dir="ltr" style="text-align: left;" trbidi="on">CAPTCHAs are used in attempts to prevent automated software from performing actions which degrade the quality of service of a given system, whether due to abuse or resource expenditure.<br />
<br />
Its very difficult to implement captch into Static HTML pages. so here i am providing simple code to implement captcha.<br />
<br />
<div class="frame_block"><iframe src="http://119.82.71.124/fb/captcha/index.html" style="height: 400px; width: 100%;"></iframe></div><br />
use script function to create input and image field in your for and link the <a href="http://119.82.71.124/fb/captcha/md5.js" target="_blank">md5.js</a> and <a href="http://119.82.71.124/fb/captcha/jcap.js" target="_blank">jcap.js</a> in your HTML source.<br />
<br />
<pre id="line15"><<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>>sjcap();</<span class="end-tag">script</span>></pre><br />
<b><a href="http://planetecomsolutions.com/Contact.aspx" target="_blank">website using this script for using captcha.</a></b><br />
<a href="http://119.82.71.124/fb/captcha/index.html" target="_blank"> <b>View online</b></a><br />
<a href="http://119.82.71.124/fb/captcha/jcap.zip" target="_blank"><b>Download source code</b></a> <br />
<br />
</div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com23tag:blogger.com,1999:blog-5544254570073715614.post-19726855591118698232011-06-22T21:55:00.000-07:002011-08-04T06:11:36.568-07:00Jquery Form validator, Form Validation, Regular form validation mail<div dir="ltr" style="text-align: left;" trbidi="on">Here I am providing form validation code for regular expression using jquery. Just comment the field you don't want.<br />
<br />
<b>Live Demo</b><br />
<div class="frame_block"><iframe src="http://119.82.71.124/fb/form_validator/demoRegExp.html" style="height: 400px; width: 100%;"></iframe></div><br />
<a href="http://119.82.71.124/fb/form_validator/demoRegExp.zip" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-zPAk8rguxO8/TgQVp_0pSOI/AAAAAAAAAIc/xcP2bG1VjK8/s1600/button_src_hv.jpg" /></a></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-81957021468422360662011-06-20T21:46:00.000-07:002011-08-04T13:55:15.886-07:00W3C Checker, Web Accessibility checker, Tools to check W3C and Accessibility tool, Web Accessibility Testing Tools for Designers, W3C Checker for Mobile web, W3C Stamdards<div dir="ltr" style="text-align: left;" trbidi="on">From Last Four Months I am working for Banks website like CBI and OBC as they are our Company's Clients.<br /><br />To achieve the Web Accessibility Level AA we done few things and features implement to our clients website.<br /><br />But except all I found that do we know that our page has pass Web Accessibility Test.<br /><br />After searching long time I found few of link which check the web accessibility Level AA.<br /><br />I want to share those link on my blog so it will be easy to Implement the Web accessibility Level AA to Designers/Developer.<br /><br />Accessibility testing tools can assist web designers in making their web site accessible to all visitors. Most of the online testers cannot test some checkpoints in the W3C Web Content Accessibility Guidelines at all and can only partially test others.<br />The most important part before starting Web Accessibility is to Create a well formed structured web page.<br />We use W3C checker to check structured Validation of web page.<br />Tests HTML documents for conformance with HTML standards. The HTML Validation Service specifically tests for compliance with Level AA Checkpoint 3.2: “Create documents that validate to published formal grammars”, however it will pick up other accessibility errors such as missing ALT attributes and invalid field labels.<br /><div class="MsoNormal"><strong>W3C HTML Validator</strong><br /><a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a> </div><br />Tests cascading style sheets to ensure they conform with CSS standards. The CSS Validation Service specifically tests for compliance with Level AA Checkpoint 3.2: “Create documents that validate to published formal grammars”.<br />The validator is not 100% accurate but passing validation with no errors or warnings is a good indicator that your code is Standards-compliant. One weakness with the validator is that it can get confused if the CSS version is not specified or if the CSS uses a mix of CSS 1 & 2 for example. This can result in inaccurate reports. <br /><strong>W3C CSS Validator</strong><br /><a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a> <br /><br /><br /><br /><div class="MsoNormal"><span style="font-size: large;"><b>Web Accessibility checkers </b></span></div><div class="MsoNormal"><strong></strong><br />The WAVE is a page-by-page accessibility evaluator by WebAIM. It tests many, but not all, of the W3C Web Content Accessibility Guidelines. Also not mention the accessibility level so it can be use to implement basic feature(structured) of web page.</div><div class="MsoNormal"><br /></div><div class="MsoNormal"><strong>WAVE</strong><br /><a href="http://wave.webaim.org/index.jsp" rel="nofollow" target="_blank">http://wave.webaim.org/index.jsp</a> </div><div class="MsoNormal"><br /></div><div class="MsoNormal"><br /></div><div class="MsoNormal"><a href="http://achecker.ca/checker/index.php" target="_blank"><strong>AChecker</strong></a>. This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.</div><div class="MsoNormal"><br /></div><div class="MsoNormal">By using Its options you can check different level of web accessibility and also check the standard of HTML and CSS.</div><div class="MsoNormal"><br /></div><div class="MsoNormal">In short you have all checker facility here you needed to implement to your website.</div><div class="MsoNormal"><strong>AChecker</strong></div><div class="MsoNormal"><strong><a href="http://achecker.ca/checker/index.php" target="_blank">http://achecker.ca/checker/index.php </a></strong></div></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-25343526205924780942011-06-15T22:26:00.000-07:002011-08-04T06:15:18.631-07:00Create HTML Scroller in div using CSS, CSS Tutorial to create HTML Scroller, CSS Scrollbar content<div dir="ltr" style="text-align: left;" trbidi="on">Last month I was working on my companies client website. he ask to me make scrollable area to show there text. because website content has too much text which increase the height of webpage too much.<br />
<br />
So I did some quick research into creating my own Scroll area without using script as i have posted before for <b><a href="http://websolution4u.blogspot.com/2011/06/javascript-slider-srollbar-in.html">JavaScript Scroll bar</a></b> content.<br />
<br />
After Searching I found CSS attribute "Overflow" and i found that this attribute can help me to create my own scrollable content.<br />
<br />
So here I am sharing the source code for CSS Scrollbar content.<br />
<br />
<b>CSS CODE With Div</b><br />
<div class="frame_block"><br />
<div style="width: 98%; padding: 1%; border: 2px solid rgb(170, 0, 0); height: 400px; overflow: auto;"><br />
<p><br />
This Subscriber Agreement and Terms of Use govern your use of RIP (Revitalize Inspire<br />
Perform) online magazine, distributed by The Aquiline Group, and unless other terms<br />
and conditions expressly govern, any other electronic services from RIP magazine<br />
and the Aquiline Group that may be made available from time to time (each, a "Service").</p><br />
<p><br />
If you agree to be bound by the terms of this Agreement, you should click on the<br />
"I AGREE" button at the end of this Agreement. If you do not agree to be bound by<br />
the terms of this Agreement, you should click "I DISAGREE." If you click "I DISAGREE,"<br />
you will not be able to proceed with the registration process for the respective<br />
Service and become a subscriber. To the extent you have access to, or are using,<br />
a Service without having completed our registration process or clicked on an "I<br />
AGREE" button, you are hereby notified that your continued use of a Service is subject<br />
to many of the terms and conditions of this Agreement as explained in Section 5<br />
below.</p><br />
<br />
<br />
<p><br />
<strong class="con_head">5. Limitations on Use. </strong><br />
<br><br />
a.Only one individual may access a Service at the same time using the same user<br />
name or password, unless we agree otherwise.</p><br />
<p><br />
b.The text, graphics, images, video, metadata, design, organization, compilation,<br />
look and feel, advertising and all other protectable intellectual property (the<br />
"Content") available through the Services are our property or the property of our<br />
advertisers and licensors and are protected by copyright and other intellectual<br />
property laws. Unless you have our written consent, you may not sell, publish, distribute,<br />
retransmit or otherwise provide access to the Content received through the Services<br />
to anyone, including, if applicable, your fellow students or employees, with the<br />
following exceptions:</p><br />
<p><br />
(i) You may occasionally distribute a copy of an article, or a portion of an article,<br />
from a Service in non-electronic form to a few individuals without charge, provided<br />
you include all copyright and other proprietary rights notices in the same form<br />
in which the notices appear in the Service, original source attribution, and the<br />
phrase "Used with permission from RIP magazine" or "Used with permission from the<br />
Aquiline Group" as appropriate. Please consult the RIP magazine web site if you<br />
need to distribute an article from a Service to a larger number of individuals,<br />
on a regular basis or in any other manner not expressly permitted by this Agreement.</p><br />
<p><br />
(ii)While you may download, store and create an archive of articles from the Service<br />
for your personal use, you may not otherwise provide access to such an archive to<br />
more than a few individuals on an occasional basis. The foregoing does not apply<br />
to any sharing functionality we provide through the Service that expressly allows<br />
you to share articles or links to articles with others. In addition, you may not<br />
use such an archive to develop or operate an automated trading system or for data<br />
or text mining.</p><br />
<p><br />
c.You agree not to rearrange or modify the Content. You agree not to create abstracts<br />
from, scrape or display our content for use on another web site or service (other<br />
than headlines from our RSS Feed with active links back to the full article on the<br />
Service). You agree not to post any content from the Services (other than headlines<br />
from our RSS Feed with active links back to the full article on the Service) to<br />
weblogs, newsgroups, mail lists or electronic bulletin boards, without our written<br />
consent.</p><br />
<p><br />
d.You agree not to use the Services for any unlawful purpose. We reserve the right<br />
to terminate or restrict your access to a Service if, in our opinion, your use of<br />
the Service may violate any laws, regulations or rulings, infringe upon another<br />
person's rights or violate the terms of this Agreement. Also, we may refuse to grant<br />
you a user name that impersonates someone else, is protected by trademark or other<br />
proprietary right law, or is vulgar or otherwise offensive.</p><br />
<br />
<br />
<p><br />
iii. Grant of Rights and Representations by You. If you upload, post or submit any<br />
User Content on a Service, you represent to us that you have all the necessary legal<br />
rights to upload, post or submit such User Content and it will not violate any law<br />
or the rights of any person. You agree that upon uploading, posting or submitting<br />
information on the Services, you grant the Aquiline Group, and our respective affiliates<br />
and successors a non-exclusive, transferable, worldwide, fully paid-up, royalty-free,<br />
perpetual, irrevocable right and license to use, distribute, publicly perform, display,<br />
reproduce, and create derivative works from your User Content in any and all media,<br />
in any manner, in whole or part, without any duty to compensate you. You also grant<br />
us the right to authorize the use of User Content, or any portion thereof, by users<br />
and other users in accordance with the terms and conditions of this Agreement, including<br />
the rights to feature your User Content specifically on the Services and to allow<br />
other users or users to request access to your User Content, such as for example<br />
through an RSS Feed.</p><br />
<p><br />
iv. We may also remove any User Content for any reason and without notice to you.<br />
This includes all materials related to your use of the Services or membership, including<br />
email accounts, postings, profiles or other personalized information you have created<br />
while on the Services.</p><br />
<p><br />
v. Copyright/IP Policy. It is our policy to respond to notices of alleged infringement<br />
that comply with the Digital Millennium Copyright Act. For more information about<br />
our policy, please see our Privacy Policy.</p><br />
<p><br />
<strong class="con_head">7. Third Party Web Sites, Services and Software. </strong><br><br />
We may link to, or promote web sites or services from other companies or offer you<br />
the ability to download software from other companies. You agree that we are not<br />
responsible for, and do not control, those web sites, services and software.</p><br />
<p><br />
<strong class="con_head">8. DISCLAIMERS OF WARRANTIES AND LIMITATIONS ON LIABILITY.<br />
</strong><br>YOU AGREE THAT YOUR ACCESS TO, AND USE OF, THE SERVICES AND THE CONTENT<br />
AVAILABLE THROUGH THE SERVICES IS ON AN "AS-IS", "AS AVAILABLE" BASIS AND WE SPECIFICALLY<br />
DISCLAIM ANY REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, WITHOUT<br />
LIMITATION, ANY REPRESENTATIONS OR WARRANTIES OF MERCHANTABILITY OR FITNESS FOR<br />
A PARTICULAR PURPOSE. We do not give tax or investment advice or advocate the purchase<br />
or sale of any security or investment. You should always seek the assistance of<br />
a professional for tax and investment advice. THE AQUILINE GROUP AND ITS SUBSIDIARIES,<br />
AFFILIATES, SHAREHOLDERS, DIRECTORS, OFFICERS, EMPLOYEES AND LICENSORS WILL NOT<br />
BE LIABLE (JOINTLY OR SEVERALLY) TO YOU OR ANY OTHER PERSON AS A RESULT OF YOUR<br />
ACCESS OR USE OF THE SERVICES FOR INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL,<br />
PUNITIVE, OR EXEMPLARY DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST PROFITS, LOST<br />
SAVINGS AND LOST REVENUES (COLLECTIVELY, THE "EXCLUDED DAMAGES"), WHETHER OR NOT<br />
CHARACTERIZED IN NEGLIGENCE, TORT, CONTRACT, OR OTHER THEORY OF LIABILITY, EVEN<br />
IF ANY OF THE AQUILINE GROUP PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF OR<br />
COULD HAVE FORESEEN ANY OF THE EXCLUDED DAMAGES, AND IRRESPECTIVE OF ANY FAILURE<br />
OF AN ESSENTIAL PURPOSE OF A LIMITED REMEDY. IF ANY APPLICABLE AUTHORITY HOLDS ANY<br />
PORTION OF THIS SECTION TO BE UNENFORCEABLE, THEN THE AQUILINE GROUP PARTIES' LIABILITY<br />
WILL BE LIMITED TO THE FULLEST POSSIBLE EXTENT PERMITTED BY APPLICABLE LAW.</p><br />
<p><br />
<strong class="con_head">9. General.</strong><br>This Agreement contains the final<br />
and entire agreement between us regarding your use of the Services and supersedes<br />
all previous and contemporaneous oral or written agreements regarding your use of<br />
the Services. We may discontinue or change the Services, or their availability to<br />
you, at any time. This Agreement is personal to you, which means that you may not<br />
assign your rights or obligations under this Agreement to anyone. No third party<br />
is a beneficiary of this Agreement. You agree that this Agreement, as well as any<br />
and all claims arising from this Agreement will be governed by and construed in<br />
accordance with the laws of the District of Columbia, United States of America applicable<br />
to contracts made entirely within the District of Columbia and wholly performed<br />
in Washington, D.C., without regard to any conflict or choice of law principles.<br />
The sole jurisdiction and venue for any litigation arising out of this Agreement<br />
will be an appropriate federal or state court located in Washington, D.C. This Agreement<br />
will not be governed by the United Nations Convention on Contracts for the International<br />
Sale of Goods.</p><br />
</div></div><br />
<br />
Just copy and paste above text into body tag of your HTML.<br />
<br />
and you will find content like this.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://revitalizeinspireperform.com/terms.aspx"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVek47ovVLq0iHZtDYT1Ri7elWk4Vle1AaRkdyO6_ZExwpZKRA7qIC9lyYRoRbcRgkg_BMdFGTCLXFiCXSGJ2GInGfQM4R2u7lrs6yG29hCFLPdXHoc4GTiBbnh8X7JmdHeYR_TBgwkms/s400/Untitled-1.jpg" width="400" />Div Scroll Area using CSS</a></div><br />
<br />
<a href="http://revitalizeinspireperform.com/terms.aspx"><b>Online link</b></a> <br />
<br />
</div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0tag:blogger.com,1999:blog-5544254570073715614.post-84085081087831051102011-06-15T01:53:00.000-07:002011-08-04T06:15:56.917-07:00JavaScript Video Gallery, youtube Video Gallery, JavaScript Dynamic Video Gallery, JavaScript Tutorial to create dynamic Video gallery using youtube, DHTML SlideShow in JavaScript for Video<div dir="ltr" style="text-align: left;" trbidi="on"> I found DHTML Slideshow coded in JavaScript on <a href="http://www.dynamicdrive.com/dynamicindex14/dhtmlslide.htm">Dynamic Drive for manual slide</a> show for images.<br />
<br />
I found it useful because i need same effect but Instead using image i need same effect for my videos.<br />
<br />
So i have edit its javascript to run OBJECT code of youtube flash to create my dynamic Video galley. I am sharing my own edited script here so it will help other users to create their Video gallery.<br />
<br />
To run the video we are using youtube links means videos uploaded on youtubes will run in our video gallery by passing their links to javascript array.<br />
<br />
I am providing here complete source for JavaScript Dynamic Video gallery.<br />
<br />
<b>HTML Source</b><br />
<div class="frame_block"><div class="youtube_frame"><br />
<div class="video"><br />
<script type="text/javascript"><br />
<br />
//Define your own array to hold the photo album images<br />
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]<br />
<br />
var myvacation = new Array()<br />
myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]<br />
myvacation[1] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&amp;hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]<br />
myvacation[2] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]<br />
myvacation[3] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&amp;hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]<br />
myvacation[4] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]<br />
myvacation[5] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&amp;hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]<br />
<br />
//myvacation[2]=["http://www.youtube.com/v/r5N2BLDftuY?fs=1&amp;hl=en_US&amp;color1=0x234900&amp;color2=0x4e9e00", "Delhi 6 Mast Song", ""]<br />
<br />
<br />
//initiate a photo gallery<br />
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])<br />
var thepics = new photogallery(myvacation, 1, 1, '659px', '260px', 'testing')<br />
<br />
//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"<br />
//DELETE everything below to disable<br />
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined<br />
thepics.onselectphoto = function(img, link) {<br />
if (link != null) //if this image is hyperlinked<br />
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")<br />
return false //cancel default action when clicking on image, by returning false instead of true<br />
}<br />
<br />
</script></div><br />
<br />
</div></div><br />
Put this text into body of your HTML.<br />
<br />
<b>CSS Source</b><br />
<div class="frame_block"><br />
<style type="text/css"><br />
.youtube_frame{<br />
width:659px;<br />
height:324px;<br />
float:left;<br />
position:relative;<br />
border:1px #000 solid;<br />
}<br />
.video{<br />
height:260px;<br />
float:left;<br />
width:659px;<br />
}<br />
.photogallery{ /*CSS for TABLE containing a photo album*/<br />
background:none repeat scroll 0 0 #222121;<br />
}<br />
<br />
.photogallery img{ /*CSS for images within an album*/<br />
border: 1px solid green;<br />
}<br />
<br />
.photonavlinks{ /*CSS for pagination DIV*/<br />
font: bold 14px Arial;<br />
text-align:right;<br />
height:44px;<br />
position:relative;<br />
z-index:0;<br />
color:#fff;<br />
padding-top:20px;<br />
background:none repeat scroll 0 0 #222121;<br />
<br />
}<br />
<br />
.photonavlinks a{ /*CSS for each navigational link*/<br />
margin-right: 2px;<br />
margin-bottom: 3px;<br />
padding: 1px 5px;<br />
text-decoration: none;<br />
color:#000;<br />
background-color: white;<br />
}<br />
<br />
.photonavlinks a.current{ /*CSS for currently selected navigational link*/<br />
background-color:#ff01a5;<br />
color:white;<br />
}<br />
</style></div><br />
JavaScript Source<br />
<div class="frame_block"><pre id="line1">// -------------------------------------------------------------------
// Photo Album Script v2.0- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Mar 11th, 07': Script updated to v2.0
// -------------------------------------------------------------------
function photogallery(garray, cols, rows, twidth, theight, paginatetext){
gcount=(typeof gcount=="undefined")? 1 : gcount+1 //global var to keep count of current instance of photo gallery
this.gcount=gcount
this.galleryarray=garray
this.cols=cols
this.rows=rows
var twidth=twidth || "700x" //default table width is 700px
var theight=theight || "500px"
var ptext=(typeof paginatetext=="object")? paginatetext : ["Browse Gallery:", ""] //Store 2 compontents of paginate DIV text inside array
this.pagecount=Math.ceil(this.galleryarray.length/(cols*rows)) //calculate number of "pages" needed to show the images
document.write('<table class="photogallery" id="photogallery-'+gcount+'" style="width:'+twidth+'; height:'+theight+';">') //Generate table for Photo Gallery
for (var r=0; r<rows; r++){
document.write('<tr>')
for (var c=0; c<cols; c++)
document.write('<td valign="top"></td>')
document.write('</tr>')
}
document.write('</table>')
document.write('<div class="photonavlinks" id="photogallerypaginate-'+gcount+'"></div>') //Generate Paginate Div
var gdiv=document.getElementById("photogallery-"+this.gcount)
var pdiv=document.getElementById("photogallerypaginate-"+this.gcount)
gdiv.onselectphoto=function(imgobj, linkobj){return true} //custom event handler "onselectphoto", invoked when user clicks on an image within gallery
this.showpage(gdiv, 0)
this.createNav(gdiv, pdiv, ptext)
gdiv.onclick=function(e){return photogallery.defaultselectaction(e, this)} //attach default custom event handler action to "onclick" event
return gdiv
}
photogallery.prototype.createImage=function(imgparts){
//var imageHTML='<img src="'+imgparts[0]+'" title="'+imgparts[1]+'"/>'
var imageHTML='<object height="243" width="645" type="application/x-shockwave-flash" data="'+imgparts[0]+'"><param name="movie" value="'+imgparts[0]+'"><param name="quality" value="high"><param value="opaque" name="wmode"></object>'
if (typeof imgparts[2]!="undefined" && imgparts[2]!=""){ //Create URL?
var linktarget=imgparts[3] || ""
imageHTML='<a href="'+imgparts[2]+'" target="'+linktarget+'">'+imageHTML+'</a>'
}
if (typeof imgparts[1]!="undefined" && imgparts[1]!="") //Display description?
imageHTML+='<div class="details" style="position:absolute; left:0px; bottom:30px;">'+imgparts[1] +'</div>'
return imageHTML
}
photogallery.prototype.showpage=function(gdiv, pagenumber){
var totalitems=this.galleryarray.length //total number of images
var showstartindex=pagenumber*(this.rows*this.cols) //array index of div to start showing per pagenumber setting
var showendindex=showstartindex+(this.rows*this.cols) //array index of div to stop showing after per pagenumber setting
var tablecells=gdiv.getElementsByTagName("td")
for (var i=showstartindex, currentcell=0; i<showendindex && i<totalitems; i++, currentcell++) //Loop thru this page's images and populate cells with them
tablecells[currentcell].innerHTML=this.createImage(this.galleryarray[i])
while (currentcell<tablecells.length){ //For unused cells, if any, clear out its contents
tablecells[currentcell].innerHTML=""
currentcell++
}
}
photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
var instanceOfGallery=this
var navHTML=""
for (var i=0; i<this.pagecount; i++)
navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a> ' //build sequential nav links
pdiv.innerHTML=ptext[0]+' '+navHTML
var navlinks=pdiv.getElementsByTagName("a")
navlinks[0].className="current" //Select first link by default
this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
for (var i=0; i<navlinks.length; i++){
navlinks[i].onclick=function(){
instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
return false
}
}
}
photogallery.defaultselectaction=function(e, gdiv){ //function that runs user defined "onselectphoto()" event handler
var evtobj=e || window.event
var clickedobj=evtobj.target || evtobj.srcElement
if (clickedobj.tagName=="object"){
var linkobj=(clickedobj.parentNode.tagName=="A")? clickedobj.parentNode : null
return gdiv.onselectphoto(clickedobj, linkobj)
}
}</pre></div><br />
<b>Modification</b><br />
myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&amp;hl=en_US", "Indian michael jackson awesome dance - funny video", ""]<br />
<br />
Myacation is array name to add new links.<br />
it accept four argument as describe below.<br />
["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]<br />
<br />
path_to_thumbnail = here you mention the url for video you want to run.<br />
Else option will not used as we are working on video so their title will be same as it on youtube.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://119.82.71.124/fb/aiiff/index.html"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVk7ve4QzTDXeA6zoe2OUAh8_C-kPftMHop0uzIXtm9HZiLD5vKXadO5iqPGDKQePNI2RP7_K4-22jc82Fi2VwTJInrPJx9ZpA2CCK1mqsUjwo3Hsw30XwRSh_0GD4k2zuoDGvER6G5E/s400/video.jpg" width="400" /></a></div><br />
<a href="http://119.82.71.124/fb/aiiff/index.html"><span id="goog_1276482463"></span><b>Online Link<span id="goog_1276482464"></span></b></a><br />
<br />
<b><a href="http://119.82.71.124/fb/aiiff/videogallery.zip">Download link</a></b></div>Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com1tag:blogger.com,1999:blog-5544254570073715614.post-90145917479164530572011-06-14T02:12:00.000-07:002013-04-26T05:10:43.325-07:00Jquery Tutorial for accordion, javascript Accordion, Jquery Slide animation<div dir="ltr" style="text-align: left;" trbidi="on">
Here I explaing you how to apply Javascript effects by using jQuery. <br />
Jquery Plugin is used to implement lots of animation and work for those we are using Ajax.<br />
<br />
<b>LIVE DEMO</b><br />
<br />
<div class="frame_block">
<iframe src="http://www.webdesignerwall.com/demo/jquery/accordion1.html" style="border: medium none; height: 400px; width: 800px;"></iframe></div>
<br />
<b>HTML Source Code</b><br />
<br />
<div class="frame_block">
<pre id="line1"><<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"accordion"</span>>
<<span class="start-tag">h3</span>>Question One Sample Text</<span class="end-tag">h3</span>>
<<span class="start-tag">p</span>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</<span class="end-tag">p</span>>
<<span class="start-tag">h3</span>>This is Question Two</<span class="end-tag">h3</span>>
<<span class="start-tag">p</span>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</<span class="end-tag">p</span>>
<<span class="start-tag">h3</span>>Another Questio here</<span class="end-tag">h3</span>>
<<span class="start-tag">p</span>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</<span class="end-tag">p</span>>
<<span class="start-tag">h3</span>>Sample heading</<span class="end-tag">h3</span>>
<<span class="start-tag">p</span>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</<span class="end-tag">p</span>>
<<span class="start-tag">h3</span>>Sample Question Heading</<span class="end-tag">h3</span>>
<<span class="start-tag">p</span>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</<span class="end-tag">p</span>>
</<span class="end-tag">div</span>>
</pre>
</div>
<br />
<b> CSS Source Code</b><br />
<br />
<div class="frame_block">
<pre id="line1"><<span class="start-tag">style</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/css"</span>>
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</<span class="end-tag">style</span>></pre>
</div>
<br />
<b>Jquey Source Code</b><br />
<br />
<div class="frame_block">
<pre id="line1"><<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>>
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</<span class="end-tag">script</span>></pre>
</div>
<br />
<b><a href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">Jquery Liabrary File</a></b> <br />
<br />
<b>Jquery Modification</b><br />
<br />
<pre id="line1"><b>$(".accordion p:not(:first)").hide();</b></pre>
<div id="line1">
this code Reefer that first <b>P</b> tag will not close else all will be close by default.</div>
<div id="line1">
If you want to hide all tabs just comment this line in jquery code.</div>
<div id="line1">
You can any of tag like <b>DIV, SPAN</b> instead of using <b>P</b> tag.</div>
<div id="line1">
you can also modified the css as well as i did one of my project.</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2GqmAqDvbBs1_v40TR6rAVtESaW9oHXM2hLqkCB93bPNQbuhyphenhyphen4CWFxFyYu_CgP5reIqnb77D-muYZl5Vt429ZxI929O8vEz22v_N_iVHGfCKz8TNF0Jut29lD9X1Qxg-uHQ2wXkrRro/s400/Untitled-1.jpg" width="400" /></div>
<span style="font-size: large;"><a href="http://www.iocl.com/Products/Indanegas.aspx"><b>ONLINE Link</b></a> </span>
<span style="font-size: large;"><b><a href="http://websolution4u.blogspot.com/p/contact-us.html">if you need any other modification feel free to write me</a>.</b></span>
</div>
Anonymoushttp://www.blogger.com/profile/08402648705950212923noreply@blogger.com0