CSS "Animering"

**voigtann1** · 2012-04-18, 07:49

i detta fallet på deras sida är jquery-ui (javascript) som fixar det http://docs.jquery.com/UI/Effects/Transfer

**Method** · 2012-04-18, 07:57

Perfekt! Tack så mycket för hjälpen =)

**Method** · 2012-04-18, 08:15

En fundering efter att ha tittat på exemplet.

vad skriver jag för att rikta till ett specifikt element?

När jag klickar på denna knapp
<input type="button" name="addtocart" value="Lägg i varukorg" class="addtocart ajax" />

så vill jag skicka en ruta till detta element:
<div class="topCartHolder"></div>

Det lilla jag kan om js är att den ser ut att läsa in div med en snurra i detta exempel:

Code:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div.green { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
  div.red { margin-top: 10px; width: 50px; height: 30px; background: red; border: 1px solid black; position: relative; }
  .ui-effects-transfer { border: 2px solid black; }

</style>

  <script>
  $(document).ready(function() {
    
$("div").click(function () {
      var i = 1 - $("div").index(this);
      $(this).effect("transfer", { to: $("div").eq(i) }, 1000);
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  <div class="green"></div>
<div class="red"></div>

</body>
</html>

tacksam för hjälp då js är min svaga sida, tack på förhand!

**voigtann1** · 2012-04-18, 08:20

click elementet (div) ändra den till .addtocart och {to: $("div").eq(i) } till {to: $("div.topCartHolder")[0] }:

[kod]$(".addtocart").click(function () {
$(this).effect("transfer", { to: $(".topCartHolder")[0] }, 1000);
});[/kod]
fast om du nu kör ett ajax anrop vill du väl att animeringen skall ske så fort du har en success på att en produkt har lagts in i en varukorg?

**Method** · 2012-04-18, 09:19

Tack!

Ja det hade ju varit det mest elegant så klart, hur fungerar det?

**voigtann1** · 2012-04-18, 09:34

hur ser din ajax anrop ut?

**Method** · 2012-04-18, 11:26

Jag tror att jag fick med all kod

Källkod för Ajax anropet

Code:

var ShoppCartAjaxHandler = function (cart) {
	(function($) {
		var display = $('#shopp-cart-ajax');
		display.empty().hide(); // clear any previous additions
		var item = $('<ul></ul>').appendTo(display);
		if (cart.Item.thumbnail)
			$('<li><img src="'+cart.Item.thumbnail.uri+'" alt="" width="'+cart.Item.thumbnail.width+'"  height="'+cart.Item.thumbnail.height+'" /></li>').appendTo(item);
		$('<li></li>').html('<strong>'+cart.Item.name+'</strong>').appendTo(item);
		if (cart.Item.optionlabel.length > 0)
			$('<li></li>').html(cart.Item.optionlabel).appendTo(item);
		$('<li></li>').html(asMoney(cart.Item.unitprice)).appendTo(item);
 
		if ($('#shopp-cart-items').length > 0) {
			$('#shopp-cart-items').html(cart.Totals.quantity);
			$('#shopp-cart-total').html(asMoney(cart.Totals.total));			
		} else {
			$('.widget_shoppcartwidget p.status').html('<a href="'+cart.url+'"><span id="shopp-cart-items">'+cart.Totals.quantity+'</span> <strong>Items</strong> &mdash; <strong>Total</strong> <span id="shopp-cart-total">'+asMoney(cart.Totals.total)+'</span></a>');
		}
		display.slideDown();
	})(jQuery)	
}

har även denna kod för att inte visa en bild som lades vid varukorgen när man la till en produkt. Så det borde vara detta som ersätter ovanstående anrop om jag tolkar det hela rätt?

Code:

var ShoppCartAjaxHandler = function (cart) {
    (function($) {
            $('#shopp-sidecart-items').html(cart.Totals.quantity);
            $('#shopp-sidecart-total').html(asMoney(cart.Totals.total));
    })(jQuery)
}

Ovanstående kod anropas via:

Code:

if(function_exists('shopp_enqueue_script')){
    shopp_enqueue_script('jsajaxcart','http://FULL-PATH-to-my-theme/shoppajaxcart.js',array('shopp'),'1.0',true);
}

Så här ser koden ut för varukorgen som uppdateras

Code:

<div id="shopp-cart-ajax">
            	<div class="topCartHolder">
					                        <div id="divCartIcon" style="float:left;margin-top:0px;margin-right:8px"><a href="http://shop.bellitudo.se/shop/cart/"><img src="/wp-content/themes/platform/images/shoppingbag.png" alt="Till Shoppingbagen" border="0" /></a></div>
                        <span id="shopp-sidecart-items"><div style="color:#000000">1</div></span>
                                          <div style="float:left; margin-top:5px">
                        <div style="margin-left:-5px">
                            <a href="http://shop.bellitudo.se/shop/cart/"><strong>SHOPPINGBAG</strong></a></span>
                        </div> 
                        <div style="padding-left:2px">
                            <span><strong>Totalt</strong> <span id="shopp-sidecart-total" class="money"><span class="shopp-cart cart-total">460,00 kr</span></span></span>
                            <span>                                <a href="http://shop.bellitudo.se/shop/checkout/">Till kassan</a>
                            </span>
                        </div>
                     </div>
                  </div>
             </div>

Tack!

**voigtann1** · 2012-04-18, 12:11

vilken metod binder du på .ajax ?men om ShoppCartAjaxHandler är din success metod från ajax så lägg in koden där.

**Method** · 2012-04-18, 12:37

Testar ikväll och ser om jag får till det, tack för all hjälp.

**Method** · 2012-04-19, 07:06

Jag prövade att få till detta men utan framgång

La in koden i AJAX-anropet för varukorgen

Code:

var ShoppCartAjaxHandler = function (cart) {
    (function($) {
            $('#shopp-sidecart-items').html(cart.Totals.quantity);
            $('#shopp-sidecart-total').html(asMoney(cart.Totals.total));
            $(".addtocart").click(function () {
      $(this).effect("transfer", { to: $("#shopp-cart-ajax")[0] }, 1000);
});
    })(jQuery)
}

samt att den bifogade css till wordpress temat la jag in denna kod:

Code:

.ui-effects-transfer { border: 2px solid black; }

Samt i head taggen (denna behövdes då jag gjorde testet nedan, saknades i temat)

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

För att se om det var fel på ovanstående kod klistra jag in all kod från: http://docs.jquery.com/UI/Effects/Transfer
i en egen .php och prövade och då fungerade funktionen.

men när jag prövade att baka in den fungerande koden i mitt tema så slutade det att fungera.

länk till hemsidan för att kunna se källkoden:

http://shop.bellitudo.se/shop/multivitamin-hand-and-nail-treatment/

Samt länk till mitt test:

http://shop.bellitudo.se/test.php

Hoppas jag har kunnat göra mig förstådd, tack på förhand!

**voigtann1** · 2012-04-19, 09:16

För jQuery inte inladdad:
[kod]jQuery is not defined
[Stanna vid fel]

..."?0:a(window).scrollTop()-this.offset.relative.top-this.offset.parent.top,(b.con...

jquery-ui.min.js (rad 9)
$ is not a function
[Stanna vid fel]

$(document).ready(function() {[/kod] ge det mig i firebug.

sen så behöver du ju inte köra:
[kod]var ShoppCartAjaxHandler = function (cart) {
(function($) { })(jQuery)
}[/kod]på det sättet, för vad jag ser så har du bara jquery som är på $ och om du nu skulle ha ett annat biblotek så lägg all jquery kod runt metoderna istället för att ha en anonym metod som körs inne i en annan anonymetod om och om igen.

**Method** · 2012-04-19, 20:00

Tack, nu funkar det! =)

Dock har jag lite funderingar för framtiden, du pratade om jag fick en success på ajax så skall transfern ske, detta vet jag inte hur jag ska fixa?

Jag har lagt koden så här nu:

Code:

var ShoppCartAjaxHandler = function (cart) {
    (function($) {
            $('#shopp-sidecart-items').html(cart.Totals.quantity);
            $('#shopp-sidecart-total').html(asMoney(cart.Totals.total));			
    })(jQuery)		
}

$(document).ready(function() {
	$(".addtocart").click(function () {
		$(this).effect("transfer", { to: $(".topCartHolder")[0] }, 1500);
	});
});

CSS-kod

Code:

.topCartHolder
{
	position: relative;
	float: right;
	height: 65px;
	width: 350px;
	padding: 5px 0px 0px 0px;
	border: 1px dashed #000;
}

Se är det en estetisk grej jag stör mig på....

När jag klickar på knappen så åker "rutan" upp till .topCartHolder men den hamnar helt ocentrerat mot elementet. jag har lagt en ram runt .topCartHolder för att visa vart den ligger, borde inte det bli som exemplet på jquery där den landar snyggt runt mottagande element...?

Se exempel här:

http://shop.bellitudo.se/shop/close-shave-oil/

Tack på förhand!

**voigtann1** · 2012-04-19, 20:41

om du kolla var ShoppCartAjaxHandler körs så ser du att det är på en ajax som är success, om inte så få du posta vad du använder dig av $.post, $.get. Jag hoppas du kör på $.ajax om inte så byt ut det.

det är nog inte .topCartHolder som är problemet utan köpknappens positonen, för elementet skapas ovanför knappen.

Jag är inte så jätte sugen på att debugar din javascripts kod, eller css kod om du kan ta bort css + html + js som kan återskapa samma beteende så bli det lättare.

men du kan ju prova att lägga en margin-top på .ui-effects-transfer och sätt den.

**Method** · 2012-04-20, 22:57

Hej!

Tack för tipset nu funkar det bra med top-margin

Jag har hittat successen

Code:

d.ajax({type:"POST",url:b,data:e+"&response="+a,timeout:10000,dataType:c,success:function(f){ShoppCartAjaxHandler(f,a)},error:function(){}})}

Får jag ändra

Code:

$(document).ready(function() {

Till en funktion och lägga in efter?

Code:

success:function(f){ShoppCartAjaxHandler(f,a)}

Om du har lust vore jag väldigt tacksam om du kunde visa hur, tack på förhand!

CSS "Animering"

CSS "Animering"

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Oderland