how to change margin when the image width changes?

i have a fixed header and when i resize the browser window the logo on the header resizes and now i want to change the margin of the logo when the image is resized how do i do that?

this is the jquery that i use to resize the image

$(window).on('load resize', function() {

    var maxsize = 2560;
    var screenwidth = $(this).width();
    var factor = 0.27*screenwidth-(maxsize-screenwidth)*0.05;
    if (factor > 2560) factor = 2560;

    $('#logo').css('width', factor)
  });
});

CSS:
#logo{
        margin-top:5px;
        margin-left:10px;
        float:left;
        cursor: pointer;
        display:block;
        min-width:220px;
        height: auto;
        width: auto\9; /* ie8 */
}

Css element Max-Size

What is major differences in using these css rules

div{width:100px; overflow:hidden;}

And

div{max-width:100px; overflow:hidden!important;}

Is there going to be any cross-compatibility Issues.

css media queries, one or many for mobile optimization

I know that using media queries the mobile first way should make the website faster on mobile devices. I wonder if there is a difference in using a lot of media queries, like this:

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

instead of using one big one for all the desktop styles, like this:

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

Which is better, for the performance, or does it matter? I think that the first approach is more easy to read when dealing with lots of styles.

Move DIV to Right form Bottom with relative to Top DIV

I have following Scenario

http://ift.tt/1HDFdZj

<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>    
</div>

I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom.

Current CSS that is applied goes as

.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; 
width:100px;
float:left;
}

#second_div {
background: cyan;
height: 300px;
width:100px;
clear:left;    
}
#third_div{
width:100px;
float:left;
background:blue;
}

SEO Impact of Bootstraps visible - lg/md/sm/xs - classes

I was wondering if anyone knows about the SEO impact of using bootstraps visible classes for creating a responsive website? I have created a new website with Bootstrap using these classes. On most of the pages the main content is on the left and then there are a number of links on the right side of the page. My structure is like this:

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        //Main content here on left of page
    </div>

    <div class="col-lg-6 col-md-6 visible-lg visible-md">
        //Content on right of page for large and medium devices
    </div>

    <!--SMALL STARTS HERE-->      
    <div class="col-sm-12 visible-sm">
        //Same content on right of page for small devices
    </div>

    <!--EXTRA SMALL STARTS HERE-->    
    <div class="col-xs-12 visible-xs">
        //Same content on right of page for extra-small devices
    </div>
</div>

So my question is if this is a bad idea or not? I am worried that Google/Bing/Yahoo will see this as duplicate content on my pages and penalise me for it. Is this an issue I should be worried about? Thanks.

Adjust parent DIV height to inner content (RSS feeds)

I'm embedding a RSS feed into my html site using the Google Feed API. I tried to make the parent-DIV adjust its height with jquery:

function setHeightParent() {
                $("#Parent").height($("#feed").height() + 200);
                }

This results in a parent-DIV with a height of 200 px. I think the height is calculated before the "feed" div has any content therefore no height.. What am I doing wrong, how can I make it take the height of the final "feed" div?

Navigation bar made of images

I have five different images being used as buttons for my website's navigation. I want them to be inline horizontally and centred in the browser window. They looked fine until I added code to have text appear under each button when hovering over each image. The buttons are now all aligned vertically in the middle of the window.

In html file:

   <div class="nav">
        <div class="container">
            <ul>
            <div class="about">
            <li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li>
            <p class = "text1"> About </p>
            </div>

            <div class="resume">
            <li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li>
            <p class = "text2"> Resume </p>
            </div>

            <div class="home">
            <li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li>
            <p class = "text3"> Home </p>
            </div>

            <div class="portfolio">
            <li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li>
            <p class = "text4"> Portfolio </p>
            </div>

            <div class="contact">
            <li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li>
            <p class = "text5"> Contact </p>
            </div>
        </ul>
        </div>

In CSS file:

.nav {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav .container {
   font-size: 12px;
  font-family: 'Shift', sans-serif;
  color: #5a5a5a;
  font-weight: lighter;
}

.nav .container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav .container li {
  display: inline;
}

The following is a sample of the hover code for each image:

.nav .container .about .text1 {
   position:relative;
   bottom:0px;
   text-align: center;
   visibility: hidden;
}

.nav .container .about:hover .text1{
   visibility: visible;
}

Any help would be much appreciated! Thank you.

Safari is not showing a webpage

The webpage is not showing in Safari, but all other browsers are rendering it properly like --> Firefox, Chrome (I am not counting IE, I need not check it in IE). I just want the reason why the webpage is not being shown in Safari. What may be the possible reason?

<!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" />
<title>One-Great-Thing</title>

<style>
body {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

#image-slider {
    position: relative;
}

#image-slider > div {
    overflow: hidden;
}

#container {
    position: relative;
    overflow: hidden;
}
#container .content{
    position: absolute;
    top: 10%;
    left: 0;
    color: #000;
    text-align: center;
    width: 100%;
    font-size: 6em;
    padding: 80px 0px;
    font-weight: bold;
    background: rgba(255,255,255,0.6);
    text-shadow: 3px 3px rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
#container .content a{
    color: #000;
        font-family: 'myriad-std-tilt', sans-serif;
    text-decoration: none;
    font-size: 18px;
}

