Posts filed under ‘css’
Jquery | Some useful and qucik scripts
1. How to get x-axis and y-axis on mouse move
$().mousemove(function(e){
//display the x and y axis values inside the mouseOverMe div
$('#mouseOverMe').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
HTML
<div id=”mouseOverMe”>Mouse over me</div>
2. Disabling Right click
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
z-index issue with IE7
Hi all, I spent almost a day to figure out how to fix z-index issue with IE7.
HTML
—————–
<div id=”wrapper”>
<div id=”inner”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id=”menu”></div>
Assume I have a menu with z-index:10 and I want wrapper to sit on top of menu . What I did was I had
#inner{z-index:999;}
Hoping it to work in all browsers, It worked in all except IE7.
reasons : IE7 except us to provide postion:relative, So what I did was added position relative to #inner
Now #inner{z-index:999;position:relative;} Still it didnt worked. IE7 creates its own stack I mean the there is one more div on top of inner div i.e. wrapper
so Wrapper by default adds stack to all its children so even though inner has 999 z-index it wont work.
Solution is to provide z-index to wrapper and position it rather than to inner div
#wrapper{z-index:11;position:relative;}
Is Indian Team World No 1
Well there’s been lot of discussion happening all around the world is Dhoni’s men in Blue are the next world No 1 side?. Beating Aussies in their own backyard then at home and then beating England and Now srilanka. But I still feel their is a long way to go
Indian fielding looks crap except Suresh Raina.
Bowling looks ordinary especially spin department
Controlling the middle overs 15-40 [ Give away lot of runs without many wickets].
They won series in Srilanka as then won toss in all the four games they won.
Solution for PNG images in css
Many of us might have nightmare’s using png images as they are not supported in IE. Here is the solution we can use to overcome that nightmare
Method 1:
html>body .className{
background: url(“../images/suresh kumar.png”) no-repeat;
}
Method 2:
* html #id{
background:url(“../images/none.gif”);
filter: progid XImageTransform.Microsoft.AlphaImageLoader(src=’images/sureshkumar.png’, sizingmethod=’crop’);
cursor: hand;
}
min-height hack/workaround in IE6,IE7 & Firefox
Hey i was wondering how to use min-height for all the 3 browsers and came across a workaround and which works wonders in all the 3 browsers.
Common Mistakes Webdeveloper commit
It’s been more than 3 years now me working on web and I’ve been guilty of making many mistakes myself through the all these years However, I do my best to learn, and avoid making the same mistakes over and over again.
DOCTYPE confusion
Completely missing, incorrect, or in the wrong place. I have seen HTML 4.0 Transitional used in documents containing XHTML markup as well as in <frameset> documents, DOCTYPE declarations appearing after the opening <html> tag, and incomplete DOCTYPES.
<span> element with a class attribute and use that to hook up the styling. I’m sure we’ve all seen things like <span class="heading"> and <span class="bodytext">. <img> elements with missing alt attributes can be found in billions on the web. Not quite as common are useless attribute values like “spacer GIF used to make the layout look good”, “big blue bullet with dropshadow”, and “JPEG image, 123 KB”. Remember, the <img> and <area> elements. id attribute. Invalid characters used in id and class attributes and CSS selectors.For CSS:
In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit.
For HTML:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).
width="10". In CSS, it has to be width:10px; (or whatever unit you’re using). <label>, <fieldset>, and <legend> elements, and do not use a “Reset” button. <font> elements, presentational markup. So common I don’t really have to mention it here. marginwidth, leftmargin, language, height for <table> elements, and border for <img> elements (in strict DOCTYPEs) just to name a few. &. Did I miss your favourite mistake? Add it to the list
URL: http://www.456bereastreet.com/archive/200408/web_development_mistakes/
using getElementByTagsName
var divelements=document.getElementById(divid).getElementsByTagName(“input”);
Ricky Pointing : CB- Series song [ taare zameen par]
*Main kabhi batlaata nahi ,*
*Par HARBHAJJAN se darta hoon main MAA*
*Yun to main, dikhlata nahi,*
*Par ISHANT se ghabrata hoon main MAA*
*Aapko sab hai pata,hai na MAA*
*Aapko sab hai pata, meri MAA *
*FIELD mein yun na chhoro mujhe,*
*EK RUN bhi Bana na paun MAA*
*Kitni Deta hoon Main Galiya milke team ke sang,*
*Par Unhe Mai Jara bhi Dara Na paun MAA,*
Sachin toh Out Hota Nahi,
Achchha hai jo Saurabh Team Me Nahi,
*CRICKET KA BAAP HAI India main Man Gaya MAA,*
CRICKET KA BAAP HAI INDIAN MAA
Mozilla Addons and IE Addons for Webdevelopers
http://tredosoft.com/Multiple_IE
http://www.microsoft.com/windowsvista/experiences/default.mspx
FF : 2.0.0.9
http://www.mozilla.com/en-US/firefox/
FF EXTENSIONS
https://addons.mozilla.org/en-US/firefox/
1. Firebug 1.05:
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Visit the Firebug website for documentation, screen shots, and discussion forums: http://www.getfirebug.com
https://addons.mozilla.org/en-US/firefox/addon/1843
2. MeasureIt: Draw out a ruler to get the pixel width and height of any elements on a webpage.
https://addons.mozilla.org/en-US/firefox/addon/539
3. Console²:
Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. As of Firefox 1.5, the JavaScript Console is used not only for JavaScript errors, but for CSS errors as well. This extension takes this into account by providing a simple possibility to display errors by type. Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements.
https://addons.mozilla.org/en-US/firefox/addon/1815
4. Save complete :
https://addons.mozilla.org/en-US/firefox/addon/4723
5. Send Page By Email 0.5.0
https://addons.mozilla.org/en-US/firefox/addon/2343
6. ColorfulTabs:
https://addons.mozilla.org/en-US/firefox/addon/1368
The most beautiful yet the simplest add-on that makes a strong colorful appeal. Colors every tab in a different color and makes them easy to distinguish while beautifying the overall appearance of the interface. An essential…
a comment from one of the millions users…
“…Just wanted to let you know I absolutely love your Colourful Tabs add on
for Firefox! It’s one of the best and my personal favourite of all add
ons available. Thank you so much for this!…”
You can provide feedback/discuss at
Blog: http://varuns-extensions.blogspot.com
Previous versions available at https://addons.mozilla.org/en-US/firefox/1368/history/
Note: – ColorfulTabs has known incompatibilities with Tab Mix Plus. We are aware of the issue and are working on it. Please don’t file bugs related to the same here.
Netscape:
*************************************************************************************************************************************************
Install few Add-ons, which is great tools, and will help you a lot.
All-in-One Sidebar – All the extensions, will be install, will show in a side panel.
delicious : del.ico.us – To store your bookmark to access anywhere in the world.
IE Tab and IE View – This will help to switch your page in a IE browser from your FF browser.
Save As Image – Great built-in option to save your whole page as image / [like : screen-shot / print-screen]
Save Page As Complete – Now this option help you to get the whole dump of your site just with the click of it.
Recent Comments