mercredi 22 avril 2015

CSS text appears blurry when translated or scaled in webkit browsers

I've been trying to do a menu with transform: translate(-1px, -1px); in the hover state, here is an example.

But in Chrome when the text is translating it appears blurry which is not very pleasant to see, is there a way to fix this?

how to pass context value to css

i have to add background image for my webpage, so i have added below code css for body

body {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 400;
    color: #666;
    font-size: 12px !important;
    line-height: 20px;
    background-image: url(../resources/img/background_img.jpg);
}

but i have to add background-image as

url(${context}/resources/img/background_img.jpg);

, where context will be passed from jsp (instead of absolute path). put conext param doesnt work, is there any alternative way or am i doing wrongly. Need help

mardi 21 avril 2015

Get visible text in CSS3 columns

Trying to make a method which can read the current visible text inside of a element. The method you see below is as far as i've gotten the past few days.

Is there anything more reliable for getting the visible text in a element other than using a caret/range? Cause the issue I'm having is that i have a lot of overflown text who then also gets selected because caret doesn't catch the textNode but instead the parent container.

An example of what my page looks like & why I'm having issues with current method:

enter image description here

The closest approach so far has been (Gael) "http://jsfiddle.net" - So if you're looking for any reference code to see what I'm trying to archive. There it is.

Not sure I'm making sense here, otherwise let me know :)


function getTextInColumn (rect) {
      var startX = rect.left;
      var startY = rect.top;
      var endX = rect.left + rect.width - 2;
      var endY = rect.top + rect.height - 2;
      var start, end, range = null;
      var i = 0;
      var rangeText = '';

      while ((rangeText === '' && i < 100 && endY > 5)) {
        range = null;

        if (typeof document.caretPositionFromPoint != 'undefined') {
          start = document.caretPositionFromPoint(startX, startY);
          end = document.caretPositionFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.offsetNode, start.offset);
            range.setEnd(end.offsetNode, end.offset);
          }
        }
        else if (typeof document.caretRangeFromPoint != 'undefined') {
          start = document.caretRangeFromPoint(startX, startY);
          end = document.caretRangeFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.startContainer, start.startOffset);
            range.setEnd(end.startContainer, end.startOffset);
          }
        }

        if (range !== null) {
          rangeText = range.toString();
        }

        endY -= 52;
        i++;
      }

      return rangeText;
}

Jerking animation on css3 spinner

I found one attractive spinner(css3, scss): http://ift.tt/1x1B0Xp.

@for $i from 1 through 6 {
        @keyframes preload-show-#{$i}{
                from{
                        transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }
        @keyframes preload-hide-#{$i}{
                to{
                        transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }

        @keyframes preload-cycle-#{$i}{
                
                $startIndex: $i*5;
                $reverseIndex: (80 - $i*5);

                #{$startIndex * 1%}{
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
                #{$startIndex + 5%},
                #{$reverseIndex * 1%}{
                        transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
                        border-left-color: #f7484e;
                }

                #{$reverseIndex + 5%},
                100%{
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }
}

@keyframes preload-flip{
        0%{
                transform: rotateY(0deg) rotateZ(-60deg);
        }
        100%{
                transform: rotateY(360deg) rotateZ(-60deg);
        }
}

body{
  background: #efefef;
}

.preloader{
  position: absolute;
  top: 50%;
  left: 50%;
        font-size: 20px;
        display: block;
        width: 3.75em;
        height: 4.25em;
        margin-left: -1.875em;
  margin-top: -2.125em;
        transform-origin: center center;
        transform: rotateY(180deg) rotateZ(-60deg);

        .slice{
                border-top: 1.125em solid transparent;
                border-right: none;
                border-bottom: 1em solid transparent;
                border-left: 1.875em solid #f7484e;
                position: absolute;
                top: 0px;
                left: 50%;
                transform-origin: left bottom;
                border-radius: 3px 3px 0 0;
        }

        @for $i from 1 through 6 {
          .slice:nth-child(#{$i}) { 
                transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
                animation: .15s linear .9 - $i*.08s preload-hide-#{$i} both 1;
          }
        }


        &.loading{
                animation: 2s preload-flip steps(2) infinite both;
                @for $i from 1 through 6 {
                  .slice:nth-child(#{$i}) { 
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
                        animation: 2s preload-cycle-#{$i} linear infinite both;
                  }
                }
        }

}
<div class="preloader loading">
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
</div>
But it has the jerking moment(glitch) in the middle of animation: bottom part of hexagon moves to right on one or two pixels.

I took video of this moment: youtu.be/_TwDuxME8wc.

I tried to repair it on my own, but I haven't enough skills. Could you prompt how it can be fixed? Thanks!

:target class repeats previous animation

Could some give me hand with this animation the problem I'm having is with the target class which is on the close button of my messages - line 161 of my codepen.io. The problem I'm having is making the display:block to display none and not re-show the element again - when you click the cross button it disappears but when you click another cross button on another message it show the previous one again - how can this be stopped, could someone give me some help please.

codepen.io

.wrapper:target{    
  -webkit-animation: close_toast 2s ease both;
  -moz-animation: close_toast 2s ease both;
  animation: close_toast 2s ease both;  
}

@-webkit-keyframes close_toast {
  0% { 
    display: block;
    opacity: 1;
    right: 0px;
  } 
  99% {
    opacity: 0;
    right: 0px;     
  }
  100% {
    display: none;
    opacity: 0;    
    right: 0px;    
  }
}

flip after a certain period of time in css

I'm learning to use css to make some animations (start from zero). I saw this cool example on a website. I would like to apply this to my own css. However I'm thinking several changes to this

1) Can I change this by a timer. So it can flip automatically after a certain period (say flip every 10 seconds) without any mouse movement.

2) I have to in my html file that I want to flip from one to anther. Unfortunately they have got the same class (Something like :widget-inner loadable .widget-size-2x1). So can I use #id instead of class in css file?

3) I saw other examples using an extra js file to achieve the flipping animation. Ideally can I just use only a css to do this?

jQuery delay fadeIn taking longer than expected

I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:

        //<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow'); 
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
                });
        //]]>
body, html {
    height: 100%;
    text-align: center;
}

body {
  background-color: #2f2f2f;
  }
.preloader {
 position: fixed;
 

 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99999;
 background-color: #2f2f2f;
}

.loader {
  display: block;
  width: 60px;
  height: 60px;
  position: fixed;
  border: 5px solid #d5b317;
  top: 50%;
  left:50%;
  -webkit-animation: loader 2s infinite ease;
  z-index: -10;
  overflow: hidden;
  margin-left: -29px
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #d5b317;
  -webkit-animation: loader-inner 2s infinite ease-in;
  z-index: -10;
}
@font-face {
    font-family: 'Adobe Gurmukhi';
    src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}

.letter {
 display:hidden;
 color: #f7d11e;
 font-family: 'Adobe Gurmukhi';
 font-size: 70px;
 position:absolute;  
 top: 50%;
 left: 50%;
 margin-top: -17px;
 margin-left: -19px;
 z-index: -9;

}
@-webkit-keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}
<script type="text/javascript" src="http://ift.tt/15MB7HF">
      </script>
<!--preloader-->
 <div class="preloader">
   <span class="loader"><span class="loader-inner"></span></span>
     </div>
    <span><p class="letter">ਅ</p></span>

How To Use CSS3 For Smooth Parallax Scrolling Cross-Browser, Cross-Platform

I'm implementing a parallax header on a page. It works pretty well with the Apple TrackPad on Firefox & Safari on Mac OS X. But doesn't work so well on Chrome for Mac nor on any browser in Windows.

This is the jQuery I'm implementing:

/*----------------------------------------------------------------------------*\
 * PARALLAX HEADER IMAGE
\*----------------------------------------------------------------------------*/
$(window).scroll( function(){
  var scroll = $(window).scrollTop(),
  slowScroll = scroll*.85;
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    $('.no-touch  .js--parallax-header').css({ transition: "" });
  }, 50));
  $('.no-touch  .js--parallax-header').css({
    transform: "translate3d( 0, " + slowScroll + "px, 0)",
    transition: "none" });
});

This is the page I'm trying to implement it on.

It's jittery for one. And with a mouse with a scroll wheel, it's very jumpy. My page does also have a transform effect on it for an off canvas navigation menu so I think I need to work around that.

Squarespace does an excellent job of implementing this same parallax effect. How did they do it?

Any help is greatly appreciated! Thanks!

dropwdown div cut off inside its parent container

I have this html code

<div class="cos_data_table_header_right">
    <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            <i class="fa fa-download"></i>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
    <button class="btn btn-default"><i class="fa fa-search"></i></button>
</div>

and this css for .cosdata_table_header

.cosdata_table_header{
    padding: 10px;
    background: #cacaca;
    display: block;
}

