xcode: 2015

samedi 27 juin 2015

background images not loading in Firefox

This works fine in all browsers (as far as I can tell), except Firefox. The question is: why does it not work in Firefox?

The background images are set up like this:

#top .homepage-cover-photo{
    position: relative;
}
#top .homepage-cover-photo .x-container {
    position: absolute;
    clip: none;
    clip-path: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#top .homepage-cover-photo .x-column.x-1-1 .bgimg {
    position: absolute;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

This should render fine in most modern browsers.

(The actual background images are set in the individual .bgimg elements.)

However, due to Chrome/Webkit/Blink (not 100% sure, I thought it was Blink, but it also happens in webkit browsers) not rendering these right, I put in a fix described here:

.Chrome #top .homepage-cover-photo .x-container, 
.Opera #top .homepage-cover-photo .x-container, 
.iPhone #top .homepage-cover-photo .x-container, 
.iPad #top .homepage-cover-photo .x-container,
.Safari #top .homepage-cover-photo .x-container {
    clip: rect(auto,auto,auto,auto);
    clip-path: rect(auto,auto,auto,auto);
    -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}
.Chrome #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.Opera #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.iPhone #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.iPad #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Safari #top .homepage-cover-photo .x-column.x-1-1 .bgimg {
    position: fixed;
    background-attachment: scroll;
    -webkit-transform-style: preserve-3d;
}

This is done via browser sniffing (sorry, but it’s the only solution I could figure out that works).

What is the best way to version our assets?

Currently, I'm using elixir for laravel framework which is default.

and My current system is like that, But it is making build & dist folders, and in the build folder there is also another dist folder, and it disturbs me.

Build folder is for rendered assets,Dist folder for versioning.

elixir(function(mix) {
  mix.less([
      'app.less'
  ]).coffee([
      'app.coffee'
  ]).styles([
      'bootstrap.min.css',
      'app.css'
  ],"public/dist/css","public/css").scripts([
      'bootstrap.min.js',
      'app.js'
  ],"public/dist/js","public/js").version([
      "dist/css/all.css",
      "dist/js/all.js"
  ]);
});

What is your way?

How to get my nav/menu bar's width to span the entire page

The HTML

    <title>
    menubar
    </title>
    <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us/a></li>
                <ul>
                    <li><a href="#">What we do</a></li>
                    <li><a href="#">Members and Alumni</a></li>
                    <li><a href="http://ift.tt/1GSLsaz" target="_blank">Cinco Ranch High School</a></li>
                </ul>
            </li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Photo Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    </head>
    <body>
    </body>

The CSS

@font-face {
    font-family: NASA;
    src: url("nasalization rg.ttf");
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;

    }

nav {
  width:1080px;
  margin:0 auto;
  list-style:none;

}

nav ul {
    background: #8D8D8D; 
    background: linear-gradient(top, #8D8D8D 0%, #383838 100%);  
    background: -moz-linear-gradient(top, #8D8D8D 0%, #383838 100%); 
    background: -webkit-linear-gradient(top, #8D8D8D 0%,#383838 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px auto 0px auto;
    border-radius: 5.5px;  
    list-style: none;
    position: relative;
    display: inline-table;
  font-family: NASA;
  font-weight: bold;
  font-size: 20px;
  width 100%;
  margin-top: 0px
}

    nav ul:after {
        content: ""; clear: both; display: block;
    }

  nav ul li {
    float: left;
  padding-right: 20px
}
    nav ul li:hover {
        background:#777777;
        background: linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -moz-linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -webkit-linear-gradient(top, #777777 0%,#6B6B6B 40%);
    }
        nav ul li:hover a {
            color: #2E2E2E;
        }

    nav ul li a {
        display: block; 
    padding: 25px 40px;
        color: #151515; 
    text-decoration: none;
    }

  nav ul ul {
    background: #6B6B6B; border-radius: 10px; padding: 0;
    position: absolute; top-center: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #000000;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color:#2E2E2E;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

Above ive included the HTML and CSS for my nav bar ive been trying to figure out how to get it to span the entire length of the page with the content centered in the middle like this: http://ift.tt/1Ikiti9. If someone could help me that would be great Thank You in advance BY THE WAY I KNOW MY HTML DOES NOT HAVE THE TAGS ON IT I WILL FIX THAT LATER

back button and menu navigation

Okay, I'm trying to design a mobile version of my site and am stuck on my menu.

Basically at the moment I've got a simple onClick running on the page so if the user decides they don't want to view click whats on the menu then they can click the page and the menu disappears.

But what I really want is a way of using the back button on the browser to return from the menu. I'm guessing it takes some kind of event or setting something, but am at a loss.

I'm a newbie, so be gentle, I'm hoping the community can help me a little as to where to start.

My main question is how to use the back button on a browser within my HTML or JavaScript, any ideas as to how to proceed would be greatly appreciated.

How do I change the link preview text for a website using HTML, CSS, etc?

How do I change the link preview text for a website using HTML, CSS, etc? In particular, I'm referring to the text in the link box on Facebook.

Responsive Design Div Spacing

I've got a problem with div spacing in responsive design if you go to this url: http://ift.tt/1GSKdIw you'll se how when you decrease to the maximum de window width the div spacing gets bigger instead of smaller... why does it happen? how do i fix it? Thanks!

<table>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
</table>

This is the example of the code I am using everything works but spacing

Team Treehouse nav bar animation

I am trying to reproduce the effects of the nav-bar animation when scrolling on their homepage. I understand how they can add classes when scrolling past a certain threshold with Jquery. Any ideas? If i try to animate links in the menu with opacity my content either overlaps, and if I use visibility it gets displaced.

Thank you.

How to make responsive navbar?

Here is my navbar:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="/img/logo.png"></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/item1/">LONG<br>ITEM1</a></li>
        <li><a href="/item2/">LONG<br>ITEM 2</a></li>
        <li><a href="/item3/">LONG<br>ITEM 3</a></li>
        <li><a href="/item4/">LONG<br>ITEM 4</a></li>
        <li><a href="/item5/">LONG<br>ITEM 5</a></li>
      </ul>
    </div>
  </div>
</nav>

and css:

.navbar {
  min-height: 100px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 25px;
  margin-bottom: 0px;
  padding: 0px 70px;
}


.navbar-brand>img {
  height: 70px;
}

.navbar-brand {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-default {
    background: #5aa0d1;
    border-radius: 0;
    -webkit-box-shadow: none;
           -box-shadow: none;
    border: 0;
}

.navbar-default .navbar-brand {
  color: #fff14f;
}

.navbar-default .navbar-nav > li > a {
  color: #fff14f;
  line-height: 24px;
  padding-top: 28px;
}

.navbar-default .navbar-nav>li.active>a {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #ffffff;
  background-color: transparent;
}


.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #ffffff;
}

It doesn't displayed well on small devices (iPad, iPhone, Android devices) - some navbar elements overlay others (see real example at vkko.ru).

What is wrong there? How should I fix that?

How can I avoid a "Flash of Unstyled Content" using fixed-width cells in CSS Tables?

My web GUI's layout is partially driven by CSS tables. This is mainly because I want the "cells" to have the same height under all situations without any massive headaches surrounding alignment. Overall, this approach has been very successful.

However, I do have a problem whereby the right-hand cell in the table can sometimes take a moment to render, causing the left-hand cell to briefly have 100% of the page width. This causes a noticeable "flicker" effect which, although minor, is kind of annoying. And I've decided to fix it.

Here is a vague representation of how my page works:

#tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: table-row; }
#tbl-col1,
#tbl-col2 { display: table-cell; }

#tbl-col1 { width: 50px; background-color: red; }
#tbl-col2 { background-color: blue; }

<div id="tbl">
    <div id="tbl-row">
        <div id="tbl-col1">LHS</div>
        <div id="tbl-col2">RHS</div>
    </div>
</div>

All's well and good until you use your developer tools to give #tbl-col2 a display: none directive, [I hope accurately] simulating the state of the browser's rendering engine in the moments between #tbl-col1 having been rendered, and #tbl-col2 being rendered.

Notice that #tbl-col1 immediately takes up 100% of the width of the table, despite the width I've given it. I sort of understand why this is happening: after all, I've asked the browser to make the divs behave like tables. Still, it's undesirable here.

I tried to fix this by inserting a "spacer", hoping that without a width it would expand to fill all the space on the right-hand side until such time as the right-hand side got rendered:

#tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: table-row; }
#tbl-col1,
#tbl-spc,
#tbl-col2 { display: table-cell; }

#tbl-col1 { width: 50px;  background-color: red; }
#tbl-col2 { width: 150px; background-color: blue; }

<div id="tbl">
    <div id="tbl-row">
        <div id="tbl-col1">LHS</div>
        <div id="tbl-spc"></div>
        <div id="tbl-col2">RHS</div>
    </div>
</div>

As you can see by again hiding #tbl-col2, it made not a blind bit of difference: #tbl-col1 still took the whole width of the table, rather than the 50px I allowed it.

Assuming I'd rather fix this than abandon the CSS Tables layout altogether, what can I do?

Or am I going to have to replace the layout or, even worse, take a JavaScript approach to resolving the FoUC?

How do I make h3 titles match in height?

I have a related products section on my shop and the titles vary from 1 line to 3 lines and obviously also change with screen size to take up more or less lines. Can anyone help me make the 4 product title the same height as each other to fit the biggest title but vary depending on how much space is needed when screen size changes please? I have a screenshot of the example but can't post it as I don't have 10 reputation.

Thanks

how to position div on the bottom of another div?

Need to set <div id="group-of-tables"> to the bottom of the <div class="item-content">:

  <div class="item-content">
        <div id="group-of-tables">
            <table class="item" id="first-table">
                <tr>
                    <td><div class="" id="">1</div></td>
                    <td><div class="" id="">2</div></td>
                    <td><div class="" id="">3</div></td>
                    <td><div class="" id="">4</div></td>
                </tr>
            </table>
            <table class="item" id="second-table" border="1">
                <tr>
                    <td><div class="" id="">Next</div></td>
                </tr>
            </table>
        </div>
    </div>

Css:

div.item-content{
height:100%;
}

Something like this: enter image description here

But without absolute position

text-overflow: ellipsis with inline-block

I have the following html code

<html>
  <head>
    <style>
      span {
        display:inline-block;
      }
    </style>
  </head>
  <body>
    <div style='width:60px; white-space:nowrap; overflow:hidden;
      text-overflow:ellipsis'>
      <span>abc</span> 
      <span>def</span> 
      <span>ghi</span> 
      <span>jkl</span>
    </div>
  </body>
</html>

The result looks like:

abc def g (the g is partially cropped)

Question) How can I make it looks like:

abc def g...

Thanks in advance!

affix overlapping in bootstrape

I have divided the column in two parts and set the first column to be fix using affix property of Bootstrape. For desktop it is working fine but for smaller device content is overlapping. is there way to fix this issue ?

<div class="row">
   <div class="col-lg-3 col-sm-12"  data-spy="affix">
     <div class="row">
        <div class="col-md-10 col-md-offset-2" >
            <p>My Content </p>
        </div>
     </div>
</div>
<div class="col-lg-8 col-lg-offset-3 col-sm-12" style="border-left: solid gray 2px;">
     <p>this is test test <p>
</div>

Text instead of thumbnails plupload

I have text (JPG, PNG, etc.) ( http://ift.tt/1eQjqnb )instead of thumbnails plupload jQuery. How can i repair this? I want thumbs, any idea? It's my code:

$( document ).ready(function() {
    $("#uploader").plupload({
        runtimes : 'html5,flash,silverlight,html4',
        url : "upload.php",
        max_file_size : '5mb',
        chunk_size: '1mb',
        resize : {
            width : 2000,
            height : 2000,
            quality : 90,
            crop: false,
            preserve_headers: false
        },
        filters : [
            {title : "Zdjęcia", extensions : "jpg,gif,png"},
            {title : "Archiwa Zip", extensions : "zip,avi"}
        ],
        rename: true,
        sortable: true,
        dragdrop: true,
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: 'thumbs'
        },
        flash_swf_url : '../js/Moxie.swf',
        silverlight_xap_url : '../js/Moxie.xap'
    });
});

CSS viewport width

Okay, so at this moment I am busy learning responsive CSS. It might be simple for you, but I don't understand how to archieve this:

I am playing with making a 'grid'. I have set all the classes to percentages in width and height, so that should not be the problem. However, when I resize the viewport (window), it's not dynamically growing or shrinking.

See: here

Currently using the following html:

<meta name="viewport" content="width=device-width" /> 

<div id="wrapper">
<div id="header">
<a href="" title="FavoriteFM" class="top-logo-container"></a>
</div>
<div id="presenter">
<a href="" title="FavoriteFM" class="presenter-one"></a>
<a href="" title="FavoriteFM" class="presenter-two"></a>
<a href="" title="FavoriteFM" class="presenter-three"></a>
<a href="" title="FavoriteFM" class="presenter-four"></a>
<a href="" title="FavoriteFM" class="presenter-five"></a>

</div>

<div id="main">


</div>

Using the following CSS:

<style>

/* Theme  */
html {
margin-top: 0px !important;
}

/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}

.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}

body {
    background-color: #f0ede9;
    margin-top: 0px;
    position: relative;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}


.clearfix {
clear: both;
}

p {
font-family: Roboto;
padding: 1px;
}



#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}

a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}

#wrapper {
width: 965px;
margin: 0 auto;
overflow: hidden;
}

