jQuery slideUp, load, slideDown issue

[loggo]

Hello,

 

I have a problem with the slideup/slidedown effect with jQuery. Concretely I coded a website using a database with php and mysql. As I do not like to load the whole page everytime a link is clicked and I am not a friend of iframes I found the possibility to use jquery to load all the pages into a div.

 

Thus, I would like to slideUp the div-tag with the content, then to load the other page into the div and finally to slide it down again. Here is the code I already have:

<script>function ChangeContent(file){	$("#content").slideUp(1000,function() {		$("#content").load(file,function() {			$(document).ready(function(){				$("#content").slideDown(1000);			});		});	});}</script>

In fact the code does what it should but the effect does not really work smooth, especially when sliding down again.

What I have to mention is that the loaded page contains of sql queries and pictures as well. So the problem could lie within the loading.

 

Another issue I came across, is that the height of the div is not large enough to show some pages when they are loaded into it. I tried height:auto but this does not work.

 

Does anyone have an idea to fix my problems?

Thank you in advance for your help.

[Ingolme]

THe $(document).ready() listener is not needed here, just put the slideDown() call right in the load() callback.

 

If SQL queries are visible right in the loaded content then it sounds like your server isn't executing the server-side code which isn't a jQuery issue.

 

I wouldn't be able to tell you what's wrong with the height without seeing a live example of the problem.

[loggo]

Thank you for your input. Now I deleted the $(document).ready. The queries are executed correctly, but the slideDown does not work smoothly. I now uploaded the page although it is not complete yet.

 

You may find it at: http://www.ttc-oberpullendorf.net/neu

 

You can observe the issue when clicking at one of the lower four links. (At least when using firefox, with IE I can not yet determine if the problem exists as it does not display the pictures loaded from the database)

Edited April 29, 2015 by loggo

[justsomeguy]

The fixed positioning on the content div is the reason for no scrollbar, although removing it causes additional issues that would need to be fixed. Chrome shows several 404 responses when requesting images, you'll want to check those paths.

[loggo]

Thank you for your help, I could fix some of the issues:

 

1) I changed the content positioning to absolute and fixed all resulting issues.

2) The pictures are now shown in Chrome and IE as well

 

But now there are some other issues I have to solve:

1) There is an div with class="head", I do not understand why this div is not positioned correctly. If I change the positioning from fixed to absolute, the position is correct.

2) The slideUp and slideDown effect does not work as it should anymore. Before there was just the problem that it didn't work smooth.

[dsonesuk]

The main issue here i would have thought, is the usage of position: absolute; using position fixed or absolute means other elements do not detect these elements and so occupy the space these elements would have occupied, the browser cannot detect the area these elements occupy either, so unless you specify a height, NO scrollbars appear so you can see all the content the page returns. IF you do specify a fixed height, that fixed height will be for the current browser widow size you adjusted it for, it won't adjust to different device sizes or the resizing of browser window.

[loggo]

I already fixed the issue with the scrolling, but thanks for your help. I now also fixed the problem 1) I mentioned in my last post, this was just a typo^^. Now the only thing that doesn't work as it should is the slideUp and slideDown.

 

/EDIT: I now tried it with fadeOut/fadeIn instead of the slide effects and everything works great. Has anyone an idea of what's the matter with the slide properties?

Edited April 30, 2015 by loggo

[dsonesuk]

BECAUSE using position absolute means UNLESS you specify a HEIGHT each time (which would be impractical) the height will be 0, it CANNOT slide up or down like it normally would because there is no height but 0 height to slide to that would normally be determined by content when position: absolute is NOT USED.

 

IT does not slide up or down, but what is does is show its content instantly but it overflows the actual container height of 0px, you can test this by using overflow: hidden, then after adding this anything beyond height of 0 is now hidden and content disappears.

[loggo]

Alright, now I understand what you mean. Thank you! Is there any possibility to fix this? Setting position:relative for instance?

[dsonesuk]

You should not use position fixed or absolute unless it is used for something like a fixed menu with position: fixed; OR you want to overlap one element over another using position: absolute, these should only be used when the result you require is not achievable using float, padding, margins which would be very very rare.

[loggo]

Okay. Then I'll leave the fade effect

 

One last question. I now tried to create a div for each page and load all the pages at the beginning. Therefore I use this script:

function LoadPages(){		$("#content1").load("main.php");		$("#content2").load("meisterschaft.php");		$("#content3").load("turniere.php");		$("#content4").load("termine.php");		$("#content5").load("bildergalerie.php");		$("#content6").load("mitglieder.php");		$("#content7").load("vorstand.php");		$("#content8").load("links.php");		$("#content9").load("sponsoren.php");		$("#content10").load("impressum.php");		$("#title1").fadeIn("slow", function(){				$("#content1").fadeIn("slow");		});

Fist this worked great but somehow it occurs an Internal Server Error 500. Do you have an idea why this error occurs. I think this must be a consequence of the .load event, because when I only leave the last two lines, the error disappears. Note: I call this function right after the divs in the body, so the divs exist when I call the function.

[dsonesuk]

missing closing } for function loadpages(), check each page individually loads.

[loggo]

Well I just forgot to post that closing bracket. This is not the problem and all the pages load individually. I do not understand this, the load function worked properly before.

 

/EDIT: I now tried just to load 1 page by using the load function. This works, but as I like to load a second page the error occurs.

Edited May 1, 2015 by loggo

[dsonesuk]

Well must be because to are attempting to load 10 external pages all in one go, instead of one when required, it maybe due to a time limit for processing all these requests which you have maxed out on.

[loggo]

I do not think that this is the problem because if I only load one page and add the last two lines (the fadeIn) the error occurs as well.

 

I now tried it by using AJAX:

 

function LoadPages(){ var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","main.php",true); xmlhttp.send(); document.getElementById("content1").innerHTML=xmlhttp.responseText;}

 

still the same error

 

/EDIT: I tried someting else:

 

The following works (in fact just loading one page followed by an empty callback function):

function LoadPages(){ $(document).ready(function(){ $("#content1").load("main.php",function(){}); });}

 

The following doesn't work (Here the callback function is not empty but only makes an alert.):

function LoadPages(){ $(document).ready(function(){ $("#content1").load("main.php",function(){ alert("Hallo!"); }); });}

Edited May 1, 2015 by loggo

[loggo]

On localhost everything works perfectly. Maybe I have to change the provider of my server. Thank you for your help!