Jquery syntax error only in IE 11

Jquery syntax error only in IE 11 - javascript

I have a main page that load another html page with some javascript inside.
Unfortunately, in IE 11 the debugger retrieve me a syntax error in jquery.2.1.0.min.js. The javascript isn't executed at all.
With all other browsers the problem doesn't exist. I've checked the script with javascript lint, but there aren't significant error.
If you want the online test:
TwisteggUp, than click on "What" menu and than click on "Web" span.
//dichiarazioni globali
var servUrl;
var $currGallery;
var currPortrait;
var currTabIndex;
//switch iniziale
if ($('#pageType').attr('value') == 'web') {
servUrl = "/EggWS.asmx/GetWebProjects";
}
else {
servUrl = "/EggWS.asmx/GetGraphicProjects";
}
//richiesta Ajax
SwitchAjaxBrowser(servUrl);
//funzioni per richieste Ajax
function SwitchAjaxBrowser(servUrl) {
$.ajax({
url: servUrl,
dataType: "xml",
success: function (xml) { ProcessAjaxRequest(xml); },
error: function (xhr, status, error) {
console.log(xhr.status);
}
});
}
function ProcessAjaxRequest(xml) {
//crea oggetti progetto
console.log(xml);
var i = 0;
var pjCount = $(xml).find('Project').length;
$(xml).find('Project').each(function () {
var pjObject = $('#pj' + i);
console.log($(this).find('Name').text());
pjObject.children('.pjContent').children('.pjName').html($(this).find('Name').text());
pjObject.children('.pjContent').children('.pjDesc').load($(this).find('Description').text());
pjObject.children('.pjContent').children('.pjFullDesc').html($(this).find('FullDescription').text());
pjObject.children('.pjContent').children('.pjSkills').html($(this).find('Skills').text());
//popolo le info e la galleria nascosta
pjObject.children('.pjContent').children('.pjmImage').attr('src', $(this).find('MainImage').text());
//archivio i dati con le info delle immagini
$(this).find('ProjectImage').each(function () {
pjObject.children('.pjContent').children('.pjmImage').clone(false).attr('src', $(this).text()).removeClass('pjmImage').addClass('pjmDetailImageGallery').appendTo(pjObject.children('.pjContent').children('.pjGallery'));
});
//se è il terzo oggetto
if ((i > 0) && ((i + 1) % 3 == 0) && (i < (pjCount - 1))) {
pjObject.parent().clone().empty().insertAfter(pjObject.parent());
$('.pjPager').last().data('index', (i + 1) / 3);
pjObject.clone().attr('id', 'pj' + (i + 1)).appendTo($('.pjPager').last()).children('.pjContent').children('.pjGallery').html('');
} else
//se non è l'ultimo, clona l'oggetto
if (i < (pjCount - 1)) {
pjObject.clone().attr('id', 'pj' + (i + 1)).insertAfter(pjObject).children('.pjContent').children('.pjGallery').html('');
}
i++;
});
$('.pjLoad').fadeOut(500);
$('#pjGeneralContainer').children('.pjPager').fadeIn(500);
//correla l'evento di caricamento generale alla visualizzazione.
//$('#pjGeneralContainer').waitForImages(function () {
//});
//gestione dell'hovering per tutti i progetti
$('.pjContent').each(function () {
$(this).children('.pjDesc').mouseover(function (e) {
$(this).stop().animate({ height: '365px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
});
});
$('.pjContent').each(function () {
$(this).children('.pjDesc').mouseout(function (e) {
$(this).stop().animate({ height: '30px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
});
});
//popolamento scheda singolo progetto
$('.pjContent').on('click', function () {
PopulateDetailedContainer($(this));
});
$('.pjBtn').on('click', function () { moveGallery($(this)); });
//scomparsa dettaglio progetto
function CancelDetailedContainer() {
$('#pjDetailContainer').fadeOut(500);
$('#pjGeneralContainer').fadeIn(500);
$('.pjNav').fadeIn(500);
//svuoto le informazioni
$('.pjDetailmImage').attr('src', '');
$('.pjDetailTitle').html('');
$('.pjDetailFullDesc').html('');
$('.pjTab3Skill').html('');
$('.pjDetailGallery').html('');
//ripristino le condizioni iniziali
$('.pjDetailTab2').css('height', '100px');
$('.pjDetailTab3').css('height', '100px');
$('.pjBtn').removeClass('pjBtnDown');
$('.pjBtn').removeClass('pjBtnUp');
$('.pjBtn').addClass('pjBtnUp');
}
function PopulateDetailedContainer($projectContent) {
$currGallery = $projectContent.children('.pjGallery');
currTabIndex = 0;
//effetti di transizione
$('#pjGeneralContainer').fadeOut(500);
$('.pjNav').fadeOut(500);
$('#pjDetailContainer').fadeIn(500);
//popolo le informazioni
$('.pjDetailmImage').attr('src', $projectContent.children('.pjmImage').attr('src'));
var cancBtn = "<a class='btnDetailCancel' />";
$('.pjDetailTitle').html(cancBtn + $projectContent.children('.pjName').html());
$('.pjDetailTitle').children('.btnDetailCancel').on('click', function () { CancelDetailedContainer(); });
$('.pjDetailFullDesc').load($projectContent.children('.pjFullDesc').html());
$('.pjTab3Skill').load($projectContent.children('.pjSkills').html());
var sliderBtn = "<a class='sliderLeft'/><a class='sliderRight'/>";
$('.pjDetailGallery').html($projectContent.children('.pjGallery').html());
//controllo orientamento per galleria - inizializzazione owl
buildGallery();
$(window).resize(function () { moveGallery(null); });
}
function assignGalleryHeight() {
var wHeight = $('.SiteBody').height();
var galleryHeight = wHeight - 350;
var galleryWidth = $('.pjDetailGallery').width();
switch (currTabIndex) {
case 0:
$('.pjDetailTab2').css('height', '100px');
$('.pjDetailTab3').css('height', '100px');
break;
case 1:
$('.pjDetailTab2').css('height', (wHeight - 250) + 'px');
$('.pjDetailTab3').css('height', '100px');
break;
case 2:
$('.pjDetailTab2').css('height', (wHeight - 250) + 'px');
$('.pjDetailTab3').css('height', (wHeight - 250) + 'px');
break;
}
$('.pjmDetailImageGallery').removeAttr('style');
//se orizzontale una sola immagine, se verticale 2 immagini
if (localStorage['portrait'] == 'Y') {
$('.pjmDetailImageGallery').css('max-height', (galleryHeight - 30) + 'px');
$('.pjmDetailImageGallery').css('max-width', (galleryWidth) + 'px');
$('.pjmDetailImageGallery').css('margin-top', '0px');
//eliminazione visualizzazione speciale
$('.pjDetailmImage').removeAttr('style');
$('.pjDetailTab1').removeAttr('style');
$('.pjDetailFullDesc').removeAttr('style');
}
else {
$('.pjmDetailImageGallery').css('max-height', (galleryHeight - 50) / 2 + 'px');
$('.pjmDetailImageGallery').css('max-width', (galleryWidth) + 'px');
$('.pjmDetailImageGallery').css('margin-top', '10px');
//visualizzazione speciale
$('.pjDetailmImage').css('float', 'none');
$('.pjDetailmImage').css('height', '600px');
$('.pjDetailmImage').css('margin-top', '30px');
$('.pjDetailTab1').css('text-align', 'center');
$('.pjDetailTab1').css('text-align', 'center');
$('.pjDetailFullDesc').css('font-size', '150%');
}
}
function buildGallery() {
//azzeramento di sicurezza delle informazioni
var $pjDetailGallery = $('.pjDetailGallery');
$pjDetailGallery.html("");
if (typeof $pjDetailGallery.data('owlCarousel') != 'undefined') {
$pjDetailGallery.data('owlCarousel').destroy();
$pjDetailGallery.removeClass('owl-carousel');
}
//resetto i bottoni
currTabIndex = 0;
$('.pjTab2Title').children('div').removeClass('pjBtnDown');
if (!$('.pjTab2Title').children('div').hasClass('pjBtnUp'))
$('.pjTab2Title').children('div').addClass('pjBtnUp');
$('.pjTab3Title').children('div').removeClass('pjBtnDown');
if (!$('.pjTab3Title').children('div').hasClass('pjBtnUp'))
$('.pjTab3Title').children('div').addClass('pjBtnUp');
//recupero le info della galleria
if (localStorage['portrait'] == 'Y') {
//ricreo gli oggetti come erano
$('.pjDetailGallery').html($currGallery.html());
}
else {
//ricreo gli oggetti a coppie
k = 0;
$currGallery.children().each(function () {
if (k % 2 == 0) {
$pjDetailGallery.append("<div class='verticalGallery'></div>");
}
$(this).clone().appendTo($pjDetailGallery.children('div').last());
k++;
});
}
assignGalleryHeight();
if (localStorage['portrait'] == 'Y') {
$pjDetailGallery.owlCarousel({
items: 1,
itemsCustom: [0, 1],
scrollPerPage: true
});
}
else {
$pjDetailGallery.owlCarousel({
items: 1,
itemsCustom: [0, 1],
scrollPerPage: true
});
}
}
//gestione movimento tra schede del progetto singolo
function moveGallery($btn) {
var wHeight = $('.SiteBody').height();
//per il resize della finestra
if ($btn == null) {
//se è cambiato l'orientamento della pagina ricostruisco tutto
if (currPortrait != localStorage['portrait']) {
buildGallery();
currPortrait = localStorage['portrait'];
return;
}
assignGalleryHeight();
return;
}
//la finestra deve salire
if ($btn.hasClass('pjBtnUp')) {
$('.pjDetailGallery').css('height', (wHeight - 350) + 'px');
switch ($btn.data('index')) {
case 1:
$('.pjDetailTab2').stop().animate({ height: (wHeight - 250) + 'px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
$btn.removeClass('pjBtnUp');
$btn.addClass('pjBtnDown');
currTabIndex = 1;
break;
case 2:
$('.pjDetailTab2').stop().animate({ height: (wHeight - 250) + 'px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
$('.pjDetailTab3').stop().animate({ height: (wHeight - 250) + 'px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
$btn.removeClass('pjBtnUp');
$btn.addClass('pjBtnDown');
$('.pjTab2Title').children('div').removeClass('pjBtnUp');
if (!$('.pjTab2Title').children('div').hasClass('pjBtnDown'))
$('.pjTab2Title').children('div').addClass('pjBtnDown');
currTabIndex = 2;
break;
default:
break;
}
}
//la finestra deve scendere
else {
switch ($btn.data('index')) {
case 1:
$('.pjDetailTab2').stop().animate({ height: '100px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
$('.pjDetailTab3').stop().animate({ height: '100px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
$btn.removeClass('pjBtnDown');
$btn.addClass('pjBtnUp');
$('.pjTab3Title').children('div').removeClass('pjBtnDown');
if (!$('.pjTab3Title').children('div').hasClass('pjBtnUp'))
$('.pjTab3Title').children('div').addClass('pjBtnUp');
currTabIndex = 0;
break;
case 2:
$('.pjDetailTab3').stop().animate({ height: '100px' }, { duration: 600, step: function (now) { $(this).css('height', now + 'px'); } });
$btn.removeClass('pjBtnDown');
$btn.addClass('pjBtnUp');
currTabIndex = 1;
break;
default:
break;
}
}
//checkGalleryPortrait();
}
//termine controllo caricamento portfolio
localStorage['folioisloading'] = 'N';
//Inizializzazione transizioni
InitiateTransition();
return false;
}
function InitiateTransition() {
var $main = $('#pjGeneralContainer'),
$pages = $main.children('div.pt-page'),
animcursor = 1,
pagesCount = $pages.length,
current = 0,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation': 'oAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[Modernizr.prefixed('animation')],
// support css animations
support = Modernizr.cssanimations;
function init() {
$pages.each(function () {
var $page = $(this);
$page.data('originalClassList', $page.attr('class'));
});
$pages.eq(current).addClass('pt-page-current');
CreateNav();
responsive();
}
function CreateNav() {
var i = 0;
//navigazione precedente
$('.pjNav').append("<a class='pjNavPrev pjNavIcon' />");
$('.pjNav').children().last().on('click', function () {
previousPager();
});
//navigazione checkbox
$main.children('.pjPager').each(function () {
var $pjPager = $(this);
$('.pjNav').append("<a class='pjNavButton' data-index='" + $pjPager.data('index') + "' />");
if (i == 0)
$('.pjNav').children().last().css('margin-left', '0px');
$('.pjNav').children().last().on('click', function () {
goToPager($pjPager.data('index'));
});
i++;
});
//navigazione successivo
$('.pjNav').append("<a class='pjNavNext pjNavIcon' />");
$('.pjNav').children().last().on('click', function () {
nextPager();
});
$('.pjNavButton').each(function () {
if ($(this).data('index') == 0)
$(this).addClass('pjNavButtonCurrent');
else
$(this).removeClass('pjNavButtonCurrent');
});
}
//funzioni di navigazione
function goToPager(toPageIndex) {
if (current == toPageIndex)
return false;
if (isAnimating)
return false;
isAnimating = true;
var $currPage = $pages.eq(current);
var $nextPage = $pages.eq(toPageIndex).addClass('pt-page-current');
//seleziono il bottone di navigazione corrente
$('.pjNavButton').each(function () {
if ($(this).data('index') == toPageIndex)
$(this).addClass('pjNavButtonCurrent');
else
$(this).removeClass('pjNavButtonCurrent');
});
//imposto lo stile dell'animazione
if (current > toPageIndex) {
outClass = 'pt-page-rotatePushRight';
inClass = 'pt-page-moveFromLeft';
}
else {
outClass = 'pt-page-rotatePushLeft';
inClass = 'pt-page-moveFromRight';
}
current = toPageIndex;
$currPage.addClass(outClass).on(animEndEventName, function () {
$currPage.off(animEndEventName);
endCurrPage = true;
if (endNextPage) {
onEndAnimation($currPage, $nextPage);
}
});
$nextPage.addClass(inClass).on(animEndEventName, function () {
$nextPage.off(animEndEventName);
endNextPage = true;
if (endCurrPage) {
onEndAnimation($currPage, $nextPage);
}
});
if (!support) {
onEndAnimation($currPage, $nextPage);
}
}
function nextPager() {
if (current < pagesCount - 1) {
goToPager(current + 1);
}
}
function previousPager() {
if (current > 0) {
goToPager(current - 1);
}
}
function onEndAnimation($outpage, $inpage) {
endCurrPage = false;
endNextPage = false;
resetPage($outpage, $inpage);
isAnimating = false;
//animazione di transizione completata.-> da inserire qui animazione dei progetti (se la facciamo).
}
function resetPage($outpage, $inpage) {
$outpage.attr('class', $outpage.data('originalClassList'));
$inpage.attr('class', $inpage.data('originalClassList') + ' pt-page-current');
}
//funzione per lo scroll
function responsive() {
$(document).bind("swipeRight", function (event) {
event.preventDefault();
nextPager();
}).bind("swipeLeft", function (event) {
event.preventDefault();
previousPager();
});
$(document).bind('mousewheel DOMMouseScroll', function (event) {
event.preventDefault();
var delta = event.originalEvent.deltaX;
init_scroll(event, delta);
});
}
//funzione accessoria per lo scroll
function init_scroll(event, delta) {
// Cancel scroll if currently animating or within quiet period
if (isAnimating) {
event.preventDefault();
return;
}
if (delta < 0) {
nextPager();
} else {
if (delta > 0) {
previousPager();
}
}
}
//mappatura con le freccie su/giù
$(document).keydown(function (e) {
var tag = e.target.tagName.toLowerCase();
switch (e.which) {
case 37:
if (tag != 'input' && tag != 'textarea') previousPager();
break;
case 39:
if (tag != 'input' && tag != 'textarea') nextPager();
break;
default: return;
}
});
//gestione dei tab singolo progetto
init();
return { init: init };
}

I've solved!
I don't know why, but for IE the piece of code:
$(document).keydown(function (e) {
var tag = e.target.tagName.toLowerCase();
switch (e.which) {
case 37:
if (tag != 'input' && tag != 'textarea') previousPager();
break;
case 39:
if (tag != 'input' && tag != 'textarea') nextPager();
break;
default: return;
}
});
Inside the internal script causes syntax error.
I have the same code in the main page with other (e.which) and there it works. Such a mistery!

Related

How to html5 video duration speed control bypass

I am not a web developer. The institution I work for has online training. in html5 video form. Video acceleration doesn't work. There is a time control. If speeding is detected, the video restarts. Is there any way I can bypass this? The total duration of the trainings is 650 min. It is really hard. I am posting the source code of the video page.
<div style="position:relative">
<input type="hidden" id="pinfo" data-calisankodu="46564064386" data-calisanadsoyad="FATİH KURT" data-egitimkodu="1ae2b8e4-971f-4025-a8e2-97cbc60989bd"
data-egitimadi="2022 Temel İş Sağlığı ve Güvenliği Eğitimi" data-dokumankodu="35c46809-cc58-4806-a5e8-e921d65b8557" data-dosyaadi="01 Genel Konular_202104042129579656.mp4" data-dokumantanimi="01 genel konular"
data-dokumanaciklama="Genel Konular" data-calisanegitimkodu="dad47501-bdd3-4275-a01e-631e77ecc242" data-calisanegitimicerikkodu="d3439fcb-ad6b-41dd-bd87-592ba6f47325"
data-ks="765" data-kontrolkaldigisure="0" data-ts="2768" data-td="27" data-uzanti="mp4" data-vapo="1"
data-vks="0" data-isyerikodu="AEFC7F5C-7FA2-4A9E-83A3-6FED40C4A829" />
<div id="kontrolSorular" class="hidden"></div>
<div id="video-filigram" style="margin-left: 0px;" class="grid-stack hidden"></div>
<video id="dersvideo" playsinline controls preload="auto">
<source src="/UploadedFiles/01 Genel Konular_202104042129579656.mp4" type="video/mp4" size="1080">
Tarayıcınız video oynatmayı desteklemiyor.
And
//Genel değişkenler
var player;
var icerik = {};
var aktifsoru = 0;
var kconfirms = [];
var kontrolsorular = [];
var currenttime = 0;
var kontrolsure = 0;
var completedbefore = false;
var videoarkaplandaoynat = false;
var seektry = false;
var autosavesecond = 120;
var savetries = [];
var savetryconfirmed = false;
var isios = false;
var loadeddata = false;
var ilerisarma = 0;
var zorunluegitim = 1;
var kontrolegitimicerik = "";
var etkilesimliegitimicerik = "";
var EtkilesimliEgitimIzlenecekDokumanKodu = "";
var cevaplanankontrolegitimicerik = [];
var cevaplananetkilesimliegitimicerik = [];
var kontrolegitimiceriksure = -1;
var etkilesimliegitimiceriksure = -1;
var gecensure = 0;
var EgitimTuru = "1";
var VideoIleriSarma = "0";
if (EgitimTuru == "0" || VideoIleriSarma == "1") {
console.log("Video ileri sarma aktif");
ilerisarma = 5;
zorunluegitim = 0;
}
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/g)) {
console.log("iOS device detected");
console.log("Everything is OK.");
isios = true;
}
//Doc Ready
$(document).ready(function () {
//Load lesson content
icerik = {
CalisanKodu: $("#pinfo").attr("data-calisankodu"),
CalisanAdSoyad: $("#pinfo").attr("data-calisanadsoyad"),
EgitimKodu: $("#pinfo").attr("data-egitimkodu"),
EgitimAdi: $("#pinfo").attr("data-egitimadi"),
DokumanKodu: $("#pinfo").attr("data-dokumankodu"),
DosyaAdi: $("#pinfo").attr("data-dosyaadi"),
DokumanTanimi: $("#pinfo").attr("data-dokumantanimi"),
DokumanAciklama: $("#pinfo").attr("data-dokumanaciklama"),
CalisanEgitimKodu: $("#pinfo").attr("data-calisanegitimkodu"),
CalisanEgitimIcerikKodu: $("#pinfo").attr("data-calisanegitimicerikkodu"),
ToplamSure: parseInt($("#pinfo").attr("data-ts")),
KaldigiSure: parseInt($("#pinfo").attr("data-ks")),
KontrolKaldigiSure: parseInt($("#pinfo").attr("data-kontrolkaldigisure")),
TamamlanmaDurum: parseInt($("#pinfo").attr("data-td")),
Tamamlandi: false,
KontrolSure: -1,
EgitimKontrolIcerikKodu: kontrolegitimicerik,
EtkilesimliEgitimIcerikKodu: etkilesimliegitimicerik,
EgitimTuru: EgitimTuru,
GecenSure: 0
};
//Get lesson state
if (icerik.TamamlanmaDurum >= 100) {
completedbefore = true;
icerik.Tamamlandi = true;
}
//Player Install
player = new Plyr('#dersvideo', {
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
settings: ['captions','quality' /*,'speed' */ ],
preload: "auto",
i18n: {
restart: 'Sıfırla',
rewind: 'Kalan {seektime}',
play: 'Başlat',
pause: 'Durdur',
fastForward: 'İleri {seektime}',
seek: 'Aralık',
seekLabel: '{currentTime} of {duration}',
played: 'Oynatılan',
buffered: 'Önbellek',
currentTime: 'Şimdi',
duration: 'Süre',
volume: 'Ses',
mute: 'Sustur',
unmute: 'Sesi Aç',
enableCaptions: 'Altyazı Aç',
disableCaptions: 'Altyazı Kapat',
download: 'İndir',
enterFullscreen: 'Tam Ekran',
exitFullscreen: 'Kapat',
frameTitle: 'Oynatılıyor: {title}',
captions: 'Altyazılar',
settings: 'Ayarlar',
menuBack: 'Geri',
speed: 'Hız',
normal: 'Normal',
quality: 'Kalite',
loop: 'Tekrar',
start: 'Başlangıç',
end: 'Son',
all: 'Tümü',
reset: 'Sıfırla',
disabled: 'Gizle',
enabled: 'Göster',
advertisement: 'Duyuru',
qualityBadge: {
1080: 'Yuksek',
360: 'Dusuk',
},
capture: 'Ekran Görüntüsü'
},
keyboard:{ focused: false, global: false },
seekTime: ilerisarma,
fullscreen: { fallback: false },
listeners: {
seek: function (e) {
seektry = true;
var newTime = _getTargetTime(player, e);
if (newTime > icerik.KaldigiSure && completedbefore == false && zorunluegitim == "1") {
e.preventDefault();
console.log('prevented');
return false;
}
}
}
});
var vh = $(window).innerHeight();
let vw = $(window).innerWidth();
$("#dersvideo").css("height", vh + "px");
$(window).resize(function () {
let vh = $(window).innerHeight();
let vw = $(window).innerWidth();
$("#dersvideo").css("height", vh + "px");
});
$(window).bind("resize", function () {
let vh = $(window).innerHeight();
let vw = $(window).innerWidth();
$("#dersvideo").css("height", vh + "px");
});
//Get backgroundplay config
if ($("#pinfo").attr("data-vapo") == "1") {
videoarkaplandaoynat = true;
}
//Get client control config
if (Number($("#pinfo").attr("data-vks")) > 0) {
kontrolsure = Number($("#pinfo").attr("data-vks"))*60;
} else {
kontrolsure = Number(icerik.KontrolSure);
}
player.on('play', event => {
start();
});
player.on('pause', event => {
stop();
});
if (isios) {
//On play
player.once('play', event => {
console.log("duration: " + parseInt(player.duration) + " - After First Play");
icerik.ToplamSure = parseInt(player.duration);
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? icerik.KaldigiSure : icerik.KontrolKaldigiSure;
});
} else {
//ShowWelcome();
if (icerik.Tamamlandi == false) {
console.log("start lesson");
player.play();
} else {
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? 0 : icerik.KontrolKaldigiSure;
player.play();
}
player.play();
//On player get video data
player.once('loadeddata', event => {
loadeddata = true;
ShowButtons();
});
setTimeout(function () {
}
//player.on('enterfullscreen', event => { console.log(event); });
//player.on('exitfullscreen', event => { console.log(event); });
//Player on time update
player.on('timeupdate', event => {
currenttime = parseInt(player.currentTime);
if (currenttime > icerik.KaldigiSure || icerik.Tamamlandi == true) {
icerik.KaldigiSure = currenttime;
}
//Kontrol süresi özelliği eklendiğinde açılacak.
if (kontrolsure > 0 && player.playing && currenttime > 0 && currenttime % kontrolsure == 0) {
var cfrm = kconfirms.filter(x => x == currenttime);
if (cfrm.length == 0) {
kconfirms.push(currenttime);
player.pause();
}
}
/
// Eğitim Kontrol İçeriği Tetikletme
if (currenttime == kontrolegitimiceriksure && player.playing == true && cevaplanankontrolegitimicerik.indexOf(kontrolegitimicerik) == -1){
$("#video-filigram").removeClass("hidden");
player.pause();
SaveState(false);
$(".jconfirm").remove();
}
// Etkileşimli Eğitim İçeriği Tetikletme
if (currenttime == etkilesimliegitimiceriksure && player.playing == true && cevaplananetkilesimliegitimicerik.indexOf(etkilesimliegitimicerik) == -1) {
player.pause();
SaveState(false);
$(".jconfirm").remove();
window.location.href = "/Calisan/EtkilesimliIcerikViewer/" + etkilesimliegitimicerik + window.location.search + "&etkilesimliegitimicerik=" + etkilesimliegitimicerik + "&kaldigisure=" + player.currentTime + "&isyerikodu=" + $("#pinfo").attr("data-isyerikodu");
}
});
player.on('seeking', event => {
if (zorunluegitim=="0" || icerik.KaldigiSure >= player.currentTime || // video başı mı ?
((parseInt(kontrolegitimiceriksure) != parseInt(player.currentTime) && kontrolegitimiceriksure != -1)) ||
((parseInt(etkilesimliegitimiceriksure) != parseInt(player.currentTime) && etkilesimliegitimiceriksure != -1)) //|| kontrol içeriği var mı ve süre eşit mi ?
//parseInt(player.currentTime) == parseInt(player.duration) // video sonuna gelindi mi ?
//seektry == true
) {
}
else {
SaveState(true);
}
});
//Pause event
player.on('pause', event => {
console.log("paused");
if (parseInt(player.currentTime) == parseInt(player.duration)) {
if (player.currentTime < player.duration && (kontrolegitimiceriksure == -1 || etkilesimliegitimiceriksure == -1) ) {
LessonEnd();
}
//Respect end event
} else if (seektry == true) {
console.log("seektry");
seektry = false;
} else if (!player.fullscreen.active && aktifsoru == 0 && savetryconfirmed == false) {
if (parseInt(kontrolegitimiceriksure) != parseInt(player.currentTime) || parseInt(etkilesimliegitimiceriksure) != parseInt(player.currentTime))
{
$.confirm({
theme: 'supervan',
closeIcon: false,
title: 'Video Duraklatıldı',
content: completedbefore == false ? 'Videoya kaldığınız yerden devam edebilir ya da eğitimi sonlandırabilirsiniz.<br/><br/> <small><i class="fa fa-warning"></i> UYARI <br/> Eğitimi sonlandırırsanız bu içerik tamamlanmamış olarak kaydedilecektir.</small>' : 'Videoya kaldığınız yerden devam edebilir ya da eğitimi sonlandırabilirsiniz.',
typeAnimated: true,
onContentReady: function () {
$(document).on("mousedown touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.25)");
});
$(document).on("mouseup touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.95)");
});
},
buttons: {
basla: {
text: '<i class="fa fa-play" style="margin-right:10px;"></i> Devam Et',
btnClass: 'btn-green',
action: function () {
player.play();
//SaveState(false);
}
},
kapat: {
text: '<i class="fa fa-times" style="margin-right:10px;"></i> Bitir',
btnClass: 'btn-red',
action: function () {
if (completedbefore == true) {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu='+$("#pinfo").attr("data-isyerikodu");
} else {
SaveState(true);
}
}
},
gizle: {
text: '<i class="fa fa-eye-slash" style="margin-right:10px;"></i> Gizle',
btnClass: 'btn-red',
action: function () {
$(".jconfirm").remove();
}
}
}
});
}
}
});
//End event
player.on('ended', event => {
if (((currenttime == kontrolegitimiceriksure || currenttime == icerik.KontrolKaldigiSure) && cevaplanankontrolegitimicerik.length !== 0 && cevaplanankontrolegitimicerik.indexOf(kontrolegitimicerik)) == -1 || ((currenttime == etkilesimliegitimiceriksure || currenttime == icerik.KontrolKaldigiSure) && cevaplananetkilesimliegitimicerik.length !== 0 && cevaplananetkilesimliegitimicerik.indexOf(etkilesimliegitimicerik) == -1)) {
$("#video-filigram").removeClass("hidden");
player.pause();
SaveState(false);
$(".jconfirm").remove();
} else if (currenttime != icerik.KontrolKaldigiSure) {
LessonEnd(/*otomatikdevamet:*/true);
}
});
$(window).on('blur', windowBlurred);
$(window).on('focus', windowFocused);
$(document).on("contextmenu", function () {
return false;
});
$(document).on("click", "#ksCevapla", function () {
var soru = kontrolsorular.find(x => x.ID == "" + aktifsoru);
var vc = $('input[name="ks"]:checked').val();
var msg = "";
if (typeof vc == "undefined") {
alert("Lütfen soruyu cevaplayınız.");
} else if (vc == soru.DOGRUCEVAP) {
msg = "Tebrikler. Doğru Cevap.";
$("#ksmsg").html(msg).removeClass("text-red").addClass("text-green");
soru.SORULDU = true;
soru.VERILENCEVAP = vc;
setTimeout(function () {
HideKs();
player.play();
}, 2000);
} else {
msg = "Üzgünüz. Yanlış cevap.";
msg += soru.AKSIYONZAMAN != "" ? " İlgili bölüme yönlendiriliyor..." : "";
$("#ksmsg").html(msg).removeClass("text-green").addClass("text-red");
soru.SORULDU = true;
soru.VERILENCEVAP = vc;
setTimeout(function () {
HideKs();
if (soru.AKSIYONZAMAN != "") {
player.currentTime = Number(soru.AKSIYONZAMAN);
player.play();
}
}, 3000);
}
});
});
function ShowWelcome() {
//Show welcome message
$.confirm({
theme: 'supervan',
closeIcon: false,
title: 'Sn. ' + icerik.CalisanAdSoyad,
content: '<i class="fa fa-spinner fa-spin"></i> Ders içeriğiniz hazırlanıyor...',
typeAnimated: true,
onContentReady: function () {
if (isios) {
ShowButtons();
}
$(document).on("mousedown touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.25)");
});
$(document).on("mouseup touchstart", function () {
$(document).find(".jconfirm-bg").css("background-color", "rgba(54,70,93,0.95)");
});
},
buttons: {
basla: {
text: '<i class="fa fa-play" style="margin-right:10px;"></i> Başla',
btnClass: 'btn-green basla actionbtn hidden',
action: function () {
if (icerik.Tamamlandi == false) {
console.log("start lesson");
player.play();
} else {
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? 0 : icerik.KontrolKaldigiSure;
player.play();
}
}
},
kapat: {
text: '<i class="fa fa-times" style="margin-right:10px;"></i> Vazgeç',
btnClass: 'btn-red vazgec actionbtn hidden',
action: function () {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
}
}
}
});
}
function ShowButtons() {
player.currentTime = (icerik.KontrolKaldigiSure == 0) ? icerik.KaldigiSure : icerik.KontrolKaldigiSure;
icerik.ToplamSure = parseInt(player.duration);
var dersInfo = '<b>' + icerik.EgitimAdi + '</b> eğitiminin<br/> <b> ' + icerik.DokumanTanimi + '</b> başlıklı içeriği hazırlandı. <br/><br/> <small><i class="fa fa-warning"></i> UYARI <br/> Video tamamlanmadan çıkmanız halinde eğitiminiz tamamlanmamış olarak kaydedilecektir.</small>';
if (completedbefore) {
dersInfo = '<div><b>' + icerik.EgitimAdi + '</b> eğitiminin<br/> <b> ' + icerik.DokumanTanimi + '</b> başlıklı içeriğini daha önce tamamladınız.<br/><br/> Yeniden izlemek için lütfen Başla butonuna basınız.</div>';
}
$(document).find(".jconfirm-content").html(dersInfo);
$(document).find(".actionbtn").removeClass("hidden");
}
function LessonEnd(otomatikdevamet = false) {
icerik.Tamamlandi = true;
icerik.KaldigiSure = parseInt(player.duration);
if (otomatikdevamet == true) {
SaveState(false);
var url = '/Calisan/VideoViewer/?dk=b0af9b9e-dfdb-4651-8305-bf5891c29633&ek=1ae2b8e4-971f-4025-a8e2-97cbc60989bd&cei=87e3b3d1-1b0e-4fcd-a5ba-2b803c93ac27&cek=dad47501-bdd3-4275-a01e-631e77ecc242&isyerikodu=AEFC7F5C-7FA2-4A9E-83A3-6FED40C4A829';
if (url != "" && url != null && url != undefined) {
var decodedurl = url.replace(/&/g, '&');
window.location.href = decodedurl;
} else {
LessonEnd();
}
} else {
$.confirm({
theme: 'supervan',
closeIcon: false,
title: 'İçerik Tamamlandı',
content: completedbefore == false ? 'Tebrikler. Eğitim içeriğini başarıyla tamamladınız.' : 'Video sona erdi.',
typeAnimated: true,
onOpenBefore: function () {
var SonrakiIcerikDurumu = "1";
if (SonrakiIcerikDurumu != "1") {
$(".sonrakiislemler").remove();
}
},
buttons: {
basla: {
text: '<i class="fa fa-play" style="margin-right:10px;"></i> Eğitim Sayfasına Dön',
btnClass: 'btn-green',
action: function () {
if (completedbefore == true) {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
} else {
SaveState(true);
}
}
},
kapat: {
text: '<i class="fa fa-undo" style="margin-right:10px;"></i> Yeniden İzle',
btnClass: 'btn-green',
action: function () {
player.currentTime = 0;
player.play();
}
},
sonraki: {
text: '<i id="sonrakiislemicon" class="fa fa-step-forward" style="margin-right:10px;"></i> <span id="sonrakiislem"> Sonraki İçerik </span>',
btnClass: 'btn-green sonrakiislemler',
action: function () {
var url = '/Calisan/VideoViewer/?dk=b0af9b9e-dfdb-4651-8305-bf5891c29633&ek=1ae2b8e4-971f-4025-a8e2-97cbc60989bd&cei=87e3b3d1-1b0e-4fcd-a5ba-2b803c93ac27&cek=dad47501-bdd3-4275-a01e-631e77ecc242&isyerikodu=AEFC7F5C-7FA2-4A9E-83A3-6FED40C4A829';
var decodedurl = url.replace(/&/g, '&');
window.location.href = decodedurl;
}
}
}
});
}
}
var kaldigimsure = 0;
function windowBlurred() {
kaldigimsure = player.currentTime.toFixed(0);
if (videoarkaplandaoynat == false) {
player.pause();
//if (kaldigimsure > player.currentTime.toFixed(0)) {
// setTimeout(function () {
// window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
// }, 750);
//}
}
}
function windowFocused() {
if (videoarkaplandaoynat == false) {
//if (kaldigimsure > player.currentTime.toFixed(0)) {
// setTimeout(function () {
// window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
// }, 750);
//}
}
}
function SaveState(exit) {
if (completedbefore == false) {
var maxduration = parseInt(player.duration);
var percentage = 100 * icerik.KaldigiSure / maxduration;
icerik.TamamlanmaDurum = percentage >= 100 ? 100 : parseInt(percentage);
var currentorder = savetries.length;
var savetry = {
order: currentorder,
time: moment().format("DD.MM.YYYY HH:mm:ss"),
duration: currenttime,
state: false,
error: ""
};
savetries.push(savetry);
icerik.IsyeriKodu = $("#pinfo").attr("data-isyerikodu");
icerik.GecenSure = gecensure;
$.ajax({
url: '/Calisan/VideoDurumKaydet',
type: 'POST',
dataType: 'json',
data: icerik,
success: function (data) {
if (data.state) {
savetries[currentorder].state = true;
if (completedbefore == false && icerik.Tamamlandi == true) {
completedbefore = true;
}
if (exit) {
if (data.tumiceriktamam == true && data.sonsinavotomatikbaslat == true) {
alertify.success("Eğitim sınavına yönlendiriliyorsunuz. Lütfen bekleyin.");
setTimeout(function () {
window.location.href = $("#routebase").val() + data.sonsinavhref;
}, 750);
} else {
alertify.success("Eğitim durumu kaydedildi. Lütfen bekleyin.");
setTimeout(function () {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
}, 750);
}
} else {
if (data.tumiceriktamam == true && data.sonsinavotomatikbaslat == true) {
alertify.success("Eğitim sınavına yönlendiriliyorsunuz. Lütfen bekleyin.");
setTimeout(function () {
window.location.href = $("#routebase").val() + data.sonsinavhref;
}, 750);
}
}
} else {
savetries[currentorder].state = false;
savetries[currentorder].error = data.message;
if (data.state == false) {
alertify.error(data.message);
setTimeout(function () {
window.location.href = $("#routebase").val() + "Calisan/EgitimDetay/" + icerik.EgitimKodu + '?isyerikodu=' + $("#pinfo").attr("data-isyerikodu");
}, 1500);
What can we do about it? Please help me. Thank you.

Set interval to make auto-slide functionality(Magento Site)

the below-following code is written by freelancer programmer for the silde banner for our Magento website. This is only for slide banner when the customer clicks the pager navigation menu; it slides to next banner. I want to set Interval for this so that It can automatically slide with clicking pager button. Thank you!!!
function initialize_banner_slider(banner_id) {
if ($(banner_id).size() <= 0) return;
var make_center = function(center) {
center.removeClass("on_right").removeClass("on_left").addClass("on_center");
$("body").removeClass("theme-light").removeClass("theme-dark").addClass("theme-"+center.data("theme"));
center.find(".fadeup").each(function() {
$(this).hide().css("top", (parseInt($(this).data("pos-y"))/750*100+100) + "%");
});
$(banner_id + " ul.banner_pager li").removeClass("active");
$($(banner_id + " ul.banner_pager li")[center.index()]).addClass("active");
setTimeout(function() {
center.find(".fadeup").each(function() {
$(this).show().animate({"top": "-=100%"});
/* $(this).css("top", parseInt($(this).data("pos-y"))); */
});
}, 600);
}
var move_full_card_left = function(banner_id) {
if ($(banner_id).find(".on_right").size() > 0) {
$(banner_id).find(".on_center").removeClass("on_center").addClass("on_left");
make_center( $(banner_id).find(".on_right").first() );
if ($(banner_id).find(".on_right").size() == 0) {
// hide arrow
$(banner_id).find(".move_right").hide();
} else {
// show arrow
$(banner_id).find(".move_right").show();
}
$(banner_id).find(".move_left").show();
}
return false;
}
var move_full_card_right = function(banner_id) {
if ($(banner_id).find(".on_left").size() > 0) {
$(banner_id).find(".on_center").removeClass("on_center").addClass("on_right");
make_center( $(banner_id).find(".on_left").last() );
if ($(banner_id).find(".on_left").size() == 0) {
// hide arrow
$(banner_id).find(".move_left").hide();
} else {
// show arrow
$(banner_id).find(".move_left").show();
}
$(banner_id).find(".move_right").show();
}
return false;
}
$(banner_id).find(".move_left").click(function() {
return move_full_card_right(banner_id);
});
$(banner_id).find(".move_right").click(function() {
return move_full_card_left(banner_id);
});
for (var i=0, l=$(banner_id+" > ul.slider > li").size(); i<l; i++) {
var pager = $("<li></li>");
pager.on("click", function() {
var index = $(this).index();
$(banner_id+" > ul.slider > li").each(function(ndx, val) {
if (ndx < index) {
$(this).removeClass("on_center").removeClass("on_right").addClass("on_left");
} else if (ndx > index) {
$(this).removeClass("on_center").removeClass("on_left").addClass("on_right");
} else if (ndx == index) {
make_center($(this));
}
});
});
pager.appendTo($(banner_id + " ul.banner_pager"));
}
var first = true;
$(banner_id+" > ul.slider > li").each(function(elem) {
if (first) {
make_center( $(this) );
first = false;
} else {
$(this).addClass("on_right");
}
$(this).on("swipeleft", function() {
return move_full_card_left(banner_id);
}).on("swiperight", function() {
return move_full_card_right(banner_id);
});
$(this).css("background-image", "url("+$(this).data("background-image")+")");
});
if ($(banner_id+" > ul.slider > li").size() < 2) {
$(banner_id).find(".move_right").hide();
}
$(banner_id).find(".move_left").hide();
}
function initialize_parallax() {
$(".responsive_wrapper").each(function() {
var base_width = $(this).data("width");
var base_height = $(this).data("height");
$(this).css({
"max-width": base_width+"px",
"max-height": base_height+"px"
});
$(this).find(".responsive").each(function() {
$(this).css({
"width": $(this).data("width")/base_width*100 + "%",
"height": $(this).data("height")/base_height*100 + "%",
"left": $(this).data("pos-x")/base_width*100 + "%",
"top": (parseInt($(this).data("pos-y"))/base_height*100) + "%",
});
});
});
}
$(document).ready(function() {
/* parallax positioning */
// $(".verus-cms .parallax").insertAfter( $(".page-header") );
$("#product-list-toolbar2").prependTo(".col-main");
initialize_parallax();
initialize_banner_slider("#top_banner");
initialize_banner_slider("#lific_banner");

You would add something like this:
setInterval(function(){move_full_card_right(banner_id);},5000);
You should be able to throw that in you document ready as long as you can get the banner_id. I don't know how you are setting the banner id, so I can't help you with that.

jQuery PageSlide: .css function on click

Hi everybody!
I use this plugin: PageSlide and this is the code of jquery.pageslide.js:
(function($) {
var $body = $("body"),
$pageslide = $("#pageslide");
var
_sliding = false,
_lastCaller;
if ($pageslide.length == 0) {
$pageslide = $("<div />").attr("id", "pageslide").css("display", "none").appendTo($("body"));
}
function
_load(url, useIframe) {
if (url.indexOf("#") === 0) {
$(url).clone(true).appendTo($pageslide.empty()).show();
} else {
if (useIframe) {
var
iframe = $("<iframe
/>").attr({
src: url,
frameborder: 0,
hspace: 0
}).css({
width: "100%",
height: "100%"
});
$pageslide.html(iframe);
} else {
$pageslide.load(url);
}
$pageslide.data("localEl", false);
}
}
function
_start(direction, speed) {
var slideWidth = $pageslide.outerWidth(true),
bodyAnimateIn = {},
slideAnimateIn = {};
if ($pageslide.is(":visible") || _sliding) {
return;
}
_sliding = true;
switch (direction) {
case "left":
$pageslide.css({
left: "auto",
right: "-" + slideWidth + "px"
});
bodyAnimateIn["margin-left"] = "-=" + slideWidth;
slideAnimateIn["right"] = "+=" + slideWidth;
break;
default:
$pageslide.css({
left: "-" + slideWidth + "px",
right: "auto"
});
bodyAnimateIn["margin-left"] = "+=" + slideWidth;
slideAnimateIn["left"] = "+=" + slideWidth;
break;
}
$body.animate(bodyAnimateIn, speed);
$pageslide.show().animate(slideAnimateIn, speed, function() {
_sliding = false;
});
}
$.fn.pageslide = function(options) {
var
$elements = this;
$elements.click(function(e) {
var
$self = $(this),
settings = $.extend({
href: $self.attr("href")
}, options);
e.preventDefault();
e.stopPropagation();
if ($pageslide.is(":visible") && $self[0] == _lastCaller) {
$.pageslide.close();
} else {
$.pageslide(settings);
_lastCaller = $self[0];
}
});
};
$.fn.pageslide.defaults = {
speed: 200,
direction: "right",
modal: false,
iframe: true,
href: null
};
$.pageslide = function(options) {
var
settings = $.extend({}, $.fn.pageslide.defaults, options);
if ($pageslide.is(":visible") && $pageslide.data("direction") != settings.direction) {
$.pageslide.close(function() {
_load(settings.href, settings.iframe);
_start(settings.direction, settings.speed);
});
} else {
_load(settings.href, settings.iframe);
if ($pageslide.is(":hidden")) {
_start(settings.direction, settings.speed);
}
}
$pageslide.data(settings);
};
$.pageslide.close = function(callback) {
var
$pageslide = $("#pageslide"),
slideWidth = $pageslide.outerWidth(true),
speed = $pageslide.data("speed"),
bodyAnimateIn = {},
slideAnimateIn = {};
if ($pageslide.is(":hidden") || _sliding) {
return;
}
_sliding = true;
switch ($pageslide.data("direction")) {
case "left":
bodyAnimateIn["margin-left"] = "+=" + slideWidth;
slideAnimateIn["right"] = "-=" + slideWidth;
break;
default:
bodyAnimateIn["margin-left"] = "-=" + slideWidth;
slideAnimateIn["left"] = "-=" + slideWidth;
break;
}
$pageslide.animate(slideAnimateIn, speed);
$body.animate(bodyAnimateIn, speed, function() {
$pageslide.hide();
_sliding = false;
if (typeof callback != "undefined") {
callback();
}
});
};
$pageslide.click(function(e) {
e.stopPropagation();
});
$(document).bind("click
keyup", function(e) {
if (e.type == "keyup" && e.keyCode != 27) {
return;
}
if ($pageslide.is(":visible") && !$pageslide.data("modal")) {
$.pageslide.close();
}
});
})(jQuery);
I need one more function:
when PageSlide is active - so the left menu opened - a width of [content] div changes to 600px and when inactive, changes back to the original 1200px.
I think the good code is: $('#content').css('width', '600px');, but I don't know where to place it. I don't know much the JavaScript.
Thank you!

It looks like the _start() function is what is called to adjust the $pageslide element. Try adding your additional changes to that function.
_start(direction, speed) {
var slideWidth = $pageslide.outerWidth(true),
bodyAnimateIn = {},
slideAnimateIn = {},
//may want to declare this somewhere else so its not fetched every time from the dom
$content = $('#content');
if ($pageslide.is(":visible") || _sliding) {
return;
}
_sliding = true;
switch (direction) {
case "left":
$pageslide.css({
left: "auto",
right: "-" + slideWidth + "px"
});
bodyAnimateIn["margin-left"] = "-=" + slideWidth;
slideAnimateIn["right"] = "+=" + slideWidth;
// Looks like the default for direction is set to 'right', so this would be when its closing
$content.css({
width: '1200px'
})
break;
default:
$pageslide.css({
left: "-" + slideWidth + "px",
right: "auto"
});
bodyAnimateIn["margin-left"] = "+=" + slideWidth;
slideAnimateIn["left"] = "+=" + slideWidth;
//this should be when its opening. If not, just switch the two inserted statements.
$content.css({
width: '600px'
})
break;
}

jQuery: How can I put two of these elements on the same page?

I am using the following script, but if I put more than 1 occurrence on the same page, it breaks. I am trying to get it to where I can put multiple carousels on the same page.
HTML:
<div class="carousel_outer">
<div class="portfolio-carousel horizontal">
<div class="carousel" id="carousel1">
<div class="carousel_container carousel1">
<ul class="portfolio-wrap carousel1">
<li><a class="gall_thumb" href="#" title="First Pic"><img src="#" alt="First Pic" /></a></li>
<li><a class="gall_thumb" href="#" title="Second Pic"><img src="#" alt="Second Pic" /></a></li>
</ul>
</div>
<a class="carousel_prev" href="#">Previous</a>
<a class="carousel_next" href="#">Next</a>
</div>
</div>
</div>
Javascript on the page:
$('.carousel').mycarousel({
delay: 150,
fade:300,
slide: 700,
effect:'slide',
orientation:'horizontal',
loop: false,
autoplay: false
});
And the actual carousel javascript:
(function ($) {
$.fn.extend({
mycarousel: function (options) {
var defaults = {
delay: 150,
fade: 300,
slide: 500,
effect: "fade",
orientation: "horizontal",
captionFade: 150,
loop: false,
autoplay: true,
time: 3000
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
var carousel = this;
$carousel_container = $(carousel).find(".carousel_container");
$li = $(carousel).find(".carousel_container ul li");
var visible_width = parseInt($carousel_container.css("width"), 10);
var visible_height = parseInt($carousel_container.css("height"), 10);
var number_items = $li.size();
var item_width = parseInt($li.css("width"), 10);
var item_height = parseInt($li.css("height"), 10);
var item_marginRight = parseInt($li.css("marginRight"), 10);
var item_marginLeft = parseInt($li.css("marginLeft"), 10);
var item_marginTop = parseInt($li.css("marginTop"), 10);
var item_marginBottom = parseInt($li.css("marginBottom"), 10);
if (o.orientation == "horizontal") {
var visible_items = Math.ceil(visible_width / (item_width + item_marginRight + item_marginLeft));
} else {
var visible_items = Math.ceil(visible_height / (item_height + item_marginTop + item_marginBottom));
}
var slides = Math.ceil(number_items / visible_items);
$float_easing = "easeInOutQuart";
function set_item_classes_visibility() {
$li.each(function (index) {
var class_number = Math.floor((index + visible_items) / visible_items);
$(this).addClass("visible_" + class_number);
if (class_number == "1") {
$(this).css("display", "block");
$(this).find(".inner").css("display", "block");
} else {
$(this).css("display", "none");
$(this).find(".inner").css("display", "none");
}
});
}
set_item_classes_visibility();
function set_next_prev_classes() {
var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
var visible_id = visible_item_class.split("_");
if (!o.loop) {
if (visible_id[1] == "1") {
$(".carousel_prev").addClass("disable");
} else {
$(".carousel_prev").removeClass("disable");
}
if (visible_id[1] == slides) {
$(".carousel_next").addClass("disable");
} else {
$(".carousel_next").removeClass("disable");
}
}
}
set_next_prev_classes();
function set_item_position() {
$li.each(function () {
$(this).css("display", "none");
$(this).css("position", "absolute");
if (o.orientation == "horizontal") {
$(this).css("top", "0");
$(this).css("left", visible_width + parseInt($carousel_container.css("paddingLeft")) + parseInt($carousel_container.css("paddingRight")), 10);
} else {
if (o.orientation == "vertical") {
$(this).css("left", "0");
$(this).css("top", visible_height + parseInt($carousel_container.css("paddingTop")) + parseInt($carousel_container.css("paddingBottom")), 10);
}
}
});
$carousel_container.find("li.visible_1").each(function (index) {
$(this).css("display", "block");
if (o.orientation == "horizontal") {
var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
$(this).css("left", left_position);
} else {
if (o.orientation == "vertical") {
var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
$(this).css("top", top_position);
}
}
});
}
if (o.effect == "slide") {
set_item_position();
}
function show_next_prev(method) {
function show_items_fade(id) {
var next_class_name = "visible_" + id;
$carousel_container.find("li." + next_class_name).css("display", "block");
$carousel_container.find("li." + next_class_name).each(function (index) {
var delay = (index) * o.delay;
if (method == "prev") {
var delay = ((visible_items - 1) - index) * o.delay;
}
var index_item = (index + 1);
$(this).find(".inner").delay(delay).fadeIn(o.fade, function () {
if (index_item == visible_items || id == slides) {
set_next_prev_classes();
}
});
});
}
function show_items_slide(id) {
var next_class_name = "visible_" + id;
$carousel_container.find("li." + next_class_name + " .inner").css("display", "block");
$carousel_container.find("li." + next_class_name).each(function (index) {
$(this).css("display", "block");
var delay = (index) * o.delay;
if (method == "prev") {
var delay = ((visible_items - 1) - index) * o.delay;
}
var index_item = (index + 1);
if (o.orientation == "horizontal") {
var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
$(this).delay(delay).animate({
left: left_position
}, o.slide, $float_easing, function () {
if (index_item == visible_items || id == slides) {
set_next_prev_classes();
}
});
} else {
if (o.orientation == "vertical") {
var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
$(this).delay(delay).animate({
top: top_position
}, o.slide, $float_easing, function () {
if (index_item == visible_items || id == slides) {
set_next_prev_classes();
}
});
}
}
});
}
var visible_item_class = $carousel_container.find("li:visible").attr("class");
visible_id = visible_item_class.split("_");
var next_id = parseInt(visible_id[1], 10) + 1;
var prev_id = parseInt(visible_id[1], 10) - 1;
if (visible_id[1] == 1) {
prev_id = slides;
}
if (visible_id[1] == slides) {
next_id = 1;
}
switch (o.effect) {
case "fade":
$carousel_container.find("li:visible").each(function (index) {
var delay = (index) * o.delay;
var index_item = (index + 1);
var last_item = $carousel_container.find("li." + visible_item_class).size();
if (method == "prev") {
delay = ((visible_items - 1) - index) * o.delay;
last_item = 1;
}
$(this).find(".inner").delay(delay).fadeOut(o.fade, function () {
if (index_item == last_item) {
$("li." + visible_item_class).css("display", "none");
if (method == "next") {
show_items_fade(next_id);
} else {
if (method == "prev") {
show_items_fade(prev_id);
}
}
}
});
});
break;
case "slide":
$carousel_container.find("li.visible_" + prev_id).each(function (index) {
if (o.orientation == "horizontal") {
if (method == "next") {
var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
} else {
if (method == "prev") {
var left_position = "-" + item_width + "px";
}
}
$(this).css("left", left_position);
} else {
if (o.orientation == "vertical") {
if (method == "next") {
var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
} else {
if (method == "prev") {
var top_position = "-" + item_height + "px";
}
}
$(this).css("top", top_position);
}
}
});
$carousel_container.find("li." + visible_item_class).each(function (index) {
var delay = (index) * o.delay;
var zindex = index + 10;
var index_item = (index + 1);
var last_item = $carousel_container.find("li." + visible_item_class).size();
if (method == "prev") {
delay = ((visible_items - 1) - index) * o.delay;
zindex = ((visible_items - 1) - index) + 10;
last_item = 1;
}
$(this).css("z-index", zindex);
if (o.orientation == "horizontal") {
if (method == "next") {
var left_position = "-" + item_width;
} else {
if (method == "prev") {
var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
}
}
$(this).delay(delay).animate({
left: left_position
}, o.slide, $float_easing, function () {
if (index_item == last_item) {
$("li." + visible_item_class).css("display", "none");
if (method == "next") {
show_items_slide(next_id);
} else {
if (method == "prev") {
show_items_slide(prev_id);
}
}
}
});
} else {
if (o.orientation == "vertical") {
if (method == "next") {
var top_position = "-" + item_height;
} else {
if (method == "prev") {
var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
}
}
$(this).delay(delay).animate({
top: top_position
}, o.slide, $float_easing, function () {
if (index_item == last_item) {
$("li." + visible_item_class).css("display", "none");
if (method == "next") {
show_items_slide(next_id);
} else {
if (method == "prev") {
show_items_slide(prev_id);
}
}
}
});
}
}
});
break;
}
}
if (o.autoplay) {
var interval = setInterval(function () {
var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
var visible_id = visible_item_class.split("_");
if (!o.loop) {
if (visible_id[1] == slides) {
clearInterval(interval);
} else {
show_next_prev("next");
}
} else {
show_next_prev("next");
}
}, o.time);
}
$(carousel).find(".carousel_next").click(function () {
clearInterval(interval);
show_next_prev("next");
return (false);
});
$(carousel).find(".carousel_prev").click(function () {
clearInterval(interval);
show_next_prev("prev");
return (false);
});
$li.hover(function () {
clearInterval(interval);
$(this).find(".caption").fadeIn(o.captionFade);
}, function () {
$(this).find(".caption").fadeOut(o.captionFade);
});
});
}
});
})(jQuery);
I'm thinking if there is some way I can identify each carousel with an ID and the script only executes things within each ID it would work, but I can't figure out how to get it done.
EDIT: I am getting the following js console error when I click a next/prev button: visible_item_class is undefined

Give them each an unique ID and call them by that.
$('#carousel1').mycarousel({
theid: $(this).attr('id'),
delay: 150,
fade:300,
slide: 700,
effect:'slide',
orientation:'horizontal',
loop: false,
autoplay: false
});
$('#carousel2').mycarousel({
theid: $(this).attr('id'),
delay: 150,
fade:300,
slide: 700,
effect:'slide',
orientation:'horizontal',
loop: false,
autoplay: false
});
On a side note is the following line necessary:
theid: $(this).attr('id')
I don't see it used anywhere in the carousel code.

Based on the function set_next_prev_classes in the plugin, the problem is probably that your 'next' and 'previous' buttons share a common class. (The plugin shouldn't do things this way, but there it is anyway.)
The solution should be as simple as giving each carousel DISTINCT class names for their 'next' and 'previous' buttons -- this can be as simple as appending the numbers 1 and 2 to each. (And then tell the plugin author that this approach is causing problems.)

Two ways to fix the problem.
Change the carousel code to take id of the div used as carousel , and carousel controls.
Copy the carousel code two times.Replace ".carousel" with "#Id1" in first and "#Id2" in second.Then the controls will be "#Id1_next", "#Id1_prev".
This is kind of hacky but cant help it.

Issue with my drag and drop plugin

I'm currently developing a Drag n' Drop plugin. I have just finished a feature so people could drop the draggable item on a target. Now it works perfect on the jsfiddle:
http://jsfiddle.net/XvZLn/18/
But once I implement that code into my plugin the following wont work:
var target = {
on: function() {
return $('.drag:first').each(function() {
$(this).addClass('i');
});
},
off: function() {
$('.drag:first').removeClass('i');
}
};
Which in my plugin it looks like this:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Both of the codes have there purposes. The the on part is the function that is suppose to be launched when you enter all the way in the target. The off part is the function that gets launched when leaving the target.
onTarget and offTarget are all options in the defaults.
The reason we this var is because we needed a way to use function(){}.
The only way I thought I could do this is in an var.
Now Im trying to launch targ.on() inside the if that checks if the element is all the way inside the target. This is not working. I know the targ.on() is not working because I added an alert in the if and and I got the alert once the element got in the target.
This the the full code I use in my plugin:
var locker = o.target.lock;
var lock = false;
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
$(oj).bind('drag', function (event) {
var $t = $(this);
var $con = $(o.target.init);
if (lock === false) {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}).bind('mouseup', function () {
var $t = $(this);
var $con = $(o.target.init);
var sen = 100;
var otop = $t.offset().top;
var oleft = $t.offset().left;
var conw = $con.width();
var conh = $con.height();
var cono = $con.offset().top;
var conl = $con.offset().left;
var oo = $t.height();
sen = sen * 2;
var other = oleft <= conw - (sen / 1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
if (locker === false) {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
lock = false;
} else {
targ.off();
lock = false;
}
} else {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
$(this).css('cursor', 'default');
lock = true;
}
}
});
Full Plugin Code:
$.setCookie = function(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
};
$.getCookie = function(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
};
$.fn.jDrag = function(options) {
var getVersion = {
version: '1.0.0',
version2: '1.0.0',
version3: '1.0.1'
};
var defaults = {
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: false,
lock: false,
onTarget: function() {},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
};
var o = $.extend(defaults, options);
$('body').append('<span class="version_usage_neededToReCievever_srion-now" style="display:none;">' + getVersion.version2 + '</span>');
return this.each(function() {
//Some Variables
var oj = this,
position = $(oj).position(),
revertLeft = position.left,
revertTop = position.top,
yea = 'body',
onceInawhile = '<b class="getDistanceAsofPosition" style="display:none;">' + o.distance + '</b>';
if (o.not === oj) {
o.not = false;
}
o.distance = squared(o.distance);
//alert(o.distance);
var m;
var t;
$(oj).bind('mousedown', function() {
m = event.pageX;
t = event.pageY;
//$('#hi').text(m+' '+t);
});
var firstofdrag = '<b class="getnotNoCondition" style="display:none;">"' + o.not + '"</b>';
if (o.ghostDrop === true) {
var random = Math.floor(Math.random() * 9999999);
if (o.ghostRevert === false) {
o.revert = false;
}
if (o.ghostRevert === true) {
o.revert = true;
}
$(document).ready(function() {
$(oj).clone().attr('id', '').addClass('ghosts').addClass('ghost_starter' + random).css({
position: 'absolute',
top: revertTop,
left: revertLeft,
opacity: o.ghostOpacity
}).appendTo('body');
$('.ghost_starter' + random).mousedown(function() {
if (o.activeClass !== false) {
$(this).addClass(o.activeClass);
}
}).bind('mousedown', o.onPickUp).bind('drag', function(event) {
if (o.grid !== false) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
} else {
$(this).css({
top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
});
}
}
}
else if (o.containment !== false) {
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$('.ghost_starter' + random).bind("dragstart", function(event) {
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)),
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
}
else {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', event.offsetX);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', event.offsetY);
} else {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}
}
}).bind('mouseup', o.onDrop);
$(window).mouseup(function() {
if (o.activeClass !== false) {
$('.ghost_starter' + random).removeClass(o.activeClass);
}
var gpos = $('.ghost_starter' + random).position(),
lft = gpos.left,
tp = gpos.top;
$(oj).animate({
top: tp,
left: lft
}, 300);
if (o.cookies !== false) {
var cookies = $('.ghost_starter' + random).position();
if (o.cookieExdate === 'browserClose') {
$.setCookie('jDrag-Position-Top-Ghost' + $('.ghost_starter' + random).index(), cookies.top);
$.setCookie('jDrag-Position-Left-Ghost' + $('.ghost_starter' + random).index(), cookies.left);
} else {
$.setCookie('jDrag-Position-Top-Ghost' + $('.ghost_starter' + random).index(), cookies.top, o.cookieExdate);
$.setCookie('jDrag-Position-Left-Ghost' + $('.ghost_starter' + random).index(), cookies.left, o.cookieExdate);
}
}
});
});
}
if (o.distance !== false) {
$(yea).append(onceInawhile);
}
$('body').append('<span class="version_usage_neededToReCievever_srion-future" style="display:none;">' + getVersion.version3 + '</span>');
if (o.radialDrag === true) {
$(document).ready(function() {
if (o.circularOutline === true) {
$('head').append('<span class="hi"><div class="circularStyle"></div></span>');
$('.circularStyle').html('<style type="text/css">.pointlikeamaster{' + 'position: absolute;height: 4px;width: 4px;' + 'margin: -2px 0 0 -2px;background: #A00;' + '}</style>');
}
});
$(oj).bind('dragstart', function(event) {
var data = $(this).data('dragcircle');
if (data) {
data.$circle.show();
}
else {
data = {
radius: o.radius,
$circle: $([]),
halfHeight: $(this).outerHeight() / 2,
halfWidth: $(this).outerWidth() / 2
};
data.centerX = event.offsetX + data.radius + data.halfWidth;
data.centerY = event.offsetY + data.halfHeight;
// create divs to highlight the path...
$.each(new Array(72), function(i, a) {
angle = Math.PI * ((i - 36) / 36);
data.$circle = data.$circle.add(
$('<div class="pointlikeamaster" />').css({
top: data.centerY + Math.cos(angle) * data.radius,
left: data.centerX + Math.sin(angle) * data.radius
}));
});
$(this).after(data.$circle).data('dragcircle', data);
}
}).bind('drag', function(event) {
var data = $(this).data('dragcircle'),
angle = Math.atan2(event.pageX - data.centerX, event.pageY - data.centerY);
$(this).css({
top: data.centerY + Math.cos(angle) * data.radius - data.halfHeight,
left: data.centerX + Math.sin(angle) * data.radius - data.halfWidth
});
}).bind('dragend', function() {
$(this).data('dragcircle').$circle.hide();
});
} else {
$(oj).mousedown(function() {
if (o.activeClass !== false) {
$(this).addClass(o.activeClass);
}
}).bind('mousedown', o.onPickUp);
if (o.handle !== false) {
$(o.handle).mouseover(function() {
$(this).css({
cursor: 'crosshair'
});
});
$(oj).bind('dragstart', function(event) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
return $(event.target).is(o.handle);
}
}).bind('drag', function(event) {
if (o.grid !== false) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
} else {
$(this).css({
top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
});
}
}
}
else if (o.containment !== false) {
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$(oj).bind("dragstart", function(event) {
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)),
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
}
else {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
$(this).css('left', event.offsetX);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
$(this).css('top', event.offsetY);
} else {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}
}
});
} else {
$(oj).bind('drag', function(event) {
if (o.grid !== false) {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal') {
$(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical') {
$(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
} else {
$(this).css({
top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
});
}
}
}
else if (o.containment !== false) {
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$(oj).bind("dragstart", function(event) {
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)),
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
}
else if (o.target.init !== false) {
/*
Use this to adjust the target settings
$('b').html(otop+' < '+(conw - (sen/4))+' && '+otop+' > '+cono+' && '+otop+' <= '+((conh + cono)-oo)+' && '+oleft+' < '+(conw-(sen/1.25))+' && '+oleft+' > '+conl+' && '+oleft+' < '+(conw + conl-(sen/4)));
var other = oleft <= conw - (sen/1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
*/
var locker = o.target.lock;
var lock = false;
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
$(oj).bind('drag', function(event) {
var $t = $(this);
var $con = $(o.target.init);
if (lock === false) {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}).bind('mouseup', function() {
var $t = $(this);
var $con = $(o.target.init);
var sen = 100;
var otop = $t.offset().top;
var oleft = $t.offset().left;
var conw = $con.width();
var conh = $con.height();
var cono = $con.offset().top;
var conl = $con.offset().left;
var oo = $t.height();
sen = sen * 2;
var other = oleft <= conw - (sen / 1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
if (locker === false) {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
lock = false;
} else {
targ.off();
lock = false;
}
} else {
if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
targ.on();
$(this).css('cursor', 'default');
lock = true;
}
}
});
} else {
if (o.not !== false && $(event.target).is(o.not)) {
return false;
} else {
if (o.strictMovement !== false || o.strictMovement === 'horizontal') {
$(this).css('left', event.offsetX);
}
else if (o.strictMovement !== false || o.strictMovement === 'vertical') {
$(this).css('top', event.offsetY);
} else {
$(this).css({
top: event.offsetY,
left: event.offsetX
});
}
}
}
});
}
$(oj).bind('mouseup', o.onDrop);
$(window).mouseup(function() {
if (o.activeClass !== false) {
$(oj).removeClass(o.activeClass);
}
if (o.revert === true) {
$(oj).animate({
top: revertTop,
left: revertLeft
}, o.revertDuration);
}
if (o.cookies !== false) {
var cookies = $(oj).position();
if (o.cookieExdate === 'browserClose') {
$.setCookie('jDrag-Position-Top' + $(oj).index(), cookies.top);
$.setCookie('jDrag-Position-Left' + $(oj).index(), cookies.left);
} else {
$.setCookie('jDrag-Position-Top' + $(oj).index(), cookies.top, o.cookieExdate);
$.setCookie('jDrag-Position-Left' + $(oj).index(), cookies.left, o.cookieExdate);
}
}
});
}
if (o.not !== false) {
$(yea).append(firstofdrag);
}
$('body').append('<span class="version_usage_neededToReCievever_srion-past" style="display:none;">' + getVersion.version + '</span>');
if (o.instantGhost === true) {
window.setInterval(function() {
var gpos = $('.ghost_starter' + random).position(),
lft = gpos.left,
tp = gpos.top;
$(oj).stop(true, false).animate({
top: tp,
left: lft
}, 200);
}, 200);
}
//End normal Dragging
//End Tags
if (o.cookies === false) {
$(function() {
var oj = this;
if (o.ghostDrop === true) {
var savedLeftPosition = $.getCookie('jDrag-Position-Left-Ghost' + $(oj).index()),
savedTopPosition = $.getCookie('jDrag-Position-Top-Ghost' + $(oj).index());
$(oj).css({
left: savedLeftPosition + 'px',
top: savedTopPosition + 'px'
});
$('.ghost_starter' + random).css({
left: savedLeftPosition + 'px',
top: savedTopPosition + 'px'
});
}
});
} else {
var savedLeftPosition1 = $.getCookie('jDrag-Position-Left' + $(oj).index()),
savedTopPosition1 = $.getCookie('jDrag-Position-Top' + $(oj).index());
$(oj).css({
left: savedLeftPosition1 + 'px',
top: savedTopPosition1 + 'px'
});
}
});
};
I had to leave out the top part of the plugin because it told me there is a 30000 character limit.
Example: http://jsfiddle.net/ZDUZL/84/
Im not sure what the problem is, and im not sure if this is too much information or not. Thanks for any help.

This works in your first jsFiddle because you're relying on the offset directly from the drag event object:
$('.drag').bind('drag', function(event) {
var $t = $(this);
var $con = $('#container');
if (lock === false) {
$(this).css({
top: event.offsetY, // coordinates directly from event object
left: event.offsetX
});
}
})...
In the full plugin code, you get an offset in your dragstart event callback and then try to reference it from your drag event callback. The problem is that this dragstart event is not being triggered (or not at the proper time or on the proper element, anyway). When the drag callback looks for the values, they're undefined and your script is halted on the error. See here for reference:
var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
var j, b, r;
$('.ghost_starter' + random).bind("dragstart", function(event) { // this event isn't being triggered (or at least not at the right time or on the right element)...
j = $div.offset();
b = j.top + $div.outerHeight() - $(this).outerHeight();
r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {
$(this).css({
top: Math.min(b, Math.max(j.top, event.offsetY)), // ...so b, j, and r aren't defined here
left: Math.min(r, Math.max(j.left, event.offsetX))
});
});
Fix that dragstart trigger or get your offset otherwise and you'll be set.

We Keep Coding

JavaScript is the programming language of the Web.

Jquery syntax error only in IE 11 - javascript

Related

How to html5 video duration speed control bypass

Set interval to make auto-slide functionality(Magento Site)

jQuery PageSlide: .css function on click

jQuery: How can I put two of these elements on the same page?

Issue with my drag and drop plugin

Categories

Resources