Jquery.load $ajax loads content then dissapears

hi guys new to this forum is any of you guys can help that would be super…

i have a main index page with a div where i inject my external pages to… when the page opens the slider at the top of the screen works fine… when i click work, and then click home again. my slider dissapers after a few seconds or when you click the arrows… having a nightmare been out it for days… my general.js is located in the main index page…

www.alexcallow.com

i think its something to do with my ajax call, not sure though… really am stuck

$.ajax({
url: “page/index.php”,

success: function( data ) {
			  	
// Execute slide here after content has loaded;
$('#slider-id').liquidSlider({
autoSlide:true,
autoSlideInterval: 7000,
autoHeight:false,
    dynamicTabs: false,

     });

}

main index page - http://pastie.org/private/nymfbdsuau9amxjtcmxu1g
external home page - http://pastie.org/private/f9zxpvv2wvm1skz2mmybsq
external work page - http://pastie.org/private/zwvcnb4i9cjs8vfpnttq
general.js - http://pastie.org/private/71rbckmrkrqytsogdxitcw

Hi there,

Welcome to the forums :slight_smile:

When I check out your page with the console open, then click on “Work”, I see the following error:

Uncaught TypeError: Cannot set property 'innerHTML' of null - blogger.js:12

It’s probably a good idea to fix this before trying to troubleshoot your main problem.

Further inspection shows this line in blogger.js to be the culprit:

document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');

So either create the element, or temporarily remove the blogger script from your page and see if that makes a difference.

just tried what you said and its not that… removed the link… the website works fine with the error. just having a problem when i go from home page to another page and then back the home page, the slider yanks up and then works for couple of seconds and then vanishes… so annoying. cant seem to work it out…

Shame!
I didn’t think it would be that, but it’s wise to correct all obvious JS errors on a page before trying to troubleshoot anything.

I’ll try and get your page working locally, so I can have a poke around with it and let you know if I find anything.

thats brillant, if you could that would be amazing if you could really struggling…

Hi there,

I managed to set up a copy of your site running locally, but there is one problem.
The issue only appears sporadically. Sometimes the slider behaves as it should, sometimes it jumps off the page.
The same is true for your site.

Do you have a way to reproduce this every time?

thats exactly what happen for me to, not sure why this is happening. any way i can upload my root file and send it to you

the slider is from http://liquidslider.kevinbatdorf.com/

Hi,

So, it seems that something on your page is programatically setting the width of the <div> element with the id of “slider-id-wrapper” to zero.
I couldn’t work out if this was a JavaScript or a media query, but you can see what I mean, by making the slider vanish, then using (for example) the Chrome web inspector to inspect this element.
You will see an inline style of “width:0px”. Remove this and your slider will reappear.

Anyway, a really quick and dirty fix, would be to add this inside your $(document).ready in general.js.

setInterval(function(){
  if($('#slider-id-wrapper').css("width") == "0px"){
    $('#slider-id-wrapper').css("width", "auto")
  };
}, 250);

However, if I was you, I would try to get to the bottom of this.
Try stripping out all of the unnecessary styles and scripts until you find what is doing this.
You might also consider having a look at a different responsive slider: http://visionwidget.com/responsive-jquery-slideshow.html

Sorry I couldn’t help more.

no thanks thats great help, you have pointed me out in to the right direction ill have a look into it and get back to you…

thanks again

me again… said what you do and put a different slider in there… works a bit better but it seems as though i have the same problem… content seems to load before the page has a chance to finish thats why i get the flash effect i think not sure where to go from here though… think its something to do with my js file…

http://pastie.org/private/50ntex2xxrscy6ydghthyq

need to load the content after the page has finished executing all the jquery executions

Hi there,

Can you post a link to the same page with a different slider.
That would be helpful for debugging.

here you go… thanks for sticking with me

alexcallow.com

heres my js file in a pastie http://pastie.org/private/upwitue960r3sk7fdkwytq

Hi there,

I’m sorry, but I just spent the last 10 minutes navigating from “Home” to “Work” (and refreshing the page for good measure) and I couldn’t once reproduce the issue.

How often can you reproduce it?
Are you reproducing it with the same steps as before?

when ive just spent half hour trying to solve this… just emptied my cache and im not getting the problem any more either… think i might have fixed the problem… if your not getting the problem either maybe we have solved it… :smiley:

thanks for your hard work

No problem.
Thanks for letting me know that you’ve (hopefully) got it sorted :slight_smile:

no worries… thanks for sticking with me… hopefully one day i can return the favour

You don’t have to return the favour so much as pass it on :slight_smile:
Seriously, it’s great to see people hanging around and helping others.