#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}

.top-logo-container {
  display: block;
  height: 100px;
  width: 100px;
  text-indent: -9999px;
  background: url(http://ift.tt/1NnJBMv) 5% 50% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100px;
}



#main {
margin-left: 2px;
overflow: hidden;
}

#presenter {
margin-top: 40px;
width: 100%;
height: 40%;
overflow: hidden;
}

.presenter-one {
  display: block;
  height: 100%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
  }



    .presenter-two {
  float: left;
  position: relative;
  display: block;
  height: 50%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 300px;
  }

    .presenter-three {
  position: relative;
  display: block;
  height: 50%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 310px;
  }

      .presenter-four {
  position: relative;
  display: block;
  height: 52%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 300px;
  }

      .presenter-five {
  position: relative;
  display: block;
  height: 52%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 300px;
  }

  @media screen and (max-width: 965px) {
    body {
        width: 50%;
    }

    #main {
    width: 50%
    }


@media screen and (max-width: 365px) {
    body {
        width: 100%;
    }

    #wrapper {
    width: 100%
    margin: 0 auto;
}

#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}

.top-logo-container {
  display: block;
  height: 120px;
  width: 120px;
  text-indent: -9999px;
  background: url(http://ift.tt/1NnJBMv) 5% 50% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 120px;
}

#main {
margin-left: 2px;
}

#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}

.presenter-one {
  display: block;
  height: 100%;
  width: 100%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}


.presenter-two {
  display: block;
  height: 50%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}

.presenter-three {
  position: relative;
  display: block;
  height: 50%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}

.presenter-four {
  position: relative;
  display: block;
  height: 50%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}

.presenter-five {
  position: relative;
  display: block;
  height: 50%!important;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%
}




}

Header not filling the entire width or top of the body

Random question I am running into that I am sure is a dull oversign on my part. My header isn't filling to the top portion or left/right portions of my screennand leaving the body a little bit of room in those areas. I provded padding and margins for the elements inside the header, but have tried to max the header size to no avail. Any idea what I might be missing?

Thanks!

HTML:

<body>
    <header>
        <a href="index.html" id="logo">
        <img src="img/logo.png">
        </a>
</body>

CSS:

*{
    boz-sizing: border-box;
}

body{

    font-family: 'Open Sans', Tahoma, sans-serif;
    max-width: 100%;
    background-color: #5F5E5E;
}

/*************** HEADING ****************/

 header{
  float: left;
  margin: 0 0 15px 0;
  padding: 5px 0 -60px 0;
  min-width: 100%;
  width: 100%;
   }

#logo {
 margin: 5px 0 0 70px;
 padding-top: 7px;
 padding-left: 50px;
 display: inline-block;
 max-width: 100%;
}

Semantic UI CSS right padding

I have this code for making a cards stackable box. The problem is that this box is showing me a right paddding in the fragment, can anyone help me?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./semantic/semantic.css"/>
    <title>Agora</title>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
    <div class="item">
        <div class="huge ui buttons">
        <div class="ui button">One</div>
        <div class="ui button">Two</div>
        <div class="ui button">Three</div>
    </div>
    </div>
    <div class="item">
        <div class="ui button">Log-in</div>
    </div>
</div>

<div class="ui column centered grid">
    <div class="fourteen wide column">
        <div class="ui center aligned segment">


            <div class="ui stackable four column centered grid" >
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://ift.tt/1GDSLzx">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://ift.tt/1GDSLzx">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://ift.tt/1GDSLzx">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://ift.tt/1GDSLzx">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
            </div>


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




</body>
</html>

This is the problem image: http://ift.tt/1eQiijm

I need to remove the padding that's in the right side.

Formatting text in text-hover-box

I'm using some code that shows a text box with when you hover your mouse over some text. The problem is the text that is displayed in the text box comes from an attribute of the <a> tag it's in and I can't format it. I want to make a list in the text box, but I can only make it just a wall of text.

HTML:

<a data-text="Could use this text instead of title" title="1. ~~~~ List item (/br)~~~~ 
                                    2. ~~~~ List item ~~~~ 
                                    3. ~~~~ List item ~~~~ 
                                    4. ~~~~ List item ~~~~ 
                                    5. ~~~~ List item ~~~~ " class="tooltip">Hover over this text</a>

