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>');
}
Related
I have an HTML and JS file. Should the user want to overwrite the default settings that are declared in the external JS file all they have to do is include the following as an inline script:
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
The problem I am facing is that my external script is not picking up the user settings and is setting everything as default.
var defControls = {
transition : 'default',
nextText : 'Next »'
};
var userControls = {};
// CHECKS FOR userControls
if (Object.getOwnPropertyNames(userControls).length > 0) {
var controls = Object.assign({}, defControls, userControls);
} else {
controls = defControls;
}
console.log(userControls);
console.log(controls);
console.log(defControls);
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- SENDS THE NEW PARAMETERS TO script.js -->
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
</body>
</html>
You have four and half mistakes in your code:
You have to write inline script with code: var userControls = {transition: 'fade', nextText: 'Next'}; before external JS file. And do not forget ; on the end (it is the half mistake).
The line var userControls = {}; in external JS file has overwrited the settings in userControls in inline script. I think you wanted to write instead var controls = {};.
The var controls = {}; you have to write before if...else statement.
You write console.log(userControls); instead of console.log(JSON.stringify(userControls)); Your code writes only [object Object] in developer console from IE. But in Chrome it is okey.
Solution with corrected code
<!DOCTYPE html>
<html><head>
<!--
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
<!-- SENDS THE NEW PARAMETERS TO script.js -->
<script type="text/javascript">
var userControls =
{
transition : 'fade',
nextText : 'Next'
};
</script>
<!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS
src="script.js" -->
<script type="text/javascript">
var defControls =
{
transition : 'default',
nextText : 'Next »'
};
//THIS WAS THE MISTAKE: var userControls = {}; this line has overwrited the settings
var controls = {};
// CHECKS FOR userControls
if(Object.getOwnPropertyNames(userControls).length > 0)
{
controls = Object.assign({}, defControls, userControls);
}
else
{
controls = defControls;
}
console.log('userControls =\n' + JSON.stringify(userControls, null, '\t'));
console.log('controls =\n' + JSON.stringify(controls, null, '\t'));
console.log('defControls =\n' + JSON.stringify(defControls, null, '\t'));
</script>
</head>
<body></body>
</html>
It's because that you inserted the user choice after your js file loads. It goes through the following control first
if (Object.getOwnPropertyNames(userControls).length > 0)
so this will always evaluate to false. That's why you keep getting default values. You should either insert the user choice script first or some async functionality in the js file.
I am using ajax minifier to reduce code requests and HTML overhead, and so far its working fine with CSS file. But when I try to use the minified output of js files my HTML page stops working.
Here are the js files I include in combined output
<script src="/content/template/js/AuswellScript/jquery-1.11.0.min-f1cd7227-4b48-423d-ba00-6a814fc588e3.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/bootstrap.min-54c76ae6-1272-464d-b3b4-e5c8e13cd2ad.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/own-menu-d7c1ca2a-6a7e-4bc3-b7e9-f51e92136f20.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/owl.carousel.min-5ea2a8c2-1a05-4f29-aca3-b71f936aaa25.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.superslides-d8526db0-813c-4372-9699-3c829e696ccc.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/masonry.pkgd.min-8f6e02f7-17a3-442f-a7db-a2f68ec24cb2.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.stellar.min-f9b2d588-2c90-489a-ab22-800f41f7df17.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery-ui-1.10.3.custom-0406d77e-4eed-4e42-b1ef-370e24378d13.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.magnific-popup.min-7e2779cb-0844-4b67-acae-2a1053cb0401.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.isotope.min-0148ab04-7187-43c6-accf-7d7ffd4224fa.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.flexslider-min-ec6844aa-338c-4ce9-a67c-eaff0948809d.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/appointment-a7ff2a91-9cfb-4dc9-95a0-585033435e12.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/Slider-568c53bd-f8a3-440a-b2d4-1969699f1d7b.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.downCount-8ba17b7f-82ca-4b65-a29e-517b3e3d51af.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/counter-08aa3c8c-b65f-4efb-842b-dbbd019a11ce.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.prettyPhoto-d3012702-c0cc-439a-8b7e-22e0d2211a15.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/main-4310f5f3-278c-463e-bc98-edbbc307fbe9.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/bootbox.min-8eea52d3-baa1-47fd-b4df-5be51462a2e9.js" type="text/javascript"></script>
the generate combined file gets saved as
<script src="http://auswell2.xoxo-it.com/content/template/js/AuswellScript/combined.min.js" type="text/javascript"></script>
but using this file vs. separate file is causing error $ not defined on my page, I deleted and recreated combined out several times to ensure no sequence or incorrect data was making the issue.
here is the c# code
Minifier min = new Minifier();
StringBuilder minified = new StringBuilder();
script.head_files.ForEach(js =>
{
if (!string.IsNullOrWhiteSpace(js))
minified.Append(min.MinifyJavaScript(System.IO.File.ReadAllText(Server.MapPath(js))));
});
if (minified.Length > 0)
{
var minJS = Server.MapPath("~/content/template/js/" + objHeads.head_name + "/combined.min.js");
System.IO.File.WriteAllText(minJS, minified.ToString());
}
I've pasted the code in jsfiddle, clicked on "tidy", then copied the tidied output to babel repl ... seems like that's a lot of places that are missing a ; - probably "between" the input files - is there a way with the minifier to specify you want to add a ; to the beginning (or end) of each input file?
perhaps add minified.Append(";"); after minified.Append(min.MinifyJavaScript(System.IO.File.ReadAllText(Server.MapPath(js))));
i.e.
Minifier min = new Minifier();
StringBuilder minified = new StringBuilder();
script.head_files.ForEach(js => {
if (!string.IsNullOrWhiteSpace(js)) {
minified.Append(min.MinifyJavaScript(System.IO.File.ReadAllText(Server.MapPath(js))));
minified.Append(";"); // add this
}
});
if (minified.Length > 0)
{
var minJS = Server.MapPath("~/content/template/js/" + objHeads.head_name + "/combined.min.js");
System.IO.File.WriteAllText(minJS, minified.ToString());
}
I am using prestashop 1.6 . I want to add google ads in top of the header and bottom in footer. I tried many ways but all are not succeed. Please how can i add script in my prestashop website?
Thanks in advance.
You need to find header.tpl file:
https://github.com/PrestaShop/PrestaShop/blob/develop/themes/default-bootstrap/header.tpl
<head>
{$HOOK_HEADER}
<link rel="stylesheet" href="http{if Tools::usingSecureMode()}s{/if}://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin,latin-ext" type="text/css" media="all" />
<!--AdWords Code-->
</head>
Remember to disable CCC options for JS (especially moving JavaScript to the end):
Anything within {literal}{/literal} tags is not interpreted, but displayed as-is
{literal}
<script type="text/javascript">
// ...
</script>
{/literal}
{ldelim} and {rdelim} are used for escaping template delimiters, by default { and }:
<script type="text/javascript">
function foo() {ldelim}
// ...
{rdelim}
</script>
gives:
<script type="text/javascript">
function foo() {
// ...
}
</script>
If you still have a problem you may try to override Media Class:
https://gist.github.com/hereswhatidid/8c8edef106ee95138b03
<p>Some HTML goes here</p>
<script type="text/javascript" data-keepinline="true">
// this script will remain here when rendered
alert( "hello!" );
</script>
<script type="text/javascript">
// this script will be forced to the bottom of the page
alert( "hello again!" );
</script>
Media.php:
<?php
Class Media extends MediaCore
{
public static function deferScript($matches)
{
if (!is_array($matches))
return false;
$inline = '';
if (isset($matches[0]))
$original = trim($matches[0]);
if (isset($matches[1]))
$inline = trim($matches[1]);
/* This is an inline script, add its content to inline scripts stack then remove it from content */
if (!empty($inline) && preg_match('/<\s*script(?!.*data-keepinline)[^>]*>/ims', $original) !== 0 && Media::$inline_script[] = $inline)
return '';
/* This is an external script, if it already belongs to js_files then remove it from content */
preg_match('/src\s*=\s*["\']?([^"\']*)[^>]/ims', $original, $results);
if (isset($results[1]) && (in_array($results[1], Context::getContext()->controller->js_files)
|| in_array($results[1], Media::$inline_script_src)))
return '';
/* return original string because no match was found */
return $original;
}
}
The correct way should be using a module. Also check if the function htmlpurifier is blocking your scripts tags.
A little late, but it is solved by using {literal} //script here {/literal}. It's supposed to be used only if there are curly brackets in your script, but it works.
I did something like this
<head>
<script src="trans.js" type="text/javascript"></script>
<title><script>trans("Configuration: Status - Software")</script></title>
</head>
However the web title looks like
trans("Configuration: Status - Software")
Why is the js not working here,What should modify to make it work?
Here's what tran.js look like
function trans(key)
{
document.write(getkey(key));
}
function getkey(key)
{
var text;
text = lang_pack[key];
if (text == undefined || text == "")
{
text = key;
}
return(text);
}
I'm not sure you can use a script inside of a title tag -- can you move it into a different block?
It's unclear exactly what trans.js is, but you can try:
<script>
document.title = trans('Configuration: Status -Software');
</script>
You should try setting the title in javascript like
document.title = trans('Configuration: Status - Software');
var temp = document.getElementsByTagName("title").innerHTML;
temp[0].innerHTML = "your new title";
Try including the src in the same script tag as the function call:
<head>
<script src="trans.js" type="text/javascript">trans("Configuration: Status - Software")</script></title>
</head>
Try this:
<head>
<script src="trans.js" type="text/javascript"></script>
<title></title>
<script>document.title = getkey("Configuration: Status - Software")</script>
</head>
You mean this?
<head>
<title>This is Test 1st</title>
<script>
var field = "This is Test 2nd";
$("title").append(field);
</script>
</head>
you need is a jquery library.
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.