Why the ajax success functions runs 2 times? - javascript

main.html
<script src="jsv3/onload.js"></script>
<script>
var countImage = 0;
function load_pages(page) {
$.ajax({
type: "GET",
url: "scandir.php",
data: "page=" + page,
dataType: 'json',
success: function (data) {
var num = 0;
var cache = [];
var startNum = 0;
var endNum = 0;
$.each(data, function(i,paths){
if ( !(page == countImage) && !(page+1 == countImage))
{
if (paths[0] != ''){
num = parseInt(paths[0].split("_P")[1],10);
if (!$('#img_'+num).length){
$("#div_"+num).append("<img id = 'img_"+num+"' src = '"+paths[0]+"' alt = 'flip book' />");
}
cache.push (num);
}
if (paths[1] != ''){
num = parseInt(paths[1].split("_P")[1],10);
if (!$('#img_'+num).length){
$("#div_"+num).append("<img id = 'img_"+num+"' src = '"+paths[1]+"' alt = 'flip book' />");
}
cache.push (num);
}
}
});
startNum = cache[0];
endNum = cache[cache.length-1];
for (var z = 0; z < 2; z++) {
startNum--;
if ($('#img_'+startNum).length){
$("#img_"+startNum+":last-child").remove();
}
}
for (var x = 0; x < 2; x++) {
endNum++;
if ($('#img_'+endNum).length){
$("#img_"+endNum+":last-child").remove();
}
}
/*if ($('#img_6').length)
alert ('img6 exist');
else
alert ('img6 not exist');*/
}
});
}
function create_div() {
var counter = 1;
$.ajax({
type: "GET",
url: "countImg.php",
dataType: 'json',
success: function (data) {
//$("#book").append("<div id='cover'></div>");
countImage = data;
for (var j = 0; j < data; j++) {
$("#book").append("<div id = 'div_"+counter+"'></div>");
counter++;
}
counter = 1;
}
});
}
$(document).ready(function(){
console.log('test');
create_div();
});
</script>
onload.js( call the init function):
/* = Start
-------------------------------------------------------------- */
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
/* Moved to the html file (FlipV5.html) to ensure the page loading is finished before initialize turn.js */
$(window).load(function(){
$('#page').show();
Book.init();
if (isiPhone()) {
$('#page').addClass('mobile');
} else {
Book.zoom_auto();
Book.book_position();
}
Book.dragdrop_init();
Navigation.init();
calculate_zoom_factor();
});
$(window).resize(function() {
if (!isiPhone()) {
Book.book_position();
Book.zoom_auto();
Book.dragdrop_init();
}
calculate_zoom_factor();
});
function resizeDetect() {
var rtime = new Date(1, 1, 1, 1,00,00);
var timeout = false;
var delta = 200;
$(window).resize(function() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
window_width = $(window).width();
window_height = $(window).height();
if ( $(window).width() > $(window).height() ) {
//Book.scaleVertical();
} else {
}
}
}
}
resizeDetect();
onload.js (init function)
init: function() {
default_book_width = WIDTH_BOOK;
default_book_height = HEIGHT_BOOK;
default_page_width = WIDTH_BOOK;
default_page_height = HEIGHT_BOOK;
window_height = $(window).height();
window_width = $(window).width();
zoom_steps = ZOOM_STEPS_LENGTH;
current_zoom_step = 0;
dbl_clicked = false;
on_start = true;
self = this;
$('#book').turn({
display: 'double',
acceleration: true,
elevation:50,
when: {
first: function(e, page) {
$('.nav_arrow.prev').hide();
},
turned: function(e, page) {
if (page > 1) {
$('.nav_arrow.prev').fadeIn();
$('#about').hide();
}
if ( page < $(this).turn('pages') ) {
$('.nav_arrow.next').fadeIn();
}
pageNo = $('#book').turn('page');
load_pages(pageNo);
},
turning: function(e, page) {
if (page < 2) {
$('#about').show();
}
},
last: function(e, page) {
$('.nav_arrow.next').hide();
}
}
});
Book.arrows();
},
scaleHorizontal: function() {
new_width = $(window).width()-100;
ratio = new_width / $('#page').width();
new_height = $('#page').height() * ratio;
$('#page').css({
width: new_width,
height: new_height
});
$('#book').turn('size', new_width, new_height);
},
scaleStart: function() {
if ( on_start == true ) {
bookHeightCheck();
if ( higherThanWindow == true ) {
Book.scaleVertical();
if ( $('#page').width() > $(window).width() ) {
Book.scaleHorizontal();
}
} else {
Book.scaleHorizontal();
}
on_start = false;
}
},
The flow is like that: main.html call create_div to do some function, and since it append the onload.js, it runs Book.init() , which will call the load_pages function. So, I believe the problem is due to two ajax call is implement at the same time?
The create_div() ajax accidentally detected the ajax call in load_pages is success, so it runs two time the success function.
How to fix the problem like this? Thanks