CSS:

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 100%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

content: attr(title);

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Check out this demo: http://ift.tt/1eQiijf

How can I format the text (have line breaks) for this?

Javascript image dropdown set background color

I want to use in an html page, generated from PHP, the combobox like in Java. I want to add an icon, some text, some additional text and a background color. The data can ben generated from a JSON file or with a query in PHP, from a MySQL DB. I've found this very powerful solution, which can be a good starting point. The only problem I'm not able to fix, it is about the background color of the select/li. In fact, I want that they are different from white, and are related with a variable, which is present in the JSON file. How Can I set the background color of each select, dynamically with the actual code ?

enter image description here

ionic and cordova - css active not working on android device

I am using ionic framework with cordova platform. The css for active state of an element (div, button or a) works fine in browser during development/testing but not at all in android device/emulator

i have defined some classes

.bg-dark {
 background: #333333 !important;
}

.bg-active-darkBlue:active {
background: #16499a !important;
}

and following html

<a class="fg-white bg-active-darkBlue button" style="background-color:#3B5998;">Sign in with Facebook</a>

even tried this (got on ionic forum)

<a ng-mousedown="class='bg-active-darkBlue'" ng-mouseup="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>

tried for a,div and button tags. still not working on android, only works in browser, please help.

Ion-tabs and hide-nav-bar leaves space, with top 0px also

I wanted to hide the nav-bar on a view within tabs(ion-tab)

Have tried top:0 on .tabs also and hide-nav-bar also

Apparently in ion-view if i use hide-nav-bar it leaves space befor the tabs and making it to top:0px (.tabs { top: 0 !important; }) leaves space between content and tabs

see image below

When using hide-nav-bar on ion-view:

enter image description here

With .tabs { top: 0 !important; }:

enter image description here

However , nav bar hides on tabs bottom and there is no space when it on bottom, is there any solution to hide nav-bar without leaving any space

unable to click hyperlinks/buttons because of the floating div

I have a chat area that I am trying to bind with knockoutJS. This chat area will be floating with position fixed using css

.floatingDiv
{
width: auto;
float: right;
position: fixed;
top: 58%;
height: 255px;
z-index:0;
}

There are few anchor tags and buttons present on the page and in few cases are moved behind the chatarea. When this happens I am unable to click on the anchor tags/buttons.

Below is the sample where I am unable to click link "google redirection"

                <!DOCTYPE html>
            <html xmlns="http://ift.tt/lH0Osb">
            <head>
                <title></title>
            </head>
            <body>
                <script src="Scripts/jquery-2.1.4.js"></script>
                <script src="Scripts/knockout-3.3.0.js"></script>
                <style>

            .floatingDiv
            {
                width: auto;
                float: right;
                position: fixed;
                top: 58%;
                height: 255px;

                z-index:0;
            }
            .labelBox
            {
                float: right;
                background: white;
                border: 1px solid gray;
                margin-right: 30px;
                margin-left:30px;
                height: 280px;
                width: 250px;
            }
             .labelBoxHeaderColor {
                background-color:#0094ff;
              }
                </style>
                <script type="text/javascript">
                    function MyViewModel(){
                        var self =this;
                        self.list = ko.observableArray(['1', '2', '3']);
                    }
                    $(document).ready(function(){
                        var vm = new MyViewModel();
                        ko.applyBindings(vm);
                    });

                </script>
                <div>

                    Hello world<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                   <a href="http://www.google.com">Google Redirection</a>
                </div>

                <div class="floatingDiv">
                 <!-- ko foreach: list -->
               <table class="labelBox" data-bind="attr:{id: 'index' +$index() }" >
                     <tbody>
                         <tr   data-bind="attr:{id: 'header' +$index() }" ">
                             <th class="labelBoxHeaderColor"> 
                                 <table width="100%">
                                     <tbody>
                                         <tr>
                                             <td style="width: 5%;"> <span width="1" height="1"  data-bind="text: 'label' + $index()">
                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>  
                             </th>
                         </tr>
                         <tr>
                             <td> 
                                 <div style="height: 215px; overflow: auto;"> 
                                     <table  data-bind="attr:{id: 'mainArea' +$index() }"  >
                                         <tbody>
                                             <tr>
                                                 <td></td>
                                                 <td></td>
                                             </tr>
                                         </tbody>
                                     </table>
                                 </div> 
                             </td> 
                         </tr> 
                     </tbody>
                 </table>
                  <!-- /ko -->
                    </div>
            </body>
            </html>

I tried setting z-index for links more than z-index for the floatingDiv but that didnt help me. Can someone suggest on how I can make all the links/buttons present behind the chat area clickable in any scenario?

Transition issue with BlackBerry OS 10 browser

I have the following markup (and JS code):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Visibility test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<p id="vistest">This line should fade-in after 3 seconds</p>
<script>
setTimeout(function () {
    document.getElementById('vistest').className = 'active';
}, 3000);
</script>
</body>
</html>

and main.css:

#vistest {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#vistest.active {
    visibility: visible;
    opacity: 1;
}

You can view the example online (alas, JSFiddle doesn't work in the BB OS 10 browser, so you can't play with it).

In any browser I tried, this faded in the line of text after 3 seconds. However, on my BlackBerry phone (a Q10 with OS 10.3.1.1779) the text doesn't appear. On a test site, where this method should pop up a menu, other element styles like :hover and background-color were also not applied after changing the class of the to-be-faded-in element to active.

I tried to use the built-in web inspector of my phone, where it seems that disabling the transition style makes the element appear, but it doesn't disappear again when the transition rule is enabled again. Also, I managed to show the said menu when enabling desktop mode in the developer tools, but I can't reproduce this now. Also, forcing the users to manually enable desktop mode on their phones is of course a no-go.

Is this a browser bug? Can it be circumvented one way or another?

How to create an input field (HTML) that spans two lines

I want to be able to use an <input> field type of control but allow only two lines.

At the moment I am using two fields but was wondering if anyone can come up with a solution to allow input (similar to a textarea) but no more than two lines. I control the width etc of the field.

For reference, Jquery and Bootstrap 3 are loaded.

Any help much appreciated.

How to put the text in the center

how to put the text in the center carousel (bootstrap).Try to adjust the span element or?

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/1.jpg" class="img-responsive" alt="...">
      <div class="carousel-caption">
       <span><strong><p>Aktuelnosti u proizvodnji malina</p></strong>
          </span>
      </div>
    </div>

Wordpress Multi-site get-template-directory after upgrade different

One of the sites from our client got some nasty mail-scripts, we've cleaned those scripts and upgraded Wordpress from 3.1 to 4.2.

Now we have the following issue with our template, the files are not loading. The reason is a Wrong get_template_directory_uri(); URL.

It is a Wordpress Multi-Site, the file url now is: http://ift.tt/1BX74DW

But it is supposed to be: http://ift.tt/1BX74DY

Are there any ways to fix this issue? My php-knowledge is minimal, some ideas are appreciated!

Kind regards.

CSS selector not working in CakePHP when trying to style an image/div

I've recently installed CakePHP and this is my first time using it.

I'm creating a vertical navigation bar that will have a square logo on top. I need to be able to resize this logo. However, I cannot for the life of me seem to be able to select the corresponding div.

HTML

<nav>
    <div id="my-logo">
            <?= $this->Html->image("Company_Logo.png") ?>
    </div>
    <ul class="nav nav-pills nav-stacked span2">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
    </ul>
</nav>

CSS

#my-logo {
width: 256px;
height: 256px;
display: block;

}

In theory using a unique ID should work if all else fails, however, that isn't working either. I've also tried using a CSS class, descendants, etc.

When I inspect the image in a browser I find out that it's being controlled by base.css (I've been writing my CSS in cake.css, both files are included in the HTML page).

  img {
  display: inline-block;
  vertical-align: middle;
  }

I can modify this fine to resize the logo, so my conclusion is that it's over-writing my ID - but doesn't that go against the specificity principle of CSS?

I've searched to see if it's something to do with CakePHP, but haven't come up with answers.

What's going on here?

Crop out white components of an image

Is there a command in CSS or a library in JavaScript that crops out all the white in an image? I know that there are applications where I could manually do it, but I was just wondering if there was a to do it through code.

CSS unordered list indent space to the left and right

Basically I have navigation bar inside my "main" div, and its indented to the left.

enter image description here

I cannot figure out where does this indentation come from, I tried padding/margin 0, padding-left/margin-left 0 but still nothing, It won't move even one inch!

I even tried mozilla firebug inspector to try to find out if I selected it right, basically no solution.

And here is html/css file if someone would have time to take a sneaky-beaky onto HTML code:

body {
  background-color: #000;
  color: white;
}

