...

Hi! I’m Starx

experienced Software Developer. And this is my blog
Start Reading About me
Blog Page

Recommended Javascript Image preloader

Question by Daniel Ribeiro

There are a couple of tools and several tutorials (even some including links to github) on how to preloading images and other artifacts, like css and scripts. YUI3 preloader seems to be the most reliable one.

Is there a better one? Are there any others that are faster (possibly through parallel loading), more usable or has better browser compatibility? Maybe one that uses jquery instead of YUI…

Answer by Starx

I like the jquery preload plugin. Try this………

http://plugins.jquery.com/project/Preload

Read more

Give paragraph effect through Css

Question by Starx

Can you tell me how to give paragraph effect to my paragraph using css?

for example:

               This is my paragraph. This is my paragraph. This is my paragraph. 
This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. 
This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. 
This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph.
This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph. 
This is my paragraph. This is my paragraph. This is my paragraph. This is my paragraph.
This is my paragraph. This is my paragraph. This is my paragraph. 

See the padding in the first line. I wantthat

Answer by Yi Jiang

You can try the text-indent property.

p { text-indent: 1em; }

See http://reference.sitepoint.com/css/text-indent

Answer by Starx

Try this

p:first-line { padding-left:10em; }
Read more

How to STOP a JavaScript function when a certain condition is met

Question by Rhys

I can’t find a recommended way to STOP a function part way thru when a given condition is met. Something like Exit, or Break?

I am currently using this?

If x >=10 {Return;}  
other conditions;

Answer by g.d.d.c

Return is how you exit out of a function body. You are using the correct approach.

I suppose, depending on how your application is structured, you could also use throw. That would typically require that your calls to your function are wrapped in a try / catch block.

Answer by Starx

use return for this

if(i==1) { 
    return; //stop the execution of function
}
else {
   //keep on going
}
Read more

CSS Selector for Absence of Tag

Question by Ethan Turkeltaub

Given this HTML:

<div class="entry">
    <a class="meta">Aug. 20, 2010</a>
    <div class="content">
        <h2><a href="#">Hello.</a></h2>
        <p>...</p>
    </div>
</div>
<div class="entry">
    <a class="meta">Aug. 20, 2010</a>
    <div class="content">
        <p>...</p>
    </div>
</div>

And this CSS:

.entry{
    width: 760px;
}

.entry .meta{
    float: left
    width: 160px;
}

.entry .content{
    float: right;
    width: 600px;
}

Is there a selector to add a margin-top: 25px; to .entry .meta in the absence of the <h2> tag? Or will I need to resort to JavaScript for this?

Answer by Starx

Try this

.content > h2+p { margin:1px; }
.content > p { margin-top:25px; }

See Demo

Read more
August 20, 2010

Parent child combo box

Question by user395702

Hi
I want to implement child parent combo box(country state like if we select any country the state combo box should be populated according to selected country) in my form with jquery.
Please give any suggestion how to implement this
Thanks

Answer by Starx

Well, attach a function on the change event of the country combo box and fetch the html from the AJAX or similar. Then populate the child combo box.

For example

$("#parentbox").change(function() {
   var myval =$("#parentbox").val();
   // Fetch the content from database or similar
   $("#childbox").html(newhtml);
}
Read more

JavaScript gets rid of trailing slash in <img /> tag

Question by ashurexm

I have the following JS code:

validateConfigName.html('<img src="/rta/images/check-24.png" />');

But when it executes in Firefox I see this as the generated code:

<img src="/rta/images/check-24.png">

Why?

Answer by Nick Craver

In HTML the <img> tag is supposed to be <img>, in XHTML it’ll be <img />…so depending on what DOCTYPE your page is using, this will vary.

From the HTML 4.0 Spec for <img>:

Start tag: required, End tag: forbidden

In XHTML elements must be closed:

Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest properly.

Answer by Starx

It’s the way, the browser renders your html code according to the doctype used.

Nothing to worry about though..

Read more
August 17, 2010

resize DIV matching the new content with jquery

Question by Sandro Antonucci

I have a DIV which shows one image at once coming from an ajax script, the images are all different in height and are showed with fadeIn/fadeOut (just for the tag)

How can I allow to resize the DIV (that contains the img tag of course) “sliding” based on the new content before the images that fadein changes the DIV height very rudely? 😛

Thanks

Answer by Starx

Well do Something like this

$(".change").click(function() {
  $(".mydiv").fadeOut('slow');
  $(".myimg").attr("src",'');    
  $(".myimg").attr("src","linktonewimage.jpg");
  var newheight = $(".myimg").height();    
  $(".mydiv").css("height",newheight+"px");
  $(".mydiv").fadeIn('slow');
});

I am assuming you have a <img> tag with myimg class inside a div with mydiv class.

Check the DEMO HERE

Read more
August 16, 2010

Continuing to hide HTML input fields when page refreshes?

Question by John M

On a HTML page there is a filter section consistenting of various drop-downs and textboxes. When the ‘type_of_report’ drop-down is selected the ‘onchange’ event will hide all the non-relevant inputs for that ‘type_of_report’. The filter criteria is preserved via GET (which I retrieve via PHP $_GET).

The problem is that when I submit the form (run the report) the ‘hidden’ fields re-appear when the page refreshes.

How do I keep the non-relevant input fields hidden when the page refreshes?

NOTE: I am using jQuery (1.4.2) to hide the fields.

UPDATE1:

Final abbreviated solution (based on feedback) looks like this:

<?php
$report_type = $_GET['report_type'];
?>
<html>
<head>
   <!-- hiding/unhiding based on report type -->
   <script type="text/javascript" src="hide.js"></script>
</head>
<body onLoad="hideall('<?php echo"$report_type"; ?>');">

...rest of code

Answer by Starx

Setup a session variables to keep the status of the drop down boxes. And while you are loading it in the view port… filter them using the session variable. It should solve your problem.

Read more

can we pass $_POST value by clicking link?

Question by Giffary

I need to build some php API to upload an image cross subdomain.

Example, upload script located at http://sub.domain.com/upload.php

and I neew to upload an image to http://www.domain.com/media/

I read some content at http://www.v-nessa.net/2009/02/09/simple-api-writing-part-i and i suspect that can we pass $_POST value by clicking link? How?

Answer by Starx

Yes, you can do that… by submitting a form while clicking that link

<a href="#" onclick="document.myformname.submit();">Submit</a>
Read more
...

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