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

Applying linked stylesheets to document dynamically - add all, or add/remove dynamically?

I am using RequireJS to load stylesheets in an SPA, and then applying the stylesheets dynamically to whatever view the user sees. I am pretty much a web newb and I don't know if it makes sense to dynamically both add and remove stylesheets depending on the view, or should I just add all stylesheets to the document when the application starts up?

I assume in some cases, stylesheets might overlap, i.e. applying different parameters to the same .classes, etc. So surely in some cases it makes sense to remove a stylesheet from the document and add another.

Since this is an SPA, it should be the same document object throughout the application lifecycle, so I can't depend on a page reload to remove stylesheets - I will have to add and remove them explicitly.

I hope this question makes sense.

via Chebli Mohamed

Is it possible to cache just a piece(background, navigational bar) of a website instead of a whole file?

I want to cache just a element because it is used on EVERY web page of mine. Here check this image out. It is explained here. http://ift.tt/1NeKIkf

via Chebli Mohamed

How do you have a background image (of container) fit the screen width-wide, but not get cut off height-wise?

Now I now that question sounded confusing so I'm going to try to explain it simply. I have an image I'd like to use in a jumbotron element on a html page. I'd like the image to take up ~95% of the page width wise while never cutting off the image. I'd also like to maintain the aspect ratio for the purpose of maximum image quality. The image is 3225x2656.

Thanks for your help! Appreciate it.

via Chebli Mohamed

Changing CSS variables via JS in Polymer

In my Polymer project i have a toolbar, which's color I want to change using JavaScript. Since Polymer uses the CSS variable --paper-toolbar-background internally for styling, I can't do something like style.color. I found a method named setProperty(), but it doesn't work for me. Has ayone already found a solution?

I would be very pleased if someone could come up with a solution for that, Aaron

via Chebli Mohamed

Combine two specific javascript functions into one function for desired effect?

How can I combine two specific javascript functions into one function for the desired effect? or if anyone has a different solution I am open to it.

Here is the JS/Jquery to make the page scroll to an href anchor url using jquery.easing.1.3.js

    $(function() {
           $('a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                event.preventDefault();
            });
        });

Here is an older JS to hide/show a series of divs only allowing one div to show at any given time.

function NavigateSpecs(thechosenspec) {
    var SPEC = document.getElementsByTagName("div");
    for(var x=0; x<SPEC.length; x++) {
        name = SPEC[x].getAttribute("name");
        if (name == 'SPEC-2') {
              if (SPEC[x].id == thechosenspec) {
                    if (SPEC[x].style.display == 'block') {
                          SPEC[x].style.display = 'none';
                    }
                    else {
                          SPEC[x].style.display = 'block';
                    }
              }else {
                    SPEC[x].style.display = 'none';
              }
        }
     }
    }

I need to combine these two functions so upon clicking a link the browser will scroll to the desired anchor like the first JS function and show the specific div while hiding any other div with the similar id structure.

via Chebli Mohamed

Multiple fullscreen sections with absolute positioned divs inside

I'm creating a website and I want each section to take up the full screen. I have:

 html, body {
height: 100%;
width: 100%;
margin: 0;
}

and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.

The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!

via Chebli Mohamed

How to show "blocked" icon when you hover over an element with the mouse

A few days ago I saw a 'block' icon when I put my mouse cursor over a link, indicating that I could not click. How can I do that? I do not know the correct term to search, maybe that's why I'm not finding it. Is it a plugin? An HTML5 feature?

Unfortunately I do not remember the site that I saw this on.

Thanks!

via Chebli Mohamed

SASS compiles Google Fonts CSS into the file, breaks protocol-relative link

When I use the following code in my .scss file

@import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic');

the SASS parser I use (nodejs gulp-sass) happily downloads the file from said location and includes it as plain text in the compiled output.

Problem is, my site uses HTTPS, and when the file is requested by the compiler, it fetches the file using HTTP and as such the URLs in the returned response are also HTTP which results in loads of warnings filling up the console, while the fonts would not load.

Is there any way I could tell the compiler to leave that line alone?

via Chebli Mohamed

Trying to create a fixed div at top of page

I'm trying to create a page with a fixed div above the main div.

I'm not talking z-order, I want the main div to start after the fixed div.

You can see it at http://ift.tt/1PlSMPl