The problem is that, the default style of .cosdata_table_header is not wrapping its children yet the dropdown thing is working perfectly but if I set it to overflow: auto, the .cosdata_table_header wraps its children yet if I click the dropdown button, its content has been cut off and a awful scrollbar is shown inside the .cosdata_table_header and if I set the style of .cosdata_table_header to overflow: hidden, the dropdown thing content is not shown (refer below).

enter image description here

any help, suggestions, recommendations, ideas and clues to make this work?

PS: im using bootstrap 3 for the dropdown stuff.

Hover on an element, with an element between

I have a div and a css :hover set on it so that when I hover on it, one of its children changes color.

The problem is on click+mousemove, I'm adding a div that follows the mouse around (with jQuery), and this is causing the css :hover not to work. Is there a way to get around this with just css? I figured out how to do it with jQuery but I prefer css if its possible

Here's a demo

Look for #add-bar:hover #add-box

Update

Actually, it looks like the div that follows the mouse isn't the issue, its that I'm holding the mouse button down before hovering on the element.

css :target fadeOut animation not working

I'm trying to use the :target property to animate a fade out, at the moment it just disappears and I want to get the fadeOut animation to work rather than it just vanishes this is activated by the close cross button using × could some one have a look at my code and see if you can get it to work please thanks.

codepen.io

line 112:

:target {    
  -webkit-animation: fadeOut 1s ease;  
  -moz-animation: fadeOut 1s ease;  
  animation: fadeOut 1s ease;
}

 @-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    right: 0px;
  }
  100% {
    opacity: 0;
    right: 0px
  }  
}

CSS 80% opacity on strong tag within paragraph but if no strong tag 100%

So an agency has passed down some code and i coded site with using their method in CSS with changing the opacity to 80% for

tags however client has picked this up and so much has been build.

I have added in p { opacity(0.8) } and changes paragraph tags to the same colour however i have some titles like

text

which are also now fading so my question is (without a load of work to change) is it possible in css that i make

that contain a strong tag use 100% ?

rough example below:

HTML

<p><strong>test title</strong></p>
<p>test test here</p>

CSS:

p { opacity(0.8) }

however i need to ensure that p > strong remains with no opacity change so 100% in this case

Thanks in advance, i know a sloppy fix if any but its go live in the morning and no time to re-do this all or set owe classes for colour change on everything as too much content and to many pages

for example: http://ift.tt/1GgzVRN

Thanks again

Put shadow on angle

I want to know how to put a shadow on this angle.

<style>
.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 75px 102px 75px;
    border-color: transparent transparent #949494 transparent;
}
</style>

<div class="triangle"></div>

Margin exists despite being set to 0 in stylesheet - CSS

In Chrome when I open up Inspect Element on my webpage, I notice one of the divs has a margin on the right side that fills the rest of the page horizontally:

Notice the right margin extending to the edge of the page

As far as I know, no right margin should exist on that div. In the stylesheet of the html document, the right margin is set to zero. And, the box model in the Inspect Element window shows a right margin of -:

CSS:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #FFF;
}

#header {
    /*this is the parent div of the div with the unexpected right margin*/
    width: 100%;
    height: 50px;
    background-color: #26519E;
    box-shadow: 0 5px 5px Lightgray;
}

#logo {
    /*this is the div with the unexpected margin*/
    width: 120px;
    height: inherit;
    margin-left: 180px;
    padding: 10px;
}

Inspect Element:

The HTML layout

The Inspect Element box model

What could be causing this right margin on the logo div?

If more information is required to determine what's happening, please tell me.

How to create CSS3 bounce effect

I am trying to create bounce effect with pure css. I have following code

HTML

<div></div>
<div></div>
<div></div>

CSS

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in;
    transform-origin: top left;
}
div:hover { 
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

DEMO

What I want is a bounce effect at the end of the animation without using any 3rd party code or js. I have no idea of how to do this.

moz second animation goes back to start

I'm having a problem on the second animation on -moz-animation: The problem is when it calls the second animation fadeOut it goes back to the start from where the first animation took place.

codepen // keyframes are at the bottom of the document at codepen.io

.modal {
   -moz-animation: flip_opacity 1s ease-in forwards, fadeOut 1s 2s ease-out forwards;  
}

// first animation

@-moz-keyframes flip_opacity {
0% {
  -moz-transform: rotateX(0deg);
  right: 500px;
  opacity: 0;
}
100% {
  -moz-transform: rotateX(360deg);
  right: 0px;
  opacity: 1
}
}

// second animation

@-moz-keyframes fadeOut {
0% {
  opacity: 1;    
}
99% {
  opacity: 0;
}
100% {
  display: none;
}
}

CSS3 backface visibility on grand children of rotating element

Note: CSS is in the codepen examples

CONTEXT: I want to rotate a set of elements (lets call them parents) aligned as a column. Each parent has 2 children (2 faces: front and back).

<div class="parent">
  <div class="front"></div>
  <div class="back"></div>
</div>
<br />
<div class="parent">
  <div class="front"></div>
  <div class="back"></div>
</div>
<!-- many more -->

The animation is going to be added later in time with JavaScript and for the purpose of the question, lets say that there will be 10 columns with 10 rows, and rotating 100 elements in some android phones with some crappy browsers will definitely look odd.

What I want to avoid is to add the rotate animation to each "parent" because I know each animation wont always start at the same time.

MY SOLUTION: I created a container element for each column (called rotator) to only have to rotate that element and all "parent" elements were going to be rotated at the same time. It works, and I know it has much better performance.

<!-- one column -->
<div class="rotator">
  <div class="parent">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <br />
  <div class="parent">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <!-- many more -->
</div>

PROBLEM: The problem is that backface-visibility only works if I'm rotating the "parent" element. If I rotate the "rotator" element I can only see the "back" face but never the front.

Here is the solution with the rotator, this is the one that has the problem.

And here is the working example without the rotator, this is what I want to achieve but using a rotator.

QUESTION: How can I make it so using a rotator element will still allow backface-visibility to work as supposed to?

iPhone renders HTML form different than desktop browsers

I am doing a very simple website, it's a private admin panel, it's also responsive and built around HTML5.

The login page has the standard Username and Password form fields that I have styled to appear just the way I want. I have tested this page in all 5 of the major browsers on my Windows 7 Ultimate PC (even though Safari for Windows is no more I still tested with the older version I have) and the page looks fine.

So then I grab my iPhone 4S and check the page...and the two input fields and their labels are not where I want them, rather it appears that it's just the Password label and input field. It's off in either rotation of the phone.

I have been scouring the internet for hours and am out of ideas how to reword my search query to get something of use. I have had no luck, so I copied the relevant bits of the site and made a sample website that can be found HERE.

If you resize the browser window, the inputs and labels stay where I want them. Only when viewed on the iPhone do they move from where I want them.

UPDATE

The page on which I'm having the problem has a center div that is only 300px wide, due to the fact there is so little on this page and thus no real need for the responsive action. The pages within the site will need responsive treatment, however. I mentioned responsive at the beginning of this post to be thorough. If I remove the viewport meta tag, the form fields are still out of whack, so there has to be something buggy with the iPhone version of Safari, right?

Any, and I mean ANY help will be supremely appreciated. I'm stonewalled.

Thanks!

3D CSS Transform element positioning

I have a basic 3D card that flips when you press a button (Using the CSS perspective property on the parent and then rotateY on the two sides.

I'm just wondering how the positioning for these elements work, as whenever I adjust the font-size (in em's) the cards go further away from the actual parent.

I must have overlooked some kind of important property.

Here's the pen.

Navbar add class after div scrolls with jQuery

I have problems adding a class to the navigation after scrolling to get a fixed class. My website has a video in the background and only the <div> with the .wrap class can scroll all the content. When scrolling I would like the navigation to be fixed on top.

This is my Javascript code:

$(document).ready(function() {
    var navpos = $('.navbar').offset();
    console.log(navpos.top);
    $(window).bind('scroll', function() {
        if ($(window).scrollTop() > navpos.top) {
            $('.navbar').fadeIn(500).addClass('fixed-top');
        }else {
           $('.navbar').removeClass('fixed-top');
        }
    });
});

But the problem is that the body is in fixed position and only the content wrap is actually scrolling. How do I fix this?

Load images only in certains resolutions

Here is the thing. I have a header at the top of my page which have two images, one of them is only visible when the view port is large ( > 940) and the other only shows on mobile. To achieve this behavior I'm using Bootstrap 3 and their defined sets of media queries:

<header class="container">
   <div class="row">

      <div class="col-lg-4 hidden-xs">
        <img src="img/hi-res-logo.png">
      </div>

      <div class="col-xs-12 visible-xs">
        <img src="img/small-logo.png">
      </div>

  </div>
</header>

So far, no big deal, the previous code does the job well, but what I want is prevent the load of the large image file itself on mobile to avoid unnecessary data consumption... so how to achieve that?

screw corners for image css

I am trying to make a responsive slider and tryind to do image corners like in example image. I do not use image because my images (block) is responsive, I am trying, searching a css3 solution

enter image description here

CSS: Twitter Bootstrap, how to design this layout top and side banner

I am trying to achieve this kind of layout with Twitter bootstrap 3, but I don't know the best way to do this.

I made a picture how it should look like later on: Layout

The main problems are that the Top Ad has to adjust to the container width and the Side Ad has to be on the same height as container and stick to it.

I started here, but I am not that good with CSS. Bootstrap Layout JsBin

Thank you for any help.

ngAnimate not adding classes to image gallery using ngRepeat

Demo: http://ift.tt/1D8HBCb

I'm attempting to make my image gallery animate when you hit the left/right arrows. Ideally, they would work like they do here.

I tried doing this:

.gallery-image {

    opacity: 1;

    &.ng-enter {
      transition: transform 0.5s;
      opacity: 0;
    }

    &.ng-enter-active {
      opacity: 0.5;
    }
}

But it just seems like ngAnimate doesn't want to add any classes to my elements on the DOM. My repeater is declared like this:

    <img class="gallery-image"
      ng-repeat="image in images | limitTo:3:currentIndex-1" 
      ng-show="$index+currentIndex-1 >= 0 && $index+currentIndex-1 < images.length" 
      ng-src="{{images[$index+currentIndex-1].url}}" />

So what I do is just change the current index I'm looking at, and that adjusts what images are visible.

The weird thing is, if you resize the plunk (sm to md, md to lg) you can see the images very clearly animating.

Why isn't ngAnimate adding any classes to my DOM?

CSS3 keyframe animation with 2-3 sec START delay (not iterate)

I would like the below to start animating AFTER about a 2-3 seconds delay.

Anyone have any idea as to how to add a delay to start of CSS3 keyframe animation like below? (jQuery is not preffered, but if I must)

.coin{  
  animation: animationFrames ease 2.5s;
  -webkit-animation: animationFrames ease 2.5s; /* Safari 4+ */
  animation-iteration-count: 8;
  -webkit-animation-iteration-count: 8;
  transform-origin: 50% 50%;
  -webkit-transform-origin:  50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode: forwards;
  max-width: 55px;
  position:relative;
  top: 63px;
  left: 195px;
}

and:

  @-webkit-keyframes animationFrames {
      0% {
        -webkit-transform:  translate(-402px,55px)  ;
      }
      4% {
        -webkit-transform:  translate(-333px,26px)  ;
      }
      9% {
        -webkit-transform:  translate(-257px,-13px)  ;
      }
      14% {
        -webkit-transform:  translate(-183px,-18px)  ;
      }

height: 100% of remaining space in element with fixed height

I've absolute positioned div with an fixed height and hidden overflow. I want to place an list thus height shall be 100% of the remaining height. I want to do this with pure CSS. Is this possible?

CODEPEN EXAMPLE

HTML

<div class="parent">
  <ul>
    <li>foo</li>
    <li>bar</li>
    // ...  
  </ul>
</div>

CSS

.parent {
  position: absolute;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: red;
}

.parent ul{
  background: green;
}

Here's an simple image showing what I mean by 100% of the remaining height.
enter image description here

How to move stacked columns up (using bootstrap)

Looking to have column [3] move up when [2] is taller than [1]

[1][2]

[3][4]

Here is a bootply of the layout : http://ift.tt/1HRz63R

There is empty space between column [1] and [3] and I would like to have column [3] move up.

(just fyi, column [4] is already styled to move up under column [2])

thank you

Bizarre rendering issue in webkit (Chrome 42 - latest). How to fix?

So I'm writing an AngularJS app, and it's a dashboard. Ergo, it has several widgets, most of which are able to vary in size and display some kind of information from various categories the widgets cover.

To that end, when a widget is enlarged to 2x width, it adapts and uses -webkit-columns, columns etc. I first thought maybe this was causing the kind of rendering issue I'm talking about--but I've noticed it happen with widgets who aren't adopting that property too.

Simply put, if you scroll up/down and thereby hide some of the inner contents of a widget from the view, sometimes it will just seem to have glitched when you scroll back and either scramble UI renders together or just obliterate part of the content.

After digging around, I've tried forcing HW acceleration with -webkit-transform: translateZ(0); and I've tried adding -webkit-backface-visibility: hidden; to the items as well.

Does anyone know A) what causes this strange issue? and B) how does one go about fixing the issue?

