CODEWITHSUNDEEP
javascriptjqueryhtml
S.Visser
S.Visser

Reputation: 4725

Text disappears after jQuery.animate in Firefox

I have a weird problem, I wrote a slider in jQuery and all seems fine. But when I run it in Firefox the text disappears on completion of the animate function.

Example: https://jsfiddle.net/49h89wcL/

It seems that the <h2> tag gets twice the top margin I gave it. Someone knows what goes wrong here? Or have a small hack for it?

Upvotes: 0

Views: 126

Answers (4)

Puneet
Puneet

Reputation: 2051

Try This Solution - Just don't use Margin to move the image, instead user "Left" with position relative of Image. It always works in all browsers.

Try the fiddle yourself. It doesn't have much changes.

jQuery(document).ready(function($) {

// Campange Slider
	$('.camp-slider').each(function () {
		

		
		$(this).prepend("<img class='full-image' style='width: "+ $(this).width() +"px; height: 300px;' src='" + 	$(this).data("image") + "' alt='"+ $(this).data('title') +"' />");

		$(this).append("<div class='alpha' style='background-image: url(\"" + $(this).data("alpha-image") + "\")'></div>");
		$(".alpha", this).width($(".full-image", this).width());
		$(".alpha", this).height($(".full-image", this).height());
		

		$("p", this).css("display", "block");
		$("h2", this).css("display", "block");
		$("h2", this).css("height", "40px");
		$("h2", this).css("float", "right");
		$("p", this).css("float", "right");
		$("h2", this).css("float", "right");
		$("p", this).width(($(".full-image", this).width()/100) * 75);
		$("h2", this).width(($(".full-image", this).width()/100) * 75);
		
		
		
		$("p", this).css("margin-top", "-"+  ($(".full-image", this).height()-$("h2", this).height()-10) +"px");
		$("h2", this).css("margin-top", "-" + ($(".full-image", this).height()-10) + "px");
		$(".alpha", this).css("margin-top", "-" + $(".full-image", this).height() + "px");
		
		$(this).append("<a class='moreBtn' style='clear: both;' href='" + $(this).data("readmore") + "'> Mehr zum Thema <a/>");
		
		
		//$(".full-image", this).css("margin-top", "-300px");
		//$(".full-image", this).css("position", "absolute");

		//$(this).prepend("<h2>" + $(this).data("title") + "</h2>");
	
	});
			
	$('.camp-slider').mouseenter(function(){
		
		$(".full-image", this).animate({
			left: "-75%"
		  }, 1000, function() {
			  
		  });
	});
	
		$('.camp-slider').mouseleave(function(){
		$(".full-image", this).animate({
			left: "0px"
		  }, 1000, function() {

		  });
	});

});	
.camp-slider {
	overflow: hidden;
}

.camp-slider p {
	color: #000;
	line-height: 25px;
	font-weight: bold;
	font-size: 14px;
	padding-top: 20px;
}


.camp-slider .moreBtn {
	display: block;
	width: 155px;
	background-color: #43679a;
	color: #FFF;
	text-align: right;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
	margin-top: -40px;
	float: right;
	font-weight: bold;
}

.full-image{
    position:relative;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="camp-slider" data-readmore="http://www.karl-uwe-strothmann.de/kompetent-und-engagiert-fuer-die-jugend/" data-alpha-image="http://www.karl-uwe-strothmann.de/wp-content/themes/politicize/images/camp/a-alpha.png" data-image="http://www.karl-uwe-strothmann.de/wp-content/themes/politicize/images/camp/a-full.png" data-title="">
<h2>Kompetent und engagiert für die Jugend</h2>
<p>Die Jugend ist unsere Zukunft. Wir haben die Verpflichtung, Rahmenbedingungen zu schaffen, die den jungen Menschen in unserer Stadt bestmögliche Entwicklungschancen bieten. Ich wünsche mir allerdings auch, dass sich die Kinder und Jugendlichen in unserer Stadt wohlfühlen und sich mit ihr identifizieren</p>
</div>

Upvotes: 3

Mr.Manhattan
Mr.Manhattan

Reputation: 5504

Your problem is the float and the margin: while the image is overlaying, the float will make the text floating under the image, being drawn to top by the negative margin. after you move the image to the left, the text fits next to the image, so the margin should be set to 0 after the move.

A better way to archieve what you want would be using position:absolute and top/right values to align the text where you want it to be.

Upvotes: 1

Ringo
Ringo

Reputation: 3965

Put <h2> and <p> tag into a <div> with class name is whatever you like. And set margin-top for this class instead of both of <h2> and <p>. Solved the problem!

<div class="content">
<h2>Kompetent und engagiert für die Jugend</h2>
<p>Die Jugend ist unsere Zukunft. Wir haben die Verpflichtung, Rahmenbedingungen zu schaffen, die den jungen Menschen in unserer Stadt bestmögliche Entwicklungschancen bieten. Ich wünsche mir allerdings auch, dass sich die Kinder und Jugendlichen in unserer Stadt wohlfühlen und sich mit ihr identifizieren</p>
    <div>

javascript:

$(".content", this).css("margin-top", "-" + ($(".full-image", this).height()-10) + "px");

JSFiddle

Upvotes: 1

Mario A
Mario A

Reputation: 3363

It is clearer to see what is happening when you don't have a negative margin-top on your text elements. Then the text elements are positioned below the image, because the image consumes the space, and the text is float:right.

After the image is animated until margin-left: -70%; there is suddenly enough space for the text to be displayed beside the image, thus it jumps up.

I think the best way to solve your issue is to use position:absolute for both, the image and the text elements.

Upvotes: 1

Related Questions