CSS files vs skin files

Question 1

Question by just_name

just_name

Q: I want to know :

Are the skin files can replace the
CSS files?
What are the advantages of
skin files?
Are those files can provide more
brilliant things the CSS files
can’t?

and
When to use skin files in my web
application?

Answer

Answer by Geoff Appleford

Geoff Appleford

Asp.net skins are one part of asp.net Themes. From the MSDN docs:

Themes are made up of a set of
elements: skins, cascading style
sheets (CSS), images, and other
resources. At a minimum, a theme will
contain skins. Themes are defined in
special directories in your Web site
or on your Web server.

Skins are used to define default markup for asp.net server controls:

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

whereas CSS is used to style your native HTML elements (of course asp.net server controls render as native elements so CSS can also be used to style these

Answer

Answer by Starx

Starx

CSS Files is a .css file contains style tags nothing more (for example, page.css)

But, a theme or skin file might be a set of files containing images, icons, css files, js files which can be used or integrated as sort of a plugin to change the appearance of the Application. (for example, a joomla template)

Question 2

Question by gAMBOOKa

gAMBOOKa

In the script where the upload form is, or the script that processes the action?

Example parameters:

memory_limit

EDIT: Ok, let me clarify. First, I didn’t know the 2nd, 3rd and 4th parameter could not be changed using ini_set(). Now, I want to know where exactly I should call the ini_set() function. In the form script or the action handling script?

Here’s an example to illustrate what I’m looking for:

form.php

<form action="post.php">
  <input type="text" name="search" />
  <input type="submit" />
</form>

post.php

<?php //handle search ?>

So under which file must my ini_set() function should go?

Answer

Answer by Starx

Starx

You have to set these parameters initially from php.ini. You cannot change this from a PHP script except memory_limit, for the remaining Just search for those keys you mentioned in php.ini and change their values.

For memory_limit you can use following snippet at your processing page handling the uploads like in your case at post.php

ini_set("memory_limit","16M");

OR

You can create a .htaccess file at the root directory, if your server support mod_rewrite modules you can change them like this

php_value upload_max_filesize 20M
php_value post_max_size 20M
php_value max_execution_time 200
php_value max_input_time 200

Question 3

Question by liamacheung

liamacheung

I want the background image of a div (with id=”library_tracks”) to be repeated in both x and y directions and to scroll with the div. For whatever reason, the background is staying fixed. I imagine the solution is pretty straight forward… any ideas?

Here’s my CSS:

#library_tracks {
    overflow-y: scroll;
    height: 400px;
    border: thin solid #DADADA;
    background-image: url('../img/track_background.png');
    background-attachment: scroll;

}

Answer

Answer by somethingkindawierd

somethingkindawierd

The trick is to set the background not on the container div, but on the content div within it. Here’s a working example where the <div id="library_tracks"> div displays the scrollbar, but the <div id="content"> is the actual content that’s moved.

http://jsfiddle.net/somethingkindawierd/Cj29C/

This works because it’s the content div that moves. The library_tracks div is stationary, but everything in it scrolls.

Answer

Answer by Starx

Starx

A entire divison will scroll on only one circumstance i.e. the contains does not fit within the division area.

Whether you have small background images or big one, if the content can fit within the div we will not get the scrolling even if you set the overflow option.

Question 4

Question by Blender

Blender

Is it possible to add item to the default browser right button click menu?

Answer

Answer by alex

alex

No, but you can create your own.

Look at the event oncontextmenu().

Here is some good further reading.

Answer

Answer by Starx

Starx

You can’t modify the client’s application using a web page. If this would be possible, just think about how hackers could exploit our computer.

What you can do, is define your own custom menu, while user right clicks.

Check this jquery plugin: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

Question 5

Question by shalu

shalu