Here's a picture showing a recent misdeed I witnessed:

Rendering issue

Banner with angled shapes

Trying to create a banner with a triangular shape at the end.

.wrapper {
  padding: 50px;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 20px solid gray;
  border-bottom: 20px solid gray;
  border-right: none;
}
<div class="wrapper">TEXT HERE</div>

enter image description here

can't keep a index using setTimeout

i'm developping a new javascript feature, in which i have a collection of media (img,video,txt...), the user can add a new media and once the media is added to the collection a new asychronous request is send to the server for checking if the added media thumbail already exist. if so the thumbnail is added to the media element in the collection. this the code that check if the thumbnail exist:




     if (!img.width) {
                                setTimeout(_.bind(function () {
                                    if (img.width) {
                                        this.$("mySelector").first().removeClass("nocover ").css('background-image', 'url('url of thuambnail');
                                    }
                                }, this), 15000);


my probleme is how to keep an index for a element whose check request was send to the server,because since this is ansychronouse function smoetimes while the request of the thumbnail check is being processed the user can add a new media element an then the thumbnail is added to wrong element. because my only way to refer to the new element is : this.$("mySelector").first()

how to make two left floated div vertically

hey i have a user info div that have user pic ,user name , user bio divs , now i want to user pic to left side and Name & bio is other side ,

Html

<div class="user-info">
<div class="user-pic">
    <img src="" class="u-pic"/>
</div> 
<div class="user-name">Jon Doe</div>   
<div class="user-bio">I am a english teacher</div></div>

Jsfiddle

After doing this all divs have same height but i want name div to be in top and bio div should in bottom of name div .

thanks

loop key frame css3 animation 8 times

Is it possible (even with the assistance of jQuery, if necessary -- to loop a CSS3 keyframe animation 8 times)

.coin{  
  animation: animationFrames ease 1.5s;
  -webkit-animation: animationFrames ease 1.5s; /* Safari 4+ */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-transform-origin:  50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode: forwards;
  max-width: 55px;
  position:relative;
  top: 63px;
  left: 195px;
}

/* Chrome, Safari, Opera */ 

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(-402px,55px)  ;
  }
  4% {
    -webkit-transform:  translate(-333px,26px)  ;
  }
  9% {
    -webkit-transform:  translate(-257px,-13px)  ;
  }
  14% {
    -webkit-transform:  translate(-183px,-18px)  ;
  }
  19% {
    -webkit-transform:  translate(-122px,0px)  ;
  }
  19% {
    -webkit-transform:  translate(-122px,44px)  ;
  }
  19% {
    -webkit-transform:  translate(-122px,44px)  ;
  }
  24% {
    -webkit-transform:  translate(-98px,59px)  ;
  }
  29% {
    -webkit-transform:  translate(-91px,128px)  ;
  }
  29% {
    -webkit-transform:  translate(-91px,128px)  ;
  }
  34% {
    -webkit-transform:  translate(-59px,77px)  ;
  }
  38% {
    -webkit-transform:  translate(-13px,34px)  ;
  }
  42% {
    -webkit-transform:  translate(51px,13px)  ;
  }
  46% {
    -webkit-transform:  translate(101px,39px)  ;
  }
  51% {
    -webkit-transform:  translate(141px,72px)  ;
  }
  56% {
    -webkit-transform:  translate(163px,105px)  ;
  }
  62% {
    -webkit-transform:  translate(177px,155px)  ;
  }
  68% {
    -webkit-transform:  translate(177px,155px)  ;
  }
  100% {
    -webkit-transform:  translate(177px,155px)  ;
  }
}

change logo in layout depending on user

In my app I want to change the logo and other default pictures depending on which user is logged in. Anyone has a good tutorial or know how to do this? I have been looking for this a lot but there is no much information about it.

EDIT: I posted like that because I don't know much about this topic, sorry for the inconvenience. I have the user login system done and is possible to create new roles. Currently the roles dosen't do anything but it exist.

I'm now adding my main layout, user model and role model. What I want is to change the "wfront/logo" depending on the current user role. I know it should be simple but I'm very new at rails and this app was program by another person.

Please tell me if you need more info.