The backgrounds are; body;lime, fixed div; gray (opacity; .6, main div; white

The main div should be below the fixed div but instead it overlaps the fixed div.

I'm using CSS rules on the elements, instead of style list, to make the whole thing easier to look and change.

I should know this one but I just can't think of what is missing.

What do I need to change to fix this problem.

Below is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test page - fixed div should be above main div</title>
</head>

<body style="background-color: #00FFFF">
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto;  
        background-color: #C0C0C0;">
        fixed div line 1<br />
        fixed div line 2<br />
        fixed div line 3<br />
</div>

<div style="color: #000000; max-width: 800px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; ">
                <p>This is the first paragraph of the main div</p>
                <p>second paragraph of main div</p>
                <p>third paragraph of main div</p>
                <p>fourth paragraph of main div</p>
                <span style="color: red; font-weight: bold;">
                        <p>This page should have the gray fixed div above the white div. I've 
                        made the fixed div partially opacity so that you can see the white div's 
                        text through it.</p>
                        <p>What do I need to change to fix this problem.</p>
                        <p>I'm using rules on the elements to make the whole thing easier to 
                        look and change.</p>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis 
                odio dapibus, cursus quam nec, feugiat mauris. Nullam id faucibus 
                mauris, vitae lacinia metus. Mauris pharetra semper mollis. Praesent ac 
                turpis eu leo pretium tempus. Morbi porttitor metus nec dolor hendrerit, 
                sed euismod nunc iaculis. Morbi eu eleifend justo, ut facilisis arcu. 
                Proin pellentesque laoreet magna et pretium. Pellentesque mattis sapien 
                lorem, quis tincidunt purus luctus nec. Aliquam tincidunt ultricies dui 
                vel varius. </p>
                <p>Phasellus mauris ligula, elementum ac convallis id, tincidunt non 
                enim. Integer vehicula euismod dui vel elementum. Nunc porttitor massa 
                eget sodales hendrerit. Nulla dui erat, fringilla sit amet tempor ut, 
                viverra quis massa. Cras iaculis augue at orci tincidunt auctor. Nulla 
                faucibus nibh velit, id vehicula nibh aliquam non. Quisque auctor lectus 
                sit amet nibh accumsan sodales. Proin eget risus nisi. Pellentesque 
                convallis augue a varius imperdiet. Sed ornare nisi nec metus fringilla, 
                nec egestas tortor bibendum. Donec a lacinia massa. Nam consequat 
                pharetra enim, sagittis egestas est suscipit eu. Pellentesque feugiat 
                nibh semper neque imperdiet dapibus. Quisque in elit venenatis, cursus 
                dui blandit, aliquet arcu. </p>
                <p>Morbi porttitor dapibus elit nec volutpat. Etiam vehicula tortor ac 
                mauris mollis, a tristique elit tristique. Donec interdum dictum ornare. 
                Nam commodo augue ipsum, at vestibulum nulla porta eu. Donec sed congue 
                eros. Aenean tortor mauris, ornare vitae aliquam vitae, tristique a 
                quam. Vivamus finibus, quam sit amet aliquam tristique, tortor ligula 
                vehicula magna, vel suscipit est ex quis orci. Phasellus efficitur 
                hendrerit turpis vel vehicula. Aenean arcu sem, sagittis nec hendrerit 
                vitae, pellentesque consequat leo. Sed egestas euismod condimentum. Sed 
                commodo ornare quam vel vulputate. Sed ultricies dictum libero id 
                aliquam. Suspendisse vel odio justo. Duis lacinia interdum venenatis. 
                Mauris eget mauris tortor. </p>
        </div>    
</body>
</html>

=======================================

Have good answer, curtsey of Joshua K.

I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.

That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.

If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.

Can I mark an answer as best answer? If so, how?

Stop the presses;

I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.

---

I have created another page incorporating the changes needed to accomplish the task. It is at http://ift.tt/1gF9vRJ

---

AH -NOT QUITE RIGHT YET

Yes, adding margin-top will position the main div below the fixed dvi but, and it a BIG but---

If scroll the page, the main div scrolls and a a and the margin scrolls also - so, if you page down or scroll down a "page" you will lose as many lines as there are in the fixed div.

What needs to be set is the top position of the main div, not the margin. I've tried a lot of things but I can't get it to move when I set style.top to anything.

There must be a way to set the main div's top to move it down below the fixed div -- I'll just keep trying -- UNLESS someone has an idea as to how to make top move the main div below the fixed div.

The div has to be moved, setting the top margin looks like the solutions until you scroll and the div moves upward, taking the top margin with it.

try, try again ........

via Chebli Mohamed

Should I use CSS scaling to accommodate a browser resize on my website?

I see some websites remain static when the browser is resized and some that scale to fit depending on the window size. My question is what's the best to use and how would I implement both a static style or one that would adapt to a browser window resize.

The only information I could find that made it clear was that using max-width: 100%; height: auto; scales certain objects to adapt to a browser window resize. The thing is, it only works for some things not all. Here is my site, as you can see it's a bit of a mess. I would like it all tidied up properly like this site that I believe is static. However if answers can show me a way to make it scalable as well that would be great. But I assume having it static is easier.

Also if it helps here is a fiddle of a page from my site.

via Chebli Mohamed

Add an "click outside of menu to close" jquary/javascript to a menu drop-up that has .toggle()

I would like to add the function to close the menu if i click outside the menu. And also keep the menu button working to close it too: http://ift.tt/1DNxM2R

$(document).ready(function () { $("li").click(function () { $('li > ul').not($(this).children("ul").toggle()).hide(); }); });

Also can you tell me if this is correct for mobile etc? I hope and think so, because it's using .click, right?

This is referring to this post, that I can't reply to the answer to ask there: How to change drop-down menu to drop-up menu

via Chebli Mohamed

How to center align which serves as menu?

I tried to wrap it in div, I tried bunch of different code, but I cannot make it. I will appreciate any help.

I don't know where am I making mistake.

.menu2 {
  list-style: none;
  justify-content: center;
  align-items: center;
}
.menu2 li {
  float: left;
  width: 80px;
  padding: 1px;
}
.menu2 > li a {
  display: block;
  font-size: 0.8em;
  padding: 3px;
  text-decoration: none;
  text-align: center;
  color: #333333;
  border: 1px solid #d6d6d6;
  transition: all ease .5s;
}
.menu2:hover > li a {
  opacity: .5;
  transition: all ease .5s;
}
.menu2 > li:hover a {
  opacity: 1;
  color: #D2383C;
  border-color: #D2383C;
}

<ul class="menu2">
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
<li><a href="">2012</a></li>
</ul>

via Chebli Mohamed

Flickity does not render the second image in the carousel

http://ift.tt/1PfihBD is a test of my website. I am attempting to add a flickity carousel, and for some reason it will not render the second image in the the divs. Here is the the carousel without all the the other html and css stuff. http://ift.tt/1N1Se1L

<div class="gallery js-flickity">
   <div class="gallery-cell">
      <img src="http://ift.tt/1N1Se1P" alt="art">
   </div>
   <div class="gallery-cell">
      <img src="http://ift.tt/1HAbDji" alt="stuff">
  </div>
  <div class="gallery-cell">
  </div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
</div>

CSS:

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
   padding: 50px 0px 0px 0px;

}

