Hi! I’m Starx

Question 1

Question by 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 2

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 3

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 4

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 5

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

Question 6

Question by DA.

DA.

I’m having an issue with jQuery slideDown when the contents of the object I’m sliding down is floated.

What happens is that that the div slides down WAY past the height of the contents, and then ‘snaps’ to the proper height.

I think (merely a theory) that the div is sliding down based on the height it would be if the contents inside weren’t floated. For instance, if I have 4 floated items, the div seems to expand twice as far than when I have 2 floated items within.

No amount of containing the floats with clearfix hacks seems to fix anything.

The solution I’ve used in the past (and one that is recommended) is to set the height of item via CSS BEFORE hiding it. That way, slidedown knows how far to go.

The catch is that I’m nesting panels that use slide down. I can’t set the height of the parent before hand as it would be calculated based on the nested hidden panels being expanded already.

I could recursively call that function that sets up all my toggle panels…find the innermost nested ones, set the height, collapse the ones I want hidden by default, and then move my way up the hierarchy. But that’d be a performance hit having to traverse so much.

Anyone know of a way to fix this slideDown of floated content without fixing the height via CSS before hand without having to traverse the dom setting heights manually first?

UPDATE:

sample code is here:

http://jsbin.com/ajoka/10/

(click the page to see it sliding)

This is based on the exact styles I am using and in that particular combination, you’ll see the issue. Note the DIV being set to slideDown has a pink background. It will slide down FURTHER than its contents and then quickly snap back into the proper place.

Answer

Answer by Starx

Starx

solved:

remove margin-bottom:10px; from your

  .itemsWrapper {
    margin-bottom:10px;
    overflow:auto;
    width:100%;
    background: green;
  }

http://jsbin.com/ajoka/11

Question 7

Question by 動靜能量

動靜能量

Because I need to fadeIn() another element of the same size back in, is there a way to fadeOut() the element so that the space is kept, so that the other elements are not re-flowed for a split second and then the fadeIn() will bring back another element with the same size?

Answer

Answer by ckramer

ckramer

Two techniques come to mind:

Wrap the element in a div which occupies the correct amount of space.
Use the .animate method to change the opacity of the item from 100% to 0%, then, when the animation completes, swap the new element in and once again use animate to change the opacity from 0% to 100%.

Answer

Answer by Starx

Starx

Keep the element you want to fade inside a fixed <div style="display:block;width:300px;height:200px;">, then if you hide the element inside it, it will not affect the layout at all.

Question 8

Question by 動靜能量

動靜能量

in jQuery, will the following be not so smooth?

$('<a href= ... ><img src= ...  /></a>').prependTo($('#someDiv')).hide().fadeIn()

Will it actually shows the added element for a split second, and then hide it, and then fadeIn ?

Then will the animation be not so smooth?

Is there any better method?

Or the following?

$('<a style="display:none" href= ... ><img src= ...  /></a>').prependTo($('#someDiv')).fadeIn()

or

$('<a href= ... ><img src= ...  /></a>').hide().prependTo($('#someDiv')).fadeIn()

Update: the original was

$('#someDiv').prepend('<a href= ><img src  /></a>').hide().fadeIn()

which actually may be hiding the #someDiv and then fading it in?

Answer

Answer by Nick Craver

Nick Craver

You can rearrange it a bit using .prependTo(), like this:

$('<a href= ... ><img src= ...  /></a>').hide().prependTo('#someDiv').fadeIn();

This allows you to call .hide() before adding it, so no visual artifacts.

Answer

Answer by Starx

Starx

How about fading it first and then prepending it and only showing it then, quite smooth right?

$('#someDiv').fadeOut("fast").prepend('<a style="display:none" href= ><img src  /></a>').fadeIn("slow");

Question 9

Question by Mubeen

Mubeen

Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?

I think you are all understand this

alt text

Answer

Answer by Jouke van der Maas

Jouke van der Maas

You can (at the moment – cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:

<a class="img" id="thatoneimg" href="#"></a>

And then in the css:

a.img {
  width: 100px;
  height: 100px;
}
a#thatoneimg {
  backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
  backround-image: url(movingimg.gif);
}

That should work cross browser. You need the a-tag for it to work in IE.

Edit:
As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.

Answer

Answer by Starx

Starx

If I understood you correctly, you want to continously change the position of your background image while you hover over one button.

If that’s right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover

Question 10

Question by user369672

user369672

What is the Box Model of IE, I so often see at the internet tutorials? But I never could understand it clearly.

Answer

Answer by Quentin

Quentin

In IE 5.5 and earlier, and in later versions of IE that are rendering in Quirks mode, the padding is placed inside the content width instead of around it.

These days, just use a Standards mode triggering Doctype and don’t worry about it.

Answer

Answer by Starx

Starx

http://www.google.com/search?hl=en&safe=off&client=firefox-a&hs=Ro2&rls=org.mozilla%3Aen-US%3Aofficial&q=IE+Box+Model+Hack&aq=f&aqi=&aql=&oq=&gs_rfai=

experienced Software Developer. And this is my blog

Blog Page

Question by Syom

Answer by Starx

Question by JasonS

Answer by Ragnis

Answer by Starx

Question by jay

Answer by Starx

Question by learner

Answer by Tom

Answer by Starx

Question by ungalnanban

Answer by jigfox

Answer by Starx

Question by DA.

Answer by Starx

Question by 動靜能量

Answer by ckramer

Answer by Starx

Question by 動靜能量

Answer by Nick Craver

Answer by Starx

Question by Mubeen

Answer by Jouke van der Maas

Answer by Starx

Question by user369672

Answer by Quentin

Answer by Starx

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