#container .content a.round img:hover{
 border: 3px solid #003366;
 border-radius: 50%;
}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    // IE detect
    function iedetect(v) {

        var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
        return r.test(navigator.userAgent);

    }

    // For mobile screens, just show an image called 'poster.jpg'. Mobile
    // screens don't support autoplaying videos, or for IE.
    if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

        (adjSize = function() { // Create function called adjSize

            $width = $(window).width(); // Width of the screen
            $height = $(window).height(); // Height of the screen

            // Resize image accordingly
            $('#container').css({
                'background' : 'url(ogt.png)', 
                'background-size' : 'cover', 
                'width' : $width+'px', 
                'height' : $height+'px'
            });

            // Hide video
            $('video').hide();

        })(); // Run instantly

        // Run on resize too
        $(window).resize(adjSize);
    }
    else {

        // Wait until the video meta data has loaded
        $('#container video').on('loadedmetadata', function() {

            var $width, $height, // Width and height of screen
                $vidwidth = this.videoWidth, // Width of video (actual width)
                $vidheight = this.videoHeight, // Height of video (actual height)
                $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

            (adjSize = function() { // Create function called adjSize

                $width = $(window).width(); // Width of the screen
                $height = $(window).height(); // Height of the screen

                $boxRatio = $width / $height; // The ratio the screen is in

                $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

                // Set the container to be the width and height of the screen
                $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 

                if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
                    // Set the width of the video to the screen size multiplied by $adjRatio
                    $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
                } else {
                    // Else just set the video to the width of the screen/container
                    $vid = $('#container video').css({'width' : $width+'px'});
                }

            })(); // Run function immediately

            // Run function also on window resize.
            $(window).resize(adjSize);

        });
    }

});
</script>
</head>

<body>
<div id="container">
    <video autoplay loop muted style="width: 100%;" poster="ogt.png">
        <source src="OGT-home.ogv" type="video/ogg" />
        <source src="OGT-home.mp4" type="video/mp4">
        <source src="OGT-home.webm" type="video/webm">
    </video>
    <div class="content">
    <a class="round" href="index2.html"><img src="128x128.png"></a><br /><br />
    <a class="ytube" href="http://ift.tt/1DKIXm0">Watch Us On <br /><img src="images/ytube.png" /></a><br /><br />
        <a href="index2.html"> Enter Into The Website</a>
    </div>
</div>

</body>
</html>

Above is the code of the page . BTW the image files and video files needed I am not providing here, but I am assuring all the links are perfect as checked in Firefox and Chrome.

Another thing I want to mention, I found that if I remove the absolute position attribute of the content block, then It's showing the content block perfectly in Safari(though video is not showing, may be I found somewhere the HTML5 autoplay doesn't work on Safari).

Please provide me a solution for Safari.

CSS background photo and scrolling not working properly on ios (safari) and other mobile devices

I'm trying to make a website mobile compatible and I'm struggling with the page scrolling mechanism (which the client doesn't want me to change). Here's a link to a simple page that shows the feature I'm struggling with: http://ift.tt/1brSlV3

If you view it on a laptop or desktop, it works as expected i.e. the images remain fixed while the blue & black divs slide over the images. The images also change as expected. I'm not sure how to get it to work on mobile devices.

• Android devices: As tested with chrome browser on these devices, it works decently (and I can live with this). Instead of the images maintaining a fixed position, they scroll with the divs. So you simply see photos before and after the appropriate divs (instead of the divs sliding over the images).

• Iphone & Ipad: On these devices (viewed with a Safari browser), it simply looks atrocious and I need to fix this. The images end up in seemingly weird positions and with strange sizes. Pls note that it works well on Safari on mac. I'll try to get a screenshot from iphone asap. Perhaps someone can figure this out by simply looking at the code or visiting that URL with an ios device.

Here's the code on jsfiddle: http://ift.tt/1bECP8P

<!DOCTYPE html>
<html>
  <head>
    <style>
      .pic {
        width:800px;
        height:600px;
        margin: 0px auto;
        background-position-x: 50%;
        background-position-y: 0%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position:relative;
      }

      #pic1 {
        background: url('http://ift.tt/1brSjfV') no-repeat center center fixed; 
      }

      #pic2 {
        background: url('http://ift.tt/1bECNhf') no-repeat center center fixed;
      }

      .page {
        width:800px;
        height:400px;
        margin: 0px auto;
      }

      .blue {
        background-color: blue;
      }

      .black {
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="page black"></div>
    <div class="pic" id="pic1"></div>
    <div class="page blue"></div>
    <div class="pic" id="pic2"></div>
    <div class="page blue"></div>
    <div class="page black"></div>  
  </body>
</html>

Confused about setting width for jquery dropdown

With help from tutorials I have produced this code shown below. Where I have got stuck is that I don't want it to be 100% width. I only want the button to have 20px padding either side of the text. Then I want the dropdown that comes up to take up whatever width it needs to with 20px either side of the max width too.

Can anyone help me do this? I tried assigning padding: 20px to the ul but it didn't work.

$(function () {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function (e) {
        $('.click-nav .js ul').toggle();
        $('.clicker').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function () {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});

* {margin: 0; padding: 0;}
.click-nav ul {
    position:relative;
}
.click-nav ul li {
    position:relative;
    list-style:none;
    cursor:pointer;
}
.click-nav ul li ul {
    position:absolute;
    left:0;
    right:0;
}
.click-nav ul .clicker {
    position:relative;
    color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
    background:#196F9A;
}
.click-nav ul li a {
    display:block;
    padding:8px 10px;
    background:#FFF;
    color:#333;
    text-decoration:none;
}
.click-nav ul li a:hover {
    background:#F2F2F2;
}
/* Fallbacks */
 .click-nav .no-js ul {
    display:none;
}
.click-nav .no-js:hover ul {
    display:block;
}

<script src="http://ift.tt/1q8wkLp"></script>
<div class="click-nav">
    <ul class="no-js">
    <li> <a href="#" class="clicker">Any Time</a>

        <ul>
            <li><a href="#">Any Time</a>
            </li>
            <li><a href="#">Past 3 days</a>
            </li>
            <li><a href="#">Past 5 days</a>
            </li>
        </ul>
    </li>
</ul>
</div>

scroll page then at certian position scroll element

I am at a bit of a loss for how how to do this.

I have a web page. I want a user to scroll down, then at a specific distance from the top I want the mouse scroll to effect an elements position (making it appear as thought that element is scrolling). then when that element hits a position (ie top: -500) I want the scroll to apply to the main webpage again. Any thoughts on how I can do this?

Im working on a fiddle now but not having any luck, I will post when I have something to show

Edit: The beginning of a solution/sudo code http://ift.tt/1bEDvv9

Attached is an image of one area in which I am applying this.

//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px'); 

var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;

// variable to stop function from being replayed on scroll when scrolling image
var isScrollingImage = false;

// disables scroll on body
var disableScroll = function() {
    document.body.style.overflow='hidden';
}
// enables scroll on body
var enableScroll = function() {
    document.body.style.overflow='auto';
}
//change position of background along y axis with scroll
var scrollImage = function() {
    console.log("called");
   isScrollingImage = true;
   var pageFeature = document.getElementById("inner");
   var pageFeaturePosition;
   pageFeature.style.backgroundPositionY=parseInt(-scrollY / 10) + "px";
    //if (background is scrolled to bottom) {
    //    enableScroll();
    // }
}

//when element gets to center of viewport and animation is scroll is not on element
//call scrollImage()
function checkPosition() {
    if (scrollY > 720 && !isScrollingImage) {
        disableScroll();
        scrollImage();
    }
    //isScrollingImage = false;
}

//once out of view port will have to bring the image back down, 
//scroll image will only happen on the way down

document.addEventListener('scroll', checkPosition);

Move first div below second div via CSS only

I have 2 divs inside a container like this:

<div id="container">
   <div id="first">Hello World</div>
   <div id="second">I want to be at the top</div>
</div>

I want to align the first div below the second div without changing the HTML. How is this possible?

Here is my CSS:

#container {
    float:left;
    width:100%;
}

#first {
    float:left;
    width:100%;
    height:200px;
}

#second {
    float:left;
    height:200px;
    width:100%;
}

