Auto version your JavaScript or Stylesheet files using .htaccess

Question 1

Jim Peeters’s Question:

For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don’t want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.

FiddleJS link:

https://jsfiddle.net/bpyrgsvc/1/

HTML:

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
  <div class="row">
    <div class="cell">this changes the width of the cell above</div>
  </div>
</div>

CSS:

.table {
  display:table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

Answer

Starx

I don’t see anything wrong with the results. In a div set to be displayed as table and table-row, it is behaving as tables.

To get the result you want, close the first table and start another.

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
</div>
<div class="table">
  <div class="row">
    <div class="cell cell-full">this changes the width of the cell above</div>
  </div>
</div>

https://jsfiddle.net/bpyrgsvc/4/

Question 2

Ua_boaz’s Question:

ua_boaz

I am using this tree grid directive github.com, and below css is taken directly from this library.

.tree-grid .level-2 .indented {
    position : relative;
    left     : 20px;
}

<td><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"></i></a><span class="indented tree-label tree-grid-row level-2>
             Citi Corporate and Investment Banking</span>
            </td>

The problem i am having is that span inside td is overflow and showing in the next column, for that purpose i need to add right:20px, but it is not working.

Is there any solution to this problem
plnkr.co

Answer

Starx

Just adding padding-right: 20px; gives what you are asking.

I selected the targeted span from CSS like

<!DOCTYPE html>
<html ng-app="abas-web">
  ...
  <body>
  ...
  <style>
    span.indented.tree-label {
      padding-right: 20px;
    }
  </style>
  </body>

</html>

Demo

Question 3

Jesus Christ’s Question:

Jesus Christ

What is wrong with this piece of code:

jQuery('<iframe id="groundplan_popup" class="groundplan_hidden" />').appendTo("#popup_holder");
var iframe = jQuery("#groundplan_popup");
iframe.attr("src","::censored::" + filename);
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

So i have to dynamically create an iframe element which will open up .pdf file in a popup and that part works. What I can’t manage to do is create a div with an id of “groundplan_popup_exit” within that iframe. I don’t know exactly why this doesnt’ work and what exactly I’m doing wrong. When i inspect the iframe window console brings out this warning:

/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more
details.

Dont know if it has anything to do with the reason why this isn’t working.

EDIT:

This is what my code looks like now.

Console prtscr:

Iframe console elements prtscr:

So i’m basically confused about the whole situation as I’m not that experienced in using jquery in general and this is my first time using it with iframes. I’m not even sure if the #groundplan_popup_exit div is even created and how do I find it if it is.

Answer

Starx

I see some problems:

var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');

Here you are already appending the element to the body.

var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));

After you have appended above, you are trying to append again with jQuery("#groundplan_popup_exit") which does not even exists.

Fix (untested) would be something like this:

var iframe_body = iframe.contents().find('body');
var exit_btn_gp = iframe_body.append('<div id="groundplan_popup_exit"></div>');

Question 4

Michaelmcgurk’s Question:

michaelmcgurk

I have a very simple page on my site: http://jsfiddle.net/95sptas0/

Using only CSS, how do I add an icon between each .post div? I’d like one after each .post div except the last. I’m hoping to use this icon: http://fortawesome.github.io/Font-Awesome/icon/arrow-down/

.post {
    margin-bottom:50px;
    background:#eaeaea
}

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

Answer

user2959229

After including the “FontAwesome” font, the following CSS might do it:

.post::after { 
    content: "f063";
    font-family:'FontAwesome';
}

f063 is the code for the “down arrow” using the FontAwesome font.

In order for you to apply this to every element except your last, you can use the last-of-type selector:

.post:last-of-type::after { 
    display: none;
}

Answer

Starx

The font awesome icons requires to have an element with defined class. In you case this is <i class="fa fa-arrow-down"></i>. Since this is a new element you cannot use CSS to handle DOM manipulation.

If you can opt for text based unicode icons and font-based icons however, it will be possible through adjacent selector.

.post+.post::before {
    content: "↓";
}

Demo: http://jsfiddle.net/95sptas0/4/

Question 5

Abc123’s Question:

abc123

How do I select the entire h4 node that doesn’t contain h3 with class=”avoid”? In this case I want to select the first and fourth h4 node.

<div>
<h4>
    <h1><h1>
    <h2><h2>
</h4>
<h4>
    <h1><h1>
    <h2><h2>
    <h3 class="avoid"><h3>
