waybloggy: Html

Showing posts with label Html. Show all posts

Tuesday, 15 March 2016

Embedding Flash Movie In The Html Page

Though using flash in Html is bit outdated now. But sometimes it neccesary for clients requirment to match. Playing Video and audios or animations in webpage is much easier in Html5, but sometimes concept of webpage requires higher functionality. In this situation we needs to take help of Flash.

Here we are writing <object> tag to embed flash object into our code.

</embed>

</object>

Thus <object> tag is valid XHtml tag, but <embed> tag is not. Embed was used for Netscape based browsers.

</object>

The width and height tags specify size of the movie, which you will need to adjust. This is the minimum code you need to embed a Flash movie in a browser. If user's browser dose not support Flash Player, it will tell to install it.

Thursday, 4 December 2014

Simple popup box in Jquery

While building dynamic web pages popups are useful for showing information of inputs other than content that is shown on page. Mostly html alert popup is used to some info like 'alerts or information for website'. But when development needs popup that do multiple things with multiple formats, alert box is not enough.

In this case we need a custom pop up that satisfy our need. We can see that there are many jquery plugin that provide custom popup. But they come with external js & css files with complex format to implement. That is why I want to built my own custom popup.

We will build this with ‘div’ in html, which will be hidden on page load. After clicking on link this popup will be shown by jquery. The code is given below

<!DOCTYPE html>

<head>

<style>

.popup-back {

float: left;

background-color: rgba(51, 51, 51, 0.71);

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

display:none;

z-index:10000;

}

.popup-con {

margin: auto;

width: 600px;

position: relative;

}

.popup-body {

background-color: #fff;

padding: 10px;

position: absolute;

width: 100%;

top: 100px;

}

a.close-popup {

font-family: arial;

text-decoration: none;

background-color: #333;

color: #fff;

border-radius: 50%;

height: 21px;

position: absolute;

width: 20px;

text-align: center;

right: 5px;

top: 5px;

}

</style>

</head>

<body>

<a href="#" class="link-class popup-link" rel="my_popup1">popup 1</a>

<a href="#" class="link-class popup-link" rel="my_popup2">popup 2</a>

<h1>this is my 1st popup</h1>

<p>Simple way for popup</p>

</div>

<h1>this is my 2nd popup</h1>

<p>Simple way for popup</p>

</div>

$(".popup-link").click(function () {

var popupId = "#" + $(this).attr("rel");

$(popupId).fadeIn();

});

$(".close-popup").click(function () {

$(".popup-spclass").fadeOut();

});

</script>

</body>

</html>

Monday, 29 September 2014

Simple Jquery Accordion div for your website

Accordion is expandable and collapsible content holder that is broken into sections and probably looks like tabs. On net you will get plenty of Accordion plug-ins which are with their complicated structure and heavy js files. So they are hard to modify as per your requirement.

I am writing here a simple and light weight jquery accordion. This is basic structure with scope of modifications. So try this out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Accordion</title>

