Does .wrap( ) cancel the wrappers style properties?

I have a button:

var button = ($('<button>', {
            "id": "jspsych-free-sort-done-btn",
            "class": "jspsych-free-sort",
            "html": "Done",
            ...
}));

that I want to center. Someone on stackoverflow suggested using .wrap() to add a wrapper div but this doesn't seem to be centering the button:

button.wrap("<div style='text-align:center'> </div>");

Does .wrap() cancel the wrapper's style properties? And if so how to I center my button? Thanks!

via Chebli Mohamed

Loading a stylesheet from JavaScript memory instead of using AJAX or

I am using a plugin for RequireJS which allows you to load CSS along with your JS onto the front-end.

Now, the problem is, that I don't know how to append a stylesheet to the document without using a link tag which uses AJAX to retrieve the stylesheet from the server.

define(['css!my_stylesheet_path',function(sss){

 //how do I apply the stylesheet 'sss' to the document?  <<<<

});

as you can see, in my RequireJS module, I have loaded a CSS file using the css plugin: http://ift.tt/MdYgk1

does anyone have any idea how to apply this stylesheet to the document directly? I assume if I use an href attribute it will go searching for the stylesheet on the server instead of using the one I already have in hand.

From this link*, it looks like I can do so like so:

var sheet = document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);

Now that's some shit right there.

*http://ift.tt/1wpr4FO

via Chebli Mohamed

Is there any way to set table column width dynamically per column via CSS/LESS?

What I mean is, is that if there are 4 columns to a table, the column's width would be at maximum 25% of the table's width. If it was 3 columns, then 33%. Two columns, 50%. 10 columns? 10%. The maximum width for the table is predetermined at 500px (for the sake of this example) and will always stay, at maximum, 500px. LESS is being used.

via Chebli Mohamed

Images disappear when on certain mobile devices

So I've recently completed my website and have seen that the two images on my home don't show up on certain mobile devices. I'm not to sure why. In any case here the code is below. You can also see the live view of my website here. Just to reiterate it works fine on desktop, however on certain mobile devices the images simply disappear, or seem to be hiding behind the get in touch section. I thank you in advance for any help.

 .My-Gems {
     width: 100%;
 }


@media screen and (max-width:444px) {  
 .My-Gems {
     width: 100%;
     margin-top:-370px;
    }}

    @media screen and (max-width:333px) {  
 .My-Gems {
     width: 100%;
     margin-top:-380px;
    }}


  .Second-Header {
     display: block;
     margin-bottom: 5em;
     margin-top:4em;
     position: relative;
     color:#fff;
 }

 @media (max-width: 777px){
    .Second-Header {
     margin-bottom: 4em;
     margin-top:3em;
}
}


 @media (max-width: 666px){
    .Second-Header {
     margin-bottom: 3em;
     margin-top:2em;
}
}

 @media (max-width: 555px){
    .Second-Header {
     margin-bottom: 2em;
     margin-top:1em;
}
}

 @media (max-width: 555px){
    .Second-Header {
     margin-top:.5em;
}
}
  .Second-Header h2 {
     font-family:'Abril Fatface', cursive;
     font-size:2.5em;
     font-weight: 400;
     color:fff;
 }


@media (max-width: 777px){
    .Second-Header h2{
        font-size:2em;
}
}

@media (max-width: 666px){
    .Second-Header h2{
        font-size:1.8em;
}
}

@media (max-width: 555px){
    .Second-Header h2{
        font-size:1.5em;
}
}

@media (max-width: 444px){
    .Second-Header h2{
        font-size:1.3em;
}
}

@media (max-width: 333px){
    .Second-Header h2{
        font-size:1.2em;
}
}