</h4>
    <h4>
    <h1><h1>
    <h2><h2>
    <h3 class="avoid"><h3>
</h4>
<h4>
    <h1><h1>
    <h2><h2>
</h4>
</div>

Answer

Starx

First of all. Having heading tags inside another is not valid. Saying that..

CSS is not capable of selecting a parent based on nested elements.

You need JS to do such selections. A good read is this.

Question 6

Coding Freak’s Question:

coding freak

I put http://jsfiddle.net/48Hpa/19/ same codes to HTML, but I get different results ……………………………………………………………………………………………………………………………………………….. why is that?

enter image description here

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <link type="text/css" rel="stylesheet" href="style.css" />
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

    <script>

        $(document).ready(function () {

            $(function () {
                $("#slider1").slider({
                    range: "min",
                    value: 36,
                    min: 12,
                    max: 36,
                    slide: function (event, ui) {
                        $(".amount1").val(ui.value);
                        writesum();
                    }
                });
                $(".amount1").val($("#slider1").slider("value"));
            });

            $(function () {
                $("#slider2").slider({
                    range: "min",
                    value: 50000,
                    min: 1,
                    max: 50000,
                    slide: function (event, ui) {
                        $(".amount2").val(ui.value);
                        writesum();
                    }
                });
                $(".amount2").val($("#slider2").slider("value"));
            });


            function writesum() {
                var months = $('.amount1').val();
                var credits = $('.amount2').val();
                var payment = parseFloat(Number(credits) / Number(months))
                var rounded = payment.toFixed(2);
                $('.amount3').val(rounded);
            }

        });

    </script>

</head>
<body>
     <input type="text" class="amount1" />

        <div class="container">
            <div id="slider1"></div>
        </div>

        <input type="text" class="amount2" />

        <div class="container">
            <div id="slider2"></div>
        </div>

        <div class="sonuccontainer">
            <div class="bilgilendirme">aylık ödeme miktarınız</div>
            <input type="text" class="amount3" />
        </div>
</body>
</html>

Answer

Starx

JsFiddle use a CSS reset file to reset all browsers default styling. That might be the cause.

But the blue is coming from your style definition:

.ui-slider .ui-slider-handle { outline-color: transparent; background: blue; position: absolute; top: -8px; left: -8px; z-index: 2;  border-radius: 70px;  width: 30px; height:30px; cursor: pointer; }

If it is not showing on your page, means there is something wrong in your page or the styles are being overridden.

Looking at your html, the CSS of jQuery Ui is loaded after your local CSS, so the styles from it are overriding your styles.css Switch them and put styles.css at last.

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="style.css" />

Question 7

User2594008’s Question:

user2594008

I need to create a responsive layout, and I have used bootstrap before but I have never actually attempted this. Making full width designs is plenty easy, but I want a two column layout that would say.. have a max width of 900px together.

The example of what I am trying to do can actually be seen right here on stackoverflow. There are two columns to this site, but both columns are centered on the page right now with space to the left and right. I just need that (and responsive as well for smaller screens).

Answer

Starx

Assuming your container has an id of container you can center it by giving auto left and right margin like:

#container { 
   margin: 0 auto;
}

The width of a default bootstrap grid is 960px and is already centered by default. You only have to assign a class called container like

<div class="container">
     <!-- The begin your row -->
     <div class="row">
          <div class="span8">
               Demo right part of stackoverflow
          </div>
          <div class="span4">
               Demo left part of stackoverflow         
          </div>
     </div>
</div>

Question 8

User2747140’s Question:

user2747140

I am new to php and apologise for the trivial question I’m asking. I can’t seem to get my labels to center align. As you can see from the attachment, only the text box get’s centered. Please could you point me in the right direction?

Here’s the code. As you can see, I use the center at the start and the end of my form.