I am aware I can set position:fixed to #second and align it to the top but is there any other way to achieve this?

Here is a jsFiddle.

Scroll to div then fix it to top of page

I currently have a div (#sticky) within the right bar of my page and would like to fix it to the top of the page once I scroll to it. The div (#sticky) I want fixed to the top of the page sits about 1000px down the page.

HTML:

<div id="right-bar">
  <div id="sticky-anchor"></div>
  <div id="sticky"></div>
</div>

CSS:

#right-bar {
  display: inline-block;
  float: left;
  width: 336px;
  height: 10000px;
  margin-left: 15px;
}

#sticky {
  display: block;
  width: 334px;
  height: 600px;
  background-color: white;
  border: 1px solid #e5e5e5;
  margin-top: 15px;
}

#sticky .stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

JAVASCRIPT: (within head tags)

<script>
  function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function () {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>

Not quite sure what I am doing wrong, but once I scroll to the div, I bypass it without it getting stuck to the top of the page.

Any and all help is appreciated!

Jquery, get values from tag

I have list with id myid. I can get values li values like this $('#' + i).text(). But I am using $( '#myid' ).sortable() . How can get values in currently displayed order? Demo here. I need to implement function in stop:

 <ul id='myid'>  
        <li id='1'>value 1</li>   
        <li id='2'>value 2</li>  
        <li id='3'>value 3</li>  
        <li id='4'>value 4</li>  
        <li id='5'>value 5</li>  
    </ul>

How to show horizontal scrollbar if user resizes the window created on fullpage.js

I created a very simple webpage that uses fullPage.js script. Basically it works as the sample page provided by the author. Now, I would like to put there min-width on the page, so that when user decides to resize the window horizontally and make it small enough - instead of shrinking the divs inside - I would just display browser-native horizontal scrollbars. I tried to add either:

body {
    min-width: 900px;
    width: 100%;            
}

or the same in other css tag:

.section {
    text-align:center;
    width: 100%;
    min-width: 900px;
}

but none of those worked well. I found this communication with the author of the plugin, but I'm not exactly sure if his response is helpful enough. Can you help me with implementation of that feature? Thanks!

background image and text horizontal nav bar

I'm a student relatively new to CSS3. I'm trying to properly style a horizontal nav bar using a background image icon and text links at the block level, and to which are inline as well. Also, I'm trying to do the same on the hover states as well.

Here's a link to what I'm stuck with so far:

http://ift.tt/1ddI1B3

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 60px;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  max-height: 100px;
  max-width: 704px;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  max-height: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  position: relative;
  display: block;
  text-align: center;
  max-height: 60px;
  max-width: 60px;
  text-decoration: none;
  color: #F6EF1B;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  display: block;
  background-color: #F6EF1B;
  background-repeat: no-repeat;
  background-position: 0%;
  text-decoration: none;
  line-height: 2.5em;
  color: #004E27;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

UPDATE:

Ashwani corrected the positioning of the nav bar, thank you sir! Now, I'm just trying to achieve the state to be the same by allowing the clickable hover link area to fill the whole block of each button region. The hover width is correct, but the bg image is over center of the link text. I want it to position just like in it's normal "up" state.

Here's the updated sample:

http://ift.tt/1ddI1B3

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  height: 100%;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  height: 100%;
  width: 100%;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100%;
  max-width: 140.8px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-color: #F6EF1B;
  background-position: 50% 50%;
  background-size: 40px 40px;
  text-decoration: none;
  line-height: 1.1em;
  color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

Why does my text div spill out past my container div?

I really need your help,

I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?

Here is the CSS markup:

    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    display: none;
}