views/layouts/application.html.haml
//this is my app layout and I want to change the logo dynamically 'wfront/logo'
    %html
      %head
        %title= full_page_title
        = render 'wfront/head'
        = csrf_meta_tags
      %body{ class: "fixed-header fixed-navigationx smart-style-0 #{cookies[:menu_state]}" }
        %header#header
          = render 'wfront/logo'
          = render 'wfront/context_select'
          = render 'wfront/subcontext_select'
          = render 'wfront/toggle_menu_button'
          = render 'wfront/user_info'
          .pull-right
            = render 'wfront/currency_select'
            = render 'wfront/date_select'
        %aside#left-panel
          = render 'wfront/nav_menu'
          %span.minifyme{ data: { action: 'minifyMenu' } }
            %i.fa.fa-arrow-circle-left.hit

        #main
          #ribbon
          #content
            .row
              = render 'wfront/title'
              .col-xs-12.col-sm-5.col-md-5.col-lg-7
                %ul#sparks
                  = render 'wfront/sparks'
                  = render 'wfront/exchange_rates'
            = yield

        .page-footer
          = render 'wfront/footer'

        = render 'wfront/quaam'
        = javascript_include_tag 'application', "data-turbolinks-track" => true
        = yield :scripts

        = render 'wfront/modal'

--

  models/user.rb
    # == Schema Information
    #
    # Table name: users
    #
    #  id                     :integer          not null, primary key
    #  email                  :string(255)      default(""), not null
    #  encrypted_password     :string(255)      default(""), not null
    #  reset_password_token   :string(255)
    #  reset_password_sent_at :datetime
    #  remember_created_at    :datetime
    #  sign_in_count          :integer          default(0), not null
    #  current_sign_in_at     :datetime
    #  last_sign_in_at        :datetime
    #  current_sign_in_ip     :string(255)
    #  last_sign_in_ip        :string(255)
    #  created_at             :datetime
    #  updated_at             :datetime
    #  name                   :string(255)
    #

    class User < ActiveRecord::Base
      # Include default devise modules. Others available are:
      # :confirmable, :registerable, :timeoutable and :omniauthable
      devise :database_authenticatable, :lockable,
             :recoverable, :rememberable, :trackable, :validatable

      has_many :account_users
      has_many :accounts, through: :account_users
      has_many :taxes, -> { uniq }, through: :accounts

      validates :name, :email, presence: true, uniqueness: true

      include Concerns::Roleize
      roleize

      def primary_account
        self.accounts.first
      end
    end

--

   model/role.rb
    # == Schema Information
    #
    # Table name: roles
    #
    #  id            :integer          not null, primary key
    #  name          :string(255)
    #  resource_id   :integer
    #  resource_type :string(255)
    #  created_at    :datetime
    #  updated_at    :datetime
    #

    class Role < ActiveRecord::Base
      belongs_to :resource, polymorphic: true
      before_create :tableize_name

      def tableize_name
        self.name = self.name
      end

      def self.method_missing(name, *args, &block)
        roles = self.where(["name =?", name])
        if roles.any?
          scope roles.first.name.to_sym, ->{roles.first}
          return self.send(name.to_sym)
        end
        super
      end
    end

Middle vertical-align on inline-block's without setting height

This seems so simple but I can't get it right.

My work-features box aligns to the bottom. I've tried to use vertical-align: middle but that makes it worse.

I'd rather not set a fixed height, use float's, or jQuery to accomplish this. Also can't change the HTML inside the <div class="work"> block.

I have read some of the others questions on SO but none of the solutions worked for me.

JSFiddle

HTML

<article class="post">
    <div class="entry" lang="en">
        <div class="work">
            <ul class="work-features">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Cras facilisis urna in vulputate vehicula.</li>
            </ul>
            <div class="work-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum elit nec elementum tincidunt. Duis pharetra vehicula odio sit amet rhoncus. Cras id est tincidunt, dictum lacus id, venenatis orci. Nulla consequat nunc nec nisl blandit, non porta ipsum rhoncus. Praesent eleifend bibendum dignissim. Pellentesque a scelerisque dolor, nec auctor eros. Nam eu nunc nisl. Quisque sed varius lorem. Suspendisse a tellus vel lacus elementum mollis ac ut turpis. Morbi scelerisque viverra dignissim. Curabitur id semper nisi, in eleifend elit. Pellentesque dapibus auctor erat, a posuere eros.</div>
        </div>
    </div>
</article>

CSS

ol, ul {
    list-style: none outside;
}
.entry .work .work-features {
    display: inline-block;
    width: 180px;
}
.entry .work .work-features li {
    font-size: 15px;
    padding-bottom: 5px;
}
.entry .work .work-description {
    display: inline-block;
    width: 640px;
    font-size: 18px;
    line-height: 1.5;
}

div that has different height display in a awful position

I use bootstrap 3, I have this html structure

<div class="row"
    <div class="col-md-2">
    </div>
    <div class="col-md-2">
    </div>
    <div class="col-md-2">
    </div>
    <div class="col-md-2">
    </div>
</div>

Each .col-md-2 div container has different size of contents so they have different height but same width and so when not equal height div look is a awful position (big spaces between element). How to make it like a fluid grid layout that remove spaces between each .col-md-2 and it display clean and align even they have different height? Any suggestions, help, clues, recommendations and ideas would be greatly appreciated. Thank you!

Custom End Point of CSS3 Sprite Animation (end on end of sprite img)

/sweeeeeet_image.png is my long horizontal png image, it's 5596px wide; it consists of 10 different images side by side within that .png and my CSS3 below is moving it to create an animation, next to steps(10) infinite; is possible -- I don't want that so I omitted it. But with leaving it out, it doesn't loop, but starts at the beginning of the long .png -- so stops at first image frame. I need it to stop at the last! Any suggestions at all?

.hi {
    width: 555px;
    height: 126px;
    background-image: url("sweeeeeet_image.png");

    -webkit-animation: play 1s steps(10);
       -moz-animation: play 1s steps(10);
        -ms-animation: play 1s steps(10);
         -o-animation: play 1s steps(10);
            animation: play 1s steps(10);
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -5042px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -5596px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -5596px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -5596px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -5596px; }
}

make div, starting with left alignment, grow to width of window then shrink back and align right

Hi I am learning javascript and jQuery and I am trying to get a div when clicked to expand to the width of the window then shrink back down to original size but end up with the opposite alignment. I can get this to work if the object starts on the right, but it doesn't work if it starts on the left. I don't know why. Here's the working code, I want to swap the direction.

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script type="text/javascript" src="jquery.min.js"></script>

<style>
    #circle {
        height:200px;
        width:200px;
        background-color:red;
        border-radius:100px;
        position:absolute;
        right:0;
    }

</style>

</head>

<body>  

    <h1>Header</h1>

    <div id="circle"></div>

    <script>

    $("#circle").click(function() {

        $(this).animate({

            width:"100%",

            }, 1000, function() {

                $(this).animate({

                    width:"200px",
                    left:"0"

                    }, 1000);

                });

        });


</script>

</body>
</html>

I tried just changing where you see "left" for "right" and vice-versa, but then it just starts on the left and ends on the left. I tried investigating the position() function included with the jQuery-ui plugin, but I couldn't get it to work with the animate function, so instead of being smooth, it would animate growing, shrinking back to the left and then popping over to the right.

Thanks for any help!

CSS Scroll with div content but not out of own div

What ive got: I have a list of users. Each User can lift his hand to give a sign. The hand is symboled in an other div outside the user div. If the userdiv is not high enough for the amount of users, it is scrollable. The div with the signs is mapped to the scrolling. This all works see:

Fiddle!

//Scroll mapping    
$( "#userframe" ).scroll(function() {
            $("#handdiv").scrollTop($(this).scrollTop());
});

The Problem: If a user gives a sign but is out of the visable part of the userdiv... no one can see it.

The Idea: So my idea is, that hand-signs never scroll out of view in the right div (even if the user scrolls outside of the userdiv) and stack on its bottom and top. But they scroll with the user if the user is visible in the left div.

I have no idea how this can be done! I can imagen it can be done with affix.js but this is only for one element i guess :(

can someone give me a hint for what i have to search or how this can be done ? Thanks a lot :)

Using device orientation with 3D transforms

There is this project that wants to implement a cube that has sides for east/west/up/ground/north/south which are supposed to always point in the respective geolocations. The necessary data is gathered from the deviceorientation API: http://ift.tt/1JqApVE

Me and lots of other users were wondering why this app is not doing what it's supposed to do. (It's supposed to run on Firefox OS or on any Android device with Firefox.) Apart from the fact that the code seems to do a lot of unnecessary things and the coding style is a shame, I don't quite understand what he is doing there.

Then I discovered hints on how to do something similar on MDN: http://ift.tt/1ho6H5p

Both approaches seem to be obviously wrong: They assume that you can simply invert the device orientation by just applying rotateX, rotateY and rotateZ in the right order.

But there's a clear definition of the angles (alpha, beta, gamma) that the deviceorientation event provides: http://ift.tt/1elnZSn And it says that the respective rotation axes are the axes of the rotated (device) frame. So you rotate by an angle alpha around the z-axis, then you rotate by an angle beta around the (now rotated!) x-axis, then you rotate by an angle gamma around the (now twice rotated!) y-axis.

