Select the child of any parent with jquery

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 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 lowercase letters in a text.                             and capitalize the first letter of each word
 text-indent: 50px;=  used to specify the gap(empty line ) of the first line of                                   a text.
text-shadow=the property adds shadow to text.(text-shadow: h-shadow v-                        shadow blur-radius color|none|initial|inherit;)
----------------------------------------------------------------------------------------------------------
 white-space: nowrap;=single line text(p tag same process)
----------------------------------------------------------------------------------------------------------
font-variant: normal|small-caps|initial|inherit;(text latter change)
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
----------------------------------------------------------------------------------------------------------
list-style-image    Specifies an image on list style type
list-style-type    Specifies the list type = circle;square;upper-roman
----------------------------------------------------------------------------------------------------------
border-collapse=the property sets whether the table borders are collapsed                            into a single border or separated:(single line border)
 border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
outline=outerside border(outline-color,outline-style,outline-width,inherit)
----------------------------------------------------------------------------------------------------------
Padding - Clears an area around the content.(inside the content space in                          border)
Margin - Clears an area outside the border.
----------------------------------------------------------------------------------------------------------
display: block= that means that the element is displayed as a block,                             
display: inline= that means that the element is displayed inline,                              

display:none=hide total display
  visibility:hidden=display hide but occupies space
----------------------------------------------------------------------------------------------------------
position(left right top bottom)=absolute=default fixed position(sub node of                                                    relative position)
  fixed=A fixed element does not leave a gap in the page
----------------------------------------------------------------------------------------------------------
                         All CSS Pseudo Classes
---------------------------------------------------------------------------------------------------------
Selector        Example   
:active        a:active   
:checked        input:checked( only checked button are resize or -                                            -largest,highlights)        
:empty         p:empty (only empty page are show)        
:first-child    p:first-child (first line changed of main content,sub content)     
:first-of-type p:first-of-type(first line changed)     
    
:hover          a:hover (mouse over changed the task)   
:in-range          input:in-range (number range start)     
  
 :last-of-type  p:last-of-type    (last page changed) 
:link           a:link     (link color size)
      
:read-only       input:read-only(only read no create text in text box)     
:read-write      input:read-write     
:required             input:required   
:valid             input:valid(only valid data color change )   
:visited             a:visited   


::after             p::after (select the content after p tag)   
::before              p::before ( add to before content)
::first-letter       p::first-letter    (first latter are changed (small,capital,color)) 
::first-line           p::first-line(first line changed provide color,size)
::selection           p::selection (add to select color,size)     ----------------------------------------------------------------------------------------------------------
[attribute~="value"] selector is used to select elements with an attribute                                 value containing a specified word.( (~)=accept particular                                 one word)
----------------------------------------------------------------------------------------------------------
 border-radius =change the"rounded corners".
----------------------------------------------------------------------------------------------------------
box-shadow= Adds one or more shadows to an box( box-shadow: 10px 10px                        grey;)
text-shadow= Adds one or more shadows to a text
----------------------------------------------------------------------------------------------------------
  word-wrap: break-word;= the property allows long words to be able to be                                              broken and wrap onto the next line(total                                                           words set in block)
  word-break: keep-all;=(total word complete then next line)
    word-break: break-all;=(complete word first and second line)
----------------------------------------------------------------------------------------------------------
  transition: width 5s;=hover process 5 second completed



Thanks
Css Zilla Team

Mobile menu toggle with jquery

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

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)
---------------------------------------------------------------------------------------------------------------
<a href=""target="_blank"(The target attribute specifies where to open the linked document.) 
_blank    Opens the linked document in a new window or tab
_self    Opens the linked document in the same frame as it was clicked (this is default)
_parent    Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window
----------------------------------------------------------------------------------------------------------
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
-----------------------------------------------------------------------------------------------------------
The <span> element is an inline element that is often used as a container for some text.

The <span> element has no required attributes, but style and class are common.
(<h1>My <span style="color:red">Important</span> Heading</h1>)
<div>    Defines a section in a document (block-level)
<span>    Defines a section in a document (inline)
-------------------------------------------------------------------------------------------------------------------------
<iframe>=iframe is used to display a  new web page
----------------------------------------------------------------------------------------------------------
The <meta> element is used to specify page description, keywords, author, and other metadata.

Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.

Define keywords for search engines:
(<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">)
-----------------------------------------------------------------------------------------------------------
<form> Element=HTML forms are used to collect user input.
HTML Form Attributes:>=
                                           <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
-----------------------------------------------------------------------------------------------------------------
 <legend> element defines a caption for the <fieldset> element.
 <select> element defines a drop-down list:
<option> elements defines the options to select.
<textarea> element defines a multi-line input field
<output> element represents the result of a calculation
------------------------------------------------------------------------------------------------------------
readonly attribute specifies that the input field is read only (cannot be changed):
----------------------------------------------------------------------------------------------------------------
<canvas>    Defines graphic drawing using JavaScript
<svg>    Defines graphic drawing using XML
-------------------------------------------------------------------------------------------------------------
<video width="320" height="240" controls>
   (The controls attribute adds video controls, like play, pause, and volume.)
                                                      autoplay=(automatic play this video)
  <source src="movie.mp4" type="video/mp4">
(<source> elements can link to different video files)
-----------------------------------------------------------------------------------------------------------
<object> element defines an embedded object within an HTML document.
(used the plug-ins and insert the data to data attributes)
(<object width="400" height="50" data="bookmark.swf"></object>)
 <embed> element also defines an embedded object within an HTML document.
(used tha plug-ins and insert the data to src attributes)
-------------------------------------------------------------------------------------------------------------
formaction attribute=twice form action represent
(<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>)
----------------------------------------------------------------------------------------------------------------
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">(span attributes is chose the row and column)