Related

Image slideshow timer speed getting increased when we click on next or previous buttons, using JavaScript

I have written simple image slider using JavaScript. In that I have set 5000 ms timer to slide automatically. but it is getting increased when we click on next or previous button. I have pasted the code below
HTML Code:
<section id="intro">
<div id="prev"><br/><br/><br/><br/><img onclick="rotateImages(0);" src="./images/slider/prev1.png"/></div>
<div id="next"><img onclick="rotateImages(1);" src="./images/slider/next1.png"/></div>
</section>
JavaScript Code:
<script type="text/javascript">
var num = 0;
var temp = 0;
var speed = 5000;
var preloads = [];
preload(
'1.png',
'2.jpg',
'3.jpg',
'4.jpg',
'5.png'
);
function preload() {
for (var c = 0; c < arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[c];
}
}
function rotateImages(flag) {
if (flag == 0)
{
num = num - 1;
if (num < 0)
num = preloads.length;
}
else
{
num = num + 1;
if (num >= preloads.length)
num = 0;
}
if (num == temp) {
rotateImages(1);
} else {
var str = preloads[num].src;
var resArr = str.split("/");
var picName = resArr[resArr.length - 1];
document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
temp = num;
setTimeout(function () {
rotateImages(1)
}, speed);
}
}
if (window.addEventListener) {
window.addEventListener('load', function () {
setTimeout(function () {
rotateImages(1)
}, speed)
}, false);
} else {
if (window.attachEvent) {
window.attachEvent('onload', function () {
setTimeout(function () {
rotateImages(1)
}, speed)
});
}
}
</script>
You need to clear the previous timer. Otherwise there will be new timers added with every call to rotateImages(), Save the reference returned from setTimeout() and then use clearTimeout() to clear the timer if it's set
var num = 0;
var temp = 0;
var speed = 5000;
var preloads = [];
var timeout;
preload(
'1.png',
'2.jpg',
'3.jpg',
'4.jpg',
'5.png'
);
function preload() {
for (var c = 0; c < arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[c];
}
}
function rotateImages(flag) {
if (flag == 0) {
num = num - 1;
if (num < 0)
num = preloads.length;
} else {
num = num + 1;
if (num >= preloads.length)
num = 0;
}
if (num == temp) {
rotateImages(1);
} else {
var str = preloads[num].src;
var resArr = str.split("/");
var picName = resArr[resArr.length - 1];
document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
temp = num;
if (!!timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
rotateImages(1);
}, speed);
}
}
if (window.addEventListener) {
window.addEventListener('load', function() {
setTimeout(function() {
rotateImages(1)
}, speed)
}, false);
} else {
if (window.attachEvent) {
window.attachEvent('onload', function() {
setTimeout(function() {
rotateImages(1)
}, speed)
});
}
}

Ajax call doesn't work after success

