styling with jquery

Hell experts.
I didn't know where to place this question because there is no 'script' problem but a css problem using jquery show-hide and slide effect for two divs.
I can't get the loader div and the resultsholder div inline while the divs are 'sliding'
The resultsholder is 'pushed' down while sliding. When carloader div is 'hide' the resultsholder is going up again. Any help to solve this?

<style type="text/css">
.carloader{ padding-top:120px; display:none;}
.inline{display:inline;}
</style>
<div id="carloader" align="center" class="carloader">
 <center><img src="img/carloader.gif" width="160" height="20"></center>
</div>
<div id="resultsholder" class="inline">
    blablablablablablablablbalbalbal
</div>
<script type="text/javascript">
 //load the items holder div
$(function() {
	$("ul.pagination li").click(function(e) {
		e.preventDefault();
		$("#resultsholder").hide("slide", { direction: "right" }, 600);
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$("#carloader").show("slide", { direction: "left" }, 600);
		 $.post(activeTab,$('#setmyform').serialize(), 
	           function(data,status) {
			   $("#resultsholder").html(data); 
			   $("#resultsholder").show("slide", { direction: "left" }, 600);
		    if (status == "error") {
            var msg = "Sorry but there was an error: ";
              $("#resultsholder").html(msg + xhr.status + " " + xhr.statusText);
		      }
           $("#carloader").hide("slide", { direction: "right" }, 600);
            });
		 })
});
</script>

Open in new window

LVL 2
PanosAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sudhindra A NCommented:
try like this....
 
<div id="carloader" align="center" class="carloader" style="float:left;">
 <center><img src="img/carloader.gif" width="160" height="20"></center>
</div>
<div id="resultsholder" class="inline" style="float:left; margin-left:20px;">
    blablablablablablablablbalbalbal
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
Hi ansudhindra:
Your solution IS working for my posted code.
The new problem i have now is that my original resultsholder has a lot of html code with div's  a.s.o where the styling does change after adding the float left attribute.
The content does shrink and placed to the left.
I tried to add a fixed width to get content placed again on the 100% but using this the problem with the up and down div's does appear again
0
BardobraveCommented:
Reduce a bit the width or your divs to get them added to reach 97%-98% of the space, probably you have some margin-padding that's getting your two divs further than 100% and thus they are jumping to different lines because they haven't enough space on one single line.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

PanosAuthor Commented:
hmmmm..
The two div's placed inline are sure more than the 100% of the main parent div.
May that's why it doesn't work like i want.
The structure is like this:
<div class="LeftTable inline flleft" style="width:711px;">
<div id="carloader" align="center" class="carloader">
 <center><img src="img/carloader.gif" width="160" height="20"></center>
</div>
<div id="resultsholder" class="inline" style:"width:710px;">
    blablablablablablablablbalbalbal
</div>
</div>
0
PanosAuthor Commented:
I should better use a pop up loader for this case
0
BardobraveCommented:
Remember that two elements floating always will jump to a second line if they don't fit together into 100% of it's container space.
0
PanosAuthor Commented:
A little clarification.
That what is clear is that i can't have both div's like i was thinking in the first placed.
What about after sliding the resultsholder div .if this div is hidden than show the loader and after ajax call the opposite function.
I tried to do this but i had some problems using the if statements to test this.
What do you think about this?
0
BardobraveCommented:
I'm not very sure of understand what you are asking for now...

Two floated elements can be aside when there is room for both of them, if there is no enough room for both the rightest element (when floated left) jumps below the first.

When this situation happens, it usually can be easily solved by simply reducing the space of the elements until both fits on the space reserved for them.

If you want to switch element visibility you always can use jQuery's toggle method, wich changes the visibility of an element to show from hidden and viceversa.
0
PanosAuthor Commented:
I try to explain.
Having in the first place (before any action) both div's the loader as display:none and the  other visible, there isn't any problem, although the width of both is greater than the main parent div.

So i'm thinking if one of the two elements is always hidden there should be no problem.
Using this:
$("#resultsholder").hide("slide", { direction: "right" }, 600);
the resultsholder is hidden.
Now using :
if ($('#resultsholder').is(":hidden")) {
                  $("#carloader").show("slide", { direction: "left" }, 600);
                  }
should show the loader without problems but it is not.
0
BardobraveCommented:
Instead of firing the show and hide separately try to group them.

On start hide resultsHolder and show carloader

$("#resultsholder").hide("slide", { direction: "right" }, 600);
$("#carloader").show("slide", { direction: "left" }, 600);

Then, when an event for hidding carloader is fired, hide carloader and show resultsholder.
0
PanosAuthor Commented:
Hi again.
I tried this too but the problem remains.
It seems that it can't be done. If i remove the slide part of the function i have no problems but i don't have the slide effect any more.

I was thinking to  keep the slide effect and use another loader like:
http://www.mimiz.fr/javascript/jquery/jquery-loader-plugin-2/?lang=en
or
http://plugins.jquery.com/project/fogLoader 

Thank you for your help
0
PanosAuthor Commented:
Thank you again
regards
panos
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.