Since for CSS transforms the reference frame is always the device frame, to invert these steps you would need to manually keep rotating the axis of rotation.

var b = e.beta,
    g = -e.gamma,
    a = e.alpha,
    axis_y = Array(0,1,0),
    axis_x = rotate(Array(1,0,0), axis_y, g),
    axis_z = rotate(rotate(Array(0,0,1), axis_y, g), axis_x, b);

Thus, the CSS transforms look like this:

document.getElementById("cube").style.transform =
    "rotate3d(" + axis_z[0] + ", " + axis_z[1] + ", " + axis_z[2] + ", " + a + "deg) " +
    "rotate3d(" + axis_x[0] + ", " + axis_x[1] + ", " + axis_x[2] + ", " + b + "deg) " +
    "rotate3d(" + axis_y[0] + ", " + axis_y[1] + ", " + axis_y[2] + ", " + g + "deg)";

Note that for the CSS transform function rotate3d "the rotation is clockwise as one looks from the end of the axis vector toward the origin" while for the provided alpha-beta-gamma "positive rotation around an axis is clockwise when viewed along the positive direction of the axis". Taking into account that the y axis for CSS transforms is pointing to the bottom of the screen we only have to invert the gamma angle in our context.

Here is my implementation of this: http://ift.tt/1Hfyaan

My question is: Is this the right/best way of implementing this or is there a way to do it without rotating the axes of rotation multiple times?

2 columns li inside ul, wont fill 100% of the ul width

I can't get UL's li elements to fill 100% of the width (or near).

Something strange happens, because the first one is next to parent's boreder, but the second column, has like a 20 px offset from the right parent's border.

enter image description here

.latest-posts .latest-posts-widget ul {
    border: solid 1px;
}

.latest-posts .latest-posts-widget ul li {
    display: inline-block;
    width: 49%;
    border: solid 1px;
}

It is affected by Bootstrap 3 Also I have to use 49% because 50% wont make 2 columns Live page is under development in http://ift.tt/1yMeisF

Pseudo-Element and listening to a transition to end

I'm having a navigation which has pseudo-elements as icons (a:before).

<ul>
  <li><a href="#">click me</a></li>
  <li><a href="#">click me</a></li>
</ul>
<style>
  /* that's a placeholder for the icon */
  a:before {
    content : 'X';
    width:1em;height:1em;line-height:1em;font-size:1em;
    border-radius : 50%; background-color : blue;
  }
</style>

If I click on an anchor, I want this icon to spin. I'm doing it via jQuery .on('click') and adding class that has a CSS-Transition. This works good.

Check out this fiddle, it's pretty simple:

http://ift.tt/1Eo1hbd

...

The Problem

However, after a short amount of time (I'm using setTimeout() in my jsFiddle to simulate an ajax request), I want the CSS-Transition to end after it has completed.

I have seen, that there are transitionend-events that jQuery can listen to, however I cannot listen to it, because the transition is set on the pseudo-element of the tag, which is not accessible via DOM.

Is there any possibility to listen to the transition to end, without changing the HTML?

Mainly it's this part of the script that's not working:

$('a:before', el).one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
    alert('2: transition ended, remove class loading');
    el.removeClass('loading');
}); 

Cheers

Detecting when certain bootstrap glyphicons are present on a page with Selenium IDE

I have some registration fields, and if the name field is empty, I display a glyphicon at the end of the input field box with:

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

With Selenium IDE, how do I detect only when that glyphicon is showed on the screen?

html-css floating divs fit container height

After a couple of hours searching solutions I'm still stucked. I have a window and a content div and a buttons div inside this window. The content div can have various fixed width groups inside , which are generated by php code. These groups have various number of lines of content, which means that each group have different height according to the content generated.

How can I make all the groups' height adjust to the largest group's height with css?

In the examle here Fiddle there is 3 groups and 3 heights, the goal would be to have all the groups heights adjusted to the height of the largest group. The example code so far is:

<div id="window">
    <div id="winContent" style="display:table;background-color: lightyellow">
            <div id="dataContent" style="display:table-row;background-color: lightblue">
                    <div id="group1" class="grpClass" style="background-color: lightcyan;">
                        GROUP1<br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
                     <div id="group2" class="grpClass" style="background-color: lightcyan;">
                         GROUP2<br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
                    <div id="group3" class="grpClass" style="background-color: lightcyan;">
                        GROUP3<br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
            </div>
            <div id="winButtons" class="btnClass" style="background-color: lightcoral;">
                BTN1 BTN2 
            </div>
    </div>

<style>
.grpClass{width:200px;float:left;  
border-radius: 10px;border: 1px solid #8AC007;padding: 5px;

}
.btnClass{display:table-row;float:right;
border-radius: 10px;border: 1px solid #8AC007;padding: 5px; margin-top:5px;}
</style>

Why IE11 Default Zoom Value Causes CSS Transition Issue?

In my recent work I faced interesting problem. In IE11 when transition of translated Item finished, if browser zoom value does not equal 100%, translated item, translate again and new translating value is depending on zoom value. check this link and click on sidebar menu. How can I solve this problem.

Can element ignore height values of properties before it?

I have 2 elements sharing the same class [.cta]. The CTA inside of [casino-box] looks great, however the one inside of [header-box] is accounting for the 165px of space taken up by [top-nav-bar] and [nav-bar].

How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?

Link to CodePen

.cta
  max-width: 600px
  margin: 0 auto
  text-align: center
  position: relative
  top: 50%
  margin-top: -80px

.cta h1
  color: #fff
  weight: 500
  text-shadow: 0px 0px 4px black

.cta .button
  color: #fff
  border-color: #fff
  font-weight: bold
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7)
  text-shadow: 0px 0px 4px black

  &:hover
    color: #90281F
    background: #fff
    text-shadow: none

.cta hr
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7)

CSS - Positioning aside box

I'am learning html5 and css3 right now. I have to say, I'm a beginner. My problem: I want to place an aside textbox next to article. The textbox should appear at the right side. I've tested something, but nothing leads to my goals. Please, let me know how can I do this? And what about the footer? Why it isn't on the right place (margin of main is ignored).

<main role="main">

<article>
    <h2>Willkommen auf dieser Seite</h2>
    <div class="texte">
    <section>
        <h2>Artikelüberschrift</h2>
        <p>lorem ipüsum geerer nerne enenekn jnsjnfsdlnf sdflnslfnsdf
        skjnsfksjdn sdfjfnskfjndsf dsjfdfjn fgsk sndfns sfdkjnsf sjfnsdf
        sdfjnsdfn sfjdkjdfsnsdfk fsnksdf dsfkjn dfkjnskd</p>
        <p>fdjn fjerg reojn  rjng  jnrg orng ojgn jfng rjng erjng oerjng 
         ndrjgn oerng ng dfjng dfjng dfjng odfngodsgn odifngod fng
          jdfjgn dkjgndfjngsdfjgnsdfugniuvndsiugnerogunerüoig
          dfjnsdondf n on on on erung oirnfgorne oe eongöfjgns
          agodjng skjfgbpsieurgtsdjknipseuhtfgndfslng  fngk jnsrogn 
          jkgndgjn</p>
    </section>
    <section>
        <h2>Artikelüberschrift2</h2>
        <p>lorem ipüsum geerer nerne enenekn jnsjnfsdlnf sdflnslfnsdf
        skjnsfksjdn sdfjfnskfjndsf dsjfdfjn fgsk sndfns sfdkjnsf sjfnsdf
        sdfjnsdfn sfjdkjdfsnsdfk fsnksdf dsfkjn dfkjnskd</p>
        <p>fdjn fjerg reojn  rjng  jnrg orng ojgn jfng rjng erjng    oerjng 
         ndrjgn oerng ng dfjng dfjng dfjng odfngodsgn odifngod fng
          jdfjgn dkjgndfjngsdfjgnsdfugniuvndsiugnerogunerüoig
          dfjnsdondf n on on on erung oirnfgorne oe eongöfjgns
          agodjng skjfgbpsieurgtsdjknipseuhtfgndfslng  fngk jnsrogn 
          jkgndgjn</p>
    </section>
    <div>

</article>
    <div class="sidebox">
    <aside>
        <p>ich in eine asidebox nkdsfnk fnskjnfdskj fsnkfsdkjnf
        sdfjlsdjfos fsdojf sjfosijfosd fsjfosdjf spdijf sdofij 
        sdfijsodfj sdoifj osd jod jodsifjo ijsdof</p>
        <p>djfngdkjfngdfj fjgn dkjn ekn dng odrnjg odn dfjng 
         ndfojgndo indofign odfing doifng odifng  dofign oidfng</p>
    </aside>
    </div


</main>

<footer>
    <!-- Kontakt, Links, Impressum -->
    <a href="#kontakt.html">Kontakt</a>
    <a href="#kontakt.html">Impressum</a>
    <a href="#kontakt.html">Links</a>