#container {
    background: #FFF;
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    height: 100%;
    position: relative;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
}
#text {

    height: 100%;
    border: 1px solid red;

}

HTML:

<div id="wrapper">

    <div id="container">

        <div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>

        <div id="text"><p>test</p></div>

    </div>

</div>

Here is a snapshot of the problem:

A 'light swtch' to toggle text and background colours for a full page using CSS

I'm trying to create a 'light switch' with CSS to toggle the colours of a page. I've made a bad start using Joe's excellent response to this question: Change background on button click, using CSS only?

Is it possible to target the whole page rather than content inside divs? Also: can I do anything more to disguise the button as a link?

http://ift.tt/1GtdGZ3

HTML:

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS:

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

Thank you for looking - and apologies, I'm really naive.

Merging Cells in Bootstrap Table

I have troubles merging Cells in Bootstrap Table I've found an example here.

But I don't want the merging executed by clicking a button, instead I want to merge automatically.

Here's my code:

<table id='ViewTable'
       data-toggle='table'
       data-url='func/json.php?id=1'
       data-class='table table-hover table-condensed'
       data-striped='true'
       data-show-header='false'>
    <thead>
    <tr>
        <th data-field='picture'></th>
        <th data-field='description'></th>
        <th data-field='value'></th>
    </tr>
    </thead>
    </table>

    <script>
    $(document).ready(function() {
        $('#ViewTable').bootstrapTable('mergeCells', {
                index: 0,
                field: 'picture',
                rowspan: 12
        });
    });
    </script>

Any suggetions?

Full screen 7x5 grid with Foundation SCSS

Hope there's someone here that have done what I'm currently trying to accomplish. I'm learning some new JS frameworks and I've got an idea to make full screen calendar with topbar fixed as my homepage. This calendar should take full width and full height available on normal monitors.

I've managed to make it full width using Foundation SCSS by changing this in _settings.scss:

$row-width: 100%;
$total-columns: 7;

My main question is - what's the optimal way for creating 5 rows (it's always 5 rows for single month) that will always take full remaining height of the screen? (remaining because of that topbar navigation that is fixed).

I'm ok with SCSS so all suggestions are welcome.

Thanks!

JSF + bootstrap - pattern for bean/form validation

I have my form styled with bootstrap, where e.g. input is styled with some css class. What would be the most proper/recommended solution, for marking field or bounding selector as invalid (adding e.g. css class "has-error").

Currenty, I found something like this:

<div class="form-group ${bean.nameValid ? '' : 'has-error'}">

So, basically presence of css class is based on particular method result. Does this problem has any better solution or it means that I should provide validation method for any bean's field as some sort of BeanNameFormClass or DTO? Especially when validating single field via ajax.

Position panel elent in the center. Foundation framework

Hi and thanks in advance for your time,

I'm trying to put a round container with call to action in the middle of the screen. It is not working with margin: auto and the only way is to insert values manually.

My index.html

<section class="main_screen">
   <div class="panel small-4 column bingo Absolute-Center">
        <h3>Корпоративные тренинги по тайм-менеджменту</h3>
        <h4>2-дневный тренинг с последующим сопровождением в работе и гарантией результата</h4>
        <a href="#" class="button success center">Отправить заявку</a>
   </div>
</section>

My css:

.main_screen {
    margin-top: 50px;
    background: url(../images/bg.png) no-repeat center;
    color: blue;
    height: 500px;
}

.bingo {
    left: 32%;
    top: 6%;
    border-radius: 50%;
    height: 450px;
    width: 450px;
    vertical-align: middle;
    text-align: center;
    background: rgba(39, 40, 105, 0.4);
    border-width: 0px;
    color: #333333; }
  .panel > :first-child {
    margin-top: 30%; }
  .panel > :last-child {
   margin-bottom: auto; }
}

Is there more elegant way to code this? The goal is that the element would be in the center no matter of the screen size 768px+. For smaller i will add media querry so the element would be not rounded.

Scrollable table contents html/css

I'm trying to make my table contents scrollable, I've had to create a table inside one of the table rows which means if the table has more than one row the contents isn't aligned with the correct heading as showing in the fiddle;

<table>
    <thead class="panel-heading">
        <tr>
            <th>Client</th>
            <th>Client</th>
        </tr>
    </thead>
    <tbody class="panel-content">
        <tr>
            <td>
                <div class="scrollit">
                    <table>
                        <tr>
                            <td>Alex Best</td>
                            <td>Yahoo Answers</td>
                        </tr>
                        <tr>
                            <td>Andrew Smith</td>
                            <td>Monkey Tube</td>
                        </tr>
                        <tr>
                            <td>James Harris</td>
                            <td>Limewire</td>
                        </tr>
                        <tr>
                            <td>Mike Anderson</td>
                            <td>Twitter</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

tbody div{
     overflow-x: hidden;
     overflow-y: scroll;
     height: 300px;
}

http://ift.tt/1HDmj4z

Bootstrap personal profolio template

I am just getting started with Bootstrap, I am thinking of learning it by doing a responsive bootstrap personal portfolio page. Could you kindly recommend me some simple(but maybe unique) template(s) to start? Thanks!

