Hi! I’m Starx

Question 1

Question by cabaret

This might be a duplicate question, however I did search and I got so many different answers that I don’t know which to use or how to do this.

<?
if(isset($content))
{
    $i = 1;
    foreach($content as $item)
    {
        echo "<li><a href='#' name='" . $item['id'] . "'>" . $item['title'] . "</a></li>";
        $i++;
    }
}
?>

I’ve added a function to these links with jQuery to handle an ajax call. I select the links as follows:

    $("#tips_list ul li a").click(function(e)   { //... }

However, this doesn’t make a lot of sense because now you have to click on the actual text instead of the list item. So I figured I’d re-structure my HTML so the anchor tag wraps around the li tag.

    `<a href="#" name=""><li>foo</li></a>`

I then changed my jQuery code accordingly:

    $("#tips_list ul a li").click(function(e)   { //... }

However, now, when I click.. it grabs the list item tag as $(this); which means I can’t really grab the name attribute from the anchor tag. So! What I need to do is to grab the name attribute from the parent anchor tag. And I honestly have no clue what the easiest way to do this is. I’m not that experienced with jQuery.

Thanks a lot for helping me!

Answer

Answer by phil

phil

How about going back to the original method, and set #tips_list ul li a {display:block} in your CSS? That should make the a expand and take up the whole li, making the whole li seem clickable. Your original code should then work fine.

Answer

Answer by Starx

Starx

Keep the old markup. The later one is quite cranky and use the following script.

$("#tips_list ul li").click(function(e)   {
    var name = $(this).children("a").attr("name");
    alert(name);
}

Question 2

Question by MrB

MrB

There’s a 32px gap at the top of my site, despite setting margins and paddings to 0. I know it’s 32px because I can fix it with padding: -32px. But then I have a gap at the bottom! In Firebug, it seems the body only start 32px down from the beginning of the HTML element, even though I’ve set margins and paddings to 0.

Here’s my CSS:

html{
  height: 100%;
  padding: 0;
  margin: 0;
}

body { 
  background-color: #a7a9ac; 
  color #666666;
  background-image: url('body-bg.gif');
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  margin: 0;
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
}

.container_banner h3{
  position: relative;
  top: 0px;
  left: 32px;
  font-size: 10px;
  color: #F8F8F8;
}

.container_banner{
  position: relative;
  top: 0px;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 945px;
  height: 188px;
  padding: 0px;
  background-color: #ffffff;
}

.container{
  position: relative;
  top: 0px;
  margin: 0 auto;
  min-height: 100%;
  width: 945px;
  padding: 0px;
  padding-top: 20px;
  margin-bottom: 0px;
  background-color: #ffffff;
  background-image: url('thin-background.png');
}

.content{
  margin-top: 0px;
  margin-left: 30px;
  min-height: 100%;
}

Container banner is the topmost div, followed by container (which includes content).

Thx for any help.
MrB

Answer

Answer by James

James

I think this is caused by the use of position: relative and your h1 element inheriting a margin by default. When you use position: relative, the margin does not seem to be shifted with the actual content and therefore gets applied to the top of the page.

I have changed the relevant CSS to fix this:

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

You may need to do the same for any other elements that are set to position: relative and have a margin (e.g. h3 tags)

It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.

Answer

Answer by Starx

Starx

Or, you have an error in your CSS, color #666666. There is not : between. May be that is causing the CSS to be parsed in the wrong way.

Question 3

Question by dave

dave

I don’t know how can i validate the recaptcha thing via jQuery. Please help. I have the contact us form with the following fields:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>


<script type="text/javascript">

$(document).ready(function() {

$('#signup').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
messages: {
name: {
required: 'FULL NAME Missing'
},
email: {
required: "E-MAIL ADDRESS Missing",
email: "E-MAIL ADDRESS Not Valid"
}

});



});


</script>

<form action="index.php" method="post" name="signup" id="signup">
<p>
Full Name
<br>
<input name="name" type="text" class="required" id="name" title="Type your Full Name into this box" value="<?php echo $_POST['name']; ?>">
</p>
<p>
E-Mail Address
<br>
<input name="email" type="text" id="email" title="Type your E-Mail Address into this box" value="<?php echo $_POST['email']; ?>">


</form>

Validation with the jQuery is working, but no idea how to implement the recaptcha into this.

Answer

Answer by dave

dave

thanks all for your comments,will get it done by simple library 🙂

http://www.white-hat-web-design.co.uk/articles/php-captcha.php

And validation by using php after submitting of the form (it was easy for me to implement in less time in php than jquery. 🙂 .

special thanks to Felix Kling :).

Dave

Answer

Answer by Starx

Starx

For those sort of validate, there is a validation method in jQuery validate plugin known as remote.

Check it here

$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

In this check-email.php should return string “true” to be considered valid. and string “false” to be considered false.

Question 4

Question by Kyokasuigetsu

Kyokasuigetsu

I’m using a php loop to generate multiple button elements. How can I determine which button has been clicked by using jquery?

<script type="text/javascript">

$(function(){

    if(button.click){
        alert(button.id);
    }

});

</script>

<?php for($x=0; $x<4; $x++){ ?>
<ul id="x">
<li><input type="button" id="<?php echo $x; ?>" value="<?php echo $x; ?>"/></li>
</ul>
<?php } ?>

Answer

Answer by Starx

Starx

The most common way to identify a element is id. (Literally, id does mean "identification")

The way you want it, should be something like this.

$("input").click(function() { //This will attach the function to all the input elements
   alert($(this).attr('id')); //This will grab the id of the element and alert. Although $(this).id also work, I like this way.
});

However, generalizing the bind to all the input elements might be a bad idea. So try giving a common class to specific elements and use $(".yourclass") instead.

Question 5

Question by David

David

The div is like this

<div style="width:90%;margin:0 auto;color:#Black;" id="content">
this is text, severaltags
</div>

how should i get the div’s content including the
tags using dom in php?

Answer

Answer by Starx

Starx

To get the values, you can try something like this

$doc = new DOMDocument();
$doc->loadHTMLFile('link-t0-html-file.php');
$xpath = new DOMXPath($doc);
$element = $xpath->query("//*[@id='content']")->item(0);
echo $element->nodeValue;

Question 6

Question by user733284

user733284

I have this code:

$Result = DBQuery("SELECT user_id,nick_name,email FROM users LIMIT $fromindex.",".$numOfUsers);
if ($Result)
{
     $resultUsers->UersData=$Result;
}

The problem is that the results U get are in some kind of format that i don’t know.

I want to get the results in array format, which every element of that array should be a value object class of this type:

class UserVO {
    var $_explicitType="UserVO";

    var $id;

    var $nickName;

    var $email;
}

Any idea how it can be done?

Answer

Answer by Starx

Starx

My answer might not sound very helpful, regarding your unclear question. I am supposing, that the function DBquery returns the result of mysql_query(......). If thats true, then you are feeding the userData with a Resource string which is a resource data type.

There are few ways to access such resource String

If the query exports multiple results

while($row = mysql_fetch_assoc($userData) {
   print_r($row); //This is where you will get your mysql rows.
}

If the query return single row

$row = mysql_fetch_assoc($userData);
print_r($row); // //This is where you will get your mysql rows.

Here are some must check links

Question 7

Question by Tattat

Tattat

Here is the layout I would like to make:

Layout example

‘input’ is 70% width of the screen.
and the ‘second input’ is 70% width of ‘input’.
‘button’ is 30% width of ‘input’.
‘input’ is in the middle of the screen.

How can I do so? Thank you.

Answer

Answer by Starx

Starx

Do not think this require any special skills. This is a very basic fluid layout. An example

Markup

<div id="wrapper">
  <input type="text" id="firstrow_textbox" />
  <input type="text" id="secondrow_textbox" />
  <input type="button" id="secondrow_button" />
</div>

CSS

#wrapper {
    width: 70%;
}
  #firstrow_textbox { width: 100%; }
  #secondrow_textbox { width: 70%; }
  #secondrow_button { width: 28%; } /* Due to border and all */

Demo

Question 8

Question by Tomkay

Tomkay

How can I make this work with pure Javascript?
Erase everything (divs, ps, as, spans, imgs, …) in the Body section of a HTML document which has NOT the class”destroy”.

PS.: Pure Javascript means: No JQuery or other frameworks..

Answer

Answer by naivists

naivists

You could walk the DOM recursively and check every node for its class. Something like this

function walk_the_DOM(node) {
    if (node.className && (node.className.indexOf("destroy")>-1)) {
        node.parentNode.removeChild(node);
    } else {
      node = node.firstChild;
      while (node) {
       walk_the_DOM(node);
       node = node.nextSibling;
      }
    }
 };

walk_the_DOM(document.body);

Answer

Answer by Starx

Starx

If you remove everything, you will remove body, head and others too. So to avoid this you can try the following code using Jquery

Try this

$("body").children(':not(.destroy)').remove();

Question 9

Question by Birowsky

Birowsky

I’m building custom content filtering system using custom radio buttons.
There are some problems that occurred on the way like not being able to keep a radio selected on mouse out’ or ‘on class change’, jQuery’s selector wouldn’t track the new class so an events are not fired, and so on..

This is what I’ve succeeded so far:
http://jsfiddle.net/Birowsky/gVwQf/2/

Hope you get the idea.

Answer

Answer by Diego

Diego

http://jsfiddle.net/paska/gVwQf/3/

Answer

Answer by Starx

Starx

This is one of the tricks, that has not been successfully completed by anyone without relying onto horrible looking scripting orimages. There are always some catch in every workaround. However, you can check following links.

Question 10

Question by Ani

Ani

I have designed a log-in page in photoshop, saved the image in png format. but I dont know how to use this image in asp.net web page. Please help in this concern or show me the resource or the way I can design a good log-in without compromising on polished look and functionality.

Thanks

Answer

Answer by Starx

Starx

Changing a PSD Template into a CSS Template is not a easy task as it seems. Comprises may steps.

You have to following steps.

Slice the images in your psd template.
Export the images
Try to minimize the use of photoshop generated slices as less as possible. You should try to recreate the effect using CSS the best you can.
You can first try this into Table Structure, which is the default way Photoshop exports the slices and the HTML.
Later on, create a table less layout. It should be pretty easy once you have created the table layout.

I am assuming, you know how to find the tutorials, regarding the steps I have mentioned above.

Hi! I’m Starx

experienced Software Developer. And this is my blog

Blog Page

jQuery select parent

Question by cabaret

Answer by phil

Answer by Starx

Gap at top of page despite margin:0 and padding: 0

Question by MrB

Answer by James

Answer by Starx

jquery recaptcha php

Question by dave

Answer by dave

Answer by Starx

how to determine which button has been clicked in jquery

Question by Kyokasuigetsu

Answer by Starx

How should I get a div's content like this using dom in php?

Question by David

Answer by Starx

How to get records from MySQL into value objects with PHP

Question by user733284

Answer by Starx

How to layout follow content using CSS?

Question by Tattat

Answer by Starx

Javascript | How to erase anything (divs, p's, a's, …) which has not class ".destroy"?

Question by Tomkay

Answer by naivists

Answer by Starx

Custom Radio Buttons

Question by Birowsky

Answer by Diego

Answer by Starx

how to use a photoshop login in asp.net web page?

Question by Ani

Answer by Starx

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