Posts filed under ‘CSS & JavaScript’

Stopping, skype plugin phone number mess-up in design

Recently i came with a problem where one of our website user had skype plugin installed, all phone number replaced with their own “widgets”, that’s breaking the layout:

skype, skype plugin, UI problem, design issue using skype plugin, mess-up phone number

Skype plugin issue

After some googling, i came accross with a fix which tells the skype plugin not to replace any phone number on a webpage, Simply add the following in code in top of your head <head> section:

<meta name=”SKYPE_TOOLBAR” content =”SKYPE_TOOLBAR_PARSER_COMPATIBLE”/>

It’s quite handy, when you are tooooooo choooooosy for your webpage design 🙂

Advertisements

June 14, 2010 at 9:53 am 1 comment

Tab: using JQuery and CSS

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Learning Tab Creation</title>
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.1.js”></script&gt;
<script type=”text/javascript”>
$(function(){
var tabcontainers = $(“div#tabber > div”);
tabcontainers.hide().filter(“:first”).show();

$(“ul#tabs a”).click(function(){
tabcontainers.hide();
tabcontainers.filter(this.hash).show();
return false;
}).filter(“:first”).click();
});
</script>
<style type=”text/css”>
.clear {
clear: both;
}
#tabs {
margin: 0;
padding: 0;
font: normal 12px Arial, Helvetica, sans-serif;
list-style-type: none;
clear: both;
width: 100%;
}
#tabs li {
float: left;
margin: 0 5px 0 0;
}
#tabs li a {
text-decoration: none;
color: #CCCCCC;
border: 1px solid #666666;
display: block;
background: #666666;
padding: 2px 5px;
}
#tabs li a:hover {
border: 1px solid #000000;
}
#first, #second, #third {
border: 5px solid #ffffff;
}
.active {
background: #000000;
}
</style>
</head>
<body>
<div id=”tabber”>
<ul id=”tabs”>
<li><a href=”#first”>First Page</a></li>
<li><a href=”#second”>Second Page</a></li>
<li><a href=”#third”>Third Page</a></li>
</ul>
<div id=”first” class=”clear”>
<p> First >>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
<div id=”second” class=”clear”>
<p> Second >>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
<div id=”third” class=”clear”>
<p> Third>>>>>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
</div>
</body>
</html>

February 17, 2009 at 2:49 pm Leave a comment

White Space Fix in IE6

….yesterday night i was working on a project, i get stuck in a problem, that was coming in IE6.0, if you noticed IE6.0 generally takes the white space with images and text it’s shows unwanted space between two images let’s see here….

ie6bug
i make it light blue, so it would visible

That’s happen generally, before that i used to define the height of the particular DIV…………but now i find the best way:

img{

display: block;

}

CSS is gr8!

That’s work fine fore me………definately it will work for you too…

🙂

November 6, 2008 at 5:51 pm 1 comment

Javascript Libraries

Next month ( August 1 2008 ) i am going to complete 2 years in web industry, starting  my career as a HTML programmer, now Front End Developer, since starting my career i was trying to use as much as CSS can possible but somewhere i have to use JavaScript too. Doing same thing as may be you people doing start looking script on search engines, that was wasting lots of time and efforts, but now i am using Javascript libraries where you can get great script for showing your text effect, fading, moving, drop down effects and more and more, sharing those websites with you, these websites are very helpful for me.

Most of these are free for use so start enjoying 🙂

July 7, 2008 at 6:09 pm Leave a comment

CSS Shorthand Properties

If you are working on CSS then may or may not be you using CSS shorthand properties, if you are not using then start using becuase it’s give a less code to your stylesheet and deifnately you learning new way to write CSS 🙂

FONT

start using:

.fontSample{font: normal italic 1em/1.2em Arial, Helvetica, sans-serif;}

instead of:

.fontSample{
font-weight: normal;
font-style: italic;
font-size: 1em;
line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}

BACKGROUND

start using:

.backgroundSample{background: #CCCCCC url(logo.png) left top no-repeat fixed;}

insted of:

.backgroundSample{
background-color: #CCCCCC;
background-image: url(logo.png);
background-position: left top;
background-repeat: no-repeat;
background-attachment: fixed;}

MARGIN & PADDING

Start Using:

.marginSample{margin: 0 10px 20px 10px;}

Instead of:

.marginSample{
margin-top: 0;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}

It’s work margin (top, right, bottom, left)

Same for padding  others too will discuss in couple of days start using these 🙂

July 7, 2008 at 5:56 pm Leave a comment

Styling INPUT using CSS and JavaScript

Well, you know and heard about CSS selectors, but they will not work well in IE. But you can use JavaScript to get done on IE also.

Powerful DOM structure can used for styling form elements like radio, text, checkbox… let’s have a look for example which i get implemented recently one of OSCommerce project:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Testing Form Elements</title>

<script type=”text/javascript“>
function addEvent(elm, evType, fn, useCapture)

// cross-browser event handling for IE5+, NS6 and Mozilla

{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent(“on”+evType, fn);
return r;
} else {
alert(“Handler could not be removed”);
}
}

function prepareTextBoxes(){
if (!document.getElementsByTagName) return;
var oi=0;
var thisObj;
var objs = document.getElementsByTagName(“input”);

for (oi=0;oi<objs.length;oi++) {
thisObj = objs[oi];
if(thisObj.getAttribute(‘type’) == ‘text’){ //For Text
thisObj.className = ‘text ‘ + thisObj.className;
}

if(thisObj.getAttribute(‘type’) == ‘radio’){// For Radio
thisObj.className = ‘radio ‘ + thisObj.className;
}

if(thisObj.getAttribute(‘type’) == ‘checkbox’){ //For Checkbox
thisObj.className = ‘checkbox ‘ + thisObj.className;
}

}
}

addEvent(window, “load”, prepareTextBoxes);

</script>

<style type=”text/css“>
input[type=text], input[type=checkbox], input[type=radio]{
border: 1px solid #9C9C9C;
background-color: #F9F9F9;
color: #5A6500;
font: bolder 12px Verdana, Arial, Helvetica, sans-serif;
padding: 1px 2px;}

.text, .checkbox, .radio{ /* Appending IE */
border: 1px solid #9C9C9C;
background-color: #F9F9F9;
color: #5A6500;
font: bolder 12px Verdana, Arial, Helvetica, sans-serif;
padding: 1px 2px;}
</style>
</head>

<body>

<form name=”testform” method=”” action=””>
<label>Text:</label> <input type=”text” /><br /><br />
<label>Radio:</label> <input type=”radio” name=”test” /><br /><br />
<label>Checkbox:</label> <input type=”checkbox” /><br /><br />
</form>
</body>
</html>

April 10, 2008 at 6:24 am Leave a comment


Tweets… :)

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Categories

Feeds

Blog Stats

  • 20,644 hits