I have a site using javascript popup effect like this:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script src="greybox/AJS.js" type="text/javascript"></script>
<script src="greybox/AJS_fx.js" type="text/javascript"></script>
<script src="greybox/gb_scripts.js" type="text/javascript"></script>
<link href="greybox/gb_styles.css" type="text/css" rel="stylesheet">
<script language="JAVASCRIPT">
function loadWindow(){
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
}
window.onload = loadWindow;
</script>
But everytime my visitor go to the homepage, my popup always shown. How to do making this popup only display one time?
Please Help me
you can use cookies and jquery
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script>
function loadWindow() {
if ($.cookie('popup_flag') != 'true') {
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
$.cookie('popup_flag', 'true');
}
}
</script>
Personally i would go with JStorage, its a HTML5 jQuery Plug-in the uses the local storage on most popular browsers.
Example:
var loadWindows = function()
{
if(!$.jSotreage.get('welcome_flag'))
{
GB_ShowCentre('Free Support!') // Blah
$.jStorage.set('welcome_flag',true);
}
}
Uses JSON To serialize all data in the local storage:-
jStorage: http://plugins.jquery.com/project/jStorage
Draft: http://dev.w3.org/html5/webstorage/
Without jQuery: Storing Objects in HTML5 localStorage
You can store around 5MB Per domain so this would be benificial and should take over the use of cookies within the javascript environment.
Related
Im using botman.io package for chatboot widget.
Everything works perfectly but problem is that i can't change default background color of chat widget. On inspect console it shown that boman widget calls ( https://cdn.jsdelivr.net/npm/botman-web-widget#0.0.20/build/assets/css/chat.css ) link, but i cant find that call on my localhost project. If anyone know solution i would appreciate.
<script src="{{ asset('/js/webflow.js') }}"></script>
<script>
var botmanWidget = {
title:'Scarletbot',
introMessage: 'Hello, I am a Scarlet! I am here to assist you and answer all your questions about our products and services!',
mainColor:'#c02026',
aboutText:'',
bubbleBackground:'#c02026',
headerTextColor: '#fff',
};
</script>
<script id="botmanWidget" src="{{ asset('/js/widget.js') }}"></script>
You may add frameEndpoint in
var botmanWidget = {
frameEndpoint: '<?php echo base_url('botdemo/chatserver1');?>',
title:'Scarletbot',
introMessage: 'Hello, I am a Scarlet! I am here to assist you and answer all your questions about our products and services!',
mainColor:'#c02026',
aboutText:'',
bubbleBackground:'#c02026',
headerTextColor: '#fff',
};
frameEndpoint is nothing but source of iframe loaded by botman-widget
frameEndpoint source is like :
<!doctype html>
<html>
<head>
<title>BotMan Widget</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/assets/css/chat.min.css">
</head>
<body>
<script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/chat.js'></script>
</body>
</html>
Here you may use own css as well.
I quickly checked out the web widget on the botman github.
There is a simple link to the chat.css in the head of chat.html located in the src folder.
This points to assets/css/chat.css, which you can edit freely and add a background-color to.
I use brute force in the iframe to change background with jquery
$(document).on('click', '.desktop-closed-message-avatar img', function() {
var iframe = document.getElementById("chatBotManFrame");
iframe.addEventListener('load', function () {
var htmlFrame = this.contentWindow.document.getElementsByTagName("html")[0];
var bodyFrame = this.contentWindow.document.getElementsByTagName("body")[0];
var headFrame = this.contentWindow.document.getElementsByTagName("head")[0];
var image = "https://images.unsplash.com/photo-1501597301489-8b75b675ba0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80"
htmlFrame.style.backgroundImage = "url("+image+")";
bodyFrame.style.backgroundImage = "url("+image+")";
});
});
I am creating an O365 app and I have 2 .aspx files, when the user clicks on the O365 mail app, I want each of these pages to be loaded based on the subject of the mail.
Scenario 1: Mail subject contains '#'
result: load page1
Scenario 2: Mail subject does not contain '#'
result: load page2
I have tried having an intermediate .js file where I have written the logic,
but when I do window.location = "path_to_aspx_file",
only the html is loaded but the js files do not run.
My current implementation:
I have LandingLogic.js
(function () {
"use strict";
//The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
var sub = item.subject;
if (sub.indexOf("some text") > -1) {
window.location = "http://localhost:51776/File1.aspx";
}
else {
window.location = "http://localhost:51776/File2.aspx";
}
});
};
})();
After a bit of fumbling around.
I am able to navigate to each of these files now, but I am not sure how to access the mail subject from File1.aspx and File2.aspx.
Did you initialize the Office context before you using Office JavaScript API to get the subject? To redirect the HTML page easily, we can include the JavaScript like below:
Home.js:
/// <reference path="../App.js" />
(function () {
"use strict";
// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
RedirectHTMLPage();
});
};
function RedirectHTMLPage() {
var subject = Office.context.mailbox.item.subject;
if (subject.indexOf("#") != -1) {
window.location.href = "https://localhost:44300/page1.aspx";
} else {
window.location.href = "https://localhost:44300/page2.aspx";
}
}
})();
The HTML page for redirecting:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="../App.css" rel="stylesheet" type="text/css" />
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
I have tried having an intermediate .js file where I have written the logic, but when I do window.load = "path_to_aspx_file", only the html is loaded but the js files do not run.
Would you mind sharing the detail you using the “window.load”?
Fei Xue answer is correct . if you want to get subject from file2.aspx , add office.js reference and access subject same as file1.aspx inside the Office.initialize event
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
I have a requirement wherein based on some condition I have to switch between flash and HTML flowplayer.
It is a single page app.
currently I am doing the following. But is there a better approach?
$.getScript("flowplayer/flowplayer-3.2.12.min.js", function(){
$.getScript("flowplayer/jdataview.js", function(){
$.getScript("flowplayer/easybits-helper.js", function(){
$.getScript("flowplayer/easybits-mp4.js", function(){
$.getScript("flowplayer/easybits-multistreaming.js", function(){
$.getScript("flowplayer/easybits-flowplayer-flash-scrubber-preview.js", function(){
$.fn.flashFlowplayer = $.fn.flowplayer;
$.fn.flowplayer = undefined;
window.flashFlowplayer = flowplayer;
flowplayer = undefined;
$.getScript("flowplayer/flowplayerhtml5/flowplayer.min.js", function() {
$.fn.htmlFlowplayer = $.fn.flowplayer;
window.htmlFlowplayer = flowplayer;
});
});
});
});
});
});
});
/* and to render a flash video I use */
flashFlowplayer(sourceElement[0].id, {
src: "flowplayer/flowplayer.commercial-3.2.16.swf",
wmode: 'opaque'
}, oFlowPlayerConfig);
/* to render htmlFlowplayer I use */
$el.htmlFlowplayer({
"ratio": oParam.ratio,
"embed": false,
"playlist":[[{ "mp4": sVideoUrl }]],
});
You can load the scripts by using <script> elements instead of this deeply nested mess of $.getScript. The browser might download them in any order but it will execute the contents in order. That means the browser might request easybits-helper.js already while it's executing the content of flowplayer-3.2.12.min.js.
This code is equivalent to the above:
<script type="text/javascript" src="flowplayer/flowplayer-3.2.12.min.js" />
<script type="text/javascript" src="flowplayer/jdataview.js" />
<script type="text/javascript" src="flowplayer/easybits-helper.js" />
<script type="text/javascript" src="flowplayer/easybits-mp4.js" />
<script type="text/javascript" src="flowplayer/easybits-multistreaming.js" />
<script type="text/javascript" src="flowplayer/easybits-flowplayer-flash-scrubber-preview.js" />
<script type="text/javascript">
$.fn.flashFlowplayer = $.fn.flowplayer;
$.fn.flowplayer = undefined;
window.flashFlowplayer = flowplayer;
flowplayer = undefined;
</script>
<script type="text/javascript" src="flowplayer/flowplayerhtml5/flowplayer.min.js" />
<script type="text/javascript">
$.fn.htmlFlowplayer = $.fn.flowplayer;
window.htmlFlowplayer = flowplayer;
</script>
but it allows the client to cache the scripts properly and load them in parallel. It's also much more readable.
I'm running into a very weird javascript issue that uses SPServices js library to get the current SharePoint list's name from site's url, which works perfectly in IE11 and Chrome(newest), but just stuck in FF(newest, 35.0.1).
Codes are simple. Any inputs would be welcome. Thanks much!!!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script language="JavaScript" type="text/javascript">
var siteURL = window.location.href.replace(/\/Lists.*/i, "");
$(document).ready(function() {
console.log("before listId"); // successfully logged
var listId = $().SPServices.SPListNameFromUrl();
console.log(listId); // **NEVER gets hit!!! and NO any error or warning logged**
});
</script>
Figured out that rather than using jquery.SPServices, there is another nice SharePoint extension "SharePointPlus.js" which works out the issue across all modern browsers e.g. IE11, FF35.0.1 and Chrome
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/sharepointplus/3.0.9/sharepointplus.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$SP().lists(function(list) {
for (var i=0; i<list.length; i++)
if (decodeURI(window.location.pathname)===list[i]['Url']) {
var listName = list[i]['Name'];
//......
}
}
}
</script>
Can I do this with just javascript in my web page ?
<head>
<script src="trans_func.js" type="text/javascript"></script>
<script src="language/English.js" type="text/javascript"></script>
<script src="language/Chinese.js" type="text/javascript"></script>
</head>
Since it's either English or Chinese , Can I comment out one line of code when I click a button and when I click again it will comment the other line?
On click of button, you can load the js based on the condition.
if(condition!="English") // lang can also be variable which is set from the backend
{
document.write('<script src="language/Chinese.js"></script>');
}
else
{
document.write('<script src="language/English.js"></script>');
}
If its based on lanauge:
var userLang = navigator.language || navigator.userLanguage;
if(userLang!='en-us') // lang can also be variable which is set from the backend
{
document.write('<script src="language/Chinese.js"></script>');
}
else
{
document.write('<script src="language/English.js"></script>');
}