How to get current country name in blogger or blogspot.com - javascript

In blogger or blogspot we can add html or javascript tag from layout then add gadget. How to enable a div on the basis of different countries?

to get current country name in blogger use this code
<b:eval expr='data:blog.locale.country'/>
<script>
var country = <b:eval expr='data:blog.locale.country'/>;
console.log(country);
</script>
(Abdo)

By default, make all the div's hidden. Sample code using one of the GeoIP services would look like -
<script type="text/javascript">
//<![CDATA[
function geoip(json) {
window.onload = displayInCountry(json);
}
function displayInCountry(json) {
if (json.country === 'Austria') {
document.querySelector('#DIV-ID').style.display = "block";
}
}
//]]>
</script>
<script type="application/javascript" src="https://get.geojs.io/v1/ip/geo.js"></script>
You will need to replace the #DIV-ID with the ID of your Div element.

Related

How to take value from input type="text" and use it on another page? [duplicate]

So I'm rather new to JavaScript and I would love some help getting this code to work. I've looked at multiple other posts talking about session storage as well as if/else statements and still can't seem to figure it out.
I have a page, lets call it page 1 and it has 3 links, "red" "green" and "blue".
When you click on any of these links its function sets a session storage variable 'colorVar' to the color chosen and then redirects to a page called page 2.
As page 2 loads, the window.onload action is used to start a function according to the variable set on page 1. In this case the function that starts on page 2 simply displays "Your color is ____!".
Heres the code:
<!-- [This is Page 1] -->
Set color to red
Set color to blue
Set color to green
<script>
function colorRed() {
sessionStorage.setItem("colorVar", "red");
}
function colorBlue() {
sessionStorage.setItem("colorVar", "blue");
}
function colorGreen() {
sessionStorage.setItem("colorVar", "green");
}
</script>
<!-- [This is Page 2] -->
<script>
window.onload = sessionStorage.colorVar + 'Write()';
function redWrite() {
document.write("Your color is red!")
}
function blueWrite() {
document.write("Your color is blue!")
}
function greenWrite() {
document.write("Your color is green!")
}
</script>
You can pass sessionStorage as as query string at href of <a> element; use location.search at window.onload event at Page2.html
Page1.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
Set color to red
Set color to blue
Set color to green
<script>
function color(elem) {
event.preventDefault();
sessionStorage.setItem("colorVar", elem.dataset.color);
location.href = elem.href + "?colorVar=" + sessionStorage.getItem("colorVar");
}
</script>
</body>
</html>
at Page2.html
<script>
window.onload = function() {
document.write("Your color is " + location.search.split("=").pop())
}
</script>
plnkr http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview
Edit: Clearly the answer above is much better than what i provided. I'll leave this here for future viewers - maybe the way I phrased things help someone sometime.
Taylor,
Two things.
sessionStorage() is unique to each page/tab. From the docs "Opening a page in a new tab or window will cause a new session to be initiated"
window.onload is expecting a function. You're just concatenating a string.
If you find a different way to pass information from one page to another (you could stuff it in the URL) your new color function should look something like this:
<script>
window.onload = writeColor(sessionStorage.colorVar);
function writeColor(color) {
document.write("Your color is " + color + "!")
}
</script>
You can't set window.onload to be a string; you have to point it directly to a function.
I would suggest creating a new function (call it writeColor) that contains if statements based on the value of sessionStorage.colorVar; then you can do window.onload=writeColor;
Alternately, change your window.onload line to window.onload = window[sessionStorage.colorVar + 'Write']; which will grab your function from the global scope and assign it to window.onload.

How to hide an iframe after clicking

I got a stuck in this piece of code
The full code
<html>
<head>
<script>
function hide(kaka){
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
}
function remove(kaka){
var temp=document.getElementById(kaka).display;
temp=(temp=='block')?'none':'block';
}
</script>
</head>
<body>
<IFRAME id="kaka" SRC="ads.php" WIDTH=10000 HEIGHT=10000></IFRAME>
<script>
</body>
I'm trying to make the iframe to hide after someone's click
visibility and display are just text strings, so setting them to a variable, and then changing the variable, won't change the element.
function toggle(kaka) {
var temp=document.getElementById(kaka).visibility;
temp=(temp=='visible')?'hidden':'visible';
document.getElementById(kaka).visibility=temp;
}

Showing images conditionally

