javascript - Issue with selector in Ajax result using jQuery -
i have page contains cube...
when user click on cubes, cube's width , height change , related content fetch using ajax.
ajax result html page itself, have jquery commands.
please @ result page:
html:
<div id="wrapperproducts"> <div class="products" id="maincontent"> </div><!-- # maincontent --> <div class="products" id="rightpanel"> </div><!-- # rightpanel --> <div class="products" id="footerpanel"> <div class="arr" id="arrowrightfooter"> <img src="images/arrows/light/arrowright.png" width="30" height="30" alt=""/> </div><!-- # arrowrightfooter --> <div id="thumbwrapper"> <div class="thumb" id="t1"> </div><!-- # t1 --> <div class="thumb" id="t2"> </div><!-- # t2 --> <div class="thumb" id="t3"> </div><!-- # t3 --> <div class="thumb" id="t4"> </div><!-- # t4 --> <div class="thumb" id="t5"> </div><!-- $ t5 --> <div class="thumb" id="t6"> </div><!-- # t6 --> <div class="thumb" id="t7"> </div><!-- # t7 --> <div class="thumb" id="t8"> </div><!-- # t8 --> <div class="thumb" id="t9"> </div><!-- # t9 --> </div><!-- # thumbwrapper--> <div class="arr" id="arrowleftfooter"> <img src="images/arrows/light/arrowleft.png" width="30" height="30" alt=""/> </div><!-- # arrowleftfooter --> </div><!-- # footerpanel --> and css:
div#logo div#wrapperproducts { width:100%; height:100%; background:url(../images/27.jpg) no-repeat; } div#logo div#wrapperproducts div#maincontent { left:0; top:60px; width:80%; height:70%; float:left; /*background-color:red;*/ } div#logo div#wrapperproducts div#rightpanel { right:-10px; top:0; width:20%; height:100%; float:right; position:absolute; /*background-color:blue;*/ } div#logo div#wrapperproducts div#footerpanel { bottom:0; left:0; position:absolute; width:80%; height:30%; /*background-color:#096;*/ } div#logo div#wrapperproducts div#thumbwrapper { width:90%; height:100%; margin:auto; margin-right:5%; overflow:hidden; white-space:nowrap; /*background-color:;*/ } div#logo div#wrapperproducts div#thumbwrapper .thumb { width:170px; height:100%; margin-right:2px; right:0; display:inline-block;/*inline-block*/ position:relative; direction:rtl; background: linear-gradient(rgba(255,255,255, 0.2), rgba(255,255,255, 0) ); background-color:transparent; } div#logo div#wrapperproducts div#footerpanel div.arr { position:absolute; width:30px; height:30px; cursor:pointer; } div#logo div#wrapperproducts div#footerpanel #arrowrightfooter { right:0; bottom:50%; } div#logo div#wrapperproducts div#footerpanel #arrowleftfooter { left:0; bottom:50%; }
div#logo main page element`
, js:
$(document).ready(function(e) { /*"use strict";*/ $('#logo').css({'background':'none'}); $('#arrowrightfooter').click( function(){ console.log('the click button work fine'); $('.thumb').animate({left: '+=170px' }, 1500); }); }); this lines #logo's structure in main page:
html:
<div class="parts" id="part1"> <div class="third" id="left"> <div class="mostatil radif1" id="logo"> <div class="imgwrapper"> <img src="images/icons/new/basketstore.png" width="120" height="90" alt=""/> </div> </div> <div> </div> css:
body { background:url(../images/background.png) no-repeat; background-color:rgb(24,1,83); font-family:"b koodak", tahoma; } div.parts { width:620px; height:800px; position:absolute; } div#part1 { margin-left:150px; } div.third { width:510px; height:640px; margin-top:100px; } div#left { margin-left:55px; } div.third div.mostatil { width:250px; height:120px; } div.third#left div.radif1 { margin-top:0px; } div#logo { background-color:rgb(214,164,1); position:absolute; cursor:pointer; } and *jquery: *
/*/------------- c l c k on div # l o g o --------------/*/ $(document).on('click', 'div.mostatil#logo', function(){ $('div.moraba, div.mostatil').not('#logo').delay(500).fadeout('fast');/**/ var detail = {}; detail.id = $(this).attr('id'); detail.class = $(this).attr('class').substr(7); $(this) .animate({ width: winwidth, height: winheight, margintop: -60, marginleft: -210 }, 100, 'easeoutquint', false) .data({ id: detail.id, class: detail.class}) .css({'z-index':500, 'cursor':'default'}) .transition({rotatey:'360deg'}, 1000,'snap'); $('body').css('overflow','hidden'); $.ajax({ type:'post', url:"pages/ajax/products.php", beforesend: function() { $('#logo').html('loading; please wait...') }, statuscode: { 404: function(){ $(this).html('page not found'); } }, success: function(result) { $('#logo').html(result); } });//ajax }); when select other elements of result page wrapperproduct or maincontent or etc..., animate method works fine, in $('.thumb'), there no result after click on arrow divs...
think there wrong in css, may whitespace:nowrap, because it's first time i'm using command...
believe it's because of misunderstanding css concepts me...
please guide me write way , figure out fault...
thanks in advance...
actually there's issue ajax...
there not thing wrong selectors,
you've defined application send ajax request server , insert html result in div again every click on div.mostatila#logo...!!!
so,
when click on every place inside page, clicking on #logo in fact...
you have limit ajax request situation, example:
if ( $(this).css('width') == '250px' ) { $.ajax({ type:'post', url:"pages/ajax/products.php", beforesend: function() { $('#logo').html('loading; please wait...') }, statuscode: { 404: function(){ $(this).html('page not found...'); } }, success: function(result) { $('#logo').html(result).css('background','none'); } });//ajax } else { return; } then, when #logo have width:250px, ajax request sent...
think problem...
Comments
Post a Comment