Tag: stylesheet
6 Nabin Nepal (Starx) apache cache css htacces javascript js php stylesheet versioning web-development
June 28, 2017

Auto version your JavaScript or Stylesheet files using .htaccess

Usually, developers can maintain the cache they maintain themselves at the backend but cannot control the cache held by the browser as freely as they want unless there is proper version control. Here is a quick drop in solution in `.htaccess` file until you have proper versioning.

Most of the applications have one or many layers of cache for their system. The cache that application developer can maintain is at the backend (the server) level. However, you cannot control the cache held by the browser as freely as you want unless you version the files as well.

Versioning the files is definitely the best way to solve this problem because it is a very efficient solution which guarantees that browser will fetch the new resource when you want it to. But there are cases where this is not an easy step to be taken, for example, in a legacy app which resources are included in line the page.

So, is there a quick way to fix the problem until you go to proper versioning?

Yes! there is.

Using .htaccess we can auto version the files and force the browser to fetch files down to every second if we need to.

Here is how:

We can use server variables such as TIME_YEAR, TIME_MONTH to create an automatic version of your resource. These are variables that the web server provide to be used where suitable. And now, let’s see how to do this.

RewriteCond %{QUERY_STRING} !(v=(.<em>))
Rewriterule ^(js|scripts|css|styles)(.</em>)$ /$1$2?v=%{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR} [r=302,nc]`

Open your .htaccess files and paste those two lines in. What these are doing is:

  • If a request comes to the server that starts with js, scripts, css or styles then rewrite the request by appending an auto-created version at the end.
  • IF a request comes with the version already in the request then don’t do anything because we don’t want it to keep rewriting the request.

Simple as that. So for example: if the request comes to https://abc.com/js/main.js it gets served as https://abc.com/js/main.js?v=2017062811. Same goes for any request coming to other paths as well. This example ensures that browser will fetch the resource again every hour. But if you add variables like TIME_MINUTE or TIME_SECOND or TIME browser will keep fetching the content more frequently.

To see what other server variables can be used visit https://httpd.apache.org/docs/trunk/expr.html#vars

Nabin Nepal (Starx) javascript stylesheet xml
June 17, 2013

Javascript method is not working on Firefox

Merand’s Question:

merandmerand

My stylesheet is working on ie, however it isnt working on firefox. It gives an error such as:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable @
TypeError: document.getElementById(…) is null.

Here is my code:

<script style="javascript">
    function displayRevision2() {
        for (i = 1; i & lt; j; i++) {
            foo = document.getElementById('row' + i).innerHTML;
            substring = foo.substr(0, foo.search("n") - 1);
            //displayRevision(substring);   
            if (flag == 1) document.getElementById(substring).style.display = "";
            else document.getElementById(substring).style.display = "none";
        }
        if (flag == 1) flag = 0;
        else flag = 1;
    }
</script>
<script style="javascript">
    function dispTD(num) {
        rowtxt = '&lt;TD class="br" align="middle" id="row' + num + '">';
        document.write(rowtxt);
    }
</script>
<script style="javascript">
    function dispEndTD() {
        document.write("&lt;/TD>");
    }
</script>
StarxStarx

It may be because the element the script is searching for does not exist on the document. Try to check if the scripts finds the element first before directly accessing its attributes.

fooElement = document.getElementById('row' + i);
if(fooElement) foo = fooElement.innerHTML;
Nabin Nepal (Starx) css html stylesheet
May 23, 2013

HTML Tag Contains Display Table and Display Inline-Block

Someyoungideas’s Question:

someyoungideassomeyoungideas

I am looking to truncate a tag in html with ellipsis and to do so it needs to be display: inline-block, block, etc. The problem is that I also have a class on it that contains the css of display: table. The tag is keeping both display styling somehow and will not allow the ellipsis to occur. Why is both display styles allowed instead of one overriding the other?

I understand I could remove the class with the display: table, but I am more curious why it can hold both display styles.

StarxStarx

One element can have one display property at a time not two. You can override the style by providing inline style instead like

<div style="display: inline;">
...</div>

Doing so will override any other style property defined before.

Nabin Nepal (Starx) html stylesheet
August 21, 2012

How to style <ul> and <li> without affecting MENU

Question by dotman14

dotman14dotman14

How can I apply a different styles to the same elements at different parts of my HTML/CSS.
I have tried the following it doesn’t seem to work.

MENU

   <div class="menu">
   <ul>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
  </ul>
  </div>

somewhere in the webpage

   <div class="others">
   <ul>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
  </ul>
  </div>

CSS

     .menu ul,li{
         color: rgb(242,253,255);   
         list-style: none;
         text-decoration: none;
         font-size: 20px;
         font-family: chaparral pro;
         }

.others ul,li{
         color: rgb(242,253,255);   
         list-style: none;
         text-decoration: none;
         font-size: 10px;
         font-family: chaparral pro;
         }

Answer by Starx

StarxStarx

You made a tiny mistake you generalized style of li in the following part.

.others ul,li { ..... }

The above will apply to ul inside .others and all the li through out the page. Just use

.others ul, .others li {
   /*.....*/
}
Nabin Nepal (Starx) div html javascript stylesheet
April 18, 2012

DIV Style and DIV Position not getting along

Question by user1186164

user1186164user1186164
<div id=mmactivate style='display: none'>
<form>
<INPUT TYPE="text" NAME="date1xx" VALUE="" SIZE=25>
<IMG SRC=CalandarIcon.png HREF="#" onClick="cal1xx.select(document.forms[0].date1xx,'anchor1xx','MM/dd/yyyy'); return false;" TITLE="cal1xx.select(document.forms[0].date1xx,'anchor1xx','MM/dd/yyyy'); return false;" NAME="anchor1xx" ID="anchor1xx">
<DIV ID="testdiv1" STYLE="position:absolute;background-color:white;layer-background-color:white;"></DIV>
</form>
</div>

This code is used to activate a popup java calandar. For some reason the style=’display: none’ and the position:absolute; arn’t playing along. If I delete one or the other it works, otherwise it does nothing when I click it…

Any ideas on how to make it work?

Answer by Starx

StarxStarx

So many mistakes

  1. Java is not JavaScript. [MetalFrog]
  2. Line 1: id=mmactivate should be id="mmactivate"
  3. Line 2: The form consists of no method, actions or enctype. [Mr. Lister]
  4. Line 4: Why is there script in the title field?
  5. Line 4: Why does an image have a href attribute. [Mr. Lister]
  6. Line 4: Inline event handlers are a bad choice to start with.
  7. Line 5: testdiv1 is a child of “mmactivate”, so it has to follow its parent’s display: none;
Nabin Nepal (Starx) css stylesheet
March 29, 2012

Combine CSS lines into one

Question by ZEDA-NL

ZEDA-NLZEDA-NL

I want to define some basic styles that I can combine. Let’s say I have a stylesheet that contains the following lines:

.whitebackground  {background-color: #ffffff}
.borderblue       {border: solid 1px #0000aa}

I’m wondering if there is there a way to include these lines into a new line? Something like:

**div.main   {.whitebackground; .borderblue}**

The result must be the same as it would be with this line:

div.main  {background-color: #ffffff; border: solid 1px #0000aa}

Answer by Starx

StarxStarx

You are looking for SASS or LESS library.

They will allow you to include style declaration from one selector to the other.

Using LESS, you syntax will be perfectly valid and work as you want

div.main   {
   .whitebackground; 
   .borderblue;
}

But, when they are compiled, it will take the optimized form automatically.

Nabin Nepal (Starx) css html stylesheet
March 15, 2012

Certain properties don't transfer over from external style sheet

Question by Adam

AdamAdam

So I’m currently designing a website, and I’m using the same CSS for every page. Originally, I had it included in each individual document, however it got annoying having to change it on every page, so instead I set them all to work off an external style sheet. Now, it worked for the most part, however a couple properties stopped working, namely text-align and float. What’s weird is that if you include those properties in an internal style sheet, it starts working again. I’m guessing it has to do with some sort of priority thing, but I’m wondering why those specific properties don’t work, and if there’s any way of specifying those properties in an external style sheet. Thanks!

CSS:

    div.box1
    {
        border-width:0px;
        text-align:left
    }
    img.floatLeft
    { 
        float: left; 
        margin: 5px;  
    }

    img.floatRight
    { 
        float: right;  
        margin: 5px;  
     }

HTML:

<div class="box1">
<font face="helvetica">
    TEXT TEXT TEXT <br><br><br>
    <b>NAME</b>
    <br>
    <img src="NAME" class="floatRight">
    TEXT TEXT TEXT<br><br>
    <b>NAME2</b>
    <br>
    <img src="NAME2" width="214" height="130" class="floatLeft">
    TEXT TEX TEXT
</font>
</div>

Answer by Starx

StarxStarx

There is a typo at text-align:left. You are missing a semicolon ; to terminate the statement. Rest is fine.

Your left floated image does not have any attribute src, height or width so it will basically not show itself in the DOM.

See a working demo

Nabin Nepal (Starx) css html stylesheet
March 8, 2012

How to set vertical-align of span to middle of a div

Question by StevenChow

StevenChowStevenChow

I test vertical-align with a simple html code, but it doesn’t work

<div style="height:45px; border: solid 1px black;">
    <strong style="vertical-align:bottom;">
        abc
    </strong>
</div>

Plz help me!

Answer by Starx

StarxStarx

This is how you do it

<div style="height:45px; border: solid 1px black; display: table;">
    <strong style="vertical-align:bottom; display: table-cell;">
        abc
    </strong>
</div>

Demo

As I have mentioned before, vertical aligns are very tricky. For this to work, like it did on table, set the parent container to display as table and the inner <div>s or elements to display as table-cell

Nabin Nepal (Starx) css javascript printing stylesheet
June 9, 2010

Is it Possible to change the Default Margins of Browser through JavaScript?

Question by Govind KamalaPrakash Malviya

Govind KamalaPrakash MalviyaGovind KamalaPrakash Malviya

I want to change the default margins of Browser through JavaScript because I want to print the displayed document on page but the margins are different on different browser??? plz help me to change default margins of browser. if you have any solution tell me.

Answer by Jaroslav Záruba

Jaroslav ZárubaJaroslav Záruba

I would recommend adding reset.css to your page, and probably to all of your pages/projects.
This way you should be able to eliminate all differencies in default style values amongst browsers.

EDIT: check out one of the most valuable threads at StackOverflow.com

Answer by Starx

StarxStarx

use jquery

$(document).ready(function() {
       $("body").css("margin","0");
});

Using CSS

body { margin:0; }
...

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