.gallery img {
  display: block;
  width: 100%;
  height:auto;
}

Heres proof the image links are good

Oh, and no jQuery.

via Chebli Mohamed

jQuery - Change CSS of one div that shares its class with other divs

I am trying to change the CSS of a single DIV that shares its class with other divs.

I have been trying looking around for a solution but nothing seems to work.

I am trying using the code below without results:

$(".singleOffer").click(function(){
    $(this).parent().find(".offerSocial").css({transform: "translateY(0%)", opacity: "1" });
});

HTML

<div id="pattern" class="pattern">
  <ul class="g">

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

.....

  </ul>
</div>

via Chebli Mohamed

How to change window title on a new popup window with custom height and width

Hi below is my code using a onclick with target="popup", how do I change the title of the new popup?

<a href="#" target="popup" 
  onclick="window.open('http://ift.tt/1UGj41N','popup','width=220,height=220,scrollbars=no,resizable=no'); return false;">Open new window</a>

via Chebli Mohamed

Space appearing on firefox, but not chrome?

folks.

Today,I decided to install firefox and test my navigation bar out on firefox instead of google chrome. Firefox shows a random space ontop while chrome doesn't. Anyone know what the problem is and how to fix it?

This is what firefox looks like compare to chrome.(Sorry for the bad quality, I resized it bad.)

http://ift.tt/1UGj5mn

If it matters, this is the code i'm using:

<html>

<head>
<title>Blitz</title>

<style>
body{
margin: 0px;
padding:0px;
}

.Blitz{
background-color:#2DDEDE;
padding:0px;
margin:0px;
border-color:black;
}

.Navigationbar{
height:40px;
width:500px;
background:#a7e8ee;
border:none;
}


.Navigationbar li{
display:inline;

}


.Navigationbar a{
color:black;
text-decoration:none;
}
</style>

</head>

<body>


<div class="Blitz">
<h1><center>Blitz</center></h1>
<ul>
<div class="Navigationbar">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Featured</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>

<div class="information">
<!--Information about the site here. Pictures to go with that-->

</div>

</body>

</html>

via Chebli Mohamed

Background image for media screen not displaying whole image

I'm trying to make my site responsive and I cannot get my pages background image that covers 85% of the screen to display the entire image. It just shows a very small portion of it. What am I doing wrong? If it helps, my site is sundayfundayleague.com .

I'm attempting to do this..

.indexgraypage {
    width: 100%;
    left: 0;
    right: 0;
    min-height: 100%;
}
.homeimg {
    background-image: url("/images/bright_lights_smallest.jpg");
    width: 80%;
    background-size: cover;
    background-position: center;
    height: 100%;
    margin: auto;
    position: absolute;
    margin-right: 10%;
    margin-left: 10%;
}

via Chebli Mohamed

Can't put an image inside a div properly

I'm working with Angular and trying to bind an image to a div background. The background need to be darker from the original image so text can be include later :

The problem Is - The image does not show properly inside the boundaries of the div; some parts of the image are missing.

.PictureCover {
  background-size: cover;
    margin: 10px;
  width: 70px;
  height: 100px;
  float: left;
  
}

<div class="PictureCover" style="background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(http://ift.tt/1Tzql0K);"></div>

The url to the image from the example is temporary and will be replaced with a binding to a image from object in angular so inculding 'background-image' inside the PictureCover css class is not an option.