echo"   <center>    <fieldset>
        <div class="form-horizontal">
             <h7 class="label"><font color="#FF0000" size="+1"><strong>* </strong></font>: Required Fields</h7> <br><br>
            <div class="form-row">
            <div class="form-label">First Name <font color="#FF0000" size="+1">*</font><em></em></div>
                <div class="form-controls">
                   <input id="First Name" type="text" name="FirstName" value="$firstname">       
                </div>
                </div>

                <div class="form-row">
                <div class="form-label">Last Name <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                    <input id="Last Name" type="text" name="LastName" value="$LastName">      
                </div>
                </div>

                <div class="form-row">
                <div class="form-label">ID Number <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                  <input name="IDNumber" type="text" id="ID Number" value="$IdentityNumber" maxlength="13">       
                </div>
                </div>

                <div class="form-row">
                <div class="form-label">Email Address</em></div>
                <div class="form-controls">
                   <input id="Email Address" type="text" name="EmailAddress" value="$ParentEmailAddress">             
                </div>
                </div>


                <div class="form-row">
                <div class="form-label">Mobile Number <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                     <input name="MobileNumber" type="text" id="Mobile Number" value="$ParentMobileNo" maxlength="10">         
                </div>
                </div>

                <div class="form-row">
                <div class="form-label">Date of Registration <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                    <input id="Date of Registration" type="text" name="DateofRegistration" value="$DateOfRegistration">      
                </div>
                </div>


                <div class="form-row">
                <div class="form-label">Learners Full Name <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                   <input id="Learners Full Name" type="text" name="LearnersFullName" value="$LearnerFullName">       
                </div>
                </div>

                <div class="form-row">
                <div class="form-label">Learners Date of Birth <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                   <input id="Learners Date of Birth" type="date" name="LearnersDateofBirth" value="$LearnerDOB">    
                </div>
                </div>

                <div class="form-row">
                <div class="form-label">School Nominated <font color="#FF0000" size="+1">*</font></div>
                <div class="form-controls">
                <select id="School Nominated" type="text" name="SchoolNominated">
                    </center>";

I have tried adding a picture to show you the form. Please go to this link to view it (http://i.stack.imgur.com/lIAFG. png)

Answer

Starx

Use CSS, not PHP to center text. The following will center all the labels.

label { text-align: center; }

Question 9

User2563516’s Question:

user2563516

I am new to Jquery any one tell me how to select child elements
please check my code

<ul class="orglisting">
   <li><a href="javascript:getOrgUsers();" class="orglistactive">orgName</a></li>
   <li>
      <a href="javascript:getOrgUsers();">orgName1</a>
      <ul id="dId">
         <li id="dId1"><a href="javascript:getDeptUsers('Sales','1','1');">Sales</a></li>
         <li id="dId2"><a href="javascript:getDeptUsers('Engineering','1','1');">Engineering</a></li>
      </ul>
   </li>
   <li>
      <a href="javascript:getOrgUsers();">orgName2</a>
      <ul id="dId">
         <li id="itbhanu"><a href="javascript:getDeptUsers('ITbhanu','1','1');">ITbhanu</a></li>
      </ul>
   </li>
   <li>
      <a href="javascript:getOrgUsers();">orgName3</a>
      <ul id="dId">
         <li id="Engineering"><a href="javascript:getDeptUsers('PvtLtd','Engineering','1','1');">Engineering</a></li>
      </ul>
   </li>
</ul>

My problem is when i am select deparmentName i want to select change background color for parent tag(orgName) and selected deartmentName.

For Example i am selected in orgName1(orgName) in that i selected Enginnering (department) i want to change backgroundcolor for orgName1 and Engineering and again i selected orgName2 (orgName) and departmentName is ItBhanu i want to apply background color for those two and remove before apply background color.

How can i do this..

Answer

Starx

If I understand you correctly you are trying to remove some style from previous elements and apply news elements to New Ones.

First of all, create a class which shows elements has selected, something like:

.selected { background: #ddd; }

Then on jQuery you have to attach to the click event of your anchor a tags.

$("a").on('click', function() {
   //Now this is run when all `a` will be clicked

   //First lets remove selected class from previously selected items

   $('.selected').removeClass('selected');

   // And lets add selected to currect element and this parent

   $(this).addClasss('selected');
   $(this).parent('li').find('a:first').addClass('selected');


});

Tag: css

Auto version your JavaScript or Stylesheet files using .htaccess

Yes! there is.

How can I let a table cell take in the full width of the table with css?

Jim Peeters’s Question:

relative position and left and right property together not working, only left is working

Ua_boaz’s Question:

Appending div to iframe

Jesus Christ’s Question:

Add Icon between each Div

Michaelmcgurk’s Question:

css selector for a node which doesn't contain a given selector with class attribute

Abc123’s Question:

jsfiddle same codes display different results on html

Coding Freak’s Question:

How to have a centered bootstrap layout

User2594008’s Question:

Labels do not want to center using php

User2747140’s Question:

How to apply css class for selected element in jquery or javascript?

User2563516’s Question:

Please fill the form - I will response as fast as I can!