How to create cookie in jQuery modal? - javascript

I try to create a page with jquery modal and cookie. The modal work well but I have a problem to set cookie in it. I'd like to achieve the following:
On homepage load, display modal box (popup)
Popup close when close button is clicked and when user return the page, the modal box will not show.
Popup will show again after 7 days.
Please advice!
// Close modal when click on close button
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// querying the document
$(document).ready(function(){
if (document.cookie.indexOf('$close.click=true') == -1){
var sevenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + sevenDays);
document.cookie = "$close.click=true;expires=" + expires.toUTCString();
};
// Append data via Ajax
$.get('url', function(data){
modal.open({content: data});
});
});

when i should work with cookie i use this plugin
https://github.com/carhartl/jquery-cookie
You can use following structure of model
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.setPosition = function () {
// Set Postion
};
// Open the modal, reveal overlay
method.open = function (settings) {
if($.cookie('NameOfCookie'))
{
// We dont need show popup
return
}else{
// Open Modal
$.cookie('NameOfCookie', 'created', { expires: 7 });
method.GenerateModalPopup();
method.setPosition()
}
};
// Close the modal and overlay, then unbind the resize event when modal is closed
method.close = function () {
// Close Modal
};
method.GenerateModalPopup=function(){
// Generate the HTML and add it to the document
};
// Open popup window
method.open();
return method;
}());

Related

How to set first image after exit fullscreen popup in fotorama js?

How to set first image after cancel fullscreen popup inside fotorama js slider.
By default after cancel fullscreen, last active image in popup are display as main image in slider.
I want to get first image of slider after cancel popup in fotorama js?
Demo link: http://fotorama.io/customize/fullscreen/
This is demo link of fotoram js
Any help would be apericiated.
Thanks.
we can do it using self.settings.api.first()
/**
* Gallery fullscreen settings.
*/
initFullscreenSettings: function () {
var settings = this.settings,
self = this;
settings.$gallery = this.settings.$element.find('[data-gallery-role="gallery"]');
settings.$gallery.on('fotorama:fullscreenexit', function () {
settings.closeIcon.hide();
settings.focusableStart.attr('tabindex', '-1');
settings.focusableEnd.attr('tabindex', '-1');
settings.api.updateOptions(settings.defaultConfig.options, true);
settings.focusableStart.unbind('focusin', this._focusSwitcher);
settings.focusableEnd.unbind('focusin', this._focusSwitcher);
settings.closeIcon.hide();
if (!_.isEqual(settings.activeBreakpoint, {}) && settings.breakpoints) {
settings.api.updateOptions(settings.activeBreakpoint.options, true);
}
settings.isFullscreen = false;
settings.$element.data('gallery').updateOptions({
swipe: true
});
self.settings.api.first();
});
}

protractor switch to previous tab

After opening a new tab (second) I'm trying to switch to the first tab.
common.clickOpenNewSession(); //it opens the new tab
browser.getAllWindowHandles().then(function (handles) {
var secondWindowHandle = handles[1];
var firstWindowHandle = handles[0];
browser.switchTo().window(secondWindowHandle).then(function () { //the focus moves on new tab
browser.sleep(3000);
expect(browser.driver.getCurrentUrl()).toContain("url");
//do some actions
});
//below it doesn't work. I try to go back on previous tab without closing the second tab
browser.actions().sendKeys(protractor.Key.CONTROL).sendKeys(protractor.Key.TAB).perform();
browser.sleep(4000);
browser.driver.switchTo().window(firstWindowHandle);
browser.setLocation('http://google.com');
});
The problem is that you're trying to go to the previous tab by using ctrl + tab, instead of using the window handles to switch back. This is not supported in WebDriver, because using ctrl + tab is a system operation, and can't be emulated on your browser for all OS/browsers. Just use browser.switchTo() again.
#Aaron This code get all the browser handles available and resolves the promise. Then opens the tab created by a <a href='newlink' target='_blank'>Link</a>:
POFile.buttonWithABlankTarget.click().then(function() {
browser.getAllWindowHandles().then(function(handles) {
var newTabHandle = handles[1];
browser.switchTo().window(newTabHandle).then(function () {
// Expect the newly opened tab URL to equal the href of the invitation
expect(browser.driver.getCurrentUrl()).toContain("http://...");
});
});
});
In the same fashion, you could switch between tabs:
it("should open the first tab", function() {
browser.getAllWindowHandles().then(function (handles) {
browser.switchTo().window(handles[0]);
});
});
And, of course, close a tab:
it("should close the second tab and return to the first tab", function() {
browser.getAllWindowHandles().then(function (handles) {
// We currently are on the second tab...
browser.driver.close();
browser.switchTo().window(handles[0]);
});
});
Hope this helps!

