Wednesday, March 30, 2016

:nth-of-type

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
Suppose we have an unordered list and wish to “zebra-stripe” alternating list items:

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>
li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}

Tuesday, March 29, 2016

What's the difference between "clear: both;" and clearfix?

clear: both; is used to make an element appear below any floated elements that are above it. So given the following HTML, the would appear below the :


<img src="foo.jpg" style="float: right">
<p class="clear: both;">Things and stuff</p>

Note: You can usually achieve the same effect as .clearfix with less code by using the overflow: hidden; method (although it has it's own issues). Alternatively, float the element you'd apply .clearfix to (although that comes with it's own issues, too).
.clearfix is designed to make an element expand to enclose any floated elements within it. So, in the following example, the
would expand vertically to fit the content inside it:



clear:both can be applied to any block-level element (a div is frequently used), but sometimes this involves adding non-semantic mark-up into the document just for the purpose of clearing a float.
The clearfix technique is a way of clearing the float without having to add non-semantic elements. Older browsers however, such as IE6 and IE7, do not support the clearfix technique
clear:both is always enough when applied to a block-level element that appears after a float, the issue is adding the extra mark-up for it - your document can end up with many extra elements that are just there to clear floats...

Tuesday, February 23, 2016

CSS stacking with display:table


With responsive design, one of the things that we often want to do is to change the stack order of certain elements, moving the aside on the left below the main text which we want to bring to the top. CSS3‘s Flexbox will do this for us, but there is a quicker, if dirtier, way which we can use now.

I say “use now” when of course we can use Flexbox now but implementations vary across browsers as does the required syntax. Opera’s Chris Mills has written two excellent in-depth articles (Flexbox basics and Advanced cross-browser flexbox) on the different flavours of Flexbox.

Flexbox will of course offer more than simple re-stacking of elements, but if that is all you need, you can look no further than CSS‘s display property.

(Incidentally this idea is based on something Bruce Lawson told us at beyond tellerrand 2012)

Let’s take four boxes whose very simple HTML is laid out as follows:
 
   
Box One
 
   
Box Two
 
   
Box Three
 
   
Box Four
 
And whose styling is equally as simple:
.boxes { 
   width:50%; 
   margin:0 auto; 
.box { 
   display:inline-block; 
   width:24%; 
   height:15em; 
   text-align:center; 
   line-height:15em; 
   color:#fff; 
.one { background:#333;  } 
.two {  
   background:#fff; 
   color:#333; 
.three { background:#aaa; } 
.four { background:#dc002e; }
We can easily change the ordering of these boxes in a media query, say at 48em (768px) by taking advantage of display:table. For demo purposes, we’ll put box three at the top, followed by box four, two and then one.

First of all we need to set the containing element, .boxes as display:table.

Then we set the element we want at the top, Box Three, as display:table-caption.

To push an element to the bottom, in this case Box One, we set display:table-footer-group.

And finally to push an element to the top, but not the very top we set Box Four to display:table-header-group.
/* 768px */ 
@media only screen and (max-width:48em) { 
   .boxes {  
      display:table; 
      width:100%; 
   } 
   .box { 
      display:block; 
      width:100%; 
   } 
   .three { display:table-caption; } 
   .four { display:table-header-group; } 
   .one { display:table-footer-group; } 
}
You can see this simple demo in action if you resize your browser.

Now I know that purists will probably be appalled by this, I know that I am a bit, but I will admit to having used it in production code simply because it works and it’s a lot less hassle than the various incarnations of Flexbox at the moment. It also works cross browser down to and including Internet Explorer 8.

Thursday, July 10, 2014

Slide two carousel sliders at a same time in Bootstrap

To avoid this delay, you could manually launch both carousels at the same time, and use customized treatments for events.
  • Syncronized init
  • Simple launch events on both carousels
  • Pause on hover (I missed you didn't need it)
$('.carousel-sync').carousel('cycle');
$('.carousel-sync').on('click', '.carousel-control[data-slide]', function (ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel($(this).data('slide'));
});
$('.carousel-sync').on('mouseover', function(ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel('pause');
});
$('.carousel-sync').on('mouseleave', function(ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel('cycle');
});

Creating JavaScript Sliders Using Twitter Bootstrap 3

Twitter Bootstrap 3 is one of the best CSS frameworks for developing and designing content management systems. It is easy to design blogs, portfolios and profiles using Twitter Bootstrap’s grid layouts. One thing that many types of CMS have in common is the “Slider”. A sequential automated display of images, a slider can be anything: showcasing your latest projects, showing off your client’s assets, describing special offers, linking to news items, or highlighting your latest blog posts.

In this article, we will learn how to create a JavaScript slider using Twitter Bootstrap 3’s Carousel Component.

Understanding Twitter Bootstrap 3 Carousel Component

The markup for the Carousel Component goes as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>
  
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
From the above code, we understand that Bootstrap 3 carousel is divided into three major sections:
  1. Indicators
  2. Slider content
  3. Controls

To set any div as the slider, we have to apply the classes carousel and slide. The carousel class defines the element as an element with a “merry-go-round” feature. The slide is applied to add the slide effect when the slider changes.

Indicators are the small circles placed at the bottom center of the slider to indicate the current slide position and the number of sliders in total. Indicators are declared using an ordered list.
1
2
3
4
5
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
The ordered list is given the class carousel-indicators to make the child elements look like small circles. Each li element must have a data-target attribute with the value as the id of the parent carousel div. They must also have a unique data-slide-to attribute with integer values as strings in an incremental order starting from “0”.

Slider content is the main portion of the slider. It is in this space we will place our slider’s content. The slider content area is defined using the class carousel-inner. This div can again have unlimited item divs. The first item div must have an active class defined.

1
2
3
4
5
6
7
8
9
<div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

Each item div has two subsections: image and carousel-caption. The image is used as full width display content in the slider. The carousel-caption is placed floating over its respective image. You can place either an

element or a element – or even both – inside the carousel-caption.

 
Controls are the left and right arrow marks that are used to manually change the slider.
1
2
3
4
5
6
7
8
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

There should be two elements: one for each arrow. The first element will have a span with the glyphicon glyphicon-chevron-left class to show the left arrow, and the second element will have glyphicon glyphicon-chevron-right to show the right arrow. Since Bootstrap uses fonts instead of images to show the icons, we have to follow glyphicon classes to show the icons.
That’s it! You have successfully created a slider for your website. Plus, we didn’t write a single line of JavaScript to make it work. bootstrap.js does things automatically for you.

Carousel Options

You can further customize the default functions of the slider by adding some more data-* attributes to the parent carousel div.
data-interval is used to indicate the time gap between each slide. It takes a number as the value and the number represents milliseconds.
data-pause is used to define when to pause the sliding activity. If the value is “hover” it stops sliding when the mouse is placed on the slider.
data-wrap is a boolean attribute which tells whether or not the slider should continue sliding from the beginning once the end is reached.

For JQuery Geeks

Well, if you love using jQuery and data-* attributes are not your cup of tea, then Bootstrap allows you to initialize sliders using JavaScript, too!
To make a carousel div work like a carousel, you have to write the following snippet:
1
$('.carousel').carousel()
The Carousel options can then be set by passing a JSON object inside the carousel function.
For example:
1
2
3
4
5
$('.carousel').carousel({
  interval: 2000,
  pause: “hover”,
    wrap: true
})
You can also manually trigger slider events using snippets like the ones below:
1
2
3
4
5
.carousel('pause') // to pause the slider
.carousel('cycle') // to cycle through the slider items
.carousel(2) // to forcibly display the the 3rd slide in the slider
.carousel('prev') // to show the previous slide
.carousel(‘next’) // to show the next slide in the slider

The above methods may be called from within any JavaScript code to manipulate the normal working of the slider. I do find the prev and next methods very useful when I want to display my own buttons instead of Bootstrap’s arrows. Especially when they are placed outside the carousel’s parent div. 

Thursday, July 3, 2014

SEO Benefits of Having a responsive web design for your business

The needs and requirements change over time. Companies are one of the first entities that have to redesign and improve their strategies continuously to meet the changing needs of its users and deploy the latest technology available in its marketing, advertising and sales. Like today works best to ship goods by truck, aircraft and ships, and not through carts and buggies, work best when put into use the latest trends in website design and leave obsolete. The most important objective for websites is to satisfy visitors and keep them happy.

Website design is the sensitivity of the answer to all the questions today. This is the type of website design that meets the customer requirements today and runs using the latest web design techniques in the best way. Here are some of the benefits of having a SEO website design response.




Website Design Response and SEO benefits

The largest and most important goal for any website today is to impress Google because Google is the master of the online search. Admit it or not, Google loves and serves the website designs that match. With it, the web websites with responsive design at the top of their search results. It is because mobile devices have become common in the world and high percentage of all business conducted online is done through these mobile devices. Google knows when a mobile optimized website is and what counts as a plus.

The dropout rate is something that is best handled with a design of sensitive websites. Almost all people who have used smart phones and mobile phones to surf once a website sometime know which bounce off a website. The small, hard point to understand images and a lot of movement are the main reasons why visitors do not stay on a site for long. Responsive Web Design allows the website are tailored according to the size of the screen and makes it easy for the user to use the website minimally displaced and having to deal with the images and small texts.

Google has been looking more seriously the user experience in the last couple of years. One of the most important aspects that directly affect the user experience is the speed of loading pages and when the website. Failure to redirect to a mobile website when you have a website optimized for mobile reduces the loading time of website greatly. This results in a better user experience and therefore a happy Google.

Some people might think that having a mobile website and a separate website for desktops is a better choice when there is a lot of content on the website. However, they overlook the fact that a great mobile website must be built separately and optimized from scratch. All back links and social media indicators will be brought to zero. You have to make a reputation and recognition of this web site from scratch. A responsive web design eliminates this challenge in his path.

All professionals and experts in website designing agree that responsive web design is the present and the future of web design. To be competitive and beat your competitors, it is best that you go for a mobile-optimized website today.

Sponsered

 

© 2013 Psd to Html Blog. All rights resevered. Designed by Templateism

Back To Top