jQuery

Grim... · **Posted:** Wed Mar 02, 2011 13:31

\o

I don't know why we're hi5ing

Grim... · **Posted:** Wed Mar 02, 2011 13:31

Malc wrote:

Once you have dragged the "wrong" icon, you can't change your mind to drag the "right" one.

Malc

Yup. Filters idiots, too.

kalmar · **Posted:** Wed Mar 02, 2011 13:32

Heh!

So - is this the new beex spambot preventer?

Grim... · **Posted:** Wed Mar 02, 2011 13:33

Could be, I guess.

kalmar · **Posted:** Wed Mar 02, 2011 13:34

"Drag the picture of Craster into the circle."

Mr Russell · **Joined:** 6th Apr, 2008 **Posts:** 12274

kalmar wrote:

"Drag the picture of Craster into the circle."

Fucking hell, going by the wayback machine that would kick off 90% of the existing members as well.

Malabelm · **Posted:** Wed Mar 02, 2011 13:52

Mr Russell wrote:

Fucking hell, going by the wayback machine that would kick off 90% of the existing members as well.

Going by the wayback machine, everybody is Craster, so nobody would ever get it wrong.

Grim... · **Posted:** Sun Mar 13, 2011 23:57

Grim... wrote:

Malabelm wrote:

Grim... wrote:

I have decided to start a web dev blog, as there aren't many of them about at the moment.

http://www.sadcow.co.uk/

Making the most of that cow

Good stuff. Let us know when you've put something up and got an RSS feed.

I'm fairly certain that's as far as it will get, but you never know.

Spook!

devilman · **Posted:** Wed May 11, 2011 10:51

Not really sure if this is a jQuery or Javascript thing or just me being thick. I've got this bit of code...

Code:

    var date1 = init;
    date1=jQuery.datepick.add(jQuery.datepick.add(date1, offset, 'd'), -40, 'w');
    jQuery('#date1').val(jQuery.datepick.formatDate('DD, MM d, yyyy',date1));

Line 1 - init is a value from a date picker
Line 2 - This rounds to the following Saturday and then subtracts 40 weeks
Line 3 - Outputs the result into the #date1 div

This all works fine. However, when I try to do something similar below it -

Code:

    var date2 = init;
    date2=jQuery.datepick.add(jQuery.datepick.add(date2, offset, 'd'), -20, 'w');    
    jQuery('#date2').val(jQuery.datepick.formatDate('DD, MM d, yyyy',date2));

The value it puts into #date2 is 20 weeks before the date1 variable, not the init variable. Now I know very little about Javascript and jQuery - am I doing something stupid with the way I'm handling the variables here?

(Also, the 'jQuery' bits above are just equivalents of '$' - it's a Joomla thing)

Grim... · **Posted:** Wed May 11, 2011 11:30

Huh - it doesn't look like you're doing anything wrong.
If you log / alert date2 between each line, is it correct?

If it turns out to be a bug in jQuery, just do #date2 first, then take another 20 weeks off for #date1

Also, I never knew using val() would set the text in an element - it's not in the docs that I can see. You might want to change it to .html() or .text() in case jQuery depreciates it in the future.

devilman · **Posted:** Wed May 11, 2011 11:54

From setting a few alerts, it seems that the jQuery functions affect all the variables as init, date1 and date2 end up being the same. I did google something about javascript pointers where one value changing affects the other, but I'm not sure if it's that. If I just re-set init at each stage, that seems to work around it, but it just struck me as odd.

Oh, and sorry about the val thing - it's actually an input within the div.

devilman · **Posted:** Thu Oct 13, 2011 16:28

Tinkering with more Jquery/Javascript stuff lately and I just wondered - for those who do this stuff regularly, do you test everything so that it all degrades neatly on non-Javascript browsers? Or put big 'Turn bloody Javascript on' messages up instead? I'm favouring the latter option at the moment as I'm lazy. This method seems quite neat.

Grim... · **Posted:** Thu Oct 13, 2011 16:36

Didn't click the link, but <noscript> is what I use, with a message along the lines of "Javascript is your friend".

devilman · **Posted:** Thu Oct 13, 2011 16:39

Grim... wrote:

Didn't click the link, but <noscript> is what I use, with a message along the lines of "Javascript is your friend".

Yeah, that's pretty much what's on the link, but with some CSS stuff to hide the rest of the content..

Code:

<!-- Add this into Head tag --->
 
<style type="text/css">
    #javascript_error{
        display:none;
    }
</style>
 
<noscript>
 
    <style type="text/css">
        #page{
            display:none;
        }
 
        #javascript_error{
            display:block;
            font-size:20px;
            color:red;
        }
    </style>
 
</noscript>
 
<!-- Add this into Body tag where you want to display your error -->
<div id="error">Please enable javascript into your browser.</div>

Malabelm · **Posted:** Thu Oct 13, 2011 17:03

I try to progressively enhance where possible, so there's always a non-JavaScript fallback. When JavaScript has been essential, a friendly message in a noscript tag is usually fine.

Grim... · **Posted:** Fri Nov 04, 2011 16:13