@media (max-width: 222px){
    .Second-Header h2{
        font-size:1em;
}
}


 .item {
     text-align:center;
              -moz-transition: all 0.3s ease-out;

         -o-transition: all 0.3s ease-out;
         -webkit-transition: all 0.3s ease-out;
         transition: all 0.3s ease-out;
     float:left;
     position:relative;
 }
 .item {
     width: 50%;
     height: 100%;
 }
 .item-hover, .item-hover .mask, .item-img, .item-info {
     width: 100%;
     height: 100%;
 }
 .item-hover, .item-hover .mask {
     position:absolute;
     top:0;
     height:100%;
     left:0;
 }
 .item-type-double .item-hover {
     z-index:5;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     opacity:0;
     cursor:pointer;
     display:block;
     text-decoration:none;
     text-align:center;
 }
 .item-type-double .item-info {
     z-index:10;
     color:#ffffff;
     display:table;
     position:relative;
     z-index:5;
 }
 .item-type-double .item-info div.mycell {
     vertical-align:middle;
     height: 100%;
     display:table-cell;
 }
 .item-type-double .item-info .headline {
     font-size:2.4em;    
     font-family: 'Proxima Nova' sans-serif;
     text-transform: uppercase;
     width:90%;
     margin:0 auto;
 }
 @media (max-width: 888px) {
     .item-type-double .item-info .headline {
         font-size:1.8em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 666px) {
     .item-type-double .item-info .headline {
         font-size:1.4em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 444px) {
     .item-type-double .item-info .headline {
         font-size:1.3em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 390px) {
     .item-type-double .item-info .headline {
         font-size:0.8em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }

  @media (max-width: 333px) {
     .item-type-double .item-info .headline {
         font-size:0.6em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }

   @media (max-width: 222px) {
     .item-type-double .item-info .headline {
         font-size:0.5em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 .item-type-double .item-info .date {
     font-size:20px;
     font-family:'Canter';
     text-transform: uppercase;
 }
@media (max-width:444px){
    .item-type-double .item-info .date {
     font-size:16px;
     text-transform: uppercase;
 } 
}

@media (max-width:333px){
    .item-type-double .item-info .date {
     font-size:10px;
     text-transform: uppercase;
 } 
}



 .item-type-double .item-hover .mask {
     background-color:#000;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     /*filter: alpha(opacity=50);*/
     opacity:0.5;
     z-index:0;
 }
 .item-type-double .item-hover:hover .line {
     width:90%;
 }
 .item-type-double .item-hover:hover {
     opacity:1;
 }
 .item-img {
     width:100%;
     z-index:0;
 }
 .item-img img {
     width:100%;
     display:block
 }

<div class="My-Gems">
<div class="Second-Header"><h2></h2></div>
<div class="item item-type-double">
<div class="item-img">

<img src="http://ift.tt/1TyECA3" class="menukadeem" title="Money-Matters-Logo" alt="Money-Matters-Logo"/>
</div>
<a class="item-hover" href="designs.html">
<div class="item-info">
<div class="mycell">
<div class="line"></div>
<div class="headline">Designs</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
<div class="item item-type-double">
<div class="item-img">
<img src="http://ift.tt/1UGu8M6" alt="Metaphon-Fitness" title="Metaphon-Fitness" style="width:100%;"/>
</div>
<a class="item-hover" href="events.html">
<div class="item-info">
<div class="mycell">
<!--<div class="date">Events</div>-->
<div class="line"></div>
<div class="headline">Events</div>
<div class="line"></div>
</div></div>
<div class="mask"></div>
</a>
</div>
</div>

via Chebli Mohamed

Bootstrap site not being responsive on mobile

Update: I've changed over the % and made px values max-width but it's still not being responsive with images, nor is the mobile menu working.. (link to website)

I am working on a site using Bootstrap, and for some reason it is not being responsive. I have the viewport set to meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

Bootstrap.css first, then the theme.css.

via Chebli Mohamed

How to keep adding items to a div until both divs have same height?

I have two divs which are side by side. Currently, I display n+2 items in left div and n items in right one. n varies based on category and is predetermined. My problem is sometimes individual items in left div have more height than usual. How can I keep adding items to the right div until both divs have about same height?

via Chebli Mohamed

Background-color change on hover event not working

I got a problem with the CSS hover-event. I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)

<div class="nav">
 <ul>
   <li> <a> Something </a>
      <ul>
        ....
      </ul>
   </li>
   ....
 </ul>
</div>

That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.

.nav ul li:hover { background: #BFBFBF; }  - not working
.nav ul li:hover > a { color:#FFFFFF; }    - working perfectly fine
.nav ul li:hover > ul { display:block; }   - working perfect as well
.nav ul {
  background: #404040;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 30px;
  text-align:left;
  display:block;
}

I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working. I tried using background-color instead of background, without success. I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.

I am noob to css, maybe I'm missing some really simple detail.

Thanks in advance.

via Chebli Mohamed