smallseo.info

html interview questions

Top html frequently asked interview questions

jQuery document.createElement equivalent?

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

I would like to know if there is a better way to do this using jQuery. I've been experimenting with:

var odv = $.create("div");
$.append(odv);
// And many more

But I'm not sure if this is any better.


Source: (StackOverflow)

Convert HTML + CSS to PDF with PHP?

Ok, I'm now banging my head against a brick wall with this one.

I have an HTML (not XHTML) document that renders fine in Firefox 3 and IE 7. It uses fairly basic CSS to style it and renders fine in HTML.

I'm now after a way of converting it to PDF. I have tried:

  • DOMPDF: it had huge problems with tables. I factored out my large nested tables and it helped (before it was just consuming up to 128M of memory then dying--thats my limit on memory in php.ini) but it makes a complete mess of tables and doesn't seem to get images. The tables were just basic stuff with some border styles to add some lines at various points;
  • HTML2PDF and HTML2PS: I actually had better luck with this. It rendered some of the images (all the images are Google Chart URLs) and the table formatting was much better but it seemed to have some complexity problem I haven't figured out yet and kept dying with unknown node_type() errors. Not sure where to go from here; and
  • Htmldoc: this seems to work fine on basic HTML but has almost no support for CSS whatsoever so you have to do everything in HTML (I didn't realize it was still 2001 in Htmldoc-land...) so it's useless to me.

I tried a Windows app called Html2Pdf Pilot that actually did a pretty decent job but I need something that at a minimum runs on Linux and ideally runs on-demand via PHP on the Webserver.

I really can't believe I'm this stuck. Am I missing something?


Source: (StackOverflow)

Make a div fill the height of the remaining screen space

I am currently working on a web application, where I want the content to fill the height of the entire screen.

The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.

I have a header div and a content div. At the moment I am using a table for the layout like so:

CSS and HTML

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

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

The entire height of the page is filled, and no scrolling is required.

For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with it's height set to 100%. Putting header inside content will not allow this to work.

Is there a way to achieve the same effect without using the table?

Update:

Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.

Update 2:

For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.


Source: (StackOverflow)

Why does HTML think “chucknorris” is a color?

How come certain random strings produce various colors when entered as background colors in HTML? For example:

<body bgcolor="chucknorris"> test </body>

...produces a document with a red background across all browsers and platforms.

Interestingly, while chucknorri produces a red background as well, chucknorr produces a yellow background.

What's going on here?


Source: (StackOverflow)

How do you disable browser Autocomplete on web form field / input tag?

How do you disable autocomplete in the major browsers for a specific input (or form field)?


Source: (StackOverflow)

How to make div not larger than its contents?

I have a layout similar to:

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

I would like for the div to only expand to as wide as my table becomes.


Source: (StackOverflow)

Creating a div element in jQuery

How do I create a div element in jQuery?


Source: (StackOverflow)

How to move an element into another element?

I would like to move one DIV element inside another. For example, I want to move this (including all children):

<div id="source">
...
</div>

into this:

<div id="destination">
...
</div>

so that I have this:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

Source: (StackOverflow)

Modify the URL without reloading the page

Is there any way I can modify the URL of the current page without reloading the page?

I would like to access the portion before the # hash if possible.

I only need to change the portion after the domain, so its not like I'm violating cross-domain policies.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

Source: (StackOverflow)

How to disable resizable property of textarea?

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?


Source: (StackOverflow)

Need an unordered list without any bullets

I have created an unordered list, and I am appending and removing list items using jQuery.. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets?


Source: (StackOverflow)

How to align checkboxes and their labels consistently cross-browsers

This is one of the minor CSS problems that plagues me constantly. How do folks around StackOverflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

Here's the standard code that I work with:

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!


Source: (StackOverflow)

RegEx match open tags except XHTML self-contained tags

I need to match all of these opening tags:

<p>
<a rel='nofollow' href="foo">

But not these:

<br />
<hr class="foo" />

I came up with this and wanted to make sure I've got it right. I am only capturing the a-z.

<([a-z]+) *[^/]*?>

I believe it says:

  • Find a less-than, then
  • Find (and capture) a-z one or more times, then
  • Find zero or more spaces, then
  • Find any character zero or more times, greedy, except /, then
  • Find a greater-than

Do I have that right? And more importantly, what do you think?


Source: (StackOverflow)

How to give text or an image a transparent background using CSS?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?

I'd like to accomplish this without having the text and the background as two separate elements.

When trying:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

it looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.


Source: (StackOverflow)

Is it possible to apply CSS to half of a character?

What I am looking for:

A way to style one HALF of a character. (In this case, half the letter being transparent)

What I have currently searched for and tried (With no luck):

  • Methods for styling half of a character/letter
  • Styling part of a character with CSS or JavaScript
  • Apply CSS to 50% of a character

Below is an example of what I am trying to obtain.

x

Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.


UPDATE:

Since many have asked why I would ever want to style half of a character, this is why. My city had recently spent $250,000 to define a new "brand" for itself. This logo is what they came up with. Many people have complained about the simplicity and lack of creativity and continue to do so. My goal was to come up with this website as a joke. Type in 'Halifax' and you will see what I mean. :)


Source: (StackOverflow)