Rss Feed Like Us on facebook Google Plus
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

June 19, 2014

Accordion with Jquery Toggle

Accordion Displays Collapsible Content on very less space. I am going to give a demo of  accordion using JQuery Toggle.

You can achieve this also by using bootstrap. to see an advance version you can checkout CSS Tricks Website.

DEMO
Lorem Ipsum 1+
Lorem Ipsum 2+
Lorem Ipsum 3+

Code
<html>
<head>
<style>
.accordion_container {
    width: 500px;
}
.accordion_head
{
    background: linear-gradient(0deg, #F79711, #DC7E03) repeat scroll 0 0 #D07906;
    color: white;
    cursor: pointer;
    font-family: segoe ui;
    font-size: 15px;
    margin: 0 0 1px 0;
    padding: 7px 11px;
    font-weight: bold;
    background-color: #D07906;
}
 
.accordion_body h3
{
    background-color: #CCCCCC;
    font-size: 20px;
    font-variant: small-caps;
    margin: 0;
    padding: 5px;
}
.accordion_body a.anchorButton
{
    font-size: 14px;
    padding: 2px 15px;
    float: right;
    width: auto;
    height: auto;
}
.accordion_body
{
    background: #f1f1f1;
}
.accordion_body p
{
    padding: 8px;
    margin: 0px;
}
.plusminus
{
    float: right;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //toggle the componenet with class accordion_body
    $(".accordion_head").click(function(){
        if ($('.accordion_body').is(':visible')) {
            $(".accordion_body").slideUp(600);
            $(".plusminus").text('+');
        }
        $(this).next(".accordion_body").slideDown(600);
        $(this).children(".plusminus").text('-');
    });
});
</script>
</head>
    <div class="accordion_container">
        <div class="accordion_head">Lorem Ipsum 1<span class="plusminus">+</span></div>
            <div class="accordion_body" style="display: none;">
            <p>Lorem Ipsum 1 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
            </div>
        <div class="accordion_head">Lorem Ipsum 2<span class="plusminus">+</span></div>
            <div class="accordion_body" style="display: none;">
            <p>Lorem Ipsum 2 .It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        <div class="accordion_head">Lorem Ipsum 3<span class="plusminus">+</span></div>
            <div class="accordion_body" style="display: none;">
            <p>Lorem Ipsum 3 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.   </p>
            </div>
 
    </div>
</html>


Read More

June 10, 2013

CSS3 Media Queries for Screen

CSS3 @media Screen  Queries..
 CSS3 added support for the media="screen" way of defining which stylesheet to use for which representation of the data. CSS3 adds a new feature to this functionality, by adding media queries.
Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.”
Below are two tests, for min-width and max-width, currently only functional (and thus green) in Safari 3, Opera, and Firefox 3.1 (Alpha). This is however the future of web development, and could make building pages that are usable in both the mobile as the normal web a lot easier.
min-width 640px
max-width 1100px

The CSS which should color the two divs above is as follows:
@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }
MEDIA QUERIES FOR STANDARD DEVICES
/* Smartphones (portrait and landscape) ----------- */
 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
 @media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
 @media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
 @media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
 @media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
 @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Read More

February 28, 2012

Cool CSS4 Feature

CSS 4? Really? CSS 3 isn't fully released yet! What on earth is going on here? 

It all started when I was fooling around with GIMP, the extremely powerful free graphics editor. I took a public domain image, re-sized it, gave it a transparent background and then added a perspective shadow.
It is beautiful. 

I wanted to see the image in "action" so I put it on a web page. But because of the way HTML elements are rendered, there was nothing behind my gorgeous image to demonstrate the transparency. I could have used a background color but instead I gave the image an absolute position and positioned it over a button:
It looks 3-dimensional but you can't click on the button with the mouse. The transparent part of the image is like having a sheet of glass over the button. You can tab to it and use the space bar but it's really not useable as it is. 

I recalled reading about the CSS pointer-events property. I assigned it to the image and voila! It worked…at least on FireFox. IE hasn't implemented this feature yet. 

Here is a jsFiddle that shows it in action. If your browser supports pointer-events, you will be able to click the button: 

Read More
Subscribe to: Posts (Atom)

© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.