CSS some space at the end of the page, reason floats?

I used the class "section", inside the section are 2 elements. The first one is a div with the class "content" and the secound one is the aside. I doesn't gave the section a fixed high (the section should grow with the content inside the container "content" & the aside). I floated the container "content" to the left side and the aside to the right side.

My Problem: I gave the section a margin-bottom of 25px, but nothing happens. Thats why i marked the section with a bgcolor (bgcolor = red). But the section is only as high as the aside.

*{
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    color: white;
    text-decoration: none;
}

body{
    background-color: rgb(38, 38, 38);
}

nav{
    width: 100%;
    background-color: rgb(25, 25, 25);
}


.navbar_ul{
    list-style-type: none;
    width: 800px;
    width: 1000px;
    margin: 0 auto;
}

.navbar_li{
    display: inline-block;
    margin-top: 10px; 
    margin-bottom: 10px;
    margin-right: 30px;
}

a{
    color: #666;
    display: block;
    transition: color 0.2s ease-in-out 0s;
}

a:hover{
    color: #CCC;
}

section{
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 50px;
    width: 1012px;
    height: 1000px;
    background-color: red;
}

.content{
    width: 750px;
    border: 3px solid rgb(30, 30, 30);
    background-color: rgb(75, 75, 75);
    float: left;
}

aside{
    width: 200px;
    float: right;
}

p{
    padding: 10px;
    width: 730px;
    text-align: justify;
}

.asd{
    padding: 10px;
    text-align: justify; 
}

.header{
    width: 100%;
    background: linear-gradient(to bottom, #191919 0px, #373737 100%) repeat scroll 0% 0% transparent;
    text-align: center;
    padding: 10px 0px;
}

<!DOCTYPE html>

<html>
    <head>
        <title>XXX</title>
        <link rel="shortcut icon" href="title.png" type="image/png" />
        <link rel="stylesheet" type="text/css" href="index.css">
        <meta charset="utf-8" /> 
    </head>
    
    <body>
        <nav>
            <ul class="navbar_ul">
                <li class="navbar_li"><a href="http://www.google.de">Seite erstellen</a></li>
                <li class="navbar_li"><a href="http://www.google.de">Seite löschen</a></li>
                <li class="navbar_li"><a href="http://www.google.de">Seite bearbeiten</a></li>
            </ul>
        </nav>
        
        <section>
            <div class="content">
                <div class="header">Überschrift des Artikels</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="header">Schritt 1 "erstellen"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatpsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="header">Schritt 2 "bearbeiten"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="header">Schritt 3 "löschen"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                
                
                
                
                
                
                
                
                
                
                
                <div class="header">Schritt 4 "mit Bild"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <aside>
            <a class="asd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a>
            </aside>
        </section>
    </body>
</html>

How can we remove space between two li?

I have the following HTML:

<ul class="navlist">
    <li><a href="index.html">Home</a></li>
    <li><a href="agenda.html">Agenda</a></li>
    <li><a href="presenters.html">Presenters</a></li>                       
</ul>

And I'm using this CSS:

.navlist {  
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
    height: 33px;
}

.navlist li a {   
    text-decoration: none;
    font-size: 18px;
    color: white;
    background: #63B3E4;
    padding: 10px 45px 12px;
}

.navlist li a:hover {
    color: #63B3E4;
    background: white;
}

.navlist li {display: inline;}

As shown in a fiddle, there is whitespace between the li elements. How do I remove that whitespace?

Bootstrap custom navbar with images

i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.

I cant get them 4 images to line up in a row.

I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?

Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.

greeting Queen

.navbar {
max-width:960px;
text-align:center;
}

.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}

.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}

.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;

<body>
<div class="navbar">
        <div class="navbar-special">
            <ul class="nav">
<li class="home"><a href="#"><img src="http://ift.tt/1IVZxDT" /></a></li>
<li class="search"><a href="#"><img src="http://ift.tt/1bEmu44" /></a></li>
<li class="logo"><a href="#"><img src="http://ift.tt/1IVZxDX" /></a></li>
<li class="partner"><a href="#"><img src="http://ift.tt/1bEmwsF" /></a></li>
        </div> <!-- div closing navbar -->
    </div><!-- div closing navbar -->
</body>

http://ift.tt/1IVZwjg

Fixed text centered on background image

How to position text to be fixed and centered on full page background image. Position absolute doesn't work (my text is on top of the page) and position fixed works but text goes down when I scroll page down. I found tutorial on css tricks but I can't make this to work. Anyone have an idea?

HTML:

<div class="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="banner-content">
                    <h1>Lorem ipsum</h1>
                    <hr />
                    <p>Lorem ipsum dolor sit...</p>
                </div><!-- end banner-content -->
            </div><!-- end col-md-12 !-->
        </div><!-- end row !-->
    </div><!-- end container !-->
</div><!-- end intro !-->

CSS:

.intro {
    width: 100%;
    height: 100%;
    background: url(../images/banner.jpg) no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.banner-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}
.banner-content h1 {
    font-size: 4em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-style: italic;
}
.banner-content p {
    color: #fff;
    text-align: center;
    font-style: italic;
    font-size: 1.7em;
}
.banner-content hr {
    width: 100%;
    max-width: 750px;
    border: 1px solid #fff;
}

Why I can't applied spacing between two divs

I have 5 div, and between first and second I have spacing set on button2 class margin-top:10px; But that's applied only between second and first div, why I don't have spacing between thrid and second ... I don't know why I have little spacing between third and fourth divs.

