javascript - I'm not sure that my ajax navigation works fine -
i tried make menu history api. seems me works not fine, , got reasons think so:
1 "title" not changing
2 if click fast on links got blink of page reloaded shouldn't!(but if click slow ok. how prevent reload or blinking?)
please tell me waht wrong
$(document).ready(function(){ sliderstartup() //menu click $('.navigation').click(function(){ //fill storage var storage = { url: $(this).children('a').attr('href'), title: $(this).children('a').attr('title') }; history.pushstate(null, storage.title, storage.url ); $.ajax({ url: $(this).children('a').prop("href"), cache: false, success: function(data){ //if data return css notation (eg: #id) of location of title name jqobj = $(data); var addsmth = jqobj.find('#central').html(); $("#central").html('').html(addsmth); sliderstartup() } }); return false; }); function sliderstartup(){ $('#slider').nivoslider({ effect: 'fold', animspeed: '500', pausetime: '4000' }); } });
here havigarion
<ul id="navig"> <?php if ($_server['request_uri'] == "/") { $_server['request_uri'] = "/index"; } $arraynav = array( array ( 'name' => 'yyyyyy', 'title' => 'yyyyyyyyyyy', 'link' =>'http://bistro.loc/index', 'identificator' => 'id_index', 'pattern' => '/index/i' ), array ( 'name' => 'xxxxxx', 'title' => 'xxxxxxx', 'link' => http://bistro.loc/price', 'identificator' => 'id_price', 'pattern' => '/price/i' ), array ( 'name' => 'aaa', 'title' => '', 'link' => 'http://bistro.loc/#' , 'identificator' => 'id_serv', 'pattern' => '/#/i' ), array ( 'name' => 'ssss', 'title' => '', 'link' => 'http://bistro.loc/#' , 'identificator' => 'id_cont', 'pattern' => '/#/i' ), array ( 'name' => 'dddd', 'title' => '', 'link' => 'http://bistro.loc/#' , 'identificator' => 'id_about', 'pattern' => '/#/i' )); foreach ($arraynav $item) {if (preg_match($item['pattern'],"http://".$_server['server_name'].$_server['request_uri'] )) { echo "<li class = \"navigation\" id = \"".$item['identificator']."\" tltle=\"".$item['title']."\"><a href=\"".$item['link']."\" class=\"active\">".$item['name']."</a></li>"; }else{ echo "<li class = \"navigation\" id = \"".$item['identificator']."\" tltle=\"".$item['title']."\"><a href=\"".$item['link']."\">".$item['name']."</a></li>";} ;} ?> </ul>
you success function not fine:
success: function(data){ jqobj = $(data); var addsmth = jqobj.find('#central'); $("#central").html('').html(addsmth);
i think mean of following?
success: function(data){ //data string $("#title").html(data));
or
function(data){ //if data return css notation (eg: #id) of location of title name jqobj = $(data); var addsmth = jqobj.find('#central').html(); $("#central").html(addsmth);
@slowing down:
$('li[id^=id_]')
might slow things down. suggest uses classes this.
also create nivoslider
after creating on click events. if want sure on click events done asap.
Comments
Post a Comment