Scroll text on webpage
Front end
<table width="100%" cellspacing="0px" cellpadding="0px" class="NewsBgColor">
<tr>
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Friday, February 22, 2013
Scroll text on webpage
Sunday, February 3, 2013
Moving focus around the table in Jquery
Last week i answered a question in a fourm ( http://forums.asp.net/p/1877841/5281857.aspx/1?How+can+I+move+the+focus+around+my+html+table+ ) to move focus around the cells in a table using jquery . i go with keypress event. below it goes.
Thursday, January 10, 2013
Shuffle div in jquery
Hi,
Shuffle div in jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.span1
{
width: 228px;
background-color: #2D89EF
!important;
height: 63px;
float: left;
cursor: pointer;
}
.span2
{
width: 228px;
background-color: #00A300
!important;
height: 63px;
float: left;
cursor: pointer;
}
.span3
{
width: 228px;
background-color: #FFC40D
!important;
height: 63px;
float: left;
cursor: pointer;
}
.span3:hover
{
cursor: pointer;
}
.place-right
{
float: right !important;
margin-left: 10px;
}
.fg-color-white
{
color: #FFFFFF !important;
}
</style>
<script src="Scripts/jquery-1.8.3.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
shuffle();
});
function shuffle() { //
pass the divs to the function
var e = $('#shuffle div');
var replace = $('<div>');
var size = e.size();
while (size >= 1) {
var rand = Math.floor(Math.random() *
size);
var temp = e.get(rand); // grab a
random div from our set
replace.append(temp); // add
the selected div to our new set
e = e.not(temp); // remove our selected
div from the main set
size--;
}
$('#shuffle').html(replace.html()); // update
our container div with the
// new, randomized divs
}
setInterval(shuffle, 2000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 550px">
<div id="shuffle">
<div id='d1' class="span1">
<img
class="place-right"
style="margin: 10px;" src="images/simple.png"
/>
<h2
class="fg-color-white">
D1</h2>
</div>
<div id='d2' class="span2">
<img
class="place-right"
style="margin: 10px;" src="images/grid.png"
/>
<h2
class="fg-color-white">
D2</h2>
</div>
<div id='d3' class="span3">
<img
class="place-right"
style="margin: 10px;" src="images/responsive.png"
/>
<h2
class="fg-color-white">
D3</h2>
</div>
<div id='Div1' class="span1">
<img
class="place-right"
style="margin: 10px;" src="images/simple.png"
/>
<h2
class="fg-color-white">
D1</h2>
</div>
<div id='Div2' class="span2">
<img
class="place-right"
style="margin: 10px;" src="images/grid.png"
/>
<h2
class="fg-color-white">
D2</h2>
</div>
<div id='Div3' class="span3">
<img
class="place-right"
style="margin: 10px;" src="images/responsive.png"
/>
<h2
class="fg-color-white">
D3</h2>
</div>
<div id='Div4' class="span1">
<img
class="place-right"
style="margin: 10px;" src="images/simple.png"
/>
<h2
class="fg-color-white">
D1</h2>
</div>
<div id='Div5' class="span2">
<img
class="place-right"
style="margin: 10px;" src="images/grid.png"
/>
<h2
class="fg-color-white">
D2</h2>
</div>
<div id='Div6' class="span3">
<img
class="place-right"
style="margin: 10px;" src="images/responsive.png"
/>
<h2
class="fg-color-white">
D3</h2>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
To see the demo check out the menu of this blog
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
Friday, June 15, 2012
get count of number of elements were selected by jQuery
jQuery selector returns a jQuery object that has .lenght property. So the easiest way to get the length is using the .lenght property.
var iCount = $('.cssClass').length;
If you want to know how many div elements present on the page then,
var eCount = $('div').length;
jQuery also provides .size() method, which also does the same thing as the .lenght property. But the .lenght property is preferred because it does not have the overhead of a function call.
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
var iCount = $('.cssClass').length;
If you want to know how many div elements present on the page then,
var eCount = $('div').length;
jQuery also provides .size() method, which also does the same thing as the .lenght property. But the .lenght property is preferred because it does not have the overhead of a function call.
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
Sunday, May 20, 2012
css for html links
In this article I’d like to show you six effective ways to add a touch of style to your HTML links. The techniques presented here are really simple to implement. Let’s see the details.
Using a different color
This is the simplest way to make your links different from the rest of the text:
a.color {
color: #d34545;
}
Using a different color on hover
This technique adds a little bit of dynamism to your links when a user hovers them with the mouse:
a.hover {
color: #800;
}
a.hover:hover {
color: #f00;
}
Using a different background color on hover
Same as above, but this time we change also the background color of the links:
a.hover-bg {
color: #003b6c;
}
a.hover-bg:hover {
background: #003bc6;
color: #fff;
}
Using text decoration
A dynamic effect on hover involving the text-decoration property:
a.decoration {
text-decoration: none;
}
a.decoration:hover {
text-decoration: underline;
}
Using borders
Another effect on hover but with the border-bottom property:
a.border {
text-decoration: none;
border-bottom: 1px solid;
}
a.border:hover {
border-bottom: 1px dashed #008;
}
Using generated content
We can add a rounded bullet to our links when a user hovers them:
a.generate {
text-decoration: none;
}
a.generate:hover:after {
content: '>';
margin-left: 4px;
color: #000;
font-weight: bold;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #ccc;
border: 1px solid #999;
border-radius: 50%;
text-shadow: 1px 1px 1px #444;
}
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
Using a different color
This is the simplest way to make your links different from the rest of the text:
a.color {
color: #d34545;
}
Using a different color on hover
This technique adds a little bit of dynamism to your links when a user hovers them with the mouse:
a.hover {
color: #800;
}
a.hover:hover {
color: #f00;
}
Using a different background color on hover
Same as above, but this time we change also the background color of the links:
a.hover-bg {
color: #003b6c;
}
a.hover-bg:hover {
background: #003bc6;
color: #fff;
}
Using text decoration
A dynamic effect on hover involving the text-decoration property:
a.decoration {
text-decoration: none;
}
a.decoration:hover {
text-decoration: underline;
}
Using borders
Another effect on hover but with the border-bottom property:
a.border {
text-decoration: none;
border-bottom: 1px solid;
}
a.border:hover {
border-bottom: 1px dashed #008;
}
Using generated content
We can add a rounded bullet to our links when a user hovers them:
a.generate {
text-decoration: none;
}
a.generate:hover:after {
content: '>';
margin-left: 4px;
color: #000;
font-weight: bold;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #ccc;
border: 1px solid #999;
border-radius: 50%;
text-shadow: 1px 1px 1px #444;
}
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
Wednesday, January 4, 2012
Create Custom DHTML Window OR Create DHTML popups
Hi *.*,
Today my client sent me huge excel,describing where ever he need DHTML help window and related message.Around 900 + help command. and have to apply more than 1600 places :( . What to say. he need it.
I had some Goggling for some good DHTML , i got tons unfortunately to show DHTML in a place i need to add a div their.and by mouseover and out event i need to show and hide.Its fine but adding div at 1600 a horrible dream. I need another way.Create div dynamically and remove instead of hiding.Reason of removing is next time when i create a div old one also will be active.
DEMO
[ Forgot about the design, i'm not at their :( ]
Sunday, November 6, 2011
javascript validation on Default Button event and passing control to server side
Hi *.*,
Heading of my post feel bit difficult to understand isit? :( .Actually i was confused to decide what should be the header of this post.Any way lets move to topic.
My friend again got trouble using default button.Now problem is he using Client-side validation then how can he perform it!!!.First i was also confused. Later i got it :).On my previous post i show how to get keyboard unicode.that helped me here.
Heading of my post feel bit difficult to understand isit? :( .Actually i was confused to decide what should be the header of this post.Any way lets move to topic.
My friend again got trouble using default button.Now problem is he using Client-side validation then how can he perform it!!!.First i was also confused. Later i got it :).On my previous post i show how to get keyboard unicode.that helped me here.
onkeypress event of text box i'm checking whether it ENTER key hit or not !!! Now if so i will do my condition if it pass that i will pass event to server side.
Friday, November 4, 2011
Default button and Default Focus
HI *.*,
Default button property is used to specify which button gets clicked when "ENTER" key is pressed.and Default Focus property is used to get focus on that control on page start-up(Just like Gmail login,Focus on Username text box and when enter button is clicked login,if valid :P )
Monday, October 24, 2011
Show Scroll Bar using javascript
Hi *.*,
All the modern browsers support auto scroll bar.But when we create some popup with hiding menu-bar and status-bar the browser will not provide scroll bar by considering it a malicious actions !!!!Over that case the below script will help u
window.onload = function ()
{
var bodyElementsArray = document.getElementsByTagName('BODY');
if ( (bodyElementsArray != null) && (bodyElementsArray.length > 0) )
{
var bodyElement = bodyElementsArray[0];
bodyElement.scroll = 'yes';
}
}
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
Subscribe to:
Posts (Atom)