is it possible to close child window from parent window?

i am with stuck an unorthodox requirement, i have opened a window on page load using jquery like this
$(document).ready(function() {
loadLifeCare();
});
and the function goes like this
function loadLifeCare()
{
window.open('/abc/abc/abc','','width=100,height=100');
}
now this function loads a url in the new window which creates a session for the user on different
domain.
i just need to know if it is either possible to close this window after few seconds or change the href and reload it to a different link,
and i can't code on the child window.
This will open the window and then close it after 10 seconds...
function loadLifeCare()
{
var wnd = window.open('/abc/abc/abc','','width=100,height=100');
setTimeout(function() {
wnd.close();
}, 10000);
}
If you want to redirect it elsewhere, you can do this...
function loadLifeCare()
{
var wnd = window.open('/abc/abc/abc','','width=100,height=100');
setTimeout(function() {
wnd.location.href = "http://wherever.com";
}, 10000);
}

check cookie value before loading page via registrybyId set href

I have a dijit tree that when a node is clicked it loads an html page in the center content page. One of the html pages is a login page and I'd like to check a cookie to see if they have already logged on, so I can set the page appropriately if the page gets re-loaded. Is there a way to check for a cookie on page load, or perhaps a better method than this? Thanks
my code for the tree is:
TOCSet: function (TOCStore) {
var myModel = new ObjectStoreModel({
store: TOCStore,
query: { root: true }
});
// Create the Tree.
var tree = new Tree({
model: myModel,
onClick: function (item, node, evt) {
// Get the URL from the item, and navigate to it
evt.preventDefault();
var href = item.url;
registry.byId('Content').set('href', href); //set the page on node clicks
}
});
tree.placeAt("TOC");
tree.startup();
ready(function () {
registry.byId("Content").set("href", "Login.htm");//set the login page at start
});
}
I set the cookie using "dojo/cookie" after successful login
function SetLoginCookie(lia) {
cookie("LoggedInAs", lia);
}
and then used "dojo/ready" to check for the cookie when the page reloads
ready(function () {
var lia = cookie("LoggedInAs");
alert(lia + " is logged in");
});

Toggle Pop-up using JQuery and Hashtag based URL

I've got 3 pop-ups on my page. They function using JQuery and the following JS code:
$(document).ready(function() {
$('#open_thanks').click(function(e) {
e.preventDefault();
var tPop = $('.thanks_popup');
tPop.toggle();
});
$('#open_reference').click(function(e) {
e.preventDefault();
var rPop = $('.leave_reference_popup');
rPop.toggle();
});
$('#facebook').click(function(e) {
e.preventDefault();
var fPop = $('.facebook_popup');
fPop.toggle();
});
$('.thanks_popup').append('<div class="close"><div class="inner"><button></button></div></div>');
$('.leave_reference_popup').append('<div class="close"><div class="inner-2"><button></button></div></div>');
$('.facebook_popup').append('<div class="close"><div class="inner-3"><button></button></div></div>');
$('div.inner button').click(function() {
var tPop = $('.thanks_popup');
tPop.toggle();
});
$('div.inner-2 button').click(function() {
var rPop = $('.leave_reference_popup');
rPop.toggle();
});
$('div.inner-3 button').click(function() {
var fPop = $('.facebook_popup');
fPop.toggle();
});
});
My html is quite simple:
Thanks Popup
Open Reference
Open Facebook Popup
I can't figure out how to use hashtag URL navigation to have a pop-up default as open though? Basically, I want to be able to link to index.html#open_thanks and have that pop-up default as open/up.
Thanks.
On page load, parse out any hash values in the url, and then do x.
How to get #hash value in a URL in JS

Categories

Resources