I tried modifying the plugin to show a modal popup when a website visitor leaves the page using haschange, but it still doesn't work. How to get it to work? I need help fixing it
$(document).ready(function(e) {
var exit_intent_popup_hash = 'b'
window.location.hash = exit_intent_popup_hash
window.history.back()
setTimeout(function() {
window.history.forward()
$('.fel-modal-parent-wrapper').each(function() {
var $this = $(this);
var tmp_id = $this.attr('id');
var popup_id = tmp_id.replace('-overlay', '');
var trigger_on = $this.data('trigger-on');
var exit_intent = $this.data('exit-intent');
if ('automatic' == trigger_on) {
if ('yes' == exit_intent && FelModalPopup_canShow(popup_id)) {
$(window).hashchange(function() {
if (window.location.hash !== `#${exit_intent_popup_hash}`) {
FelModalPopup_show(popup_id);
window.history.forward()
}
}, false);
}
}
});
}, 500);
});
Related
I'm working with this code to play and pause several audios:
jQuery(document).ready(function(){
var getaudio;
var audiostatus = 'off';
var current_id;
jQuery(document).on('click touchend', '.speaker', function() {
elemento = jQuery(this);
current_id = elemento.children("audio").attr("id");
clase = current_id.replace(/player/, '');
if (!jQuery('.c'+clase).hasClass("speakerplay")) {
getaudio = jQuery('#'+current_id)[0];
if (audiostatus == 'off') {
jQuery('.c'+clase).addClass('speakerplay');
getaudio.load();
getaudio.play();
audiostatus = 'on';
return false;
} else if (audiostatus == 'on') {
jQuery('.c'+clase).addClass('speakerplay');
getaudio.play()
}
} else if (jQuery('.speaker').hasClass("speakerplay")) {
getaudio.pause();
jQuery('.c'+clase).removeClass('speakerplay');
audiostatus = 'on';
}
});
// Here is my problem: I need to get the value of current_id...
jQuery('#'+current_id).on('ended', function() {
jQuery('.speaker').removeClass('speakerplay');
audiostatus = 'off';
});
});
In the last function I want to remove the class 'speakerplay' once the audio reached the end, but I can't get the value of current_id
Could anybody help me with this?
Thanks in advance!
don't use
var current_id;
use window.current_id directly
window.current_id = elemento.children("audio").attr("id");
jQuery('#'+window.current_id).on('ended', function() {
I want that my menu stays open when I refresh the page. I use cookies for that.
But it only works on IE. On chrome and firefox it isnt working.
$(document).ready(function () {
var $body = $('body'),
$btn = $('#push-menu-toggle'),
$menu = $('#push-menu'),
menu_state = $.cookie('my_cookie_name'),
viewportX = $(window).width();
var cookieValue = $.cookie('my_cookie_name');
if (cookieValue === 'close') {
$body.addClass('small-menu');
} else {
$body.removeClass('small-menu');
}
$.cookie('my_cookie_name', menu_state);
$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html('<em>' + $.cookie('my_cookie_name') + '</em>');
$btn.click(function () {
$body.toggleClass('small-menu');
$.removeCookie('my_cookie_name');
if ($body.hasClass('small-menu')) {
menu_state = 'close';
} else {
menu_state = 'open';
}
$.cookie('my_cookie_name', menu_state);
$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html('<em>' + $.cookie('my_cookie_name') + '</em>');
});
});
http://codepen.io/sebastiaann/pen/KzBqEN
I have a open function that once triggered, simply plays video in a dedicated panel.
This function can be triggered in two ways - one with a click and another one with a page load (window load) with url that contains a valid anchor tag.
They all work fine but some codes of the window load handler are repetitive and I'm not too sure how I can keep this DRY.
Please take a look and point me in some directions on how I can write this better.
I commented in open function which is for which.
$.videoWatch.prototype = {
init: function() {
this.$openLinks = this.$element.find(".open");
this.$closeLinks = this.$element.find(".close");
this.open();
this.close();
},
_getContent: function(element) {
var $parent = element.parent(),
id = element.attr('href').substring(1),
title = $parent.data('title'),
desc = $parent.data('desc');
return {
title: title,
desc: desc,
id: id
}
},
open: function() {
var self = this;
//open theatre with window load with #hash id
window.onload = function() {
var hash = location.hash;
var $a = $('a[href="' + hash + '"]'),
content = self._getContent($a),
$li = $a.parents("li"),
$theatreVideo = $(".playing"),
$theatreTitle = $(".theatre-title"),
$theatreText = $(".theatre-text");
$(".theatre").attr('id', content.id);
$theatreTitle.text(content.title);
$theatreText.text(content.desc);
if ($theatreText.text().length >= 90) {
$(".theatre-text").css({
'overflow': 'hidden',
'max-height': '90px',
});
$moreButton.insertAfter($theatreText);
}
$a.parent().addClass("active");
$(".theatre").insertAfter($li);
$(".theatre").slideDown('fast', scrollToTheatre);
oldIndex = $li.index();
}
//open theatre with click event
self.$openLinks.on("click", function(e) {
// e.preventDefault();
if (curID == $(this).parent().attr("id")) {
$("figure").removeClass("active");
$("button.more").remove();
$(".theatre").slideUp('fast');
$('.playing').attr("src", "");
removeHash();
oldIndex = -1;
curID = "";
return false
} else {
curID = $(this).parent().attr("id");
}
var $a = $(this),
content = self._getContent($a),
$li = $a.parents("li"),
$theatreVideo = $(".playing"),
$theatreTitle = $(".theatre-title"),
$theatreText = $(".theatre-text");
$(".theatre").attr('id', content.id);
$theatreTitle.text(content.title);
$theatreText.text(content.desc);
if ($theatreText.text().length >= 90) {
$(".theatre-text").css({
'overflow': 'hidden',
'max-height': '90px',
});
$moreButton.insertAfter($theatreText);
}
if (!($li.index() == oldIndex)) {
$("figure").removeClass("active");
$(".theatre").hide(function(){
$a.parent().addClass("active");
$(".theatre").insertAfter($li);
$(".theatre").slideDown('fast', scrollToTheatre);
oldIndex = $li.index();
});
} else {
$(".theatre").insertAfter($li);
scrollToTheatre();
$("figure").removeClass("active");
$a.parent().addClass("active");
}
});
},
...
Simplified and refactored open method:
open: function() {
var self = this;
var serviceObj = {
theatreVideo : $(".playing"),
theatre: $(".theatre"),
theatreTitle : $(".theatre-title"),
theatreText : $(".theatre-text"),
setTheatreContent: function(content){
this.theatre.attr('id', content.id);
this.theatreTitle.text(content.title);
this.theatreText.text(content.desc);
if (this.theatreText.text().length >= 90) {
this.theatreText.css({
'overflow': 'hidden',
'max-height': '90px',
});
$moreButton.insertAfter(this.theatreText);
}
},
activateTeatre: function(a, li){
a.parent().addClass("active");
this.theatre.insertAfter(li);
this.theatre.slideDown('fast', scrollToTheatre);
oldIndex = li.index();
}
};
//open theatre with window load with #hash id
window.onload = function() {
var hash = location.hash;
var $a = $('a[href="' + hash + '"]'),
content = self._getContent($a),
$li = $a.parents("li");
serviceObj.setTheatreContent(content);
serviceObj.activateTeatre($a, $li);
}
//open theatre with click event
self.$openLinks.on("click", function(e) {
// e.preventDefault();
if (curID == $(this).parent().attr("id")) {
$("figure").removeClass("active");
$("button.more").remove();
$(".theatre").slideUp('fast');
$('.playing').attr("src", "");
removeHash();
oldIndex = -1;
curID = "";
return false
} else {
curID = $(this).parent().attr("id");
}
var $a = $(this),
content = self._getContent($a),
$li = $a.parents("li");
serviceObj.setTheatreContent(content);
if (!($li.index() == oldIndex)) {
$("figure").removeClass("active");
$(".theatre").hide(function(){
serviceObj.activateTeatre($a, $li);
});
} else {
$(".theatre").insertAfter($li);
scrollToTheatre();
$("figure").removeClass("active");
$a.parent().addClass("active");
}
});
},
1st of all there are variables that don't depend on the input, you could pull them to the class (I'll show just one example, as you asked for directions):
init: function() {
this.$theatreVideo = $(".playing");
All the variables that do depend on the input, like $li could be moved to a function:
var $a = $(this),
$dependsOnA = self.dependsOnA($a);
self.actionDependsOnA($dependsOnA); // see below
function dependsOnA($a) {
return {
a: $a,
li: $a.parents("li"),
content: self._getContent($a)
}
}
Also the code that "repeats" can be moved to a function:
function actionDependsOnA($dependsOnA)
$(".theatre").attr('id', $dependsOnA.content.id);
$theatreTitle.text($dependsOnA.content.title);
$theatreText.text($dependsOnA.content.desc);
}
I get an error
no such method 'length' for tabs widget instance
How do I get the current number of tab?
I am using the jQuery libary version 10.3 that is download from the site
http://jqueryui.com/
$(document).ready(function(){
$("#tabs").tabs();
$("#prevBtn").bind("click", prevOfferTab);
$("#nextBtn").bind("click", nextOfferTab);
});
function getSelectedTabIndex(change) {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected') + change;
if (selected == 0) {
$("#prevBtn").hide();
}
else {
$("#prevBtn").show();
}
var tabsCount = this.$('#tabs').tabs('length') -1;
if (selected == tabsCount) {
$("#nextBtn").hide();
}
else {
$("#nextBtn").show();
}
return selected;
}
enter code here
function nextOfferTab() {
console.log('nxt');
var newTabIndex = parseInt(getSelectedTabIndex(1));
$('#tabs').tabs('select', newTabIndex);
}
function prevOfferTab() {
var newTabIndex = parseInt(getSelectedTabIndex(-1));
$('#tabs').tabs('select', newTabIndex);
}
var tabsCount = $("#tabs >ul >li").size();
I'm trying to make my website scroll to specific post that is on separate page. I figured the PHP part behind this to generate anchors for me however I'm stuck with JS part. I managed to make webpage start at position 0,0 and then to go to static anchor tag. What I struggle with is how do I make JS fetch anchor tag from current URL and then make it smoothly scroll to given tag after short delay.
My current code is:
$(document).ready(function() {
if (location.hash) {
window.scrollTo(0, 0);
}
});
setTimeout("window.location.hash = '#scroll';", 5000);
I found following snipped that fetches an anchor tag off URL but I'm not sure how can I make it execute after some delay.
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
I don't believe setTimeout accepts any old code passed as a string, only function names. Try using an anonymous function instead:
setTimeout(function() { window.location.hash = '#scroll'; }, 5000);
I managed to solve my problem using snippet that I found on CSS-Tricks forum. It scrolls to an anchor tag on page load, always starting from the very top of the page.
$(window).bind("ready", function() {
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({scrollTop:$('a[href="#'+urlHash+'"]').offset().top}, 1500);
});