</footer>

</body>
</html>

CSS

html { 
box-sizing: border-box; 
} 
*, ::before, ::after { 
box-sizing: inherit; 
}
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
max-width: 60em;
margin: 10px auto;
}
main {
margin: 1em 0 1em 0;
background-color: blue;

box-shadow: -10px -5px 28px -3px #999999;
}


article {

border: 1px solid #7F0B00;

background-color: #ADB4B8;


    }   

.sidebox {

 border: 1px solid black;
width: 12em;
}

.texte {
background-color: white;
}       


footer {

font-size: 10pt;

border: 1px solid #7F0B00;
background-color: #ADB4B8;
box-shadow: -10px -5px 28px -3px #999999;
    }

footer a {
display: inline-block;
text-decoration: none;
background-color: #ADB4B8;
border: 1px dotted #7F0B00;
color: black;
padding: .2em;
margin: .2em;
-webkit-transition: background-color .25s ease-in;
transition: background-color .25s ease-in;
}

footer a:focus,
footer a:hover,
footer span {
color: #7F0B00;
background-color: white;
-webkit-transition: background-color 0.01s;
transition: background-color 0.01s;
}

Flex div not wrapping text in IE11 but in Chrome, FF and Opera

HTML

<div style="display: flex; flex-direction: column;">
    <div style="flex: 0 0 20px;">top</div>
    <div style="display: flex; flex-direction: row;">
        <div style="flex: 0 0 30px;">left</div>
        <div style="flex: 1 1 auto;     display: flex; flex-direction: column;">
            <div style="flex: 0 0 100px;">header</div>

            <!-- text is not wrapping inside this cell in IE11 -->
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula ante eget aliquam semper. Vestibulum aliquam rhoncus sem nec tristique.</div>

            <div style="flex: 0 0 100px;">footer</div>
        </div>
        <div style="flex: 0 0 30px;">right</div>
    </div>
    <div style="flex: 0 0 20px;">bottom</div>
</div>

JSFiddle working in FF and Chrome but not in IE11:

http://ift.tt/1Jq9vxp

What should I do to get the text inside the inner div to wrap in IE?

CSS attribute 'contain' not working

I want to be able to display the entirety of an image within a div.

I'm having difficulty displaying an image with the background-size property set to contain - it does not display the whole image, only the centre, at the full size of the source image.

JSFiddle

Code

    #header {
      background: rgba(0, 0, 0, 0.8);
      color: #ccc;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 3;
      padding: 20px 0;
    }
    #header .logo {
      width: calc(100%/3);
      height: 75px;
      margin: 0 auto;
      background-size: contain;
      background: url(http://ift.tt/1GeqLVU) no-repeat center center;
    }
<div id="header">
  <div class="logo"></div>
</div>

Firefox not showing span over a div

am making a text box with a prefix of currency. i use the following css

}
.currencyInput {
     position: relative;
 }
 .currencyInput input {
     /*padding-left:18px;*/
     padding-left: 25px;
 }
 .currencyInput:before {
     position: absolute;
     top: 0;
     content:"Rs";
     left: 5px;
 }
.text-box1{
        border:1px solid #31BAF9;
        width:-webkit-calc(95% - 11px);
        width:calc(95% - 11px);
        padding:0 5px;
        margin:5px auto;
        height:42px;
}
<span class="currencyInput">
        <input type="text" class="text-box1" placeholder="Price" value="35750.00"name="price"/>
      </span>

this code works good in chrome. but when it comes to Firefox the span data is not shown. any idea?!

CSS3 loop animation with

I'm trying to use this code for a website.
I'm using CSS3 Keyframe and animations for it with a simple list

#animation ul { /* The list with elements */
    position: relative;
    text-align: center;
    width: 200px;
}
#animation li { /* Common styles for the list elements */
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    opacity: 0;
    padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
    background-color: lightgreen;
    
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate;
    animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
    background-color: yellow;
    
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate;
    animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
    background-color: lightblue;
    
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate;
    animation: fadein 6s ease-in-out 4s infinite alternate;
}


/* Defines the animation keyframes */
@-webkit-keyframes fadein {
    0% {           /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */ 
        opacity: 0;
    }
    66% {          /* Actual beginning of the fade in animation */
        opacity: 0;
    }
    76% {          /* The fade in animation takes 10% of the duration time */
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
<div id="animation">
    <ul>
        <li>This is</li>
        <li>CSS3 looped</li>
        <li>animation</li>

    </ul>
</div>

I want to set 5 elements instead of 3 but when I edit this code with 5 elements, it's not the same result..

Thanks for the help !

How to select the second th into the thead of a table having a specific ID using CSS?

I am not so into HTML and CSS and I have the following problem.

I have a script that render for me the following table and I have to set a CSS on the second th (the one that contains the value = 2)

<table id="sentbox" class="standard-table-cls">
    <thead>
        <tr>
            <th style="border-left: medium none;">1</th>
            <th>2</th>
            <th class="sortable">3</th>
            <th class="sortable">4</th>
            <th class="sortable">5</th>
            <th class="sortable">6</th>
            <th class="sortable">7</th>
         </tr>
     </thead>

     .................................................
     .................................................
     .................................................
</table>

As said this table si rendered by a script so I can't add a class or an inline CSS to 2.

So, exist a way to select the second th into the table having id=sentbox using CSS?

Get visible text in CSS3 columns

Trying to make a method which can read the current visible text inside of a element. The method you see below is as far as i've gotten the past few days.

Is there anything more reliable for getting the visible text in a element other than using a caret/range? Cause the issue I'm having is that i have a lot of overflown text who then also gets selected because caret doesn't catch the textNode but instead the parent container.

An example of what my page looks like & why I'm having issues with current method:

enter image description here

The closest approach so far has been (Gael) "http://ift.tt/1Gafhmp" - So if you're looking for any reference code to see what I'm trying to archive. There it is.

Not sure I'm making sense here, otherwise let me know :)


function getTextInColumn (rect) {
      var startX = rect.left;
      var startY = rect.top;
      var endX = rect.left + rect.width - 2;
      var endY = rect.top + rect.height - 2;
      var start, end, range = null;
      var i = 0;
      var rangeText = '';

      while ((rangeText === '' && i < 100 && endY > 5)) {
        range = null;

        if (typeof document.caretPositionFromPoint != 'undefined') {
          start = document.caretPositionFromPoint(startX, startY);
          end = document.caretPositionFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.offsetNode, start.offset);
            range.setEnd(end.offsetNode, end.offset);
          }
        }
        else if (typeof document.caretRangeFromPoint != 'undefined') {
          start = document.caretRangeFromPoint(startX, startY);
          end = document.caretRangeFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.startContainer, start.startOffset);
            range.setEnd(end.startContainer, end.startOffset);
          }
        }

        if (range !== null) {
          rangeText = range.toString();
        }

        endY -= 52;
        i++;
      }

      return rangeText;
}

Jerking animation on css3 spinner

I found one attractive spinner(css3, scss): http://ift.tt/1x1B0Xp.

@for $i from 1 through 6 {
        @keyframes preload-show-#{$i}{
                from{
                        transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }
        @keyframes preload-hide-#{$i}{
                to{
                        transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }

        @keyframes preload-cycle-#{$i}{
                
                $startIndex: $i*5;
                $reverseIndex: (80 - $i*5);

                #{$startIndex * 1%}{
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
                #{$startIndex + 5%},
                #{$reverseIndex * 1%}{
                        transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
                        border-left-color: #f7484e;
                }

                #{$reverseIndex + 5%},
                100%{
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }
}

@keyframes preload-flip{
        0%{
                transform: rotateY(0deg) rotateZ(-60deg);
        }
        100%{
                transform: rotateY(360deg) rotateZ(-60deg);
        }
}

body{
  background: #efefef;
}

.preloader{
  position: absolute;
  top: 50%;
  left: 50%;
        font-size: 20px;
        display: block;
        width: 3.75em;
        height: 4.25em;
        margin-left: -1.875em;
  margin-top: -2.125em;
        transform-origin: center center;
        transform: rotateY(180deg) rotateZ(-60deg);

        .slice{
                border-top: 1.125em solid transparent;
                border-right: none;
                border-bottom: 1em solid transparent;
                border-left: 1.875em solid #f7484e;
                position: absolute;
                top: 0px;
                left: 50%;
                transform-origin: left bottom;
                border-radius: 3px 3px 0 0;
        }

        @for $i from 1 through 6 {
          .slice:nth-child(#{$i}) { 
                transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
                animation: .15s linear .9 - $i*.08s preload-hide-#{$i} both 1;
          }
        }


        &.loading{
                animation: 2s preload-flip steps(2) infinite both;
                @for $i from 1 through 6 {
                  .slice:nth-child(#{$i}) { 
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
                        animation: 2s preload-cycle-#{$i} linear infinite both;
                  }
                }
        }

}
<div class="preloader loading">
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
</div>