Thanks.

via Chebli Mohamed

Javascript 'Window.open' causing hover at element which is not hoverred by mouse pointer at Google Chrome

I am doing an application which the user receive a list of items to choose, when the user moves the mouse a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it an ONCLICK function marks the clicked div and redirect to a website( _blank ), perfect, but when you go back to this page there is two div selected, the div user has clicked and another one , if the user moves the mouse, even if a little the second div backs to normal.

What i want is go back to page and only the div clicked is marked.

It only happens at Google Chrome

Jsfiddle ----> 

http://ift.tt/1WnA26Q

Print Screen --> 

http://ift.tt/1WnA52g

Is it possible to solve and do not marks a second DIV ?

If I do not redirect to a website, it work normally, but i need to redirect =(

via Chebli Mohamed

Interaction of pseudo-elements with :not pseudo-class

Short version:

Using Chrome, I noticed that the selector

#main-content p:first-of-type::first-letter:not(.subhead) { ... }

seems to fail to apply first-letter styles regardless of the class of the paragraph, but if I place the :not pseudo-class earlier, as in either of

#main-content p:first-of-type:not(.subhead)::first-letter { ... }
#main-content p:not(.subhead):first-of-type::first-letter { ... }

then it works as I would expect. Is this an issue in Chrome, or is there some aspect of CSS selectors which explains this, that I just don't understand?

(Additionally, if it's not just an issue in Chrome, can someone suggest a better title for this question?)

---

Long version:

The short version seems like a good self-contained question to lead with, but there's some more complicated background info which might have its own interesting ramifications. (And which might warrant its own separate question, or be another bug. Help very much appreciated???)

Originally I was trying to apply initial drop-caps to the first paragraph in a div and any subsequent paragraphs that immediately followed a horizontal rule, unless they were part of a subheading. Here's a highly-abbreviated mock of the page structure:

<div id="main-content">
<section class="panel">
  <header>
    <h1>Welcome Friend!</h1>
    <p class="subhead">This is a subheader! (0)</p>
  </header>
  <div class="customhr"></div> <!-- consciously NOT an hr tag -->
  <p>Here's a paragraph (1)</p>
  <hr>
  <p>First paragraph of a new content section (2)</p>
  <p>And another paragraph. (3)</p>
</section>
</div>

And the extremely-abbreviated CSS:

#main-content p:first-of-type::first-letter,
#main-content hr + p::first-letter {
  /* Drop-cap styles */
}
.subhead::before {
  /* Indent sub-headings with a cute fleuron */
  content: "\00a0\00a0\2767\00a0";
}

While testing in Firefox, this resulted in paragraphs (1) and (2) having drop-caps, which is what I desired. In Chrome however, the fleuron from the ::before rule for paragraph (0) also has the drop-cap styles applied. I'm fairly confident Firefox is in error here, as :first-letter should match text from the ::before pseudo-element if it is present, but instead the ::before causes :first-letter not to match anything.

In trying to fix it for Chrome, I added the :not pseudo-class to the end of the first selector (see the first CSS rule in the short version). In Firefox, ironically, this produces the desired effect just as before, but in Chrome, this now caused paragraph (1) to no longer have the drop-cap styles applied. That, I have no explanation for, but I determined it has nothing to do with the .subhead element; Chrome apparently just never applies the rule, and paragraphs following a horizontal rule are the only ones that get styled. But if I move the :not pseudo-class earlier in the rule, as in the two alternatives I gave in the short version, it once again works as expected.

I feel as though I somehow simultaneously stumbled onto two different bugs in Firefox and Chrome, but the use of pseudo-classes and pseudo-elements is slightly arcane to me and I'm not fully confident with them. So I'm curious a) whether there's anything in-spec that would explain this CSS behavior in either browser as being correct, and b) if not, whether these are already known bugs with consistent behavior that has been documented somewhere. [And c) if not, let me know whether you plan to report said bugs so that I don't accidentally file a duplicate.]

via Chebli Mohamed

display:none not working in popup

I am trying to display this popup on JSGCL website. It does display the popup but it neither displays the text of the popup nor close the popup on pressing close.

HTML:

<div id="popup">
    <div >
        <h1>JamaPunji</h1>
        <p><a href="http://ift.tt/1h8fFKW" target="_blank">Click here</a> to get details.</p>
       <a href="#" id="close_popup">Close</a>
</div>

CSS:

#popup{
    position: absolute;
    background: #004990;
    top: 45%;
    left: 45%;
    width: 300px;
    height: 200px;
    /* border: 1px solid #000; */
    border-radius: 5px;
    padding: 5px;
    color: #fff;
    z-index:9999;
} 
#close_popup {
    color:#FFF;
    position:absolute;
    right:0px;
    top:0px;
}
#popup h1,#popup p, #popup a{
    text-align:center;
    z-index:9999;
}
#popup a{
    color:#F47B20;
      z-index:9999;
}

JavaScript:

$(document).ready(function() 
 {    $("#popup").css("display", "block");
  });

  $("#close_popup").click(function(){
    $("#popup").css("display", "none");
  }); 

via Chebli Mohamed

bootstrap floating css/widget/parts

I am searching for the boot strap floating css/widget/parts samples.

I am googling around with some keyword like 'floating / fixed' but only found sticky footer and header or some simple panel samples.

What my 'floating' means , div stays on the same place of window regardress of scroll.

like airbnb cacher panel.

(sorry this screenshot is japanese)

via Chebli Mohamed

Extra space around nested divs with display:table

I have a list that I'm styling like a table, so that the contents are horizontally aligned. The first column contains labels, and the second contains groups of buttons using Bootstrap's btn-group-justified class - which is also using display: table, so it's effectively a nested table.

The problem is that there is extra space added above the contents of the first cell and below the contents of the second, shown here in blue:

Here is the HTML:

<ol class="table-list">
  <li>
    <div>
      <span>Row 1</span>
    </div>
    <div>
      <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button class="btn btn-default">Option A</button>
        </div>
        <div class="btn-group">
          <button class="btn btn-default">Option B</button>
        </div>
      </div>
    </div>
  </li>
</ol>

And the stylesheet:

ol.table-list {
  display: table;
  list-style: none;
  padding: 0;
  border-collapse: collapse;
}
ol.table-list > li {
  display: table-row;
}
ol.table-list > li > div {
  display: table-cell;
}
ol.table-list > li > div > span {
  display: inline-block;
  white-space: nowrap;
  background: white;
  padding: 6px 12px;
  line-height: 20px;
  margin: 0;
}

This happens in both Firefox and Chrome. When I inspect the cells and their contents, there is no relevant margin and no padding. How can I get rid of that space?

Demo in Plunker

via Chebli Mohamed

How do I reverse engineer an existing browser based application to create my own version?

I am using an existing browser based application that is being obsoleted by the company which owns it and will no longer be supported. I want to capture and copy as much of the functionality as possible before it goes away. How can I copy the basic funcionality of the html, php, etc. by accessing the source files and reverse engineering the site?

via Chebli Mohamed

How to Completely Remove Element Based on Screen Size

I have two forms that have to use the same IDs, etc. however, one is specifically for mobile viewing and the other for everything else. I am using media queries and display: none to show/hide each, but of course they are both technically still coded ON the page, which means neither of them work. So instead I am trying to think of a way to totally remove the element based on screen size. It has to be actually removed and not simply hidden.

I'm stuck and I need to get the site migrated by tonight. Any suggestions would be most appreciated!!!

via Chebli Mohamed

a tag :before element to produce hover effect over image and still be clickable?

So what I want to achieve is an image wrapped in a link. This link will have a psuedo element :before that produces a black overlay on hover. This image should remain clickable. However, no matter what I do the pseudo element won't position above the image.

<a href="http://google.com">
  <img src="http://ift.tt/1BE5xku">
</a>

a {
 position: relative;
}

a:before {
 position: absolute;
 z-index: 99999999;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 content: "";
 background-color: black;
}

img {
  display: block;
}

http://ift.tt/1Ty0qM9

via Chebli Mohamed

html,head and body tags are being deleted after processing Javascript. So how to avoid such deletion? [on hold]

With the help of the following code, I can add number of colspan according to number of td available within a table.The problem with is that, it is adding properly colgroup, but after processing, it is deleting some tags within that same page(html,head,body tags).

How can I avoid such deletion?

$(document).ready(function() {

    $('#btnApply').on('click', function() {

        var input = '<div>' + $('#input').text() + '</div>';
        var html = $('<div/>').html(input).contents();
        console.log(html.find('table'));
        var output = '';
        html.find('table').each(function() {

            var colCount = 0;
            $(this).find('tr:nth-child(1) td').each(function() { // Get the count of table columns

                if ($(this).attr('colspan')) { // if there is a <td colspan>
                    colCount += +$(this).attr('colspan');
                } else {
                    colCount++;
                }
                console.log($(this));
            });


            var colgroupList = '';
            for (i = 0; i < colCount; i++) { // Add a <colgroup></colgroup> for each <td>
                colgroupList += '<col width="50%"></col>';
                console.log(colgroupList);
            }
            console.log('<colgroup>' + colgroupList + '</colgroup>');

            $(this).find("tbody").prepend('<colgroup>' + colgroupList + '</colgroup>');

            output += '<table>' + $(this).html() + '</table>';

        });

        $('#output').html(output);
        $('#outputHTML').text(output);
        $('#outputArea').fadeIn(1000);

    });

});

So can anyone help me. You can view my fiddle.

via Chebli Mohamed

Microsoft Edge Image Scaling

How do i make an image scale with bicubic for MS Edge? Is there some CSS or similar that can change the behavour.

See this page: http://ift.tt/1Ty0trl

On the right there are two images that have textured background, you can see the weird artifacts quite clearly

