?
Solved

styling with jquery

Posted on 2011-10-14
12
Medium Priority
?
374 Views
Last Modified: 2013-11-05
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

0
Comment
Question by:Panos
  • 7
  • 4
12 Comments
 
LVL 13

Accepted Solution

by:
ansudhindra earned 1000 total points
ID: 36968012
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
 
LVL 2

Author Comment

by:Panos
ID: 36968117
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36968148
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:Panos
ID: 36968189
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
 
LVL 2

Author Comment

by:Panos
ID: 36968200
I should better use a pop up loader for this case
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36968236
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
 
LVL 2

Author Comment

by:Panos
ID: 36968369
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
 
LVL 19

Assisted Solution

by:Bardobrave
Bardobrave earned 1000 total points
ID: 36968982
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
 
LVL 2

Author Comment

by:Panos
ID: 36969062
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36970925
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
 
LVL 2

Author Comment

by:Panos
ID: 36972357
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
 
LVL 2

Author Closing Comment

by:Panos
ID: 36972361
Thank you again
regards
panos
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question