But it has jerking moment in the middle of animation. I tried to repair it on my own, but I haven't enough skills. Could you prompt how it can be fixed? Thanks!

How to make not clickable an menu voice in HTML?

I have the following problem.

Into an HTML\CSS menu I have some voices that represent main voices. When the user hovering one of these voices with the mouse cursor the subvoices are shown under this main voice.

It works fine but I want that the main voice is not clickable.

For example this is a main voice:

<li style="background-image: url('./img/bg_tabs_off70.png')">
    <a style="font-size: 11px;" 
       onclick="loadingPopUp();"
       href="javascript:chiamaIsPopup('admin')">

       <img width="50%" src="img/iconemenu_admin_off.png" alt="">
       <br>Admin</a>

       <span class="menuSpan">
           <a style="padding-left: 19%;font-size: 11px;" onclick="loadingPopUp();" href="javascript:chiamaIsPopup('anag')">Anagrafica</a>
           <a style="font-size: 11px;" onclick="loadingPopUp();" href="javascript:chiamaIsPopup('admin1')">Comunicazioni</a>
           <a style="font-size: 11px;" onclick="loadingPopUp();" href="javascript:chiamaIsPopup('adminDocumentazione')">Documentazione</a>
           <a style="font-size: 11px;" onclick="loadingPopUp();" href="javascript:chiamaIsPopup('richiestaEDI')">Richiesta EDI</a>
           <a style="font-size: 11px;" onclick="loadingPopUp();" href="javascript:chiamaIsPopup('inserisciBanca')">Inserisci Banca</a>
           <a style="font-size: 11px;" onclick="loadingPopUp();" href="javascript:chiamaIsPopup('listaCancellaModificaBanche')">Lista/Cancella/Modifica Banche </a>

         </span>
</li>  

As you can see in the previous code snippet the first link is the main voices that I want to be not clickable and the link inside the class=menuSpan span are the subvoices.

What can I do to avoid that the main voice is clickable?

Media queries do not work

Im trying to get my sideBar to dissapear when the screen is 800px or less and then make all the content the full width of the page. Ive set the viewport and have tried using !important to overwrite the current styles but still cant seem to get it working. any help would be appreciated.

head:

    <link rel="stylesheet" type="text/css" href="layout1.css"/>

current styling:

.sideBar {
position:fixed;
top:0;
left:0;
background:#C6C;
width:200px;
height:100%;
z-index:999;
margin-left: auto;
margin-right: auto;
left: 0;
right:850px; /* Must nclude width of sidebar */
    border-right: solid 10px #fff;
border-left: solid 10px #fff;

}

my mediaqueries set to 800px;

@media only screen and (max-width: 800px) {
    .centre{width:100% !important;}
    .visibleArea{width:100% !important;}
    .sideBar {display: none !important;}

}

any help would be great

here is my html for the sideBar:

    <!--SIDE BAR-->
<div class="sideBar">
                <div id="logo">
                    <img src="images/logo-big.png" />
                </div>

                 <div id="nav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Solutions</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

                <div id="newsletter">
                    <h1>NEWSLETTER</h1>  

                <div id='content'>
                    <div id="hidden-content">
                        <span class="signup">Enter your e-mail address to sign up for our monthly newsletter</span> <input class="side-mail" type="text" name="FirstName" placeholder="Email@test.com"><br> 
                        <input type="submit" value="SUBMIT" class="submit-button">
                    </div>
                </div>

                <div id='button'><sctrong><img src="images/more-banner.png"  /></strong></div>

                <script>
                     $("#button").click(function(){
                            $("#content").stop().slideToggle();
                            return false;
                        }); 

                $("#button").hover(function(){
                            $(this).stop().css({"cursor" : "pointer"})
                        });
                </script>

                </div>

                    <div id="barFoot">

                    <p>
                    Paxton House
                </p>

               </div>


</div>

Horizontal bars analysis

I'd like to add a visual as per my image below onto a website. I've searched for an easy way to do something like this either by embedding a chart or using CS and the result is poor. I want to code it as I will need update the values. I'd be really grateful for any ideas. !

Image

Many thanks

CSS3 Sprite Images not showing

I created a template for an HTML website and for the footer I am using CSS3 Sprite images so that I use classes to call one image rather than using multiple images. Here is the template on this URL - http://ift.tt/1aNh4m6 . The CSS3 Sprite is in the footer above the links on the website. The CSS3 sprite should appear like the link below.

http://ift.tt/1QdA3XR

Could someone help me please, I don't know what I am doing wrong.

Kind Regards, Ronny

Center custom glyph in a CSS pseudo element

I have define a "cross" like symbol in a svg file as

<glyph unicode="&#xe604;" d="M784.646 720.646c-30.038 30.038-79.328 30.038-109.367 0l-163.282-163.282-163.282 163.282c-30.038 30.038-79.328 30.038-109.367 0s-30.039-79.328 0-109.367l163.282-163.282-163.282-163.282c-30.039-30.038-30.039-79.328 0-109.367s79.328-30.038 109.367 0l163.282 163.282 163.282-163.282c30.038-30.038 79.328-30.038 109.366 0s30.038 79.328 0 109.367l-163.282 163.282 163.282 163.282c30.038 30.038 30.038 79.328 0 109.366z" />

And I tried to put this icon to a pseudo element in css as I have html

<span class="icon icon-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></span>

and css .icon-close:before { content: '\e604'; color: #474747;

But the cross in the element is drifting by 1 pixel depending on the place the popup appears on the screen (the cross icon is meant to be the close button on the popup)

drift to left:left drifting drift to right:right drifting (I give the psuedo element a grey background to illustrate clearer)

Do you have any ideas why this happens and how should I make the icon stick to the center?

Font awesome icons looked ok in staging then started aligning to the top once live

I use font awesome icons and everything was aligned in the middle as it should in staging. Once the site went live, all the font awesome icons moved up to the top and I can't figure out why. I compared the css being used on chrome developer tools but so far I can't see any difference.

Here's the link to the homepage. http://studyusa.com/en/ You can see that the magnifying glass on the top navigation, all of the social network buttons under the slider, and menu icons next to "Browse Schools by Degree Level" all moved up.

Hope I can get any hints.

box-shadow for inline element

A multiline text is positioned on an image. The text should appear on a white background like taped. Each line of the text needs a small padding at the left and right side. This can be achieved with a box-shadow for the inline text.

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    background-color:white;
    display:inline;
    -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    -webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>

Unfortunatelly firefox' result is not the same as of chrome. But I couldn't claim that firefox' behaviour isn't correct. But how can I achieve the chrome result for firefox?

Div background replicate body

I'm trying to achieve what is displayed in this image: http://ift.tt/1EmGhBI

The body will have the big colored background and the little circle must be transparent and have the same background position as the body. Even if the circle is inside another div with another background. The background doesn't have to be transparent, but should look like.

Dunno even if this is possible at all. My solution so far is for the circle to use the same background and reposition the background with minus values depending of the circle div position in the parent. All worked fine if the body bg would be simple set, but I need the body background-size: cover;

The HTML:

<div class="d1">
  <div class="d2">Some info in the circle</div>
</div>

CSS:

body {
  height: 100%;
  background: url(../img/bg.jpg) no-repeat;
}

.d1 {
  background: #000;
  position: absolute;
  top: 200px;
  left: 500px;
  width: 200px;
  height: 200px;
}
.d2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  color: #fff;
  font-size: 20px;
  overflow: hidden;
  background: url(../img/bg.jpg) no-repeat;
  background-position: -500px -200px;
}

jQuery - How to animate text simultaneously to color change transition

I need to create a smooth transition of movement and color change. Right now, the text first is being animated, and only after animation end the color change transition occurs. How can I change the color of the text during the movement?
This is the HTML code:

<button type="button" class="btn btn-danger center-block" id="btn">start animation</button>
<div id="meterText" class="col-centered"></div> <!-- animated text -->

CSS:

#meterText{
    display:none;
    width: 50px;
    height: 10px;
    margin-left: 40px;
    position: absolute;
    top: 211px;
    font-size: 15px;
    color: red;
}


jQuery:

var counter=0;

$("#btn").on('click',function(event){
    counter++;
    console.log(event.target.id + " was clicked");
    switch(counter){
        case 1:{
            $("#meterText").text("first transition");
            $("#meterText").hide().fadeIn();
            break;
        }
        case 2:{

            $("#meterText").animate({'marginTop':"-=83px"});
            $("#meterText").text("second transition");
            $("#meterText").animate({color: "#FFD700"});
            break;
        }
        case 3:{
            $("#meterText").text("third transition");   
            $("#meterText").animate({'marginTop':"-=68px"});
            $("#meterText").animate({color: "#44c767"});
            break;
        }
    }
});