Chrome on the Left, MS Edge on the Right. As you can see there is some weird moire effect from the resize being nearest neighbor or linear, not bicubic.

via Chebli Mohamed

Cancelling a CSS rule

Let's say we have the following CSS default rule X, declared in a WordPress child theme:

.btn { background: url("btn.jpg"); }

And this rule Y, declared in commercial parent WordPress theme:

.btn:hover { background: gray; }

Can I somehow tell the browser "ignore Y", so that nothing will happen when hovering the .btn element?

via Chebli Mohamed

different content of the site for mobile devices and PC with similar resolutions

I need to have the following elements on my site displayed at the frontpage at the very same place independenly from each other:

1 a slider for smartphones only with resolutions up to 992 px width ( already have it) 2 a slider for tablets only with resolutions up to 2048 px width ( need to add) 3 a slider for PCs only with resolutions starting from 1024 px width ( already have it)

As you can see from the requierements resolutions of PCs and tablets intersect so that as far as I understand it is impossible to use basic @media queries (and "handheld" is no longer functioning properly)

I have the following .js included in my site's header for different purposes, but I feel it can be helpful because it helps add css to devices with touchscreens and PCs separately.

<script>
document.documentElement.className += 
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

Does anyone know a proper way of having independent sliders for 3 categories without situations, when two of them are displayed at once?

The site adress: poiskdetei.ru.

Thank you!

via Chebli Mohamed

Current Menu Item styling in wordpress

I am working on a site here: http://ift.tt/1UG5ds2

I want the current menu item in the main nav to be white instead of gray. In this case, if you are on the home page the home link in the nav will be white.

Whatever I try it remains gray.

CSS:

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a {
    color: #ccc;
    text-transform: uppercase;
}

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a:hover, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover {
    color: #ccc;
    text-transform: uppercase;
    text-decoration:underline;
}

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li.current_page_item > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.current_page_item > a {
    color: #fff;
}

HTML:

                   <div class="standard-menu-container  menu-skin-main reveal-from-top">

                        <a href="#" class="menu-bar menu-skin-main hidden-md hidden-lg">
                            <span class="ham"></span>
                        </a>


                        <nav>
                              <ul class="menu" id="menu-main-nav-1">
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://ift.tt/1UG5ds2">Home</a></li>
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://ift.tt/1h7TMLB">Our Work</a></li>
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://ift.tt/1UG5ds6">Our Services</a></li>
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://ift.tt/1UG5fQK">Our Team</a></li>
                                       <!-- Other Nav links -->
                              </ul>
                        </nav>
                    </div>

via Chebli Mohamed

My img div is floating in the other div

I'm trying to get my bootstrap img-responsive to get to the bottom of the div, but it no matter what I do, it won't move. I've tried altering the img-resposive CSS file setting height:to 0and bottom:to 0 but it doesn't fix the problem. I'm new to this and probably missing something out, so please be tolerant.

<!--this is the bootstrap.css file -->

.img-responsive,
    .thumbnail > img,
    .thumbnail a > img,
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: 0;
    bottom: 0;
}

<!--and this is the html -->

<div class="col-md-9 hidden-sm">
    <img src="img/valencia.png" class="img-responsive animated fadeInRight" alt="mockup">
</div>

via Chebli Mohamed

Dropdown menu css - I can't work out how to apply padding to the bottom of ul parent link without affecting children

I've recently had a few issues with a dropdown menu that I've created. Since putting a display:block rule in the css of my children page styling, the majority of these issues have been fixed, however now I'm faced with a new problem - I can't add padding to the bottom of the main parent navigation links, i.e "work" "about" etc, without affecting the child links in the dropdown menu, causing the spacing to change erratically - ruining the layout.

I've got everything positioned the way I want it, but I need some padding on the bottom of the main links so that they 'meet' the dropdown menu and don't leave any empty space between the two. Otherwise, when I drag the cursor downwards, the dropdown menu disappears when the cursor moves across between the gap between them. As I mentioned, this issue did not exist before adding display:block, so I know that 20px of padding-bottom under the parent menu links will fix this issue. Can anyone help me do this without creating the aforementioned problems?

My URL: http://ift.tt/1TzfELH

My code:

HTML:

<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>

CSS:

/* header navigation menu */

.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding:0;
background-color:#ffffff;
list-style:none; 
}

.header nav ul li {
float:left;
margin-left:50px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */

.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 180px;
height:auto;
}

.header ul li ul li {
margin-left:0px;
width:100%;
float:none;
}

.header ul li ul li a {
display: block;
background-color:#ffffff;
transition: .1s background-color;
margin:0px;
padding: 14px 0px 14px 10px;
font-size:11px;
}