/* Style for tabs */
#main {
  color: 111;
  width: 600px;
  margin: 8px auto;
}

#main > li, #main > ul > li
{ list-style:none; float:left; }

#main ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px 1px 1px 0;
  color:#FFF;
  background:#444;
}

#main ul a:hover {
  color:#FFF;
  background:#111;
}

#main ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
}

#main div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  background:snow;
  height: 300px ;
}

#main div a {
  color:#000; font-weight:bold;
}
#male, #female, #all, #new {
  color: black;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>2015 Race Finishers</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="my_style.css">
  </head>
  <body>
    <header>
      <h2>2015 Race Finishers</h2>
    </header>
    <div id="main">
      <ul class="idTabs">
        <li><a href="#male">Male Finishers</a></li>
        <li><a href="#female">Female Finishers</a></li>
        <li><a href="#all">All Finishers</a></li>
        <li><a href="#new">Add New Finishers</a></li>
      </ul>
      <div id="male">
        <h4>Male Finishers</h4>
        <ul id="finishers_m"></ul>
      </div>
      <div id="female">
        <h4>Female Finishers</h4>
        <ul id="finishers_f"></ul>
      </div>
      <div id="all">
        <h4>All Finishers</h4>
        <ul id="finishers_all"></ul>
      </div>
      <div id="new">
        <h4>Add New Finisher</h4>
        <form id="addRunner" name="addRunner" action="service.php" method="POST">
          First Name: <input type="text" name="txtFirstName" id="txtFirstName" /> <br>
          Last Name: <input type="text" name="txtLastName" id="txtLastName" /> <br>
          Gender: <select id="ddlGender" name="ddlGender">
          <option value="">--Please Select--</option>
          <option value="f">Female</option>
          <option value="m">Male</option>
          </select><br>
          Finish Time:
          <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2" />(Minutes)
          <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2" />(Seconds)
          <br><br>
          <button type="submit" name="btnSave" id="btnSave">Add Runner</button>
          <input type="hidden" name="action" value="addRunner" id="action">
        </form>
      </div>

    </div>
    <footer>
      <h4>Congratulations to all our finishers!</h4>
      <br>Last Updated: <div id="updatedTime"></div>
    </footer>
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
    <script src="scripts/jquery.idTabs.min.js"></script>
  </body>
</html>

This is just for learning purpose, but I would really love if I could somehow solve this problem, biggest thing is that I have no clue where does it come from.

fadein() not triggering but everything else is

I have this small snippet that triggers when I use socket.io:

socket.on('wheelspin', function (random) {
    var img = document.querySelector('img');
    $("img").fadeIn();
    console.log('wheelspin!!!');
    console.log('fadeIn');

        img.removeAttribute('style');
        var deg  = 0; 

        console.log('deg = ' + deg);
        console.log('Number = ' + random);
        if(random == 0) {var deg = 15; var css = '-webkit-transform: rotate(' + deg + 'deg);'; }
        img.setAttribute('style', css);
}

Whenever I run this, the webpage console displays the console.logs but it doesn't do the fadeIn. If I do the following outside the socket trigger it works:

$( document ).ready(function() {
    $("img").fadeIn();
 });

Any advice?

Thanks

How do I make a div triangle with concave left border?

I'm trying to make this shape in CSS. I haven´t been able to get it perfectly.

Why is it so hard to center divs in HTML?

Why does this code not center all three elements inside the outer div?

.center {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

<div class="center">
  <!-- container -->
  <h1 class="center">Headline</h1>

  <div class="center"><span>Some text</span></div>

  <form class="center">
    <button>Button</button>
  </form>
</div>

How can I do this, without specifying absolute values? Why is it so hard to center divs in HTML with hacks like margin-left: auto; and margin-right: auto;?

Edit: I added a span to the second inner div.

Filling in flexbox and retaining aspect ratio without JavaScript

Title says it all. I'm looking for a solution to make img tag fill parent (image and parent are of unknown size) while respecting aspect ratio, also without using background-size or any other workaround. I need the block with the image to have size of that picture (which background-size does not). I tried many things, like min-width and min-height, some strange things with zoom, many combinations of width/height: 100%/auto/0.

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

#container {
  border: 2px solid darkblue;
  height: 95%;
  width: 97%;
}

#pic {
  width: 100%;
  height: 100%;
}

<div id="container">
  <img src="http://ift.tt/1GQWixM" id="pic">
</div>

CSS animation not working on mobile

I have this code and it works on my pc browser, and galaxy note 4 phone. It animates a svg element. But when I test on a Moto X phone chrome browser, it does not work. Does anyone know why? I tried to put in all the prefix tags.

@keyframes example {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
#left_leg_group {
  animation: example 1s linear infinite;
  /* and here*/
  animation-timing-function: ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 50% -10%;
  -moz-transform-origin: 50% -10%;
  -ms-transform-origin: 50% -10%;
  -o-transform-origin: 50% -10%;
  transform-origin: 50% -10%;
}
#right_leg_group {
  animation: example 1s linear infinite;
  /* and here*/
  animation-timing-function: ease-in-out;
  animation-delay: 0.1s;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 50% -10%;
  -moz-transform-origin: 50% -10%;
  -ms-transform-origin: 50% -10%;
  -o-transform-origin: 50% -10%;
  transform-origin: 50% -10%;
}

<svg version="1.1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
  <g id="main">
    <g id="left_leg_group">
      <rect id="left_1" x="81" y="129" fill="#653508" width="17" height="40" />
      <rect x="81" y="141" fill="#3B2111" width="17" height="5" />
      <path id="foot" fill="#A07044" d="M98,180H75c0,0-4.875-0.021-4.875-5.625S75,169,75,169h23V180z" />
    </g>
    <g id="torso_group">
      <path fill="#653508" d="M138,141H63V65.021c0,0-1.751-29.521,37.167-29.521S138,65.021,138,65.021V141z" />
    </g>
    <g id="right_leg_group">
      <rect id="Left_3_" x="109" y="129" fill="#653508" width="17" height="40" />
      <rect x="109" y="141" fill="#3B2111" width="17" height="5" />
      <path id="foot_1_" fill="#AE7A49" d="M126,180h-23c0,0-4.875-0.021-4.875-5.625S103,169,103,169h23V180z" />
    </g>
    <g id="right_arm_group">
      <path fill="#653508" d="M138,73.21c0,0-13,0.123-13,4.957s13,5.824,13,5.824c1,0.01,0.725,0.01,1.005,0.01
                                        c17.58,0,31.747-14.25,31.747-31.83c0-17.19-13.752-31.2-30.752-31.81v11.43c10,1.98,19.67,10.43,19.67,20.55
                                        C159.67,63.15,149,72.05,138,73.21z" />
      <path fill="#AE7A49" d="M133.33,25.75c0,5.25,4.835,5.72,4.835,5.72c0.67,0.07,1.835,0.18,1.835,0.32V20.36
                                        c0-0.01-0.605-0.02-0.995-0.02c-0.28,0-0.478,0-0.757,0.01C138.248,20.35,133.33,20.5,133.33,25.75z" />
    </g>
    <g id="left_arm_group">
      <path fill="#653508" d="M41.206,52.34C41.206,42.22,51,33.77,61,31.79V20.36c-17,0.61-30.876,14.62-30.876,31.81
                                        C30.124,69.75,44.229,84,61.809,84c0.281,0-0.025,0,0.975-0.01c0,0,12.984-0.99,12.984-5.824c0-4.833-12.946-4.956-12.946-4.956
                                        C51.821,72.05,41.206,63.15,41.206,52.34z" />
      <path fill="#AE7A49" d="M67.422,25.75c0,5.25-4.711,5.72-4.711,5.72C62.041,31.54,61,31.65,61,31.79V20.36
                                        c0-0.01,0.481-0.02,0.871-0.02c0.28,0,0.416,0,0.695,0.01C62.566,20.35,67.422,20.5,67.422,25.75z" />
    </g>
    <g id="head_group">
      <circle id="face" fill="#AE7A49" cx="95.207" cy="70.543" r="28.042" />
      <path id="Right_Eye" fill="#200200" d="M82.25,65h-2.37c0-1.31-1.07-2.38-2.38-2.38s-2.38,1.07-2.38,2.38h-2.37
                                c0-2.62,2.13-4.75,4.75-4.75S82.25,62.38,82.25,65z" />
      <path id="left_eye_1" fill="#200200" d="M106.25,65h-2.37c0-1.31-1.069-2.38-2.38-2.38c-1.31,0-2.38,1.07-2.38,2.38h-2.37
                                c0-2.62,2.13-4.75,4.75-4.75S106.25,62.38,106.25,65z" />
      <circle id="mouth" fill="#200200" cx="89.104" cy="70.938" r="5.271" />
      <polygon id="forehead" fill="#915B36" points="104,51 81,51 81.688,49 103.312,49        " />
      <polygon id="forehead_1" fill="#915B36" points="110,56 76,56 76.75,54 109.125,54       " />
    </g>
  </g>
