JQUERY Issue 1

[darryncooke]

I have 2 functions I am trying to run using document.ready

$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/2carne-asada-taco-plate.jpg', 'images/carne-asada-torta.jpg'], imageWidth: 1920, imageHeight: 1080, nextSlideDelay: 5000, slideShowSpeed: 'slow',
});

$(".contents").hide();
  
  $(".headings").click(function()
  {
    $(this).next(".contents").slideToggle(500);
  });
});

Problem is that the second one keeps firing twice.

http://localhost/TortillazV2/home.php

If you click on the Locations or Catering text on the right the P tag expands and then collapses. If I remove the first function then it works fine. If I use noConflict then it works fine but then the first function doesn't.

Im not a javascript programmer by any means but I can usually figure these issues out. What am I missing?

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[feherke]

Hi

That URL not helps. Could you post a public one ?

( In case you are not familiar with :

localhost (meaning this computer) is the standard hostname given to the address of the loopback network interface.

See localhost on Wikipedia for more. Sorry if you knew this all, and the URL was just a copy & paste mistake. )

Feherke.

 

[darryncooke]

I know what localhost is :/ I copied the wrong URL.

http://www.darryncooke.com/tortillaz/home.php

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[feherke]

Hi

Weird. Try this, seems to work in a live test on your page :

$[teal]([/teal][green][i]".headings"[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]([/teal][highlight]e[/highlight][teal])[/teal] [teal]{[/teal]
  $[teal]([/teal][b]this[/b][teal]).[/teal][COLOR=darkgoldenrod]next[/color][teal]([/teal][green][i]".contents"[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]slideToggle[/color][teal]([/teal][purple]500[/purple][teal]);[/teal]
  [highlight]e[teal].[/teal][COLOR=darkgoldenrod]stopPropagation[/color][teal]();[/teal][/highlight]
[teal]}[/teal][teal]);[/teal]

Feherke.

 

[darryncooke]

Thanks, that did the trick.

Im going to be adding a third simple function for a Twitter feed and that was giving me the same issue. It was proving havoc on my balding spot.

I appreciate the help dude/dudette.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[darryncooke]

Feherke,

So i added the third function and its doing the same thing. however on my localhost it at least calls only 2 twitter posts as requested in the file but on my server its calling 5.

but then it runs it twice. your solution for the first issue is not working here.

$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/2carne-asada-taco-plate.jpg', 'images/carne-asada-torta.jpg'], imageWidth: 1920, imageHeight: 1080, nextSlideDelay: 5000, slideShowSpeed: 'slow',
});

$(".contents").hide();
  
  $(".headings").click(function()
  {
    $(this).next(".contents").slideToggle(500);
	e.stopPropagation();
  });
});

$('#tweets').tweetable({});

Thanks for your help.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[feherke]

Hi

but then it runs it twice.

If you are talking about the TWITTER'D's behavior, that should not react to clicks. It has no headings [tt]class[/tt], so [tt]onclick[/tt] event handler is not attached to that.

Beside that, the callback function's formal parameter is missing, so the [tt]stopPropagation()[/tt] method is called on undefined variable.

I am afraid the publicly accessible copy is too outdated for relevant debugging. In that case, could you update it ?


Feherke.

 

[darryncooke]

The TWITTER'D section is not meant to act as the other 2. this section will always be expanded.

the issue is the script calls the TWEETS, and it is supposed to be 2 (or 5 or any number) however it is calling those tweets twice.

I am afraid the publicly accessible copy is too outdated for relevant debugging. In that case, could you update it ?

of what?

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[feherke]

Hi

Earlier you wrote "that did the trick", so I understand the [tt]stopPropagation()[/tt] call worked. But currently on home.php the formal parameter of the callback function is missing :

[tt][highlight #ffebeb][COLOR=white red] X [/color] [red]e is not defined[/red]
[COLOR=#f4d4d4 #f4d4d4] [/color] [green]e.stopPropagation();[/green]

[blue]home.php (line 116)[/blue]​

[/highlight][/tt]

That is why I supposed that copy is not the latest.

One thing I would definitely do : move the last [tt]script[/tt] tags into the [tt]body[/tt] section. ( [tt]html[/tt] can only contain [tt]head[/tt] and [tt]body[/tt] ( and [tt]frameset[/tt] ), all other tags must be within those. )

Sorry, no better idea for now.

Feherke.

 

[darryncooke]

<script type="text/javascript">

$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/2carne-asada-taco-plate.jpg', 'images/carne-asada-torta.jpg'], imageWidth: 1920, imageHeight: 1080, nextSlideDelay: 5000, slideShowSpeed: 'slow',
});