jsFiddle

lundi 20 avril 2015

CSS position top:40px issue

Have a look at the screenshot please.

http://ift.tt/1G2noPb

Ive been added the css property to this.

#carousel-testimonials .fa-angle-left {
display: inline-block;
position: absolute;
top: 40%;
z-index: 5;
}

But its not showing correctly in Internet Explorer.

Unable to get skrollr parallax effect on header image

everyone!

So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.

I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!

Here is the page I have currently been testing the parallax header image on.

The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.

Any help is certainly appreciated! Thank you so much!

How can I make a div expand to the height of the page?

I am trying to make the blue div expand to the height of the page but nothing seems to work: JSFiddle

css:

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    min-height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    min-height:100%;
}

and html:

<div id="page">
    <div id="main">
        main
    </div>
    <div id="sidebar">
        <ul>
           <li>something</li>
           ...
           <li>something</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

The same needs to hold true for the sidebar if the page is much longer than the sidebar content.

responsieve displaying image inside of percentage div

I have been struggling to find the answer. Is there any possible way to responsieve displaying image element when I resize the percentage div element window?

css

div{
    width:60%;
    height:400px;
}
div > img{
    width:100%;
    height:100%;
    min-height:100%;
    min-width:100%;
    background:tomato
}

html

<div>
    <img src="" alt="" />
</div>

Fiddle

Thank you

How can I horizontally center a parent block based on the location of a child?

There are two inline-blocks on each side, one floating left and another floating right. There's text in between them. I want the text in the middle to align with the text in another block below it. I'm struggling with maintaining the alignment when the screen size changes.

Expanding input box using only css

I am trying to create an search input box that expands to left when focussed, just like Google's mobile website. I am trying to do this using css only.

Search box when not focussed in Safari (mac/iOS). white-space at left is for company logo. Notice that there is no white space between input text box and search button. Input box has position:absolute, left:120px, right:80px.

Search box when not focussed on Safari

Search box when focussed. I change the left of input box to 0 on input:focus.

Search box upon focussing

Search box when not focussed on Firefox. Conflicting absolute position values left:120px, right:80px result in whitespace between input text box and button on Chrome/Firefox.

Search box when not focussed on Firefox

What can I do create such a left expanding input box using css only and without specifying constant value for width.

Here is a working sample on Codepen.

Here is the code...

html:

<header>
    <form method="get" action="/search">
        <input class="clearable" type="text" value="ipad"/>
        <input type="submit" value="Search"/>
    </form>
</header>

relevant css:

header {
  padding: 0;
}
input[type='text'] {
  left: 120px;
  position: absolute;
  right: 77px;
  top: 0;
  transition-duration: 100ms;
}
input[type='text']:focus {
  left: 0;
  transition-duration: 300ms;
}
input[type='submit'] {
  background: #1352ec;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

CSS Parallax Background Image White Space

I'm using Keith Clark's CSS-only method to create a two-layer parallax effect so that the background image scrolls at a slower speed than the rest of the site's content. Just to be clear, the image covers the entire page and the content sits on top of it.

My site is divided into two main div elements (and a container div) - one for the background image, and the other for the page's content. Below is the code I was using for the empty background div element.

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  height: 200em;
  left: 0;
  /* margin-bottom: -200em;
     overflow: hidden; */
  right: 0;
  transform: translateZ(-2px) scale(3);
  z-index: -10;
}

Without the margin-bottom and overflow properties added, the background div element would end up having vertical white space left over once it was set to a height high enough to cover all the page's content.

I don't know what caused that white space, but adding the negative margin removed the problem, at least in Chrome. IE 11 still has has the white space there. Normally the background-size: cover; property removes any white space, but this doesn't work with the parallax effect.

Do you know of any ways to remove the white space that would work for IE9+ and other major browsers, or am I out of luck?

Here's a JSFiddle with pretty much exactly the same code as the site I'm creating.

Issues with pure CSS3 Multi Level Menu and Jquery Slider

I am new to this site and hoping that someone can assist me with an annoying problem that I am having.

The Page in question is located at http://ift.tt/1G86CAF.

This is an HTML5 and CSS3 page that is also using a simple JQuery Image Slider.

As you can see the CSS3 Menu appears in two places to illustrate the problem. 1) Above the JQuery Slider 2) Below the JQuery Slider

If you click on the "About" Menu Below the JQuery Slider, the menu expands without any problems and overlays the bottom part of the page.

Now, If you click on the "About" Menu above the JQuery Slider, the menu DOES NOT fully expand.

I would prefer to see the CSS3 Menu above the JQuery Slider but, I have not been able to figure out how to fix this. Until then, I will live the CSS3 Menu below.

Would greatly appreciate any ideas, suggestions, or solutions that others can provide.

Sincerely

Raul Gonzalez

Center Images inside Parent container

Want to center images both vertically and horizontally without explicitly setting a height on their parents. I would like the height of the tallest image to be the height of the parent and center all other sibling images.

The final results will look like http://ift.tt/1JooveY where the tall image sets the height of the parent.

Using flexbox but still requires defining height for parent: http://ift.tt/1O9jGNo.

div {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    border: 1px solid green;
    width: 100%;
    height: 80vw;
}

<div>
    <img alt="No, he'll be an engineer." src="http://ift.tt/TqWtKq" />
</div>

keyframe animation transform not running in chrome

The below appears to work on Firefox and Safari, and even IE! But not in Chrome.

@keyframes animationFrames{
  0% {
    transform:  translate(-402px,55px)  ;
  }
  4% {
    transform:  translate(-333px,26px)  ;
  }
  9% {
    transform:  translate(-257px,-13px)  ;
  }
  14% {

Move a transparent box by click a flag

my name is Viet Luan Tran. I am new in this board.

So i have my first question. I need the function like on this page:

http://ift.tt/1JnTZlr

On the part "FACTORIES & HEADQUARTERS" you will find a function. If i click a Flag, there are slide a transparent box with text and images.

Have someone a idea how i can realize this function?

THanks in advance.

Luan

How to make a CSS transition work "backwards"?

So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen

HTML:

<div class="object">

<p>Object</p>

</div>

CSS:

* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}

p {
 width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}

p:hover {
  border-bottom: 5px solid white;
}

How would I go about doing this, as simple as possible? Thank you ;3

How to deal with a CSS theme & plugin style conflict?

I have a website that has a ui-datepicker calendar feature, however I have a conflict with the css styling with a plugin and my wordpress theme itself. In short, the calendar doesn't work correctly due to a styling conflict.

jquery-ui-1.10.1.custom.min.css - This is where my css styles are for my calendar within the theme.

au_styles.css - This is the plugin style that also has some references to ui stuff.

Note - The plugin styling works correctly when I activate another theme.

Is there a quick fix for this issue?

Foundation 3 topbar issue

I've made this template sometime ago using Zurb-Foundation 3 framework:

DEMO

I recently found out that when you open the top navigation on Chrome for iPhone6 and iPad it doesn't show the menu the way it should. Bellow is a screenshot of how it looks like.

This is a very annoying bug and I really don't know what to do to fix it. The worst part is that this is an old version of Foundation framework so there isn't much support for it anymore so it make things harder.

I don't even know what bits of code I should put here as the template has quite a lot of stuff. I tried everything and stackoverflow is my last hope to get this fixed. I really hope someone could help me. Thank you!!

Screenshot Screenshot

How to add a border-bottom-image with css

I created the following image to be rendered under all h1 title tags in my website. Trouble is, every tutorial I find online discusses border image property as a all around border.

All I want to achieve is to get this one small image underneath the title, once. No repeat. centered. According to this http://ift.tt/AqKL7L there is a property called border-bottom-image. But I can't seem to get it to display properly.

Google chrome developer tools tells me that this is an unknown property name. If I can't achieve this with the following css3, how can I achieve it?

.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}

enter image description here

ngAnimate not adding classes to image gallery using ngRepeat

Demo: http://ift.tt/1D8HBCb

I'm attempting to make my image gallery animate when you hit the left/right arrows. Ideally, they would work like they do here.

I tried doing this:

.gallery-image {

    opacity: 1;

    &.ng-enter {
      transition: transform 0.5s;
      opacity: 0;
    }

    &.ng-enter-active {
      opacity: 0.5;
    }
}

But it just seems like ngAnimate doesn't want to add any classes to my elements on the DOM. My repeater is declared like this:

    <img class="gallery-image"
      ng-repeat="image in images | limitTo:3:currentIndex-1" 
      ng-show="$index+currentIndex-1 >= 0 && $index+currentIndex-1 < images.length" 
      ng-src="{{images[$index+currentIndex-1].url}}" />

So what I do is just change the current index I'm looking at, and that adjusts what images are visible.

The weird thing is, if you resize the plunk (sm to md, md to lg) you can see the images very clearly animating.

Why isn't ngAnimate adding any classes to my DOM?