</svg>

Validation Message on HTML form

I want to validate each field of a HTML form onblur. The validation message gets displayed but it doesn't use the complete horizontal space of the box. I want it to be something like this.

Customer Name: TextBox *Customer Name Must Not Be Blank

But it displays:

 Customer Name: TextBox *Customer 
                         Name Must
                         Not Be
                         Blank

This is my Code:

<form  method="post" name="customer" action="newcustcheck.php" onblur="return Validate()" onKeyUp="return Validate()">
    <table width="300">
        <tr>
            <td>Customer Name:</td>
            <td><input type="text" name="name" ></td>
            <td> <label class="message" id="message" ></td>
        </tr>

CSS

form {
width: 400px;
background:#FFD700;
color: #000000;
font: small Verdana, sans-serif;
position: absolute;
top: 200px;
left: 550px;}

.message{color:#FF0000;
font-size: small;
font-weight: bold;  }

JavaScript

if(x==null || x==""){
    document.getElementById('message').style.visibility="visible";
    document.getElementById('message').innerHTML="Customer Name must not be blank";

}
else{
    document.getElementById('message').style.visibility="hidden";
    }

How to hide a button from jQuery Dialog UI?

I am trying to hide a button from the jQuery UI dialog button when the dialog open. Then I want to show it if a condition met.

I wrote code in the open method that will add a css code to disable the button. I have also tried to call .show() and .hide() methods but that still did not work.

I am not sure how I would be able to hide/show a button in jQuery

Here is my code

function initializeDialog(){ 

    //initialize the dialog box
    $(".ICWSinboundDialog").dialog({
        resizable: true,
        width: 500,
        modal: true,
        autoOpen: false,
        stack: false,
        open: function(){
            $('#btnAnswerAndShow').css("display","none");

        },
        buttons: [
            {
            id: "btnAnswerAndShow",
            text: "Answer - Display",
            click: function(e) {
                  //do something
                }
            },
            {
            id: "btnAnswer",
            text: "Answer",
            click: function(e) {
                    //do something

                }
            },
            {
            id: "btnVM",
            text: "Send to Voice Mail",
            click: function(e) {
                    //do something
                }
            },
            {
            id: "btnHold",
            text: "Hold",
            click: function(e) {
                //do something
                }
            }
        ]
    });
}

The DIV for the dialogs are created on the fly like so

        var prefix = 'ICWS_';
        var interactionId = '123456';
        var dialogID = '#' + prefix + interactionId;

        //create a dialog box if one does not already exists
        if( $(dialogID).length == 0) {
            $('#ICWSDialogs').append('<div class="ICWSinboundDialog icwsDialogWrapper" id="'+ prefix + interactionId +'" style="display: none;"></div>');
        } 
        //initialize the dialog after creating the new dialog
        initializeDialog();

And later down the code I can open this dialog like so

if( $(dialogID).length > 0) {
     $(dialogID).dialog('open');
}

this is my HTML markup

<div id="ICWSDialogs"></div>

Do I create a custom theme or modify css in a genesis child theme?

I've just got started with Wordpress and it was suggested to use a child theme so I purchased the Magazine Pro theme. This has got the perfect layout for my needs but I find some of the padding is too intense and in particular when I have a leaderboard banner at the top my text for my blog title is wrapping.

I want to reduce my title text and reduce the padding. I know how to do that, I've got plenty of experience in front end dev but I just don't know if I should create a child theme (or grandchild theme) based off Magazine Pro or whether I should modify the css file directly in my Magazine Pro css file? What I'm worried about it overwriting my changes by any updates to the child theme.

What's the best course of action here, I'm really keen to get cracking on some content but my site looks a bit crap with the header text wrapping.

Floated elements 100% height dynamic wrapper

I have 2 columns within a wrapper. One column is taller than the other. I would like the shorter column given a height of 100% so that it matches the taller column. All heights are dynamic so can not be defined in pixels.

DEMO http://ift.tt/1fS3d0T

<div class="wrapper">
    <div class="col1"> short column // not much content </div>
    <div class="col2"> tall columns // lots of content </div>
</div>

You will see in the example the red column is taller than the blue column. How do i set the blue column to 100% height of the wrapper.

I know I can easily do this by defining a height, this isn't an option. I can also do this if I use tables for layout, which I do not want to do. I can also do this by using javascript to get the height from the tall column and then set the height of the smaller column. I would like a CSS only approach though. Thanks.

Bootstrap with Jssor slider with grid class alignment for mobil

Hi use Jssor slider on my bootstrap site, and took some elements and made a class for them. so i better could control the css my self. but now when i view them on ipad and mobil they are not align anymore. it look great on desktop and large desktop.

its the classes slide1_top and slider1, i guess somehow i need to make a grid for them with class row and .col-xs-12 .col-sm-6 .col-lg-8. i think

i am not a specialist i anyway, just trying to learn. I hope it make sense how i tell it

Link to Site

Kind Regards

Thomas

<div u="slides" style="cursor: move; position: absolute; right: 0px; top: 0px; width: 1600px;
        height: 500px; overflow: hidden;">
        <div>
            <img u="image" src="img/banner/Banner-smartpc.jpg" />
            <div u="caption" t="NO" t3="RTT|2" r3="137.5%" du3="3000" d3="500" style="width: 1920px; height: 300px; top: 100px; left: 600px;">
            </div>
                <div class="slide1_top">
                        <h2>VELKOMEN TIL SERVICEPC</h2>
            </div>
            <div class="slide1">
                        <h4>Hos Service-PC yder vi service af alt PC udstyr.    fejlfinding og reparation til en fornuftig pris.</h4>  
        </div>
        </div>
        <div>

My CSS for the 2 classes:

 .slide1_top h2 {

font-family: oswald,"Open Sans",Helvetica,Arial,sans-serif ;
position: absolute; 
width: 480px; 
height: 120px; 
top: 100px; 
left: 1020px; 
padding: 5px;
text-align: right; 
line-height: 60px; 
text-transform: uppercase; 
font-size: 40px; 
text-align: center;
color: #FFFFFF;

}
.slide1 h4 {
font-family: oswald,"Open Sans",Helvetica,Arial,sans-serif ;
color: #FFFFFF;
position: absolute; 
width: 480px; 
height: 120px; 
top: 180px; 
left: 1000px; 
padding: 5px;
text-align: right; 
line-height: 36px; 
font-size: 26px;">


}

Why browser does so weird moves line?

example

.table{
    width: 500px;
}
.table td{
    vertical-align: middle:
}
.logo{
    vertical-align: middle;
    display: inline-block;
}

<table class="table" border="1">
    <tr>
        <td>
            <span class="logo">
                <img src="http://ift.tt/1LC1QR0" alt="" />
            </span>
            <span>Ололо лололо олололо лололо лолололо лололлололл лолололлл оллолло лоллогллол лололо</span>
        </td>
    </tr>
</table>

Why is the first line posted normally, and the other at the bottom? I tried different "display", "float" and "clear" attributes but nothing happened

How can I display form with select options as horizontaly lists?

It is posible by css to display a form with select as vertical lists following code ?

<form action="">
<select class="selectWidth" name="size" id="size" type="text">
<optgroup label="Standard">
    <option value="800x600" >800x600</option>
    <option value="1024x768" >1024x768</option>
    <option value="1280x960" >1280x960</option>
    <option value="1280x1024" >1280x1024</option>
    <option value="1400x1050" >1400x1050</option>
    <option value="1600x1200" >1600x1200</option>
    <option value="2560x2048" >2560x2048</option>
</optgroup>

<optgroup label="Widescreen">
    <option value="1024x600" >1024x600</option>
    <option value="1280x800" >1280x800</option>
    <option value="1366x768" >1366x768</option>
    <option value="1440x900" >1440x900</option>
    <option value="1600x900" >1600x900</option>
    <option value="1680x1050" >1680x1050</option>
    <option value="1920x1080" >1920x1080</option>
    <option value="1920x1200" >1920x1200</option>
    <option value="2560x1440" >2560x1440</option>
    <option value="2560x1600" >2560x1600</option>
 </optgroup>

 <optgroup label="Mobile">
     <option value="240x320" >240x320 (ipod)</option>
     <option value="320x480" >320x480 (iphone)</option>
     <option value="640x960" >640x960 (iphone4)</option>
     <option value="640x1136" >640x1136 (iphone5)</option>
     <option value="1024x1024" >1024x1024 (ipad)</option>
</optgroup>
</select>
</form>

I would like to be displayed like this:

Standard: 800x600 1024x768 1280x960 .....

Widescreen: 1024x600 1280x800 .... 2560x1600

Mobile : 240x320 320x480 640x960 ..... 1024x1024