JSFIDDLE: http://ift.tt/1bEjncm

HTML

<div class="contactdiv"><div class="ppdiv">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren ppdiv--><div class="button2">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2--><div class="button2">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2--><div class="button2">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2--><div class="button2"><button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2-->
</div><!--Zatvoren contactdiv-->

CSS:

.contactdiv{
    width:271px;
}
.ppdiv{
    overflow: hidden;
    margin-top:20px;
    margin-left: 20px;
}
.ppenvelope, .pptext {
    float: left;
    border: none;
    height: 48px;
}
.ppenvelope{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
}
.ppdiv img{
    padding:10px;
}
.button2 img{
    padding:10px;
}

.pptext{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
    color:#4c6974;
}
.pptext2{
    display: inline-block;
     color:#4c6974;
       padding-top: 13px;
       padding-bottom:13px;
       padding-left: 13px;
        padding-right: 13px;
}
.button2{
    margin-top: 10px;
    margin-left:20px;
}

Showing the desktop version of a fully responsive website on tablets

How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)

Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.

I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?

I feel like I'm missing a very obvious trick!

Multi-line CSS gradient text not working

I'm writing a theme for WordPress and am making use of Webkit text gradients for links. It's working so far, but as soon as the link wraps around to the next line, only the top half of the link is visible.

Example code:

CSS:

#page a:link {
  background: -webkit-repeating-linear-gradient(top, #cade43, #8a953e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
}

#page {
    background: black;
    width: 100px;
}

HTML:

<div id="page">
    <a href="#">This is a long link that stretches over two lines</a>
</div>

JSFiddle of the example: http://ift.tt/1IVUFi7

The image above is what appears in my browser (Chrome 43.0.2357.37 beta-m). I've selected the last two lines with the cursor to show that they do exist and aren't cut off by the DIV

What can I do to fix this?

Canvas - Arc suddenly vanishes

So I'm making a basic clock just for fun with minute and second arcs. However, after a new minute starts, the minute arc quickly vanishes from the canvas. Why?

Here is a JSFiddle: http://ift.tt/1IVUD9P

HTML

<canvas id="clock"></canvas>

CSS

body,
html {
    width: 100%;
    height: 100%;
    margin: 0px;
    font-family: Josefin Sans, Helvetica, sans-serif;
    background: #1A4978;
}

JS

    var canvas = document.getElementById('clock');
    var context = canvas.getContext('2d');

    function setDimensions() {
        context.canvas.width = window.innerWidth * 0.69;
        context.canvas.height = window.innerHeight;
    }

    setDimensions();

    var x = 0.5 * canvas.width;
    var y = canvas.height / 2;
    var radius = 0.25 * context.canvas.width;
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    var startAnimationMinuteDone = false;
    var firstTime = false;

    function updateMinute(start, end) {
        if (startAnimationMinuteDone == false && firstTime == false) {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

        setDimensions();
        context.beginPath();
        context.strokeStyle = "#FF7519";
        context.arc(x, y, radius, start, end);
        context.lineWidth = 20;
        context.stroke();
        context.closePath();
    }

    function updateSecond(start, end) {
        context.beginPath();
        context.strokeStyle = "#FFA319";
        radius = 0.25 * context.canvas.width + 20;
        context.arc(x, y, radius, start, end);
        context.stroke();
        context.closePath();
    }

    function minuteAntialias(start, end) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        setDimensions();
        context.beginPath();
        context.strokeStyle = "#1A4978";
        context.arc(x, y, radius, start, end);
        context.lineWidth = 20;
        context.stroke();
        context.closePath();
    }

    function secondAntialias(start, end) {
        context.beginPath();
        context.strokeStyle = "#1A4978";
        radius = 0.25 * context.canvas.width + 40;
        context.arc(x, y, radius, start, end);
        context.stroke();
        context.closePath();
    }

    $(document).ready(function() {
        var time = 0;
        var count = 0;

        function clock() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDay();
            var hour = date.getHours();

            if (hour > 12) {
                hour -= 12;
            }

            var minute = date.getMinutes();
            var second = date.getSeconds();

            var newestMinuteStart = (time + 1.5) * Math.PI;
            var newestSecondStart = (time + 1.5) * Math.PI;

            var cachedTime;

            if (count <= minute / 30 && !startAnimationMinuteDone) {
                time += 0.01;
                updateMinute(1.5 * Math.PI, (time + 1.5) * Math.PI);
                count += 0.01;
                cachedTime = time;

            } else if (!startAnimationMinuteDone) {
                time = 0;
                count = 0;
                startAnimationMinuteDone = true;

            } else if (count <= second / 30 || second == 0 && startAnimationMinuteDone) {
                time += 0.01;
                updateSecond(1.5 * Math.PI, (time + 1.5) * Math.PI);
                secondAntialias(0, 2 * Math.PI); // Arc matching background colour gives the effect of greater sharpness
                count += 0.01;

                if (second == 0) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    startAnimationMinuteDone = false;
                    firstTime = true;
                    time = 0;
                    count = 0;
                }

                console.log(second);
                console.log(startAnimationMinuteDone);
            }
        }

        setInterval(clock, 10);
    });

How to use a custom toggle switch in jquery mobile

I am using jQuery Mobile as my framework and I do not like the look of the default toggle switch. I wish to use a purely CSS switch. I have found some great examples that I would like to use (basically a square switch with the ability to see both texts at the same time but show which one is active). I have even just copied and pasted the code into my code and it is always completely distorted, not even recognizable. I am starting to believe it is not possible.

If you know of a way can you please explain how to do it?