.header ul li ul li:hover a {
background-color:#ededed; }

/* end dropdown menu */

/* end header navigation menu */

via Chebli Mohamed

Transform: Rotate background-color

I'm having problems with transform: rotate on one of my headers. I'm trying to make the entire top half of the page have slight slant, this includes the text and the background. When I rotate the div it creates white space instead of filling the rest of the content in with the background color. The effect I'm trying to achieve is having the area outlined in blue to be the same red color so it expands from the left side of the page to the right. Here is the screenshot:

This is my code:

<div class="container-fluid header">
  <div class="row bottom-align">
    <div class="col-lg-8">
      <h1>Title</h1>
      <h1>Second-Title</h1>
      <h1>Another Title</h1>
    </div>
    <div class="col-lg-4 text-right bottom-align-text">
      <ul class="list-inline">
        <li><i class="fa fa-facebook fa-outline"></i></li>
        <li><i class="fa fa-twitter fa-outline"></i></li>
        <li><i class="fa fa-instagram fa-outline"></i></li>
        <li><i class="fa fa-pinterest fa-outline"></i></li>
        <li><i class="fa fa-envelope fa-outline"></i></li>
      </ul>
    </div>
  </div>
</div>

.header {

  background-color: $red-primary;
  color: $white;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);

}

Any suggestions would be appreciated.

via Chebli Mohamed

Wanna Make search-bar responsive

I have wordpress blog and I need to add search-bar in headerI want to make my search-bar responsive how can i do that? see the code please

/*Expandable Search CSS*/

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-2 input#search{
  width: 1px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
   color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
 
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
  margin-bottom: -60px;
  float: right;
 
}

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 
.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: -25px;
  margin-top: 17px;
  z-index: 1;
  color: #ffffff;
}

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}
 
.container-2:hover input#search{
width: 300px;
}
 
.container-2:hover .icon{
  color: #000000;
   
}

/*Expandable Search CSS End*/

<link href="http://ift.tt/1oKzmdw" rel="stylesheet">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
<form role="search" class="search-form" action="http://ift.tt/1vzc6T2" method="get">      
<input type="search" class="search-field" id="search"    placeholder="Search …"  name="s" title="Search for:">
</form>  
</div>

HTML Code I am using in Text widget . This is a wordpress website and

Thanks

via Chebli Mohamed

Stop images from shaking page on resizing

I have several images that are in a line that will resize on hover so that the user knows that the image is being selected. The problem is that when you move from one image to the next, all the rest of the images move downwards. Additionally, when moving quickly from one image to the next, the screen appears to shake. How can I fix this?

img{
  margin:10px;
}
img:hover{
  width:100px;
  height:100px;
}

<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />

http://ift.tt/1L9EPm6

via Chebli Mohamed

CSS - Transparent PNG centered in a DIV with responsive background

I have a DIV with a responsive background. I'm trying to place a centered png "logo" over the DIV (or the background, if you prefer). That's what I have:

.divWithBG {
    background-image: url(...);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 45.45%; /* (h/w) x 100 */
    margin-bottom: 30px;
}
.divWithBG img{
    display: block;
    margin: 0 auto;
}

¿What I need to do to place the image inside the div? Centered both, vertically and horizontally.

Many thanks in advance.

via Chebli Mohamed

Is there a proper substitute for Django Compressor in the MEAN development world?

While working with django, I just write SCSS and put the scss files under

{% compress css %} 
files go here 
{% endcompress %} 

Is there a similar replacement for this? Right now, I'm using Compass which keeps track of all my SCSS files and creates CSS files upon any change. With Compass, I have to include my CSS files in the HTML. I was wondering if I can add SCSS files to the HTML and serve them as one compressed CSS file which can be cached by the client and invalidated upon change.

via Chebli Mohamed

Twitter Bootstarp - Styling does not display on mobile browsers

My website is located at http://www.elgami.com/

I'm using Twitter Bootstrap for my styling. Everything works fine on desktop, but my styling does not display on mobile browsers, except for when I hard-code it in, of course. What could be going wrong?

My header is displayed below:

My css files are located in the folder "css" in my public_html root directory.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hypercycle™ - Personalize Your World.</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/blog.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="http://ift.tt/1h80sJT">
  <link rel="stylesheet" type="text/css" href="http://ift.tt/1UG7cg1">

  <link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />

</head>

via Chebli Mohamed

strange image resize issue

cant get the top image to fit into the div. help what am i doing wrong. I've tried looking at other solutions on this site but none really answer the question. I have it set to 100% for each of the image sizes but they still wont lock into the divs theyre in. a little help would be great.

<body>
<div class="container">
<div class="header">
    <div class="navbar">
    <ul>
    <li>HOME</li>
    <li>GALLERY</li>
    <li>EVENTS</li>
    <li>SHOP</li>
    <li>ABOUT</li>
    </ul>
    </div>
</div>
<div class="eventbar">
    <div class="events">
        <article>
            <div class="image"><img class="icono" src="http://ift.tt/1kmOBHx">
            </div>
            <div class="text">
            <h1 style="margin-bottom:-20px;">Event 1</h1>
            <p>this is this is placeholder text websites are fun and i like to make them. although they are freakin </p>
            </div>
        </article>
    </div>