$(document).ready(function () {

$(".accordiondiv h1").click(function () {

$('.active').removeClass('active');

$(this).addClass('active');

$(this).siblings('.accordionbody').slideToggle();

});

</script>

<style>

.accordionbody

{

display: none;

border: 1px solid;

padding: 8px;

}

.accordiondiv h1

{

background-color: #333;

color: #fff;

font-weight: normal;

padding: 10px;

font-size: 17px;

margin: 0;

border: 1px solid;

}

</style>

</head>

<body>

<h1>

accordion 1</h1>

some text here

</div>

<h1>

accordion 3</h1>

some text here

</div>

<h1>

accordion 4</h1>

some text here

</div>

</body>

</html>

Sunday, 14 September 2014

Redirecting web page onload or delay redirecting

When somebody clicks on link on page to reach specific page, but purposefully developer direct him to another page is called as redirection. Reason behind this may differ for each website.

It can be done in javascript by window.location like this

window.location="yourlink.com";

</script>

Now it is totally your decision that when you wants to redirect user to that page. If you add above code into the <head></head>. Then it will perform before your page loaded.

But what if you want it to perform after some delay. You have to do slight addition in this code

setTimeout(function(){

window.location="yourlink.com";

}, 3000);

</script>

We are using setTimeout for delaying this redirection for 3000 milliseconds i.e 3seconds.

If you want it to be done after page load then try this out

$(document).ready( function() {

window.location="yourlink.com";

});

</script>

Wednesday, 10 September 2014

How to build query string in javascript?

This article will discuss 'How to build query string in javascript?'. Copy and paste this html code in your page's body tag.
<input id="Txtname" placeholder="Name" name="Txtname" /> <input id="Txtmobile" placeholder="Mobile" name="Txtmobile"/> <input id="Texemail" placeholder="Email Id" name="Texemail" /> <input type="submit" id="submit" title="Submit" value="Submit" onclick="sendm()" />

On button click below code will fetch text from text-boxes, build query string and redirecting to that query string. Here 'buildUrl' is a function that builds & returns query string.
<script type="text/javascript"> function buildUrl(url, parameters) { var qs = ""; for (var key in parameters) { var value = parameters[key]; qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&"; } if (qs.length > 0) { qs = qs.substring(0, qs.length - 1); //chop off last "&" url = url + "?" + qs; } return url; } function sendm() { var url = "Form.aspx"; var parameters = new Array(); parameters["name"] = document.getElementById('Txtname').value; parameters["mobile"] = document.getElementById('Txtmobile').value; parameters["email"] = document.getElementById('Texemail').value; var site = buildUrl(url, parameters); window.location = site; } </script>

Tuesday, 2 September 2014

How to make simple Javascript tab with css and html?

In this session we will write a tabs structure with the help of jquery, html & css.

When you are writing some content on your webpage, then it is better practice that showing your content in a tab format than normal text format. This let your page looks more cleaner than normally formatted text.

If you find tabs jquery on google you will get jquery plugins that will force you to keep unnecessarily heavy js and css files on your webpage, which let slowdown your page. In this session we will write a tabs structure with the help of jquery, html & css.

First of all we will write simple html given below. We are using 'ul', 'li' as tabs(tab heading) and below that we will use 'div' for contain your html code. Each div is having id. You can change internal html as per your requirement. Tabs 'li' is having rel properties containing value of id of targeted div that to be shown.

/************************Html**********************/

<div class="tabcontainer">

<ul class="tabheading">

<li class="active" rel="tab1"><a href="javascript:return false;">Tab 1</a> </li>

<li rel="tab2"><a href="javascript:return false;">Tab 2</a> </li>
</ul>

<div class="tabbody active" id="tab1" style="display: block;">
Tab 1
Your Text or html

</div>

<div class="tabbody" id="tab2" style="display: none;">
Tab 2
Your Text or html

</div>

</div>

Below is css for our tab. You may do styling of your tab as you want.

/************************Css************************/
.tabcontainer {
float: left;
width: 100%;
}
.tabheading li.active {
background-color: #fff;
border-bottom: 0;
margin-bottom: -1px;
}
.tabheading li {
display: inline-block;
border: 1px solid #ddd;
background-color: #eee;
margin: 0;
}
.tabheading li a {
padding: 0 2%;
}
.tabbody.active {
display: block;
}
.tabbody {
border: 1px solid #ddd;
float: left;
min-height: 10px;
width: 96%;
padding: 2%;
display: none;
}

Now main part of our structer that is our Javascript. Copy & paste this small code given below on your webpage at bottom.

/*****************************Js************************/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$('.tabheading li').click(function () {
var tabid = $(this).attr("rel");
$(this).parents('.tabcontainer').find('.active').removeClass('active');
$('.tabbody').hide();
$('#' + tabid).show();
$(this).addClass('active');

return false;
});
</script>

In this script on click of tab heading li we are reading id from 'rel' property of it and showing div with that id

Tuesday, 19 August 2014

Simple banner image slider gallery in Jquery

If you want jquery galleries in your webpage, you will get lots of plugins out there. But these plugins are loaded with lots of other js and css files, which are mostly heavy for loading page and also difficult for modification. I was exactly don't want this for my website.

So I tried to reduce javascript for lighten the page. This slider will never do fancy thing but sufficient for show images one by one.

Let us start now. First of all we start with html.

<div class="bannerdiv">

<div class="mainslider">

<img src="images/img1.jpg" alt="Name1" rel="http//yourlink"/>
<img src="images/img2.jpg" alt="Name2" rel="http//yourlink"/>
<img src="images/img3.jpg" alt="Name3" rel="http//yourlink"/>
</div>

<span class="bannercaption">Banner alt will displayed here</span>

<a class="nextslide slidenav" href="#" id="hyp_NextGallery"></a>
<a class="prevslide slidenav" href="#" id="hyp_PreviousGallery" style="display: none;"></a>

</div>

Here banner div contain two sections. First is 'mainslider' which is containing images of slide show and second one is a span tag which will contain banner caption. You can do styling of it in your way. If you notice banner img tag containing alt and rel attribute, this we will use as our caption for that particulate image.

Now let's do css part. I am setting a height of my banner 500px. You can change it as your need.

/*******************************css*******************************************//////////////////

.bannerdiv {
position: relative;
float: left;
width: 100%;
top: 0;
margin-bottom: 12px;
margin-top: 50px;
overflow: hidden;
max-height: 500px;
}

.mainslider img {
position: absolute;
width: 100%;
}
.bannercaption{
position: absolute;
bottom: 2px;
right: 2px;
z-index: 1;
font-size: 14px;
color: #fff;
background-color: rgba(0, 0, 0, 0.51);
padding: 5px;
}
a.nextslide {
position: absolute;
color: rgb(255, 255, 255);
top: 0;
font-size: 27px;
background-position: 3px center;
right: 0px;
}

a.prevslide {
position: absolute;
color: rgb(255, 255, 255);
top: 0;
font-size: 27px;
left: 0px;
background-position: -29px center;
}

a.slidenav {
width: 37px;
height: 100%;
background-image: url('../Images/slim-arrow-sprite.png');
background-repeat: no-repeat;

}

It's time for important part of an banner slider, that means Javascript. We are using library here.
Here we are using 'setInterval' for continuous image change. For next and previous we are using two 'a' tags, 'prevslide' and 'nextslide'. On their click we are performing particular task.
/*****************************js****************************************///////////////////
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$(document).ready(function () {

$('.mainslider img:gt(0)').hide();
setInterval(function () { $('.mainslider :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.mainslider'); }, 5000);

$('.mainslider :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.mainslider').ready(function () { $('.bannercaption').html("<a href='" + $('.mainslider :first-child').attr('rel') + "'>" + $('.mainslider :first-child').attr('alt') + "</a>"); });

$('.nextslide').click(function () {
$('.mainslider :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.mainslider').ready(function () { $('.bannercaption').html("<a href='" + $('.mainslider :first-child').attr('rel') + "'>" + $('.mainslider :first-child').attr('alt') + "</a>"); }); ;

return false;

});

$('.prevslide').click(function () {
$('.mainslider :first-child').fadeOut(1000);
$('.mainslider :last-child').fadeIn(1000).end();

$('.mainslider').prepend($('.mainslider :last-child')).ready(function () { $('.bannerauthor').html("<a href='" + $('.mainslider :first-child').attr('rel') + "'>" + $('.mainslider :first-child').attr('alt') + "</a>"); });

return false;
});

});

</script>

So this is it. This code is simple and lighter than other heavy slider plugins and also easy for modification that you want in your page.