Coding Stuffs: Html

Showing posts with label Html. Show all posts

Saturday, June 7, 2014

Jquery shake effect - part 2

Hurrey 100th post , and again on Jquery :)

Jquery shake effect is very popular & more searchable topic now a days.

Long back i had written a post on jquery shake effect. this is my part 2 post where here I'm going to explain what all method and what option you may find in JRumble plugin

You must have seen that vibrant, rotate, shake and many other elements of effects. using css and other scripting language you can create more eye catch able effects.

JRumble is new plugin which has more elements on effects. it also a good plugin with hover and direction effect.

Below are few objects

$('imgName').jrumble();
// you may stop the elements like this way
$('imgName').trigger('stopRumble');

You many even customize this options with below attributes:

Rotation : set the range , default is 1

Speed : set frequency or speed between the two movements

X : set horizontal pixels

Y : set vertical pixels

and there are many other elements.

The below code shows the example along with basic functionality.

$(document).ready(function() {
    $('ImageName').jrumble({
        y:4,
        x:3,
        rotation: 10,
    speed:500,
    opacity:100
    });

    $('ImageName').hover(function() {
        $(this).trigger('startRumble');
    }, function() {
        $(this).trigger('stopRumble');
    });
});

See the below example :

Saturday, October 19, 2013

Access content of iframe using jquery

It's very simple and straightforward.

Lets say, your using iframe and hello.aspx page like

1. < iframe id="frametemp" height="20px" width="90px"> </iframe>

which contain some control likes

2. <div id="divDisplayBox" > Say, Hello world! </div>

you can use .contents() method to find the specific id and like

3. $('#frametemp').contents().find('#divDisplayBox').html();

Hope this will helps you, Put your comments/suggestion if any.

Friday, September 25, 2009

css techniques

on web application CSS is playing very important role . And it is being used more and more often. Cascading Style Sheets has many advantages
like layout, design of the page,presented on the page and so on

here i have some collections of stuffs on CSS technique .

1.

Drop Cap – Capital Letters with CSS

Define Image Opacity with CSS

How to Create a Block Hover Effect for a List of Links

CSS Image Replacement for Buttons
10.

Link Thumbnail

11.

CSS Map Pop

12.

PHP-based CSS Style Switcher

13.

CSS Unordered List Calender
14.

CSS-Based Tables: Techniques

15.

Printing Web-Documents and CSS

look at here more

Monday, August 31, 2009

set meta tags to master page from Child Page

Meta tag ,title, keywords ,Description and all are very assential on each page , if your using asp.net with Master page then also its possible some people think that how it can be? master page means one page and it get call on each child page creation.but you can also add the keyword , title and all with each pertucular page if you'r using master page then also.

Below are the Steps you need to follow

1-

Create oen Content place holder on your master page with in HEAD section


<head id="Head_Demo" runat="server">
    <asp:ContentPlaceHolder runat="server" id="Contentplace_Demo"> </asp:ContentPlaceHolder>
</head >

2 -

on Your Child page put this code :

<asp:Content runat="server" ContentPlaceHolderID="ContentHeaders" ID="Content_Demo" >
<META name="keywords" content="<%=pgKeywords%>">
<TITLE><%=pgTitle%></TITLE>
<META name="description" content="<%=pgDescription%>">
</asp:Content>

3 -

on content page's(Child page) open CodeBehind and Declare this :
Declare variables as below in the global declaration section

Protected pgKeywords As String = ""
Protected pgTitle As String = ""
Protected pgDescription As String = ""

4-
Now set the New title, Desc and all as per the your req. copy that code on page_load Event

pgKeywords = "keywords Content Goes here "
pgTitle = "title Content Goes here"
pgDescription = "Description Content Goes here"

or you can also refer this set mata tags

that's it
hope it will helps you

Friday, July 24, 2009

Set Favicon in different Browser

we have seen most of the site has Fevicon which describe the addtional information
about the site , Addtion in the sence it could be logo,company Profile, company production,web site application, and so many .

here are the top most Example of the fevicon sites

now how u can do this

its very simple to do , just u need to add some line's of code and be ready with small icon image, u can also add animated image in fevicon

add this part in between <head> </head> Section


 <link rel="shortcut icon" href="images/favicon.ico">

now some time this code will not work on most of the Browser like IE old version
in this case u can add this line

 
 <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon"  *gt;

any other query plz comment on it.