loggo

Hi there, I have a problem with positioning a <div>-tag right under a picture of unknown height. Precisely I created an slideshow using CSS with the following css code (I have 5 pictures, but shortened the code here): as these pictures have to be displayed overlapping, I have to use position: absolute. I want the pictures to have 100% of the width of its parent element. Thus, the height of the pictures is unknown as the width may vary. Now I would like to place a <div>-tag under the pictures, but as I do not know their height, I do not know how to place it there. Has anyone an idea how I could realize this? Thank you in advance. loggo

Well, in fact yes, but my list is horizontal and I do not know how many elements fit in one line. Thank you! But I could make it on my own now. function slide(dir, kat){ var pos = document.getElementById("resultlist").offsetLeft; var disp = Math.floor((document.getElementById("inhalt3").offsetWidth - kat * 135) /94); if (dir == 0) { if (document.getElementById("resultlist").offsetLeft + document.getElementById("resultlist").offsetWidth >= document.getElementById("inhalt3").offsetWidth) { document.getElementById("resultlist").style.left = (pos - 94 * disp) + "px"; } } else { if (document.getElementById("resultlist").offsetLeft < kat * 135) { document.getElementById("resultlist").style.left = Math.min(kat*135,(pos + 94 * disp)) + "px"; } }} I did the sliding effect with the transition property of my list. If you want to see it go to http://www.ttc-oberpullendorf.net/neu and see it by clicking the third link in the left menu (the link says "Turniere"). What do you think of it? It also changes its layout if the space gets too less, so that it is displayed well on mobile devices, too.

I have a good basic knowledge of javascript, so I think I could realize this. The only thing is that I want to have the elements fixed size. Therefore I have an idea but I would need the width of the div that contains the ul, which is 100%. Is it possible to get the width of that div tag in pixels?

Ok, thanks, but I don't have any idea how to realize this in Javascript, especially if the Window size changes :/

Thank you for this idea but that's actually not what I want to have. I know how to create an horizontal list and that I get a scrollbar with the overflow attribute but I don't want a scrollbar. What I like to create is a sort of paging. That means that if there is an overflow, there apears a button wich then shows the next elements.

Hi! I would like to create a horizontal list and fill its elements dynamically, so I don't know how many elements the list will contain of. The width of the list is 100% and I'd like to have just one single line. If there are too many elements I would like to make pages, i.e. the list slides to the left and shows the next elements. Is it possible to create such a paging option using css or do I have to code this in Javascript. If its only possible to do it in javascript, how could I realize this? Thank you in advance for your help. loggo

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

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!"); }); });}

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.

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.

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

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?

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.

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)

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.