I have a problem with ajax call after success.
I am trying to call my following javascript codes:
function imgResize($, sr) {
var debounce = function(func, threshold, execAsap) {
var timeout;
return function debounced() {
var obj = this,
args = arguments;
function delayed() {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn) {
return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
};
};
//CALL ON PAGE LOAD OR ANY TIME YOU WANT TO USE IT
imgResize(jQuery, 'smartresize');
/* Wait for DOM to be ready */
// Detect resize event
$(window).smartresize(function() {
// Set photo image size
$('.photo-row').each(function() {
var $pi = $(this).find('.photo-item'),
cWidth = $(this).parent('.photo').width();
// Generate array containing all image aspect ratios
var ratios = $pi.map(function() {
return $(this).find('img').data('org-width') / $(this).find('img').data('org-height');
}).get();
// Get sum of widths
var sumRatios = 0,
sumMargins = 0,
minRatio = Math.min.apply(Math, ratios);
for (var i = 0; i < $pi.length; i++) {
sumRatios += ratios[i] / minRatio;
};
$pi.each(function() {
sumMargins += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
});
// Calculate dimensions
$pi.each(function(i) {
var minWidth = (cWidth - sumMargins) / sumRatios;
$(this).find('img')
.height(Math.floor(minWidth / minRatio))
.width(Math.floor(minWidth / minRatio) * ratios[i]);
});
});
});
/* Wait for images to be loaded */
$(window).load(function() {
$(".photo").each(function() {
var imgGrab = $(this).find('.photo-item');
var imgLength = imgGrab.length;
for (i = 0; i < imgLength; i = i + 3) {
imgGrab.eq(i + 1)
.add(imgGrab.eq(i + 1))
.add(imgGrab.eq(i + 2))
.wrapAll('<div class="photo-row"></div>');
}
$(this).find(".photo-item").each(function() {
if ($(this).parent().is(":not(.photo-row)")) {
$(this).wrap('<div class="photo-row"></div>');
}
});
// Store original image dimensions
$(this).find('.photo-item img').each(function() {
$(this)
.data('org-width', $(this)[0].naturalWidth)
.data('org-height', $(this)[0].naturalHeight);
});
});
$(window).resize();
});
And here is my ajax code for LOAD MORE POST
$('body').on("click",'.morep', function(event) {
event.preventDefault();
var ID = $(this).attr("id");
var P_ID = $(this).attr("rel");
var URL = $.base_url + 'more_post.php';
var dataString = "lastpid=" + ID + "&post_id=" + P_ID;
if (ID) {
$.ajax({
type: "POST",
url: URL,
data: dataString,
cache: false,
beforeSend: function() {
$("#more" + ID).html('<img src="loaders/ajaxloader.gif" />');
},
success: function(html) {
$("div.post-content").append(html);
$("#more" + ID).remove();
imgResize(jQuery, 'smartresize');
}
});
} else {
$("#more").html('FINISHED');
}
return false;
});
The ajax should call imgResize(jQuery, 'smartresize'); but it is not working. What I am missing here anyone can help me here ?

jQuery error with Quick Search Results box

Currently having a problem where I have wanted to do a simple jQuery append to move a div into another div. In this case, when I type in the search box suggested results should appear underneath. However due to myself changing some of the code it no longer appears too the left so I did a simple jQuery append to make my life easier.
The problem is that when I make a simple search and the results box appears under the search box I use the console to excute the following line of code:
$('#QuickSearch').appendTo($('#searchheader'));
All works fine in the console. However when I put it in the search's javascript file, it does not execute that line of code. Below is the jQuery associated with the search:
var QuickSearch = {
minimum_length: 3,
search_delay: 125,
cache: new Object(),
init: function()
{
$('#search_query').bind("keydown", QuickSearch.on_keydown);
$('#search_query').bind("keyup", QuickSearch.on_keyup);
$('#search_query').bind("change", QuickSearch.on_change);
$('#search_query').blur(QuickSearch.on_blur);
$('#search_query').attr('autocomplete', 'off');
var scripts = document.getElementsByTagName('SCRIPT');
for(var i = 0; i < scripts.length; i++)
{
s = scripts[i];
if(s.src && s.src.indexOf('quicksearch.js') > -1)
{
QuickSearch.path = s.src.replace(/quicksearch\.js$/, '../');
break;
}
}
},
on_blur: function(event)
{
if(!QuickSearch.item_selected && !QuickSearch.over_all)
{
QuickSearch.hide_popup();
}
},
on_keydown: function(event)
{
if(event.keyCode == 13 && !event.altKey)
{
if(QuickSearch.selected)
{
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
window.location = QuickSearch.selected.url;
return false;
}
else
{
QuickSearch.hide_popup();
}
}
else if(event.keyCode == 27)
{
if(document.getElementById('QuickSearch'))
{
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
}
QuickSearch.hide_popup();
}
},
on_keyup: function(event)
{
if(QuickSearch.timeout)
{
clearTimeout(QuickSearch.timeout);
}
// Down key was pressed
if(event.keyCode == 40 && QuickSearch.results)
{
if(QuickSearch.selected && QuickSearch.results.length >= QuickSearch.selected.index+1)
{
QuickSearch.highlight_item(QuickSearch.selected.index+1, true);
}
if(!QuickSearch.selected && QuickSearch.results.length > 0)
{
QuickSearch.highlight_item(0, true);
}
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
return false;
}
else if(event.keyCode == 38 && QuickSearch.results)
{
if(QuickSearch.selected && QuickSearch.selected.index > 0)
{
QuickSearch.highlight_item(QuickSearch.selected.index-1, true);
}
try {
event.preventDefault();
event.stopPropagation();
} catch(e) { }
}
else if(event.keyCode == 27)
{
QuickSearch.hide_popup();
}
else
{
if($('#search_query').val() == QuickSearch.last_query)
{
return false;
}
QuickSearch.selected = false;
if($('#search_query').val().replace(/^\s+|\s+$/g, '').length >= QuickSearch.minimum_length)
{
QuickSearch.last_query = $('#search_query').val().replace(/^\s+|\s+$/g, '');
if(QuickSearch.timeout)
{
window.clearTimeout(QuickSearch.timeout);
}
QuickSearch.timeout = window.setTimeout(QuickSearch.do_search, QuickSearch.search_delay);
}
else {
if(document.getElementById('QuickSearch'))
{
$('#QuickSearch').remove();
}
}
}
},
on_change: function(event)
{
return (QuickSearch.on_keydown(event) && QuickSearch.on_keyup(event));
},
do_search: function()
{
var cache_name = $('#search_query').val().length+$('#search_query').val();
if(QuickSearch.cache[cache_name])
{
QuickSearch.search_done(QuickSearch.cache[cache_name]);
}
else
{
$.ajax({
type: 'GET',
dataType: 'xml',
url: QuickSearch.path+'search.php?action=AjaxSearch&search_query='+encodeURIComponent($('#search_query').val()),
success: function(response) { QuickSearch.search_done(response); }
});
}
},
search_done: function(response)
{
// Cache results
var cache_name = $('#search_query').val().length+$('#search_query').val();
QuickSearch.cache[cache_name] = response;
if(document.getElementById('QuickSearch')) {
$('#QuickSearch').remove();
}
if ($('result', response).length > 0) {
var popup_container = document.createElement('TABLE');
popup_container.className = 'QuickSearch';
popup_container.id = 'QuickSearch';
popup_container.cellPadding = "0";
popup_container.cellSpacing = "0";
popup_container.border = "0";
var popup = document.createElement('TBODY');
popup_container.appendChild(popup);
var counter = 0;
$('result', response).each(
function()
{
var tr = $($(this).text());
var url = $('.QuickSearchResultName a', tr).attr('href');
var tmpCounter = counter;
$(tr).attr('id', 'QuickSearchResult' + tmpCounter);
$(tr).bind('mouseover', function() { QuickSearch.item_selected = true; QuickSearch.highlight_item(tmpCounter, false); });
$(tr).bind('mouseup', function() { window.location = url; });
$(tr).bind('mouseout', function() { QuickSearch.item_selected = false; QuickSearch.unhighlight_item(tmpCounter) });
$(popup).append(tr);
counter++;
}
);
// More results than we're showing?
var all_results_count = $('viewmoreurl', response).size();
if(all_results_count)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
tr.className = "QuickSearchAllResults";
tr.onmouseover = function() { QuickSearch.over_all = true; };
tr.onmouseout = function() { QuickSearch.over_all = false; };
td.colSpan = 2;
td.innerHTML = $('viewmoreurl', response).text();
tr.appendChild(td);
popup.appendChild(tr);
}
var clone = popup.cloneNode(true);
document.body.appendChild(clone);
clone.style.pp = "10px";
clone.style.left = "10px";
offset_height = clone.offsetHeight;
offset_width = clone.offsetWidth;
clone.parentNode.removeChild(clone);
var offset_top = offset_left = 0;
var element = document.getElementById('search_query');
if(typeof(QuickSearchAlignment) != 'undefined' && QuickSearchAlignment == 'left') {
offset_left = 0;
}
else {
offset_left += element.offsetWidth - $('#SearchForm').width();
}
offset_top = 87;
do
{
offset_top += element.offsetTop || 0;
offset_left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
popup_container.style.position = "fixed";
popup_container.style.top = offset_top + "px";
if(typeof(QuickSearchWidth) != 'undefined') {
popup_container.style.width = QuickSearchWidth;
}
else {
popup_container.style.width = document.getElementById('SearchForm').offsetWidth - 2 + "px";
}
if($('#QuickSearch'))
{
$('#QuickSearch').remove();
}
document.body.appendChild(popup_container);
popup_container.style.display = '';
}
else
{
if(document.getElementById('QuickSearch'))
{
$('#QuickSearch').remove();
}
}
},
hide_popup: function()
{
$('#QuickSearch').remove();
QuickSearch.selected = null;
},
highlight_item: function(index, keystroke)
{
element = $('#QuickSearchResult'+index);
if(keystroke == true)
{
if(QuickSearch.selected) QuickSearch.selected.className = 'QuickSearchResult';
QuickSearch.selected = document.getElementById('QuickSearchResult'+index);
}
element.addClass("QuickSearchHover");
},
unhighlight_item: function(index)
{
element = $('#QuickSearchResult'+index);
element.removeClass('QuickSearchHover');
}
};
$(document).ready(function()
{
QuickSearch.init();
});

jQuery sticky top menu bar request

Im looking for a jQuery pluging (or code/guide) that does this: http://codecanyon.net/item/jquery-css3-sticky-mega-menu-bar/full_screen_preview/239093
This one is not free
Note: Notice the navigation bar is not placed at the top from the beginning. It sticks once the viewport "hits" it.
Anthony Garand also has a pretty sticky plugin - All free and actually maintained on GitHub:
jQuery Sticky Plugin
You could reverse engineer #genesis link which is the exact script you are looking for (no it is not hard)
I couldn't find a url for a non-minified version.. so here it is.
(function ($) {
$.fn.stickyMenubar = function (o) {
o = $.extend({
top: null,
floatingDiv: null,
floatingDivBackground: false,
megaMenu: true,
onScroll: function () {},
onLeaveTop: function () {},
sensitivity: 7,
padding: 5,
container_width: 960
}, o || {});
var setLiActions = function (t, lvl) {
var parent_ul = t.children('ul:first');
if (lvl > 0) {
t.addClass('inner_menu').hide();
} else {
if (!o.floatingDivBackground) {
t.addClass('smenubar_background');
}
}
t.mouseleave(function () {
$(this).children('li').children('ul').hide();
});
t.children('li').each(function () {
var li = $(this);
var class_parent = '';
var class_child = '';
var uls = li.children('ul');
if (uls.length) {
uls.each(function () {
setLiActions($(this), lvl + 1);
})
if (lvl == 0) {
li.children('a:first').addClass('arrow_down');
} else {
li.children('a:first').addClass('arrow_right');
}
if (!$.fn.hoverIntent) {
alert('hoverIntent javascript library must be included');
return;
}
var config = {
over: function () {
if (lvl == 0) {
$(this).parent().children('li').not($(this)).children('ul').hide();
var inner_ul = li.children('ul:first');
var pos = li.position();
var pos_ul = inner_ul.position();
var top_c = pos.top + li.height();
if (inner_ul.hasClass('show2left')) {
var left_c = pos.left - inner_ul.width() + li.width() + (o.padding * 2);
class_parent = 'inuseleft';
class_child = 'inusechildleft';
class_panel = 'left_slide';
inner_ul.addClass('topleftradius')
} else if (inner_ul.hasClass('mega_menu')) {
var left_c = 0 + ($(document).width() / 2) - (o.container_width / 2);
class_parent = 'inusemega', class_child = 'inusechildmega';
class_panel = 'mega_slide';
inner_ul.addClass('topleftradius').addClass('toprightradius');
} else {
var left_c = pos.left;
class_parent = 'inuse';
class_child = 'inusechild';
class_panel = 'right_slide';
inner_ul.addClass('toprightradius');
}
if (!$.browser.msie || ($.browser.msie && ($.browser.version > 7.0))) {
if (inner_ul.width() <= (li.width() + (o.padding * 2))) {
inner_ul.css('width', li.width() + (o.padding * 2));
inner_ul.removeClass('topleftradius').removeClass('toprightradius');
}
}
inner_ul.stop(true, true).css({
top: top_c,
left: left_c
}).addClass(class_panel).slideDown(150);
li.addClass(class_child);
} else {
var inner_ul = li.children('ul');
var pos = li.position();
var pos_ul = inner_ul.position();
var top_c = pos.top;
if (inner_ul.hasClass('show2left')) {
var left_c = pos.left - inner_ul.width() + li.width() - 1;
class_parent = 'inuseleft';
class_child = 'inusechildleft';
class_panel = 'left_slide';
} else {
var left_c = pos.left + li.width();
if ($.browser.mozilla) {
left_c--;
}
class_parent = 'inuse';
class_child = 'inusechild';
class_panel = 'right_slide';
}
inner_ul.css({
top: top_c,
left: left_c
}).addClass(class_panel).css({
'white-space': 'nowrap'
}).stop(true, true).animate({
width: 'toggle'
}, 300);
li.addClass(class_child);
}
},
sensitivity: o.sensitivity,
timeout: 200,
out: function () {
li.stop(true, true).removeClass(class_child).children('ul').hide();
}
};
li.each(function () {
$(this).hoverIntent(config);
$(this).mouseleave(function () {
if (lvl == 0) {
$(this).children('ul').hide();
}
});
});
} else {
li.mouseenter(function () {
li.stop(true, true).addClass(class_parent);
});
li.mouseleave(function () {
li.stop(true, true).removeClass(class_parent).children('ul').hide();
});
}
});
}
return this.each(function () {
var t = $(this);
t.addClass('smenubar');
if (!o.floatingDiv) {
var floatingDiv = t;
} else {
var floatingDiv = o.floatingDiv;
floatingDiv.css({
width: '100%'
});
}
var top_Y = 0;
if (!o.top) {
top_Y = floatingDiv.position().top;
} else {
top_Y = o.top;
}
if (o.floatingDivBackground) {
floatingDiv.addClass('smenubar_background');
t.css({
'border-bottom': 'none'
});
}
$(window).scroll(function () {
if ($(this).scrollTop() >= top_Y) {
if (!($.browser.msie && ($.browser.version <= 7.0))) {
floatingDiv.addClass('float_top');
o.onLeaveTop.call(this);
}
} else {
floatingDiv.removeClass('float_top').removeClass('float_top_ie7');
o.onScroll.call(this);
}
var open_menu = $('.inner_menu:visible');
var parent_li = open_menu.parent();
var pos = parent_li.position();
open_menu.css({
top: pos.top + parent_li.height()
});
});
t.find('.toggle_block').slideToggle();
t.find('.toggle_handle').html('...').css('text-align', 'center');
t.find('a').click(function () {
if ($(this).hasClass('toggle_handle')) {
var prev = $(this).parent().prev('.toggle_block');
prev.slideToggle().prevUntil(':not(.toggle_block)').slideToggle();
}
if ($(this).attr('href') == '#') {
event.preventDefault();
return;
}
});
if (o.megaMenu == true) {
setLiActions(t, 0);
}
});
};
})(jQuery);
play around with it. generally these plugins are very scale-able and customize-able so there is a bunch of junk code in there. The majority of what you want seems to be encased in
(window).scroll(function () {
if ($(this).scrollTop() >= top_Y) {
if (!($.browser.msie && ($.browser.version <= 7.0))) {
floatingDiv.addClass('float_top');
o.onLeaveTop.call(this);
}
} else {
floatingDiv.removeClass('float_top').removeClass('float_top_ie7');
o.onScroll.call(this);
}
var open_menu = $('.inner_menu:visible');
var parent_li = open_menu.parent();
var pos = parent_li.position();
open_menu.css({
top: pos.top + parent_li.height()
});
});

Preloading images in a slider

This slider works but I just need to preload images:
document.observe("dom:loaded", function(event) {
initSlider()
});
var slider_index = 0;
var auto_scroll = true;
var ctime = false;
function initSlider() {
$('slider-img').src = slider_images[0];
$('slider-text').innerHTML = slider_text[0];
$('slider-link').setAttribute('href',slider_links[0]);
ctime = window.setTimeout(function() {
sliderNext(true);
},7000);
}
function sliderPrev() {
changeSlide(slider_index-1);
clearTimeout(ctime);
}
function sliderNext(scroll) {
if (scroll == true) {
ctime = window.setTimeout(function() {
sliderNext(true);
},21000);
} else {
clearTimeout(ctime);
}
changeSlide(slider_index+1, scroll);
}
function changeSlide(target, auto) {
if (auto) auto_scroll = true; else auto_scroll = false;
if (!auto_scroll) clearTimeout(ctime);
var name = "slider_thumb" + slider_index;
$(name).removeClassName("active");
slider_index = target;
if ( slider_index >= slider_count ) {
slider_index = 0;
} else if ( slider_index < 0 ) {
slider_index = slider_count - 1;
}
$('slider-img').src = slider_images[slider_index];
$('slider-text').innerHTML = slider_text[slider_index];
$('slider-link').setAttribute('href',slider_links[slider_index]);
var name = "slider_thumb" + slider_index;
$(name).addClassName("active");
}
// Preload Image
$('<img />')
.attr('src', 'picture.jpg')
.load(function(){
$('.slider').append( $(this) );
// some other Code
});

Categories