Man, check out how lazy I was when I realised I hadn't set labels for any of my check boxes on a page:

Code:

    var sbCounter = 1;
    $("input.quickSampleBox").each(function() {
        $(this).attr("id", "qsb_"+sbCounter);
        var $labelBox = $(this).parent().siblings();
        var labelBoxHtml = $labelBox.html();
        $labelBox.html('<label for="qsb_'+sbCounter+'">'+labelBoxHtml+'</label>');
        sbCounter ++;
    });

In my defence, there are loads of them.

devilman · **Posted:** Fri Jan 13, 2012 12:59

Figured I'd post this question in here, but it might be a more general Javascript/IE-Crappiness thing.

This fancy form thing has five 'pages' - all 600px wide. In the Javascript, there's this bit of code -

Code:

var stepsWidth   = 0;
var widths       = new Array();
$('#steps .step').each(function(i){
var $step       = $(this);
widths[i]        = stepsWidth;
stepsWidth       += $step.width();
});
$('#steps').width(stepsWidth);

which adds up all the pages to give a total width (in the demo's case, 5x600px - 3000px) and sets that width for the steps div. However, for some reason, IE7 gives a total of 2980px which pretty much breaks the functionality of the form. If it was IE6, I'd probably shrug it off, but I'd like to get it working properly in IE7 too. There is a cludgy fix on script's comments page but I'd like to fix it properly if possible. Any ideas?

Grim... · **Posted:** Fri Jan 13, 2012 13:09

Why not just use

Code:

$('#steps').width(3000);

?

devilman · **Posted:** Fri Jan 13, 2012 13:11

Grim... wrote:

Why not just use

Code:

$('#steps').width(3000);

?

Yeah. I'm thinking that if I can't figure out why it's miscalculating it, I'd just hard code the number (sorry, I should have mentioned that). I just couldn't understand why it was getting it wrong in the first place.

Grim... · **Posted:** Fri Jan 13, 2012 13:18

IE uses a different box model to other browsers. Feel free to watch this if you're interested.

Grim... · **Posted:** Fri Jan 13, 2012 13:18

I suppose you want a link

http://net.tutsplus.com/tutorials/html- ... del-right/

devilman · **Posted:** Fri Jan 13, 2012 13:40

Cheers.. I'll have a nose at that later.

However, it's only IE6 and 7 that are affected. IE 8 and 9 are ok.

Grim... · **Posted:** Fri Jan 13, 2012 14:54

devilman wrote:

Cheers.. I'll have a nose at that later.

However, it's only IE6 and 7 that are affected. IE 8 and 9 are ok.

That depends if the numpty on the other end is using them in "compatibility" mode or not.

BikNorton · **Joined:** 30th Mar, 2008 **Posts:** 10093

Round to the nearest width as a belt and braces exercise?

Grim... · **Posted:** Fri Jan 13, 2012 15:25

BikNorton wrote:

Round to the nearest width as a belt and braces exercise?

Well, he doesn't know the width. That's what IE is reporting wrongly.

devilman · **Posted:** Fri Jan 13, 2012 15:35

Sorted it. IE7 was applying a border of 2px all around which isn't specified anywhere that I can see. So, I've just put a border:0; into the .step bit of the CSS and that's tidied it up nicely.

Grim... · **Posted:** Thu Jul 05, 2012 11:03

I'm putting this here so I don't forget it.

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="local/js/jquery-1.7.2.min.js"><\/script>')</script>

If you use jQuery, this is how you should include it.

devilman · **Posted:** Thu Jul 05, 2012 11:05

What's the reasoning behind including it that way?

GazChap · **Posted:** Thu Jul 05, 2012 11:06

Is there not a danger there that the second line of code will run before the CDN-hosted code has downloaded, and thus inadvertently get included twice?

Grim... · **Posted:** Thu Jul 05, 2012 11:11

devilman wrote:

What's the reasoning behind including it that way?

First it tries to get it from the CDN (Google, in this case), which is good because as more and more sites do it there's a much higher chance the user will have it cached. The second bit of code kicks in if the file doesn't download from the CDN (maybe it's gone offline) and grabs a copy from the host's server instead (which is slower for the end user, and harder work for your webserver too).

GazChap wrote:

Is there not a danger there that the second line of code will run before the CDN-hosted code has downloaded, and thus inadvertently get included twice?

I may well do, the first time (or if the CDN goes down for a few seconds). jQuery doesn't care about that, though - the first one will overwrite the second.

GazChap · **Posted:** Thu Jul 05, 2012 11:16

Aah, swish.

Grim... · **Posted:** Thu Jul 05, 2012 12:12

While I am (and this thread is) here, here's a jQuery plugin I just wrote to make an element resize based on the content in it.

Code:

(function($){
    $.fn.slideToFit = function(duration, callback) {
      if (typeof(duration) === "undefined") {
         duration = 500;
      }

        return this.each(function() {
           var $elem = $(this);
           
           if ($elem.is(":hidden")) {
              $elem.height(1);   
             }
           $elem.stop();
           var oldHeight = $elem.height();
           $elem.css({'overflow-y':'hidden','height':oldHeight});
           $elem.css({'overflow-y':'auto','height':'auto'});
            var neededHeight = $elem.height();
            $elem.css({'overflow-y':'hidden','height':oldHeight});

            $elem.show().animate({
               height: neededHeight
              }, duration);
              
          if (typeof callback == 'function') { 
             setTimeout(function() {
                callback.call(this);
             }, duration);
          }              
        });
    }
})(jQuery);

Call it like this:

Code:

$(".myElement").slideToFit(1000, function() {
   // finished sliding
});

Demo: http://www.sadcow.co.uk/demo/slide-to-fit.htm

BikNorton · **Joined:** 30th Mar, 2008 **Posts:** 10093

If you can, you should cancel previous timeouts (or not queue a new one if there's one due) because if you click that demo loads, really fast, it sits there "randomly" resizing afterwards. Funny as that is, possibly not desirable.

Cool, though.

Grim... · **Posted:** Thu Jul 05, 2012 14:58

Good call.

Code:

$elem.stop()

before the height is calculated should do it.

Grim... · **Posted:** Thu Jul 05, 2012 14:59

There we go.
We're brogramming!

BikNorton · **Joined:** 30th Mar, 2008 **Posts:** 10093

Grim... · **Posted:** Thu Jul 05, 2012 17:03

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

N00b dynamic link handler question. I've got two divs. One's got links in, and the other is for the content:

Code:

<div id=links>
<a href="page.php?val=1" id=test>1</a><br/>
<a href="page.php?val=2" id=test>2</a><br/>
</div>
<div id=content></div>

So I've got a jQuery function that goes 'hey, you've clicked a link!" and loads the URL into the content div. This is what I've got so far:

Code:

<script>
$(function() {
    $("#test").live("click", function(){                       
  $("#content").load($("#test").attr("href"));    
  return false;     
});
});

</script>

Unfortunately, that's matching the .href attribute of the first instance of 'test', so it's returning "page.php?val=1" as the URL each time.

I either need to:

1) Change the handler to dynamically pick up an ID of "testX" rather than using the same id for every link
or
2) Change the load command so it knows which one I'm talking about.

Thoughts?

Malabelm · **Posted:** Sat Sep 01, 2012 16:32

Craster wrote:

N00b dynamic link handler question. I've got two divs. One's got links in, and the other is for the content:

Code:

<div id=links>
<a href="page.php?val=1" id=test>1</a><br/>
<a href="page.php?val=2" id=test>2</a><br/>
</div>
<div id=content></div>

So I've got a jQuery function that goes 'hey, you've clicked a link!" and loads the URL into the content div. This is what I've got so far:

Code:

<script>
$(function() {
    $("#test").live("click", function(){                       
  $("#content").load($("#test").attr("href"));    
  return false;     
});
});

</script>

Unfortunately, that's matching the .href attribute of the first instance of 'test', so it's returning "page.php?val=1" as the URL each time.

I either need to:

1) Change the handler to dynamically pick up an ID of "testX" rather than using the same id for every link
or
2) Change the load command so it knows which one I'm talking about.