Responsive CSS works everywhere except the Internet Browser on Droid Phone (Galaxy S4)

I have got my website working everywhere except the default "Internet" browser on the Droid phone. It looks great in Chrome on the phone. It passes all the Google tests for mobile ready. It looks good on iPhone. Here's the site ... http://ift.tt/1DKrWbs.

It's driving me crazy. Does anyone know why?

CSS mobile version of web site is zoomed in when loaded (only whatchable with mobile device)

I have set up a mobile web site of http://bit.ly/1Hwbn94 ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.

It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.

But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.

Btw, I have set

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.

So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.

Thank you in advance, mates.

How to make JavaScript work when button is pressed?

I am a bit of a newbie in JS and not too sure what I'm doing.

I have created a button

<div id="btn">
    <a href='dg-quiz-maker.js' class='button'>ATTEMPT A QUIZ</a>
</div>

I want when the user presses the button, the JS dg-quiz-makes.js file appears. I'm not sure how to I do it. Please help.

Select label of a checked checkbox that is wrapped over the checkbox with pure CSS [duplicate]

This question already has an answer here:

• Is there a CSS parent selector? 16 answers

I need to select a label of a checked checkbox. This would be super easy if the label was underneath the checkbox. One could use the + selector then.

But what about a structure like this:

<label>
    <input type="checkbox" checked>
</label>

Am I right that it turned impossible now to select the label of the checked input with pure CSS?

Seems odd to me because I like the above structure more.

CSS label for tabs affects outer label

http://ift.tt/1GumMY6

<label>Stuff for Tab One</label>

In the above example, tabs label has some style. And I want another generic label within the tab content but with a different style. But the generic label gets the same style as the tab label. How to escape the style from that

Any suggestions?

How do I add a margin to a CSS webkit scrollbar?

Here's my site with the current webkit scrollbar: http://ift.tt/1zYUQUE

I'd like to create a gap between the scrollbar and the right edge of the screen.

How do I achieve this?

Thanks in advance,

Will

JavaScript plugin initialization in Polymer Shadow DOM

I tried to use this plugin with Polymer, but it did't work. I use a Javascript version of this plugin. I have also used domReady: function{}. What is the problem?

Shadow DOM:

    <link rel="import" href="../../bower_components/polymer/polymer.html">
<script src="../../assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
<polymer-element name="paper-scrollbar">
    <template>
        <!-- begin element CSS -->
        <link rel="stylesheet" href="../../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css">
        <style>
            .scrollbar-container {
                width: 100%;
                height: 100%;
                overflow: auto;
                position: relative;
                margin: 0;
            }
        </style>
        <!-- end element CSS-->
        <!-- begin element HTML -->
        <div class="scrollbar-container">
            <content></content>
        </div>
        <!-- end element HTML -->
    </template>
    <!-- begin element JavaScript -->
    <script>
        Polymer('paper-scrollbar', {
            ready: function () {
                var container = document.querySelector('.scrollbar-container');

                Ps.initialize(container);
            }
        });
    </script>
    <!-- end element JavaScript -->
</polymer-element>

JavaFX TableView change selected cell colour

I have a JavaFX TableView and a ListView and they both use custom cell factories. In particular I have overridden updateItem method in order to bind a particular CSS class based on cell value.

This is part of my CSS file:

.tissueCell {
    -fx-text-fill: #F5AD11;
}

.tissueCell:selected {
    -fx-background-color: #F5AD11;
    -fx-text-fill: white;
}

.significantDataCell {
    -fx-background-color: yellow;
    -fx-text-fill: black;
}

.significantDataCell:selected {
    -fx-background-color: white;
    -fx-text-fill: black;
}

For the ListView everything work flawlessly: text is displayed with the proper colour and when the cell is selected the text becomes white and the background is filled with proper colour.

I am experiencing problems with the TableView instead. When unselected the text in the cell is displayed with the chosen colour, but when the cell is selected the background is filled with default JavaFX colour for selected table cells background and the text colour remains #F5AD11 (it does not become white).

The same happens with TableCells that use .significantDataCell class. Cells are displayed properly with yellow background and black text, but when selected nothing changes, not event the background this time.

Any ideas? I did a lot of research but couldn't find any working solution.

javafx 8 create images on button on hover using css

I'm making a Mario themed application, and I would like the buttons to have the effect that when the user hovers over it with his/her mouse, a mushroom (image) appears next to the text of the button, and disappears when the mouse moves away.I'm trying to do this using css.

How can one do this?

Virtual Keyboard hides fields/textareas/contenteditable/

i know there are already some stackoverflow threads about the problem that the virtual keyboard of mobile phones hide or overlapping input fields, textareas and so on. But all this threads were useless, i searched a lot but many talk about this problem based on android development and also some based on web development.

I focus web development. The problem is, there is NO thread where the problem was solved or any really useful answer was given/posted.

So i started this one with the hope that it will be solved now. So now what is the problem directly? If you click on a area where something can be entered, on a mobile device, you would usually expect that the website scroll up and the virtual keyboard is opening after the editable area, but what happen is not like this. The virtual keyboard is opening just as overlay - It starts overlapping the editable area... . In my case i open a jquery ui dialog where my fields located, but i think that shouldn't matter.

So i let my thoughts crossing and came to the solution to add some additional space. Something like this: JSFiddle . So i am able to scroll down. But this is annoying in case of the fact that it is useless or with other words not needed for people which do not use a device which open a virtual keyboard. So i thought about a function like this:

function isMobileDevice() {
    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
    var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android");
    if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) {
        return true
    } else {
        return false;
    }
}