$(".contents").hide();
  
  $(".headings").click(function()
  {
    $(this).next(".contents").slideToggle(500);
	e.stopPropagation();
  });
});

$('#tweets').tweetable({});


</script>

This is all right before my closing BODY tag.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[feherke]

Hi

This is all right before my closing BODY tag.

That is wrong, as your callback function has no formal parameter. It may seem to be effective, but only because it crashes.

Anyway, I found the root of the problem.

In bgstretcher.js line 294, in method _genHtml() there is this line :

$[teal]([/teal][b]this[/b][teal]).[/teal][COLOR=darkgoldenrod]wrapInner[/color][teal]([/teal][green][i]'<div class="bgstretcher-page" />'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]wrapInner[/color][teal]([/teal][green][i]'<div class="bgstretcher-area" />'[/i][/green][teal]);[/teal]

As you called [tt]$('BODY').bgStretcher()[/tt], the [tt]wrapInner()[/tt] methods in the above line replaces the entire content of the [tt]document.body[/tt] and that seems to make the jQuery [tt]ready()[/tt] event to be fired again.

The best solution I found is to add those two [tt]div[/tt]s to your home.php "manually" :

[gray]<!-- ... -->[/gray]
[b]</head>[/b]

[b]<body>[/b]
[highlight][b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"bgstretcher-area"[/i][/green][b]>[/b][/highlight]
[highlight][b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"bgstretcher-page"[/i][/green][b]>[/b][/highlight]
[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"header"[/i][/green][b]>[/b]
  [b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"main_menu"[/i][/green][b]>[/b] [b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#"[/i][/green][b]><img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"tortillaz-logo.png"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"183"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"50"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]"Tortillaz Logo"[/i][/green] [b]/></a>[/b]
[gray]<!-- ... -->[/gray]
  [b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"footcont"[/i][/green][b]>[/b]site by [b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://www.darryncooke.com"[/URL][/i][/green][b]><span[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"orange"[/i][/green][b]>[/b]Darryn Cooke[b][/b]</a></div>[/b][/color]
  
[b]</div>[/b]
[b]</div>[/b]
[highlight][b]</div>[/b][/highlight]
[highlight][b]</div>[/b][/highlight]
[b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green][b]>[/b]
[teal]<!--[/teal] [teal]...[/teal] [teal]-->[/teal]

Then disable the double call protection in bgstretcher.js line 29 :

[COLOR=gray silver] 27 [/color]     [b]if[/b] [teal]([/teal]$[teal]([/teal][green][i]'.bgstretcher-page'[/i][/green][teal]).[/teal]length [teal]||[/teal] $[teal]([/teal][green][i]'.bgstretcher-area'[/i][/green][teal]).[/teal]length[teal])[/teal] [teal]{[/teal]
[COLOR=gray silver] 28 [/color]       [b]if[/b][teal]([/teal][b]typeof[/b][teal]([/teal]console[teal])[/teal] [teal]!==[/teal] [green][i]'undefined'[/i][/green] [teal]&&[/teal] console [teal]!=[/teal] [b]null[/b][teal])[/teal] console[teal].[/teal][COLOR=darkgoldenrod]log[/color][teal]([/teal][green][i]'More than one bgStretcher'[/i][/green][teal]);.[/teal]
[COLOR=gray silver] 29 [/color] [gray][highlight]//[/highlight]      return false;[/gray]
[COLOR=gray silver] 30 [/color]     [teal]}[/teal]

Then either disable the above mentioned line 294 or change it to this :

$[teal]([/teal][b]this[/b][teal])[/teal][highlight][teal].[/teal][COLOR=darkgoldenrod]not[/color][teal]([/teal][green][i]':has(.bgstretcher-page)'[/i][/green][teal])[/teal][/highlight][teal].[/teal][COLOR=darkgoldenrod]wrapInner[/color][teal]([/teal][green][i]'<div class="bgstretcher-page" />'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]wrapInner[/color][teal]([/teal][green][i]'<div class="bgstretcher-area" />'[/i][/green][teal]);[/teal]

And of course, now you can remove that [tt]stopPropagation()[/tt] workaround.

Note that I found no license information for bgStretcher. No idea if applying the above solution is legal or not.


Feherke.

 

[darryncooke]

the plugin is opensource if I remember correctly.

so ok that did most of the trick. however on first load of the page the background images are not visible. However on refresh everything works A-ok.

Suggest work around for that?

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[feherke]

Hi

Works correctly here on Gecko, Presto and WebKit, so no idea. There is only a small delay for loading on each image's first display. As far as I remember that was present earlier too.

Feherke.

 

[darryncooke]

Yes, you are correct. i tested it in couple other browsers besides just FF and i was just being impatient.

Thank you very much for all your help I really appreciate it.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services