Can't get jQuery hide working

Question 1

Question by fearofawhackplanet

I need a sanity check as I’ve spent about an hour trying to figure this out!

getRows().each(function() {
    alert(this);     // alerts '[object HTMLTableRowElement]', nothing wrong here
    this.hide();     // row not hidden - wtf?
    alert('hidden'); // no alert - more wtf!
});

What can be wrong that calling hide() is bombing out?

Answer

Answer by Nick Craver

Nick Craver

Inside the .each() this is a DOM element (HTMLTableRowElement), you need to wrap it to make it a jQuery object again (which has the .hide() method) like this:

$(this).hide();

Without this, you’re getting a method undefined error, because HTMLTableRowElement doesn’t have the .hide() method 🙂 This error is also why the alert isn’t firing afterwards, because execution stopped on the error.

Answer

Answer by Starx

Starx

try $(this).hide()

Question 2

Question by mali

mali

i don’t know much about PHP but these days I’m modifying an existing script. I want to know how can I replace – with white or blank space

For example a variable contains ‘Love-you’ and I want to replace this hyphen between them with a space like this ‘Love you’.

I’ll appreciate your feed back.

Answer

Answer by Starx

Starx

You can also use explode and implode

Here is an example

$string = "Love-You";
$arr = explode("-",$string);
$string = implode(" ",$arr);

Question 3

Question by MyBigBigHands_32

MyBigBigHands_32

My footer is designed to stay at the bottom of the page even if the div above it only has a small amount of content. It worked until recently, and I seem to have broken it somehow.
Can you take a look?

Thanks in advance.

CSS:

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font: 100% Helvetica, sans-serif, Arial, sans-serif;
    color: #000;
    background-color: #FFF;
    background-image: url(images/BGmain.png);
    background-repeat: repeat-x;
}
/*----------
Div styles
----------*/
#container {
    min-height: 100%;
    position: relative;
}
.header {
    padding: 0 0 230px 0;
    text-align: center;
    background-image: url(images/BGlogo_55top.png);
    background-repeat: no-repeat;
    background-position: top;
}
.column1 {
    padding-bottom: 50px;
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;           
    text-align: center;
}
/*----------
Other
----------*/
.plainimg {
    border-style: none
}
/*----------
Text styles
----------*/
p {
    font-size: 80%;
    color: #333;
    line-height: 150%;
    text-align: left;
    padding: 1px 15px 1px 15px;
}
h1 {
    font-size: 100%;
    color: #000;
    padding: 0;
}
h2 {
    font-size: 100%;
    font-weight: 500;
    color: #000;
    padding: 0;
    text-align: center;
}
/*----------
Links
----------*/
a.navlink:link, a.navlink:visited {
    text-decoration: none;
    display: inline-block;
    color: #F1F1F1;
    width: 120px;
    text-align: center;
    padding: 0 0 3px 0;
    font-size: 80%;
}
a.navlink:hover, a.navlink:active {
    text-decoration: none;
    display: inline-block;
    color: #FFF;
    background-color: #000;
    width: 120px;
    text-align: centre;
    padding: 0 0 3px 0;
    font-size: 80%;
}
a:link, a:visited {
    text-decoration: none;
    color: #AEAEAE;
}
a:hover, a:active {
    text-decoration: underline;
    color: #999
}

The div arrangement is as follows:

<div id=container>
<div class=header></div>
<div class=column1></div>
<div class=footer></div>
</div>

Answer

Answer by Brock Adams

Brock Adams

As Jason McCreary said, you need to add height to the html CSS.

Use:

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

On your pages this triggers an extraneous scrollbar for some reason.

UPDATE:
The scrollbar appears to be triggered by the overflow of the .footer h6.
~~Adding: bottom: 2.5ex; and line-height: 1; to the footer style appears to clears that.~~

But a better way is to use a CSS reset.

With no reset, at the minimum, add:

.footer h6 {
    margin: 0;
    padding: 0;
}

.

A CSS reset will also minimize cross-browser variation that busts the layout from platform to platform.

Answer

Answer by Starx

Starx

Solved. Easy Solution Just put your Footer Division outside of your Container Division.

<div id=container>
    <div class=header></div>
    <div class=column1></div>
</div>
<div class=footer></div>

Question 4

Question by Purushotham Reddy

Purushotham Reddy

Is there any precedence to the javascript events that occur in a HTML page ?
For example:

consider these two events onchange and onblur.

Change the text of a text box. The event onchange occurs only onblur of the text box.
In this case which event will be processed first.

I hope I gave the understandable example.

Answer

Answer by Starx

Starx

onChange, occurs first, if this is what you are asking

Question 5

Question by Leo

Leo

I need to overlay two PNG images and see this in IE6.

Simple overlay like:

<div style="position: relative; width: 150px; height: 300px;">
<img src="im1.png" alt="" style="position: absolute; top: 0; left: 0;">
<img src="im2.png" alt="" style="position: absolute; top: 0; left: 0;">
</div>

works only for 256 color images, it doesn’t work at all ofr true color images.

Is there any way to overlay true color images in IE6?

Answer

Answer by Starx

Starx

Try this, this ie pngfix also supports true color

http://www.twinhelix.com/css/iepngfix/

Question 6

Question by Syom

Syom

i know, that two elements can’t hav the same id. But it’s happens so, that in my project i have two elements with same id in other divs, like this

<div id="div1">
     <img id="loading" />
</div>
<div id="div2">
     <img id="loading" />
</div>

and css:

#div1 #loading
{
    some style here...
}
#div2 #loading
{
    another style here...
}

works fine for me, but maybe it is not reccomended to do by so?