HTML5 images not aligning correctly with same css

I am trying to align two images in two divs. These are the two images, they are the same size, resolution, and the aligning is perfect when doing it in photoshop: enter image description here

But when I reference them in my index.html like so:

<!-- Intro Header -->
<div class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
                </div>
            </div>
        </div>
    </div>
</div>

With the exact same css classes:

.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://ift.tt/1fRZIre) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}


.acerca {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
     background: url(http://ift.tt/1IC0MX3) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.acerca .acerca-body {
    display: table-cell;
    vertical-align: middle;
}

.acerca .acerca-body .brand-heading {
    font-size: 40px;
}

.acerca .acerca-body .acerca-text {
    font-size: 18px;
}

And the images do not align as you can see in this picture: enter image description here

I can't post images because of lacking reputation points, this is only my second question.

Do anyone know how to align them? Thanks.

Scrolling circle bars on the right side?

I am trying to create a scrolling circles that navigates each section of my page like this: http://goo.gl/kAhj8J

However for some reason I don't how to start it with jQuery.

Here's my Markup:

<section class="background-fixed img-1" >
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-2">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-3">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-4">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>

Here's the JSFIDDLE: http://ift.tt/1BLiQRn

Any ideas?

Show CSS menu item selected by default using Jquery

I have created a menu bar using CSS and HTML. Menu bar contains sub-menu as well.

I am able show menu-item on hover of main menu item etc. But now I need Menu Item 2 (or one menu item), to be hovered/selected by default, (as soon as the page loads) and its related sub-menu items to be shown by default as well. Please guide me through the same.

I have tried adding a class on the first item using Jquery :

$(document).ready(function(){
  $("get the id of the menu item").click(function(){
       $(this).parent().find("id of the menu item").addClass('class to be added');   
  }); //but what should be written in the class so that menu item is active and its sub menu items are shown by default

});

HTML Code :

<ul id="menu-main" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-24"><a href="#">Test1</a></li>
  <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="#">Test2</a>
<ul class="sub-menu">
 <li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="#">Sub Menu1</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="#">Test3</a>
<ul class="sub-menu">
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="#">S1</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="#">S2</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#">S3</a></li>
<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="#">S4</a></li>
<li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="#">S5</a></li>
</ul>
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#">Test4</a></li>
<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="#">Test5</a></li>
<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="#">Test6</a></li>
</ul>

And the CSS :

ul.sub-menu{position:relative;
z-index:40;}
ul#menu-main ul {
display: none;
}

ul#menu-main li:hover > ul {
display: block;background-color: red;
} ul#menu-main {



position: relative;
display:inline-table;
top: 42px;
position: relative;
float:right;
margin-bottom: 0px;
clear: both;
padding: 0 0 0 20px;
background: transparent!important;
list-style: none;
height: 60px;
font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
font-size: 18px;
}
 ul#menu-main:after {
 content: ""; clear: both; display: block;
}
ul#menu-main li {
float: left;
line-height: 60px;
z-index: 40;
margin-left: 15px;
}

 ul#menu-main li a:hover {
    color: #fff;
background: #f29919;

}
ul#menu-main ul li{ border-bottom:1px solid #eee;}
ul#menu-main ul li a:hover {
color: #818181;
background: #eee;

}


ul#menu-main li a {
display: block;
font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
padding: 0 20px;
color: #818181;
text-decoration: none;
}
ul#menu-main ul {
border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
ul#menu-main ul li {
float: none; 

position: relative;
list-style:none;
/*width: 180px;*/
line-height: 37px;
margin-left: 0px;
}ul#menu-main ul li:first-child{border-top: 1px solid white;}

ul#menu-main ul ul li a:hover {
color:white;
}

ul#menu-main ul ul {
position: absolute; left: 100%; top:-1px;
}
ul#menu-main li.current-menu-item > a{
color: #fff;
}


ul#menu-main ul ul li:hover a{
color: #333333;
}

Capybara - how to check for text on submit button?

I have a submit button with text and I want to check for both.

i.e. the actual page has:

<input class="button" type="submit" value="Continue" tabindex="3"
name="nav[save]"></input>`

So I've tried

  it "I can see the Continue button" do
    expect(page.find('input[type="submit"]').find('input[value="Continue"]')).to be
  end

but I get

Unable to find css "input[value=\"Continue\"]"

and

expect(page.find('input[type="submit"]')).
  to have_selector('input[value="Continue"]')

but I get

expected to find css "input[value=\"Continue\"]" but there were no matches

CSS website layout adaptive to content (SOLVED)

I have searched many articles to find this answer but have not been able to find a solution:

I cannot manage to get the wrapper to expand with it's content...

Here is the structure:

 * {
padding: 0;
margin: 0;
}  
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
.wrapper {
width: 95%;
margin: 0 auto;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}

.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:visited {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: #E8E8E8;
color: #999;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
/* ------------------------ End Nav Bar -----------------*/
/* ------------------------ Start outer content -----------------*/
#container {
  overflow: hidden;
  width: 100%;
}

#outercontent {
background-color: #e8e8e8;
width: 97,5%;
padding: 13px;
min-height: 655px;
margin-bottom: 13px;
border: 1px solid #AEAEAE;

  background-color: orange;
  /*padding-bottom: 100em;*/
  /*margin-bottom: -500em;*/
}
* html #outercontent {height: 655px} /* IE Min-Height Hack */ 
/* ------------------------ End outer content -----------------*/
/* ------------------------ Start Columns -----------------*/
#centercolumn { /* Parent Wrapper for inside boxes background-color:    #333333; */ 
background-color: #333333;
margin: 0px 0px 0px 0px;
display: inline; /* IE Hack */
padding: 7px;
width: 80%;
min-height: 630px;
float: left; 

  background-color: red;
 /* padding-bottom: 250em; */
 /* margin-bottom: -250em; */

}

.p {
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif;
}

table.db-table-products { border-right:1px solid #ccc; border-bottom:1px   solid #ccc; background-color:#FFF; overflow:hidden;}
table.db-table-products th  { padding:5px; border-left:1px solid #ccc;   border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma,   Geneva, sans-serif, bold; background-color: #FFF; color: #000;}
table.db-table-products td  { padding:4px; border-left:1px solid #ccc;   font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border-  top:1px solid #ccc; background-color:#999;}

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif;
display: table-caption;

}

table.db-table-products hr { 
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

/* unvisited link */
table.db-table-products a:link {
color: #FFDD38;
}

/* visited link */
table.db-table-products a:visited {
color: #D8C150;
}

/* mouse over link */
table.db-table-products a:hover {
color: #D8B70F;
}

/* selected link */
table.db-table-products a:active {
color: #D8B70F;
}

.rightcolumn {
margin: 0px 0px 13px 13px;
padding: 7px;
display: inline; /* IE Hack */
width: 210px;
min-height: 160px;
float: left;
border: 1px solid #AEAEAE;
background-color: #ccc;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
}
/* ------------------------ End Columns -----------------*/
/* ------------------------ Start Footer -----------------*/
#footer {
border: 1px solid #AEAEAE;
padding: 15px;
margin-bottom: 13px;
background-color: #e8e8e8;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;

   background-color: blue;
 /* padding-bottom: 100em; */
 /* margin-bottom: -200em; */
}
/* ------------------------ End Footer -----------------*/

h1 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
}
.float {
float: left;
padding: 0px 10px 0px 0px;
}
img {
border: none;
}
/* Links */
a:link {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #333333;
background-color: #fff;
text-decoration: none;
}

And here it is HTML code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://ift.tt/kkyg93">
 <html xmlns="http://ift.tt/lH0Osb">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <!-- <link href="table-css/table-db.css" rel="stylesheet" type="text/css"> -->
 <link rel="stylesheet" type="text/css" href="main4.css" />
 <title>Products Market</title>
 </head>
 <body>
 <div id="container">
 <!-- Start Wrapper -->
 <div class="wrapper">
 <!-- Start Header -->
 <div class="header"> <img src="images/logo.jpg" alt="Logo" width="1200" height="150" /> 
 </div>
 <!-- End Header -->
 <!-- Start Navigation Bar -->
 <div class="nav-bar">
 <ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">24h Monetary Market</a></li>
  <li><a href="#">Actual Monetary Market</a></li>
  <li><a href="#">Products Market</a></li>
  <li><a href="#">Jobs Market</a></li>
  <li><a href="#">Contact me</a></li>
 </ul>
 </div>
 <!-- End Navigation Bar -->
 <!-- Start Outer Content -->

 <div id="outercontent">
 <div id="centercolumn">
  <h1><b><u>Welcome</u></b></h1>
  <p>  
 <?php include 'test.php'; ?>
 </p><br />
 </div>  

 <!-- Start Right Content -->
 <div class="rightcolumn">
  <h1><u><b>About Me</b></u></h1>
  TEXT </div>
  <div class="rightcolumn">
  <h1><u><b>Search</b></u></h1> 
    </div>
    <br />
    </div>

  <!-- End Right Content -->
  </div>

  <!-- End Outer Content -->
  <!-- End Outer Content -->
  <!-- Start Footer -->
  <div id="footer"> &copy; Copyright with <a href="http://ift.tt/1diZWpl">Code-Sucks.com</a> 2006-2015 </div>
  <!-- End Footer -->
  </div>
  <!-- End Wrapper -->
  </div>
  </div>

  </body>
  </html>

I would like that outer part of layout reach the same height of content? Could you help me pls?

Thx

Here we go with the solution to the problem. It's a little bit different from the one suggested by petebolduc, but his idea helped me to find a mix solution.

So this is the code:

* {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}

.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:visited {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: #E8E8E8;
color: #999;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
/* ------------------------ End Nav Bar -----------------*/
/* ------------------------ Start outer content -----------------*/
#container {
  overflow: hidden;
  width: 100%;
}
.wrapper {
vertical-align:top;
width: 95%;
margin: 0 auto;
}

#outercontent {
background-color: #e8e8e8;
width: 97.85%;
padding: 13px;
/* min-height: 655px;*/
margin-bottom: 13px;
border: 1px solid #AEAEAE;
/* height:auto;*/
/* position:relative;*/
/*text-align:left;*/
vertical-align:top;

/*      background-color: orange; */
  /*padding-bottom: 100em;*/
  /*margin-bottom: -500em;*/
}
/** html #outercontent {height: 655px;} */
/* ------------------------ End outer content -----------------*/
/* ------------------------ Start Columns -----------------*/
.lefthalf_col {
width:79.5%;
display:inline-block;
position:relative;
left:0;
top:0;
vertical-align:top;
}

.righthalf_col {
width:19.2%;
display:inline-block;
position:relative;
/*  right:0;*/
left:.9%;
vertical-align:top;
}
#centercolumn { /* Parent Wrapper for inside boxes background-color:  #333333; */ 
background-color: #333333;
/* margin: 0px 0px 0px 0px;*/

padding: 7px;
width:100%;
min-height: 630px;
height:auto;
position:relative;
top:0;

/* width: 75%;*/
/* min-height: 630px;*/
display: inline-block; /* IE Hack */
/* top:0;*/
/* float: left; */

/*      background-color: red; */
 /* padding-bottom: 250em; */
 /* margin-bottom: -250em; */
}
.rightcolumn {
margin: 0px 0px 13px 13px;
padding: 7px;
/* display: inline-block; /* IE Hack */*/
/* width: 210px;*/
width:100%;
min-height: 160px;

position:relative;
top:0;
border: 1px solid #AEAEAE;
background-color: #ccc;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
}

.p {
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif;
}


table.db-table-products { border-right:1px solid #ccc; border- bottom:1px solid #ccc; background-color:#FFF; overflow:hidden;}
table.db-table-products th  { padding:5px; border-left:1px solid #ccc;  border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma,  Geneva, sans-serif, bold; background-color: #FFF; color: #000;}
table.db-table-products td  { padding:4px; border-left:1px solid #ccc;  font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border- top:1px solid #ccc; background-color:#999;}

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif;
display: table-caption;

}

table.db-table-products hr { 
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

/* unvisited link */
table.db-table-products a:link {
color: #FFDD38;
}

/* visited link */
table.db-table-products a:visited {
color: #D8C150;
}

/* mouse over link */
table.db-table-products a:hover {
color: #D8B70F;
}

/* selected link */
table.db-table-products a:active {
color: #D8B70F;
}
/* ------------------------ End Columns -----------------*/
/* ------------------------ Start Footer -----------------*/
#footer {
border: 1px solid #AEAEAE;
padding: 15px;
margin-bottom: 13px;
background-color: #e8e8e8;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;

 /* background-color: blue; */
 /* padding-bottom: 100em; */
 /* margin-bottom: -200em; */
}
/* ------------------------ End Footer -----------------*/

h1 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
}
.float {
float: left;
padding: 0px 10px 0px 0px;
}
img {
border: none;
}
/* Links */
a:link {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #333333;
background-color: #fff;
text-decoration: none;
}

And here is the html code:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
   <html xmlns="http://ift.tt/lH0Osb">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <link rel="stylesheet" type="text/css" href="main7.css" />
   <title>Products Market</title>
   </head>
   <body>
   <div id="container">
   <!-- Start Wrapper -->
   <div class="wrapper">
   <!-- Start Header -->
   <div class="header"> <img src="images/logo.jpg" alt="Logo" width="100%" height="150" /> 
   </div>
   <!-- End Header -->
   <!-- Start Navigation Bar -->
   <div class="nav-bar">
   <ul class="nav-links">
   <li><a href="#">Home</a></li>
   <li><a href="#">24h Monetary Market</a></li>
   <li><a href="#">Actual Monetary Market</a></li>
   <li><a href="#">Products Market</a></li>
   <li><a href="#">Jobs Market</a></li>
   <li><a href="#">Contact me</a></li>
   </ul>
   </div>
   <!-- End Navigation Bar -->
   <!-- Start Outer Content --> 
   <!--  <div class="tablegraph">
   <div class="row"> -->
   <div id="outercontent">
   <div class="lefthalf_col">
   <div id="centercolumn">
   <h1><b><u>Welcome</u></b></h1>
   <p>  
   <?php // include 'query.php';
   include 'query2.php'; ?>  ‫
   </p><br />
   </div>
   </div>
   <!-- Start Right Content -->
   <div class="righthalf_col">
   <div class="rightcolumn">
   <h1><u><b>About Me</b></u></h1>
   TEST
   </div>
   <div class="rightcolumn">
   <h1><u><b>Search</b></u></h1>
   <br />
   TEST
   </div> 
   </div> <!-- half_col -->


   <!-- End Right Content -->
   </div>
   <!-- End Outer Content -->
   </div>

   <!-- Start Footer -->
   <div id="footer"><p> &copy; Copyright with <a href="http://ift.tt/1diZWpl" target="_blank">Code-Sucks.com</a> 2006-2015 </p>
   <p>Thanks to <a href="http://ift.tt/fyw30c" target="_blank">Stackoverflow.com</a> guys! </p>

   </div>
   <!-- End Footer -->

   </div>
   <!-- End Outer Content -->
   </div>
   <!-- End Wrapper -->
   <!--</div>
   </div>-->

   </body>
   </html>

In the end problem seemed to be with "float" attribute. Changing that and positioning the DIVs I needed for content into wrapper DIV part and into outer content DIV part, the problem was resolved.

Thx for the help.

back button and menu navigation

Ok, I'm tryng to design a mobile version of my site and am stuck on my menu.

Basically at the moment I've got a simple onclick running on the page so if the user decides they don't want to view click whats on the menu then they can click the page and the menu dissappears.

But what i really want is a way of utilising the back button on the browser to return from the menu. I'm guessing it takes some kind of event or setting something, but am at a loss.

I'm a newbee, so be gentle, I'm hoping the community can help me a little as to where to start.

Main question is how to utilise back button on a browser within my html or javascipt, any ideas as to how to proceed would be greatly appreciated.

image rotation design by css and js

I wanted to rotate an image by css and javascript. I do not have much knowledge in css. I have tried by transform. my css :

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Here is the fiddle before applying rotating css.

And here is the fiddle after applying css.

I want output like this attachment

EDIT:

For more clear insight Image rotation is working fine. I am having problem in css. When i am adding css class it is overlaping top buttons. I need to rotate and adjust image in a way that image never overlap my buttons and my page footer.

Any suggestion will be appreciated.

I am trying to make a div disappear on click and make another div appear in its place I have wrote and run code using javascript;

document.getElementById("nextOneButton").onclick = function() { document.getElementById("mainFrameOne").style.display="none"; document.getElementById("mainFrameTwo").visibility="visible"; }

//mainFrameTwo is initially set hidden in terms of visibillity //nextOneButton is on top of the mainFrameOne in terms of position, when //clicked it should move to next frame. Some what like a slide show

Make images responsive using css with WP reponsive theme

Ok, I'm using a responsive WP Theme and just discovered my images are not responsive. I understand why but my limited CSS is hindering me big time.

All the images have fixed width and heights. I want all images to be responsive so can I not simply override all img tags with new CSS to make them responsive? Do I need a widget to do this?

I've been trying simple CSS entries like

I can directly affect the size of each image using something similar to above but no matter what combination of width, height, max-height and %'s I use the images stay a fixed size and distort the page when mobile.

Would appreciate any help.

Thanks Damien

dimanche 10 mai 2015

Debug on Apple Watch: Error Launching 'xxx WatchKit Extension' - Couldn’t communicate with a helper application

I am trying to debug on my apple watch (real device, not simulator). My main project runs on my iPhone fine, and the corresponding watch app shows up on my watch. I want to attach the debugger to my watch app, so in Xcode I choose WatchKit App scheme, then choose my iPhone. I hit the run button, and an error window pops up, with title Error Launching 'xxx WatchKit Extension' and description Couldn’t communicate with a helper application.

Both my main app and watch app run fine if I build and run by choosing the main app scheme, however I wish to attach the debugger to my watch app scheme. Does anyone know what might be causing this error? Thanks in advance.

Xcode 6 Crash on Launch error EXC_BAD_ACCESS (SIGSEGV)

Process:               Xcode [3797]
Path:                  /Applications/http://ift.tt/1kAnkB8
Identifier:            com.apple.dt.Xcode
Version:               6.3.1 (7703)
Build Info:            IDEFrameworks-7703000000000000~4
App Item ID:           497799835
App External ID:       812230896
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           Xcode [3797]
User ID:               501

Date/Time:             2015-05-10 18:38:38.606 -0400
OS Version:            Mac OS X 10.10.3 (14D136)
Report Version:        11
Anonymous UUID:        00D6503E-DBD7-2FE7-3ECF-A8EF678DFC38

Sleep/Wake UUID:       2788F068-DB50-4E00-9B74-E4FC95AC2582

Time Awake Since Boot: 26000 seconds
Time Since Wake:       1700 seconds

Crashed Thread:        7  Dispatch queue: com.apple.dt.Xcode.IBSourceCodeClassProvider

Exception Type:        EXC_BAD_ACCESS (SIGSEGV)
Exception Codes:       KERN_INVALID_ADDRESS at 0x0000000000000000

VM Regions Near 0:
--> 
    __TEXT                 0000000109d67000-0000000109d68000 [    4K] r-x/rwx SM=COW  /Applications/http://ift.tt/1kAnkB8

Application Specific Information:
ProductBuildVersion: 6D1002

Thread 0:: Dispatch queue: com.apple.main-thread
0   libobjc.A.dylib                 0x00007fff8b34e0d8 search_method_list(method_list_t const*, objc_selector*) + 58
1   libobjc.A.dylib                 0x00007fff8b35fa21 getMethodNoSuper_nolock(objc_class*, objc_selector*) + 89
2   libobjc.A.dylib                 0x00007fff8b35f89b lookUpImpOrForward + 614
3   libobjc.A.dylib                 0x00007fff8b35f617 lookUpImpOrNil + 20
4   libobjc.A.dylib                 0x00007fff8b359970 _class_resolveInstanceMethod(objc_class*, objc_selector*, objc_object*) + 108
5   libobjc.A.dylib                 0x00007fff8b35f799 lookUpImpOrForward + 356
6   libobjc.A.dylib                 0x00007fff8b352408 class_getInstanceMethod + 60
7   com.apple.Foundation            0x00007fff9205920c NSKeyValueMethodForPattern + 139
8   com.apple.Foundation            0x00007fff92059d89 +[NSObject(NSKeyValueCodingPrivate) _createValueGetterWithContainerClassID:key:] + 319
9   com.apple.Foundation            0x00007fff92059bc8 -[NSObject(NSKeyValueCoding) valueForKey:] + 270
10  com.apple.dt.IDEKit             0x000000010b012249 -[IDENavigableItem childItems] + 111
11  com.apple.dt.IDEKit             0x000000010b020d9a -[IDEFileNavigableItem identifierForChildItem:] + 154
12  com.apple.dt.IDEKit             0x000000010b0206a6 -[IDENavigableItemArchivableRepresentation initWithNavigableItem:] + 368
13  com.apple.dt.IDEKit             0x000000010b03081f -[IDENavigableItem archivableRepresentation] + 50
14  com.apple.dt.IDEKit             0x000000010b1d8093 -[IDEEditorArea selectedNavigableItemArchivedRepresentation] + 106
15  com.apple.dt.IDEKit             0x000000010b17b521 __50-[IDENavigatorArea _handleCurrentNavigatorChanged]_block_invoke + 87
16  com.apple.dt.DVTFoundation      0x0000000109eb45c8 -[_DVTAsynchronousRequest _invokeBlock:] + 58
17  com.apple.Foundation            0x00007fff9207c41b __NSFireDelayedPerform + 364
18  com.apple.CoreFoundation        0x00007fff8e2682e4 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ + 20
19  com.apple.CoreFoundation        0x00007fff8e267f73 __CFRunLoopDoTimer + 1059
20  com.apple.CoreFoundation        0x00007fff8e2db53d __CFRunLoopDoTimers + 301
21  com.apple.CoreFoundation        0x00007fff8e223608 __CFRunLoopRun + 2024
22  com.apple.CoreFoundation        0x00007fff8e222bd8 CFRunLoopRunSpecific + 296
23  com.apple.HIToolbox             0x00007fff90a0956f RunCurrentEventLoopInMode + 235
24  com.apple.HIToolbox             0x00007fff90a092ea ReceiveNextEventCommon + 431
25  com.apple.HIToolbox             0x00007fff90a0912b _BlockUntilNextEventMatchingListInModeWithFilter + 71
26  com.apple.AppKit                0x00007fff931149bb _DPSNextEvent + 978
27  com.apple.AppKit                0x00007fff93113f68 -[NSApplication nextEventMatchingMask:untilDate:inMode:dequeue:] + 346
28  com.apple.dt.DVTKit             0x000000010a4badda -[DVTApplication nextEventMatchingMask:untilDate:inMode:dequeue:] + 237
29  com.apple.AppKit                0x00007fff93109bf3 -[NSApplication run] + 594
30  com.apple.AppKit                0x00007fff93086354 NSApplicationMain + 1832
31  libdyld.dylib                   0x00007fff964605c9 start + 1

Thread 1:: Dispatch queue: com.apple.libdispatch-manager
0   libsystem_kernel.dylib          0x00007fff96456232 kevent64 + 10
1   libdispatch.dylib               0x00007fff96bafa6a _dispatch_mgr_thread + 52

Thread 2:
0   libsystem_kernel.dylib          0x00007fff9645594a __workq_kernreturn + 10
1   libsystem_pthread.dylib         0x00007fff8e19440d start_wqthread + 13

Thread 3:
0   libsystem_kernel.dylib          0x00007fff9645594a __workq_kernreturn + 10
1   libsystem_pthread.dylib         0x00007fff8e19440d start_wqthread + 13

Thread 4:
0   libsystem_kernel.dylib          0x00007fff9645594a __workq_kernreturn + 10
1   libsystem_pthread.dylib         0x00007fff8e19440d start_wqthread + 13

Thread 5:: Dispatch queue: IBPlatformToolRequestQueue.IBCocoaTouchFramework-EightAndLater
0   libsystem_kernel.dylib          0x00007fff96456682 read + 10
1   com.apple.dt.IBFoundation       0x0000000110b15c13 -[IBMessageSendChannel sendMessage:returnValue:context:error:arguments:] + 1252
2   com.apple.dt.IDE.IDEInterfaceBuilderKit 0x0000000115397ef0 -[IBAbstractMessageChannelInterfaceBuilderToolProxy renderImagesForRequests:] + 228
3   com.apple.dt.IDE.IDEInterfaceBuilderCocoaTouchIntegration   0x000000011a239625 0x11a0b5000 + 1590821
4   com.apple.dt.IDE.IDEInterfaceBuilderKit 0x00000001153dba79 -[IBRemoteViewImageRequestProcessor performRequestOnBackgroundThreadWithData:platformTool:] + 89
5   com.apple.dt.IDE.IDEInterfaceBuilderKit 0x0000000115231ccb -[IBPlatformToolRequester processRequests] + 1079
6   com.apple.dt.DVTFoundation      0x0000000109f72cbc __DVTDispatchAsync_block_invoke + 106
7   libdispatch.dylib               0x00007fff96bb1323 _dispatch_call_block_and_release + 12
8   libdispatch.dylib               0x00007fff96bacc13 _dispatch_client_callout + 8
9   libdispatch.dylib               0x00007fff96bb0365 _dispatch_queue_drain + 1100
10  libdispatch.dylib               0x00007fff96bb1ecc _dispatch_queue_invoke + 202
11  libdispatch.dylib               0x00007fff96baf6b7 _dispatch_root_queue_drain + 463
12  libdispatch.dylib               0x00007fff96bbdfe4 _dispatch_worker_thread3 + 91
13  libsystem_pthread.dylib         0x00007fff8e196637 _pthread_wqthread + 729
14  libsystem_pthread.dylib         0x00007fff8e19440d start_wqthread + 13

XCODE crashes on launch.. please help! I've reinstalled Xcode, deleted .userdata and even tried to remake the project by transferrin the existing files, but the new project yields the same error.

seems to be a corruption issues somehow following these specific files, but need to retrieve them.. thanks in advance!