Thoughts?

You shouldn't be re-using IDs.

But change this line:

Code:

$("#content").load($("#test").attr("href"));

to:

Code:

$("#content").load($(this).attr("href"));

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

Lovely, ta. I tried doing it by class but could get it working, for some reason.

Malabelm · **Posted:** Sat Sep 01, 2012 17:15

Craster wrote:

Lovely, ta. I tried doing it by class but could get it working, for some reason.

That should be exactly the same, but with ".test" instead of "#test" for your selector.

Code:

$(function() {
    $(".test").live("click", function(){                       
   $("#content").live($(this).attr("href"));    
    return false;     
    });
});

<div id=links>
    <a href="page.php?val=1" class=test>1</a><br/>
    <a href="page.php?val=2" class=test>2</a><br/>
</div>
      
<div id=content></div>

Works for me.

GazChap · **Posted:** Sat Sep 01, 2012 18:34

Any reason you're using "live", Cras? If the links are just part of the HTML from the time the page is loaded (i.e they're not loaded in from another AJAX call or anything) then you should just be able to use $('.test').click(function() { });

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

Er...because I'm cribbing random shit off the internet?

Grim... · **Posted:** Sat Sep 01, 2012 21:35

Also live() was depreciated a few versions back, so you should use on().

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

Ffs. I deprecated your mum.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

Jesus fucking Christ. Whoever invented all this shit should just realise that frames were FUCKING FINE.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

If I've loaded a file in a div using jquery, can I put more jquery in that file, or should it go in the file that contains the div?

Grim... · **Posted:** Sun Sep 02, 2012 12:41

Put it in the parent.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49232

I put it in your parent.

Grim... · **Posted:** Sun Sep 02, 2012 15:01

My dad still denies that?

Be Excellent To Each Other

jQuery
One for the JS geeks

Who is online

Be Excellent To Each Other

jQuery One for the JS geeks

Who is online

jQuery
One for the JS geeks