I am facing some problem not exactly the problem I want little change in this script.Actually I want to change the height of the `magic zoom plus window’ but I am not able to find the solution reason is that I am not more aware with javascript.you can see from here

http://www.magictoolbox.com/magiczoomplus/

In this example when mouse over the bike image then the selected portion of bike shown in other window I want to change the size of that window.

Please provide me any help regard this.I shall be very thankful to u.
Please reply me ASAP

Thanks

Answer

Answer by Starx

Starx

Change the options parameter

    <script type="text/javascript">
        MagicZoomPlus.options = {
            'opacity': 30,
            'background-opacity': 70,
            'show-title': 'bottom',
            'zoom-height': '100'
        };
    </script>

Source: http://www.magictoolbox.com/magiczoomplus/integration/

Question 6

Question by theorise

theorise

I want to make the following shape using divs and border radius, with fall back to square corners for old browsers. No images please.

I am having a bit of trouble making the bottom corner next to the title (highlighted with the red box). I don’t want a lot of unnecessary divs, it has to be as simple and semantic as possible.
alt text

<div class="container">
   <div class="header">Title</div>
   <div class="body">Content</div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; background: #333; border-radius: 5px 5px 0 0;}
.container .body{clear: left; width: 660px; background: #333; border-radius: 0 0 5px 5px;}

Any ideas?

EDIT 1:

I did it like this: http://jsfiddle.net/a93Rb/16/

<div class="container">
    <div class="header"></div>
    <div class="headerspacer">
       <div class="headercorner"></div>
    </div>
    <div class="body"></div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}  
.container .headerspacer{float: left; position: relative; width: 550px; height: 30px; background: #333;} 
    .container .headerspacer .headercorner{ position: absolute; width: 550px; height: 30px; background: #fff; border-radius: 0 0 0 10px;} 
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

EDIT 2:

I am going to use this method: http://jsfiddle.net/a93Rb/13/

I also found a method of using an image which will not appear if the browser does not support rounded corners. It is much more semantic, and the whole point of using border-radius is to negate unnecessary markup. I think I will actually use this method, but I won’t accept it as an answer as I stated that I do not want images.

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer

Answer by alxx

alxx

My idea was white rounded div with dark background under bottom left corner. (I can’t get it to work myself, so it would be great to see result 🙂 )

Answer

Answer by Starx

Starx

Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.

Question 7

Question by Damien Joe

Damien Joe

How can we change an unordered list’s item color when it is focused with tab or clicked with mouse using CSS ?

Edit:
Check JSFiddle

Answer

Answer by benhowdle89

benhowdle89

   .form li input:focus
{
    background-color:yellow;
}

Check that…

If your interested, this jQuery may work, please someone step in and correct it if its wrong!

$(".form li input").click(function(){
        $(this).closest("li").css("background-color","yellow");
});

$(".form li input").blur(function(){
        $(this).closest("li").css("background-color","white");
});

Answer

Answer by Starx

Starx

Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.

Question 8

Question by tillda

tillda

When I want to scroll a website by javascript code what is the corrent element to set the .scrollTop property on?

Is it window, document, document.body or html element?

Does jQuery have some trick to detect the intention to scroll the main viewport and unify the calls? It seems to me that sometimes $(window).scroolTop(value) works, but sometimes it doesn’t.

Answer

Answer by bobince

bobince

Normally, the <html> element, aka document.documentElement. However if you are using Quirks Mode, <body> (document.body) represents the viewport instead. (HTML/CSS doesn’t explicitly state/require this, but it is how all modern browsers work.)

You don’t ever want to be in Quirks Mode, but if you’re writing a script for inclusion on other people’s pages you will have to deal with it:

var viewport= document.compatMode==='BackCompat'? document.body : document.documentElement;
// do something with viewport.scrollTop

jQuery uses window.scrollTo() instead of setting the scroll properties directly. Either way is pretty much the same in practice. You could argue that using scrollTo is a bit cleaner in that it avoids relying on the viewport being represented by a particular element, but then jQuery still has to use scrollTop/scrollLeft to read the current value of the ‘other’ property anyway, so no big win. You can use pageXOffset/pageYOffset to read the current scroll position without relying on a particular element, but it’s not supported everywhere so you still have to fallback to the scrollTop method.

Sadly none of these properties/methods have been standardised in the past. CSSOM Views finally address this.

Answer

Answer by Starx

Starx

Depends on what you are scrolling, document/Window or a division

Question 9

Question by miojamo

miojamo

I have dropdown and need to dynamical load form elements based on statement

<select name="type" id="type">
   <option value="1">input</option>
   <option value="2">text</option>
</select>

case 1 load some form elements (inout etc..)
case 2 clear these elements
…

Thanks

Answer

Answer by andres descalzo

andres descalzo

try this:

$(function() {

  $('#type').bind('change', function(ev) {

     var value = $(this).val();

     $.ajax({
        ...
        data: {valueType: value, html: encodeURIComponent($("#addhtml").html())},
        ...
     });

  });


});

Answer

Answer by Starx

Starx

We may want to try this also

$("#type").change(function() {
    $.post(
        "yourRequestHandlingPage.php",
        { 
          param: $(this).val();
        },
        function(data) {
            //supposing data holds the html output of dynamically creawted form element
            $(".myformcontent").append(data); //add the elements at the end of the form elemetn
        }
});

Question 10

Question by Goppie TOp

Goppie TOp

How to make alsoResize option to only work for height but not for both width and height?

Answer

Answer by Starx

Starx

Actually if you set maxWidth to a limit, we cannot resize the width more than it.

For example,

$( ".selector" ).resizable({ maxWidth: 250 }); //For initialzation

will not allow the resize to occur more that 250px in width

If you check this demo
http://jqueryui.com/demos/resizable/#max-min, you will notice the width resizing being limited to a point.

So in your case set the initial width of the .selector and maxWidth same and it is done.

For further information go to http://jqueryui.com/demos/resizable/#option-maxWidth

Month: December 2010

CSS files vs skin files

Question by just_name

Answer by Geoff Appleford

Answer by Starx

When uploading, where do I set the php.ini parameters?

Question by gAMBOOKa

Answer by Starx

OR

How do I get a div background image to scroll?

Question by liamacheung

Answer by somethingkindawierd

Answer by Starx

Adding to browser context menu?

Question by Blender

Answer by alex

Answer by Starx

How to change the height of popup box in magic zoom plus

Question by shalu

Answer by Starx

The most semantic way of making this container

Question by theorise

Answer by alxx

Answer by Starx

Change Unordered list item's color on focus?

Question by Damien Joe

Answer by benhowdle89

Answer by Starx

Correct HTML scrolling element of main viewport (+jQuery)

Question by tillda

Answer by bobince

Answer by Starx

jQuery Load form elements through ajax, from onchange event of drop down box

Question by miojamo

Answer by andres descalzo

Answer by Starx

jQuery resizable plugin, to resize only height

Question by Goppie TOp

Answer by Starx

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