<div class="newimages">
    <h1 class="imgtext">This is a catchy tagline</h1>
    <div><img class="r-image"src="http://ift.tt/1prU5Ux">
    </div>
    <p>this image is about yada yada and it was featured on yada yada. and now i would like to formally present it to you the aeophex family</p>
</div>

//css//

@charset "utf-8";
/*sectionized*/
body{
    margin:0px;
    padding:0px;
    font-family:sans-serif}
.container{}

/*header*/
.header{
    background-color:#FFF;}
.aeologo{
    margin-bottom:-13px;
    margin-left:-8px;
    }
.navbar{
    margin-left:-50px;}
.navbar ul li{
    display:inline;
    padding-left:10px;}
/*header*/

/*events*/
.eventbar{
    padding-bottom: 12px;
    padding-top: 5px;
}
.events{
    background-color: #06F;
    padding-bottom: 19px;
    padding-top: 3px;
    }
.events article{
    padding:10px;
    display:inline;
    padding-bottom:5px;}
/*events*/

.newimages{}

/*elements*/
.r-image{
    padding:15px;
    min-width: 25%;
    max-width: 95%;
    width: 95%;
    }
.icono{
    float: left;
    padding: 2px inherit;
    padding-right: 10px;
    padding-left: 5px;
    max-width: 100%;
    min-width: 25%;

}

via Chebli Mohamed

CSS table's text-align overwriting specific cell's text-align?

I want my whole table to have "center" text-align, besides some specific cells to have "right" text-align. In my code, the one cell is being more specifically targeted by CSS, yet the more general assignment is overriding. Why is this and how do I fix it?

.data td {
    text-align: center;
}
.animal {
    text-align: right;
}

<table class="data">
    <tr>
        <th>Type of Animal</th>
        <th>Favorite Food</th>
    </tr>
    <tr>
        <td class="animal">Cat</td>
        <td>Mouse</td>
    </tr>
</table>

via Chebli Mohamed

Search box inaccessible in wordpress header

I am working on a site here: http://ift.tt/1UG5ds2

I actually want the search box to appear below the navigation menu but when I place it there I can't click in the box to perform a search.

I added the same search field outside of the header to test that it works and it does.

I can't figure out why the search in the header area doesn't work. I have tried adding a z-index to the search div but it didn't work.

CSS:

.search-main-nav {
    float:right;
    width: 200px;
    z-index:999;
}
.search-main-nav input{
    border:2px solid #333;
    color:#333;
}
.search-main-nav label {
    color:#333;
    margin-left: -25px
}
.clear {clear:both;}

HTML (the 2 search functions are at the bottom above and below the </header> code:

<div class="wrapper" id="main-wrapper">

        <header class="main-header menu-type-standard-menu">
    <div class="container">

        <div class="logo-and-menu-container">

            <div class="logo-column">
                <style>.logo-image { width: 78px; }</style><a href="http://ift.tt/1h7TNiG" class="header-logo logo-image">
    <img src="//www.estiponagroup.com/dev/wp-content/uploads/2015/08/eg-logo.png" width="78" height="62" alt="logo" />
</a>            </div>
            <div class="social-links">
                <a class="facebook" target="_blank" href="http://ift.tt/1UG5ds4"><i class="icon fa fa-facebook"></i></a>
            </div>

            <div class="menu-column">
                                <div class="standard-menu-container  menu-skin-main reveal-from-top">

                        <a class="menu-bar menu-skin-main hidden-md hidden-lg" href="#">
                            <span class="ham"></span>
                        </a>


                        <nav><ul id="menu-main-nav-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://ift.tt/1UG5ds2">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://ift.tt/1h7TMLB">Our Work</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://ift.tt/1UG5ds6">Our Services</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://ift.tt/1UG5fQK">Our Team</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649"><a href="http://ift.tt/1h7TMLF">Our Story</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650"><a href="http://ift.tt/1UG5fQO">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651"><a href="http://ift.tt/1UG5fQQ">Our Fans</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-652"><a href="http://ift.tt/1h7TN27">Contact Us</a></li>
</ul></nav>
                    </div>

            </div>
        </div>


                    <div class="search-main-nav clear">
                                <form action="http://ift.tt/1UG5ds2" class="search-form" method="get" role="search">
                    <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

                    <label for="search_mobile_inp">
                        <i class="fa fa-search"></i>
                    </label>

                    <!--<input type="submit" value="Go" class="search-submit">-->
                </form>
            </div>
    </div>

</header>


<div class="search-main-nav clear">
                                <form action="http://ift.tt/1UG5ds2" class="search-form" method="get" role="search">
                    <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

                    <label for="search_mobile_inp">
                        <i class="fa fa-search"></i>
                    </label>

                    <!--<input type="submit" value="Go" class="search-submit">-->
                </form>
            </div>

via Chebli Mohamed

Wrap links found in content editable div on user keypress.

How would I go about wrapping text in a content editable div that is a URL right when the user enters it and without changing the position of the cursor? I had this same issue with handling #hashtags and @mentions, but I was able to get passed that by using At.js .

via Chebli Mohamed