Well, for this part would be my question did i forget a device, which also open a virtual keyboard and the primary question would be is there anything else except my workaround? I didn't found something to recognize the virtual keyboard explicitly.

Okay guys i really hope that some more experienced web developers will have some ideas about how to solve this best. Like i said i already searched a lot, but nowhere I had a real solution found for this problem!

Edit 24.04.2015:

Guys i just tested it with a Samsung Galaxy Note and the newest mobile browser versions of Firefox, Chrome as well as Opera. (Updated all three, today!)

Okay here is my result:

as you can see all browsers, except Firefox, fail and THIS is the perfect visual example for my problem. The virtual keyboard is overlapping the editable area! Usually i prefer Chrome about any other browser, but for this case i have to say - good work Firefox!

How to force free jqgrid do draw frozen column borders for search toolbar

If actions column has caption "Activity"/custom settings and is frozen, free jqgrid does not draw colum borders for this column in search toolbar.

To reproduce, open page in

http://ift.tt/1ddtZ2s

Vertical lines does not appear in search toolbar:

How to fix this so that column borders appear for Activity column in search toolbar ? Demo in http://ift.tt/1ddu1r6 has borders.

In testcase styles from answer in Remove dancing effect in Chrome from free jqgrid toolbar buttons in font awesome icons are used are used to remove borders from toolbar buttons. Maybe those remove column border also.

CSS Header style not applied to children

I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle

Code :

<header class="page_header_style">
     <div>
         <div class="title_style">
             Main Title
         </div>
         <div>
            <ul class="user_style">
                <li>Welcome Srk</li>
                <li><a href="">Logout</a></li>
            </ul>  
          </div>    
     </div>
</header>

I would like to see the second div i.e., Welcome message & a list in the same line of the title.

Using WebStorm 10, how do I include image/font files within my current project?

Someone please help me before I take a golf club to my monitors.

I know this question will sound absurdly easy to most, but for the life of me I cannot include an image file (or any other outside file) in my WebStorm 10 project directory. When I copy the image from my desktop to the WS environment, I get a complaint that the file "is not included in the current project" even though the destination folder shows the image file I just imported. Consequently, WS refuses to cooperate with my src references when trying to declare a background image in my stylesheet.

The JetBrains help guide conveniently skips this point and I seem to be the only person on the internet with this question. So please... treat my ignorance like a band-aid and make the sting a quick one. What am I missing?

If it makes any difference I included the bare bone CSS code I used to test the imported files, but as I said the problem isn't in the code- it's the inability to resolve the resource.

@font-face {
    font-family: "UpperEastSide",
    src: url(\[project_name]\fonts\UpperEastSide.ttf);
}

body {
    background: url("\[project_name]\images\background.jpg");
}

HTML&CSS: Foundation as floating div on the fullpage.js plugin

I'm trying to use foundation as a floating div on top of my fullpage The foundation has some interactive elements in it (changing text sizes, etc)

example can be seen here: http://ift.tt/1bE9L1n

everything is working so far so good the only problem is that the content of the slides moves aswel when the text in foundation div moves... (i'd like the content of the slides to stay at the same place)

is my div not floating afterall? been looking for hours now and cant really find the problem. Anyone has a clue what I'm doing wrong?

The interactive foundation is btw not affecting the on scroll rotating 'Athene' text (= which is good)

this is the css I used for the foundation div

#foundation {
    position:absolute;
    height: 100%;
    display:block;
    width: 100%;
    background: transparent;
    z-index:999;
}

Thanks in advance & Best Regards to all of you

HTML , CSS , Javascript windows/zeropc selection [on hold]

Selection Box

I want to add selection box like this website to select like windows 7 icons

Tabs and sidemenu in Ionic

I am trying to create a Ionic app with the sidemenu starter project. For one of my menu options I would like to have a tab view with two tabs. I've replaced the search.html content with the following code:

<ion-view title="Profile">
        <ion-tabs class="tabs-positive tabs-icon-top">

            <ion-tab title="Option1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <h1>HELLO OPTION 1</h1>
            </ion-tab>

            <ion-tab title="Option2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <h1>HELLO OPTION 2</h1>
            </ion-tab>

        </ion-tabs>
</ion-view>

But with this, the H1 gets overlapped by the menu header. In previous versions of Ionic, this could be fixed with the has-header option, but this has been removed and should be managed automatically. From what I've read I should put my content within a ion-content block, but when I do this with the ion-tabs tabs are not shown (they're actually shown below the header bar, I can see them if I pull down). For reference this is the code I used:

<ion-view title="Profile">
      <ion-content>
            <ion-tabs class="tabs-positive tabs-icon-top">

                <ion-tab title="Option1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                    <h1>HELLO OPTION 1</h1>
                </ion-tab>

                <ion-tab title="Option2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                    <h1>HELLO OPTION 2</h1>
                </ion-tab>

            </ion-tabs>
      </ion-content>
    </ion-view>

How can I fix this?

how to add active class on centre li

I would like to Make one “coverflow effect” based on DIV. I decided to use bxslider and everything is working fine but I am not getting the centre "zoom effect" which I would like... You can see an example of what I want here.http://ift.tt/1z0gWuV

I'm not sure how to get this effect on the bxslider. Would it be possible if I add extra class on each center LI ? Meaning, whichever "li" is moving to the center, I can add one class "active"... so I can make active transform:sceal etc.

Do you have any ideas on how I can make this happen? Or any other coverflow script you can recommend for this....

Thanks.

Demo

http://ift.tt/1brrzvY