I've been working on a simple website for a while now. The basic coding and CSS are complete, so I am now looking to expand by adding certain features to the website. As it is a fully functioning website that serves a purpose, the main source of revenue comes from Google AdSense. I am looking for a way to show an image if Adblock is detected and another one if if it not.
The method I've found for detecting whether AdSense is active is shown below:
JS (saved as advertisement.js)
document.write('<div id="TestAdBlock" style="display:none;">an advertisement</div>');
The HTML bit:
<div id="adblockFrame">
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.write('<strong>ADBlock Plus</strong> NOT detected!');
}
else
{
document.write('<strong>ADBlock Plus</strong> detected!');
}
</script>
</div>
CSS:
#adblockFrame {
visibility: hidden;
}
What I'm asking is that if someone could be kind enough to show me how, instead of displaying text, the JS would show an image in its place. I'm not that good with JS so I'm grateful for any help.
I would create an empty target div :
<div id="adblockDetector"></div>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.getElementById('adblockDetector').innerHTML="<img src='noadblock.jpg' alt='no adblock' />";
}
else
{
document.getElementById('adblockDetector').innerHTML="<img src='adblock.jpg' alt='Adblock detected!' />";
}
</script>
Assuming you are using jquery, just because you tagged it:
html
<div id="wheretoappend"></div>
js
var whereToAppend = '#wheretoappend';
var myDiv = $('<div/>', {id: 'mydiv'});
($('#adblockFrame').length)
? myDiv.addClass('hasit').appendTo(whereToAppend)
: myDiv.addClass('doesnt').appendTo(whereToAppend);
CSS
.hasit {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}
Please, don't use the devil document.write!
If you want to add content to your page, use DOM methods or .innerHTML.
If you want to detect AdBlock, just create a global variable in advertisement.js
For example:
advertisement.js:
window.TestAdBlock = true;
Your page:
<div id="adblockFrame">
<img id="TestAdBlock" alt="AdBlock Detected???" />
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
(function() {
var AdBlockImg = document.getElementById('TestAdBlock');
if (window.TestAdBlock)
{
AdBlockImg.src = "/images/AdBlockDetected.jpg";
AdBlockImg.alt = "AdBlock Detected!";
}
else
{
AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
AdBlockImg.alt = "AdBlock NOT Detected!";
}
AdBlockImg.title = AdBlockImg.alt;
});
</script>
</div>
Firstly, you shouldn't use document.write for anything. It's just bad practice. But here's generally how I'd do it with jquery, since you tagged it:
<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
var adsAllowed = adsAllowed || false;
var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';
$('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>
advertisement.js
var adsAllowed = true;

Two Javascript scripts conflicting (show/hide)

I have two Javascript scripts on a site. One is an accordion (show/hide) and the other is a basic script to show/hide based on a hyperlink click. Both scripts work fine independently, but once together on the same page the accordion one stops working: the click to display the items in the accordion stops working. Here's the code:
<link rel="stylesheet" href="[template_url]/js/tinycord/tinycord.css" type="text/css" />
<style>
.inner-boxes .box3, .details1 {
display:none;
}
</style>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,-1);
</script>
<script>
$(function(){
$(".para").click(function(){
$("#fillit").html($(this).next(".details1").html());
});
$(".details1:first").clone().appendTo("#fillit").show();
});
</script>
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
content of script.js
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/2)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();
I don't think these scripts actually conflict. You are loading the accordion code after you try to use it. Perhaps reorder your script tags.
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
should go before the use of TINY.accordion which it defines:
var parentAccordion=new TINY.accordion.slider("parentAccordion");
I don't know enough about the meaning of the string arguments in the call to init, but perhaps you could change the script element that creates the accordion and initializes it to happen on document load, for example by delaying it using jQuery's $.ready or by moving it after any elements whose ids appear in those string arguments.
Also the accordion code is unintentionally using a global s. And short names like s can easily collide which is a maintenance hazard even if not the cause of your immediate problem.
var a=T$(t), i=s=0, ...
is not declaring s locally. Perhaps edit it to say
var a=T$(t), s, i=s=0, ...
<script language="javascript">
jQuery.noConflict();
var b=jQuery.noConflict() || $.noConflict;
b(document).ready(function(){
b(".btn-slide").click(function(){
b("#panel").slideToggle("slow");
b(this).toggleClass("active"); return false;
});
});
</script>
Then instead of $ use b to access jQuery.

how to get tinyMCE editable for a cloned textarea by cloneNode(true) function

When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:
<html>
<head>
<script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
});
</script>
<script type="text/javascript">
testclonenode = {
addAbove : function (element) {
var rowEl = element.parentNode.parentNode.parentNode;
var rowElClone = rowEl.cloneNode(true);
rowEl.parentNode.insertBefore(rowElClone, rowEl);
return false;
}
};
</script>
</head>
<body>
<table>
<tr><td>
<textarea name="content" style="width:100%">this is a test </textarea>
<p> <button onclick='return testclonenode.addAbove.call(testclonenode, this);'> Add above </button>
</td></tr>
</table>
</body></html>
It does not work that way. Also, it is impossible to move a tinymce editor using dom manipulation.
The tinymce wiki states the following:
mceAddControl
Converts the specified textarea or div
into an editor instance having the
specified ID.
Example:
tinyMCE.execCommand('mceAddControl',false,'mydiv');
So when you clone a textarea there is another problem: You will have the same id twice which will result in errors accessing the right tinymce instance.
I got this to work by using an ID which is incremented each time my clone function is triggered, so
var insertslideID = 0;
function slideclone() {
$('<div class="slides"><textarea name="newslide['+insertslideID+'][slide_desc]" id="mydiv'+insertslideID+'"></textarea></div>').insertAfter('div.slides:last');
tinyMCE.execCommand('mceAddControl',false,'mydiv'+insertslideID);
insertslideID++;
}
$('input[name=addaslidebtn]').click(slideclone);
Seems to work.
A wee bit tidier, I just use a number for my id - copy1 is the name of my button - I add the new element to the end of my container.
var count = 0;
$("#copy1").click(function(){
var newId = count;
$( "#first" ).clone().appendTo( "#container" ).prop({ id: newId, });
tinyMCE.execCommand('mceAddControl',false,newId);
count++;
});
I ran into a similar problem, except my element IDs (not just textareas) could be anything, and the same ID was always appearing twice. What I did is supposed to be horribly inefficient but there was no noticeable performance loss with dozens of elements on the page.
Basically I removed the TinyMCE ID first (uses jQuery):
$(new_element).find('.mce-content-body').each(function () {
$(this).removeAttr('id');
});
Then I reinitialized TinyMCE for all relevant elements.

Categories