Thanks

UPDATE

Yes, i know, thet i can use classes, and it’s strongly recomended to do by so, but i want to know is there any potential risk in this usage of id?
i think no, becouse when i wrote for example

$("#div1 #loading")... it becomes a unique element.
isn’t it?

Answer

Answer by Starx

Starx

Change your id to class. It is not a good idea to give duplicate id.

Think two students having same roll no in a class. Imagine them getting examination result. How will the school be able to recognise the marksheet?

Your way is not cross browser compatible, and will affect a lot while coding JavaScript, and posted form etc

You can get the same effect using class

see

<div id="div1">
     <img class="loading" />
</div>
<div id="div2">
     <img class="loading" />
</div>

and css:

#div1 .loading
{
    some style here...
}
#div2 .loading
{
    another style here...
}

Question 7

Question by JasonS

JasonS

Firstly I would just like to thank everyone for reading this and answering my questions. The help given to date has been invaluable and I a better programmer thanks to the help I have been given.

To the problem at hand. I fear it is a little rough but the script below for the most part works.

The problem is that while the history is stored, when a user goes back or forward the page doesn’t change. Do you have any idea what I can do to modify this so the go function is triggered?

$(document).ready(function(){

 $("a").click(function() {
  if (strpos($(this).attr('href'), 'mob.php') !== false) {
   window.location = url($(this).attr('href'));
   go(idToPath($(this).attr('href')));
   return false;
  }
 });
});

function go(num) {
 if (num != undefined) {
  $.ajax({
   url: "mob.php?p="+num+"&logo=0",
   cache: false,
   success: function(html){
    $("#ajax").html(html);
   }
  });
 }
}

$.history.init(function(u) {});
var page = 4;
var id = window.location.hash.substr(1);
if (id != '' && page != id) {
 go(id);
}

Answer

Answer by Ragnis

Ragnis

There isn’t such event.

But you could use some history plugin, on see, how its done there:
http://www.mikage.to/jquery/jquery_history.html

Answer

Answer by Starx

Starx

Well, I am not sure of any fixed solution to this problem.

But I came up with a temporary solution for this.

At the begining of every page navigated through Ajax, I store the page info and additional parameters. like $_SESSION['page'][] = "book.php?cat=1"
Attach a function to browser’s history event and call a custom function to fetch the required URL and redirect to it.

This is not much of a answer, but this should give you a rough idea. 🙂

Question 8

Question by jay

jay

Thanks for looking.

I’m trying to write a script to set a cookie after the user posts a comment, limiting them from posting again for 30 minutes. I’m so confused on where to start. Please, could you guys help me out on how I do this?

I’m trying to use this jquery plugin – countdown timer.

Answer

Answer by Starx

Starx

Use Session

For example, after a post, put the current time + 30 minutes in your session line this
$_SESSION['postTimeFlag'] = time() + 1800;
Then whenever the user is about to post then the session

if(time()>$_SESSION['postTimeFlag']) { 
   //continue posting
}

Question 9

Question by learner

learner

How to do numeric validation using JQuery. I have to validate my price field using JQuery. any body knows please share your knowledge with me 🙁

Answer

Answer by Tom

This is also good for form validation:

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Theres an example:

http://www.position-relative.net/creation/formValidator/

Answer

Answer by Starx

Starx

use jquery validation plugin

http://www.bassistance.de/jquery-plugins/jquery-plugin-validation/

It contains all the validations like, require, format, size, range, value

Question 10

Question by ungalnanban

ungalnanban

My string is like the following format:

$string =
“name=xxx&id=11&name=yyy&id=12&name=zzz&id=13&name=aaa&id=10”;

I want to split the string like the following:

$str[0] = “name=xxx&id=11”;

$str[1] = “name=yyy&id=12”;

$str[2] = “name=zzz&id=13”;

$str[3] = “name=aaa&id=10”;

how can I do this in PHP ?

Answer

Answer by jigfox

jigfox

Try this:

$matches = array();
preg_match_all("/(name=[a-zA-Z0-9%_-]+&id=[0-9]+)/",$string,$matches);

$matches is now an array with the strings you wanted.

Update

function get_keys_and_values($string /* i.e. name=yyy&id=10 */) {
  $return = array();
  $key_values = split("&",$string);
  foreach ($key_values as $key_value) {
    $kv_split = split("=",$key_value);
    $return[$kv_split[0]] = urldecode($kv_split[1]);
  }
  return $return;
}

Answer

Answer by Starx

Starx

I will suggest using much simpler term

Here is an example

$string = "name=xxx&id=11;name=yyy&id=12;name=zzz&id=13;name=aaa&id=10";
$arr = explode(";",$string); //here is your array

Month: June 2010

Can't get jQuery hide working

Question by fearofawhackplanet

Answer by Nick Craver

Answer by Starx

how to replace hyphen with blank space / white space? php

Question by mali

Answer by Starx

sticky CSS footer broken

Question by MyBigBigHands_32

Answer by Brock Adams

Answer by Starx

Precedence of the javascript events

Question by Purushotham Reddy

Answer by Starx

PNG transparency with IE6

Question by Leo

Answer by Starx

Is it normal to have two elements with same id in two div elements with other id?

Question by Syom

Answer by Starx

Trigger Ajax function with back/forward actions?

Question by JasonS

Answer by Ragnis

Answer by Starx

Limit posting to every 30 minutes

Question by jay

Answer by Starx

How to do numeric validation using JQuery?

Question by learner

Answer by Tom

Answer by Starx

Parsing a string in PHP

Question by ungalnanban

Answer by jigfox

Answer by Starx

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