Posts

Showing posts from 2015

font size in landscape view is not same in safari and google crome

Some font-size's rendered larger on Safari (iPhone) Solutions is  @media screen and ( max - device - width : 480px ){ body { - webkit - text - size - adjust : none ; } } This will not adjust font size according to view,

Select the child of any parent with jquery

Select the child of any parent with jquery Note :- here #badcredit2 is parent id and #menu-bank-accounts-drop-down-1 is child. By this Jquery code you cand select the child element of any parent element. <script type="text/javascript"> $(document).ready(function(){     $("#badcredit2").click(function(){          if($('div:has(> ul)'))            $("#menu-bank-accounts-drop-down-1").slideToggle("slow");  else  alert('no');          }); }); </script> Thanks Css Zilla Team

Css Basics , Css interview questions and answers

                                      CSS NOTES ----------------------------------------------------------------------------------------------------------  background-color=  specifies the background color of an element. background-repeat: repeat-x;= repeated only horizontally background-repeat: repeat-y;=repeated only vertically  background-position: right top;= change the position of the image  background-attachment: scroll|fixed|local|initial|inherit;(image are fixed and                                            content are move) ----------------------------------------------------------------------------------------------------------  text-decoration: none;= text-decoration property is mostly used to remove                                         underlines from links for design purposes:                           : overline=text upper line                   :line-through=strike the line              :underline=text underline text-transform=  used to specify uppercase and lowerc

steps for mobile app designing on photoshop

Hello Guys , Refer these websites for better understanding about  mobile apps designing. 1:- http://www.digitalartsonline.co.uk/tutorials/photoshop/designing-app-in-photoshop/ Thanks Css Zilla Team Have Working for your ease always....  

Mobile menu toggle with jquery

Hello Guys For make responsive menu with jquery easily, follow these steps 1. Call this line above of your menu ul tag. < a   class =" toggleMenu "   style =" display: inline-block; "   href =" # " > menu </ a > 2. Apply "nav" class on your menu ul tag. 3.  Just use this code in your footer  <script type="text/javascript"> $(document).ready(function(){     $(".toggleMenu").click(function(){         $(".nav").slideToggle("slow");     }); }); </script>  4. call this css in your css style. .toggleMenu { display:none !important;}  /*---This css apply in screen less than 767 ----*/ @media (max-width: 767px) { .toggleMenu { display:block !important;} .nav { display:none;} }

Basic HTML interviews questions

                           HTML NOTES <img src="">:-image source name(web address or local address) for an image          alt="">:-image url represent(Specifies an alternative text for an image ------------------------------------------------------------------------------------------------------------ <pre> element defines preformatted text. <small> element defines small text:  <abbr>Marking abbreviations can give useful information to browsers, translation systems and search-engines.              (<abbr title="World Health Organization">WHO</abbr>) --------------------------------------------------------------------------------------------------------------------------------------------------------- <bdo> element defines bi-directional override.(text change)  <code> element does not preserve extra whitespace and line-breaks:(this code not new line) --------------------------------------------------------

rect in canvas by js

<h1>how to draw a rect in canvas by js</h1> <canvas id="my" width="200" height="100" style=" border:1px solid #f00;"> </canvas> <script> var c = document.getElementById("my"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(2,5,150,75); </script> Note:- here 2 is distance on x axis, 5 is distance on y axis.        here 150 is width of rect and 75 is height.        fillstyle: in rectangel fillstyle property use to fil the background color of in rectangle. demo is here  https://jsfiddle.net/j9va5j34/

Scroll To Top Then Fixed Navigation Effect With JQuery and CSS

Scroll To Top Then Fixed Navigation Effect With JQuery and CSS Live Demo:- https://jsfiddle.net/csszilla/ncmdxbte/1/ Css Zilla

Differnce Between display inline, display block, display none, display:inline-block and Float

Hello Guys  Today i will show the effect of these css property display inline,  display block,  display none,  display:inline-block  and Float

How we include font face in our HTML

How we include font face in our HTML Guys just open your genereted font face folder from www.fontsquirrel.com website. Follow these steps:- Open your fonts folder whcih is generted from www.fontsquirrel.com website or any other website. Copy all files from that folder fr example, .eot, .svg, .ttf, .woff. and paste into your HTML folder under fonts folder. Now copy stylesheet file from generted folder and copy in your HTML fonts folder. Now call styleshhet.css from your HTML fonts folder in your index.html file under HEAD part. Now use font-family in your css file. Follow this webistes for your need:- www.fontsquirrel.com https://everythingfonts.com/

How we genertae font face from TTF file

How we generate font face from TTF file. Hello Guys there is lot of font generate websites in market. Follow this webistes for your need:- www.fontsquirrel.com https://everythingfonts.com/ Open www.fontsquirrel.com and select the "WEBFONT GENERATOR" option and upload your TTF file and submit.

Star Ratings With Very Little CSS | CSS-Zilla

Hello Guys.. Now you make star rating with css not by image ☆ ☆ ☆ ☆ ☆ Thanks CSSZILLA TEAM 

image Scale on Hover with Transition or image zoom on Hover with Transition

.csszilla{ transition: all .2s ease-in-out; } .csszilla:hover { transform: scale(1.1); }

Java script Header fixed on scroll or, add remove class with jquery based on vertical-scroll

Hello Guys Please refer this js code for your solution =========================================================== <script type="text/javascript">   // Css Zilla Fixed navigation    jQuery(window).scroll(function() {        var scroll = jQuery(window).scrollTop();      //>=, not <=     if (scroll >= 500) {         //clearHeader, not clearheader - caps H         jQuery("#home").addClass("nav_top");   //alert("Css zilla welcomes you");     } }); </script> =========================================================== Css Zilla Team

Multiple Class / ID and Class Selectors

Image
Hello Guys Please see how we select multiple Id and classes from css. In first example header is ID and callout is class implemented on same div so we write its CSS as #header.callout {} , where as In second example header is ID and callout is class implemented on same div and callout is child div of header so we write its CSS as #header .callout {} Means #header "space" .callout {} Thanks CssZilla

CSS display:table-cell child width bug in Firefox and IE,

CSS display:table-cell child width bug in Firefox and IE display table property not work in mozilla firefox but work in chrome This is your issue, See demo, This is your issue solution , see demo Thanks Css Zilla

delete all existing HTML

delete all existing HTML : by this method we can clarify that our JavaScript   code is wrong or right by opening it on web page and its delete all existing html. <!DOCTYPE html> <html> <body> <button onclick="document.write(15 + 6)"> click me</button> <p> click on button and you will see the result of (15+6)   </p> </body> </html>  demo here https://jsfiddle.net/4opd5qw2/1/

Using document write method

Using document.write() For testing our   JavaScript coding on web page to use document.write() : <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html> demo here https://jsfiddle.net/4opd5qw2/

JavaScript Alert pop up

By window. Alert property we can show a alert box on html page. Without click on that box  we can not do anything on html page. <h1>Using window.alert()</h1> <script> window.alert("hello its javascript. click to ok"); </script> go  to this link and see the live demo. https://jsfiddle.net/ssgp6mwr/11/

JavaScript Display Possibilities

Window. Alert()  = for alert box when we open the HTML page Document. Write() =  if is it text  then we put that in  quotes  like…“ I am text” If it is value then we do not use quotes . innerHTMl. = to change the inner HTML values, styles anything. Console.log() =  to check your  methods  to browser that its working or not. Click F12  and go to console and enable it then see your result of methods in browser.