JavaScript: the good old window.open (with a trick)
The window.open JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today lightbox effects are preferred. However I still use it, especially when displaying a large image.
In this article I will show you how to open a new window and resize it appropriately.
If you prefer, we can use the onClick event:
URL is the URL of the page to be opened;
windowName is the name or target of the new window. It can be:
_blank - a new window;
_parent - the URL is loaded in the parent window;
_self - the URL replaces the window;
_top - the URL replaces the frame set;
name - the name of the window;
windowFeatures are features assigned to the new window. Those features can be:
status - can be yes, no, 0 or 1 (default is yes) - display the status bar;
titlebar - can be yes, no, 0 or 1 (default is yes) - display the title bar;
toolbar - can be yes, no, 0 or 1 (default is yes) - display the tool bar;
menubar - can be yes, no, 0 or 1 (default is yes) - display the menu bar;
height - in pixels - determine the height;
width - in pixels - determine the width;
top - in pixels - determine the top position;
left - in pixels - determine the left position;
location - can be yes, no, 0 or 1 (default is yes) - display the address bar;
fullscreen - can be yes, no, 0 or 1 (default is no) - display in full screen or not;
channelmode - can be yes, no, 0 or 1 (default is no and for IE only) - display in theater mode or not;
directories - can be yes, no, 0 or 1 (default is yes and for IE only) - display directories button or not.
We are going to use some of those optional features.
. We open the <body> tag and give it a few parameters.<br /><blockquote><code> prev.document.writeln("<script type='text/javascript'>");<br /> prev.document.writeln("function completeImg() {");<br /> prev.document.writeln("i = document.getElementById(\"imm\");");<br /> prev.document.writeln("window.resizeTo(i.width + 6, i.height + 80);");<br /> prev.document.writeln("window.moveTo((screen.width - i.width) / 2, (screen.height - i.height) / 2);");<br /> prev.document.writeln("}");<br /> prev.document.writeln("</script>");</code></blockquote>The previous part is inserting a JavaScript script, with a function called completeImg. The function will resize the window and move it to the center of the screen, once the image is completely loaded. <br /><blockquote><code> prev.document.writeln("<a href=\"javascript:window.close();\">");<br /> prev.document.writeln("<img src=\""+url+"\" hspace=\"0\" vspace=\"0\" border=\"0\" alt=\"\" id=\"imm\" name=\"imm\" onload=\"return completeImg();\">");<br /> prev.document.writeln("</a>");</code></blockquote>The previous part is inserting the image surrounded by an <a> tag so that when the user click the image, the new window will close. Then there's the completeImg function called when the image is loaded (onLoad).<br /><blockquote><code> prev.document.writeln("</body>");<br /> prev.document.writeln("</html>");<br /> prev.document.close();<br />}</code></blockquote>Finally we close everything. <br /><br />The example shown should be considered as an exercise. I actually use it sometimes and it works very well. You should check the part which resizes and centers the new window, because you may need to adjust it a bit, considering the size of your image.<br /><br />Hope you find it useful.
<div div='adsense-content' style='display:block;text-align: center'>
</div></div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById("adsense-content");
var target = document.getElementById("adsense-target");
var linebreak = target.getElementsByTagName("br");
if (linebreak.length > 0){
insertAfter(adscont,linebreak[1]);
}
</script>
<script type='text/javascript'>
function insertAfter2(addition2,target2) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(additionn,targett.nextSibling);
}
}
var adscont = document.getElementById("adsense-content2");
var target = document.getElementById("adsense-target");
var linebreak = target.getElementsByTagName("br");
if (linebreak.length > 0){
insertAfter(adscont,linebreak[3]);
}
</script>
</div>
</div>
</article>
<div class='hreview' style='display:none'>
<span class='item'>
<span class='fn'>JavaScript: the good old window.open (with a trick)</span>
<img alt='JavaScript: the good old window.open (with a trick)' class='photo' src=''/>
</span>
Reviewed by <span class='reviewer'>0x000216</span>
on
<span class='dtreviewed'>
Tuesday, August 02, 2011
<span class='value-title' title='Tuesday, August 02, 2011'></span>
</span>
Rating: <span class='rating'>5</span>
</div>
<div style='clear:both'></div>
<div class='post-footer'>
<div class='label-head'>
<span>Tags :</span>
</div>
<div class='share-art'>
<a class='facebook' href='https://www.facebook.com/sharer.php?u=https://nexus-decode.blogspot.com/2011/08/javascript-good-old-windowopen-with.html&title=JavaScript: the good old window.open (with a trick)' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i><span>Share it</span></a>
<a class='twitter' href='https://twitter.com/share?url=https://nexus-decode.blogspot.com/2011/08/javascript-good-old-windowopen-with.html&title=JavaScript: the good old window.open (with a trick)' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i><span>Tweet it</span></a>
<a class='googleplus' href='https://plus.google.com/share?url=https://nexus-decode.blogspot.com/2011/08/javascript-good-old-windowopen-with.html&title=JavaScript: the good old window.open (with a trick)' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i><span>Share it</span></a>
<a class='linkedin' href='https://www.linkedin.com/shareArticle?url=https://nexus-decode.blogspot.com/2011/08/javascript-good-old-windowopen-with.html&title=JavaScript: the good old window.open (with a trick)' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i><span>Share it</span></a>
<a class='pinterest' href='https://pinterest.com/pin/create/button/?url=https://nexus-decode.blogspot.com/2011/08/javascript-good-old-windowopen-with.html&media=images/gallery/small/01.jpg&description=The window.open JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today l...' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'></i><span>Pin it</span></a>
</div>
<div style='clear:both'></div>
<div id='related-posts'>
<h4 class='related-headline'>You Might Also Like</h4>
<div class='related-ready'>
</div>
</div>
<script type='text/javascript'>
var id_user = 329219;
var domains_include = ['google.com', 'nexus-decode.blogspot.com.com', 'bing.com'];
</script>
<div class='clear'></div>
<ul class='post-nav'>
<li class='next'>
<a class='newer-link' href='https://nexus-decode.blogspot.com/2011/08/digital-opportunity-knocks.html' id='Blog1_blog-pager-newer-link' rel='next'></a>
</li>
<li class='previous'>
<a class='older-link' href='https://nexus-decode.blogspot.com/2011/08/those-scams-again-signs-of-progress.html' id='Blog1_blog-pager-older-link' rel='previous'></a>
</li>
</ul>
</div>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization' style='display:none;'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='images/gallery/small/01.jpg' itemprop='url'/>
</div>
<meta content='Nexus' itemprop='name'/>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(".index .post-outer,.archive .post-outer").each(function() {
$(this).find(".block-image .thumb a").attr("style", function(e, t) {
return t.replace("/default.jpg", "/mqdefault.jpg")
}).attr("style", function(e, t) {
return t.replace("s72-c", "s1600")
})
});
//]]>
</script>
<div class='comments' id='comments'>
<a name='comments'></a>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</div>
<!--Can't find substitution for tag [adEnd]-->
</div>
<div class='post-feeds'>
</div>
</div></div>
</div>
<div class='sidebar-wrapper'>
<div class='sidebar section' id='sidebar' name='Sidebar Right A'>
<div class='widget HTML' data-version='1' id='HTML4'>
<h2 class='title'>Recent Posts</h2>
<div class='widget-content'>
</div>
</div><div class='widget HTML' data-version='1' id='HTML8'>
<h2 class='title'>Facebook</h2>
<div class='widget-content'>
</div>
</div></div>
</div>
<div class='clear'></div>
</div><center>
<!-- end content-wrapper -->
<script type='text/javascript'>
var id_user = 329219;
var domains_include = ['google.com', 'nexus-decode.blogspot.com.com', 'bing.com'];
</script>
</center>
<div class='clear'></div><!-- Footer wrapper -->
<div class='footer-wrapper'>
<div class='footer-sec row'>
<!-- Footer Social -->
<div class='social-footer section' id='social-footer' name='Social Footer'><div class='widget LinkList' data-version='1' id='LinkList20'>
<div class='widget-content'>
<ul>
<li><a class='gplus' href='#' target='_blank' title='gplus'></a></li>
<li><a class='youtube' href='#' target='_blank' title='youtube'></a></li>
<li><a class='instagram' href='#' target='_blank' title='instagram'></a></li>
<li><a class='twitter' href='#' target='_blank' title='twitter'></a></li>
<li><a class='facebook' href='#' target='_blank' title='facebook'></a></li>
</ul>
</div>
</div></div>
<!-- Footer Copyright -->
<div class='copyright'><p>Created By <a href='https://nexus-decode.blogspot.com/' id='mycontent' title='Blogger Templates'>Nexus</a> · Powered by <a href='https://www.blogger.com'>Blogger</a>
<br/>© All Rights Reserved</p>
<a aria-current='page' href='https://nexus-decode.blogspot.com/p/terms-of-service-these-terms-and.html'>Terms Of Service </a>·<a href='https://nexus-decode.blogspot.com/p/privacy-policy.html'> Privacy Policy </a>·<a href='https://nexus-decode.blogspot.com/p/blog-page.html'> Disclaimer </a>·<a href='mailto:cybergeekofficial@gmail.com'> Contact Us </a>·<a href='https://nexus-decode.blogspot.com/p/about-us.html'> About Us </a></div>
</div>
</div>
<script>
/*<![CDATA[*/
$(function() {
$('.widget.LinkList a[href*="behance.net"] i').addClass("fa fa-behance");
$('.widget.LinkList a[href*="facebook.com"] i').addClass("fa fa-facebook");
$('.widget.LinkList a[href*="twitter.com"] i').addClass("fa fa-twitter");
$('.widget.LinkList a[href*="bloglovin.com"] i').addClass("fa fa-heart");
$('.widget.LinkList a[href*="dribbble.com"] i').addClass("fa fa-dribbble");
$('.widget.LinkList a[href*="flickr.com"] i').addClass("fa fa-flickr");
$('.widget.LinkList a[href*="snapchat.com"] i').addClass("fa fa-snapchat");
$('.widget.LinkList a[href*="plus.google.com"] i').addClass("fa fa-google-plus");
$('.widget.LinkList a[href*="instagram.com"] i').addClass("fa fa-instagram");
$('.widget.LinkList a[href*="linkedin.com"] i').addClass("fa fa-linkedin");
$('.widget.LinkList a[href*="pinterest.com"] i').addClass("fa fa-pinterest");
$('.widget.LinkList a[href*="vimeo.com"] i').addClass("fa fa-vimeo-square");
$('.widget.LinkList a[href*="youtube.com"] i').addClass("fa fa-youtube");
$('.widget.LinkList a[href*="vine.co"] i').addClass("fa fa-vine");
$('.widget.LinkList a[href*="soundcloud.com"] i').addClass("fa fa-soundcloud");
$('.widget.LinkList a[href*="goodreads.com"] i').addClass("fa fa-book");
$('.widget.LinkList a[href*="deviantart.com"] i').addClass("fa fa-deviantart");
$('.widget.LinkList a[href*="foursquare.com"] i').addClass("fa fa-foursquare");
$('.widget.LinkList a[href*="reddit.com"] i').addClass("fa fa-reddit");
$('.widget.LinkList a[href*="tumblr.com"] i').addClass("fa fa-tumblr");
$('.widget.LinkList a[href*="spotify.com"] i').addClass("fa fa-spotify");
$('.widget.LinkList a[href*="twitch.tv"] i').addClass("fa fa-twitch");
$('.widget.LinkList a[href*="vk.com"] i').addClass("fa fa-vk");
$('.widget.LinkList a[href*="mailto"] i').addClass("fa fa-envelope");
$('.widget.LinkList a[href*="shop"] i').addClass("fa fa-shopping-cart");
$('.widget.LinkList a[href*="feeds/posts/default"] i').addClass("fa fa-rss");
$('.widget.LinkList a[href*="feeds/comments/default"] i').addClass("fa fa-rss");
$('.widget.LinkList a[href*="feeds.feedburner.com"] i').addClass("fa fa-rss");
$('.widget.LinkList a[href*="etsy.com"] i').addClass("fa fa-shopping-cart");
$('.widget.LinkList a[href*="etsy.com"] i').addClass("fa fa-shopping-cart");
$('.widget.LinkList a[href*="behance.net"]').addClass("behance");
$('.widget.LinkList a[href*="facebook.com"]').addClass("facebook");
$('.widget.LinkList a[href*="twitter.com"]').addClass("twitter");
$('.widget.LinkList a[href*="bloglovin.com"]').addClass("bloglovin");
$('.widget.LinkList a[href*="dribbble.com"]').addClass("dribbble");
$('.widget.LinkList a[href*="flickr.com"]').addClass("flickr");
$('.widget.LinkList a[href*="snapchat.com"]').addClass("snapchat");
$('.widget.LinkList a[href*="plus.google.com"]').addClass("google-plus");
$('.widget.LinkList a[href*="instagram.com"]').addClass("instagram");
$('.widget.LinkList a[href*="linkedin.com"]').addClass("linkedin");
$('.widget.LinkList a[href*="pinterest.com"]').addClass("pinterest");
$('.widget.LinkList a[href*="vimeo.com"]').addClass("vimeo");
$('.widget.LinkList a[href*="youtube.com"]').addClass("youtube");
$('.widget.LinkList a[href*="vine.co"]').addClass("vine");
$('.widget.LinkList a[href*="soundcloud.com"]').addClass("soundcloud");
$('.widget.LinkList a[href*="reddit.com"]').addClass("reddit");
$('.widget.LinkList a[href*="vk.com"]').addClass("vk");
$('.widget.LinkList a[href*="facebook.com"] span').replaceWith("<span>like</span>")
});
/*]]>*/
</script>
<script type='text/javascript'>
//<![CDATA[
// Reading Time Author
! function(e) {
e.fn.readingTime = function(n) {
var t = {
readingTimeTarget: ".eta",
wordCountTarget: null,
wordsPerMinute: 270,
round: !0,
lang: "en",
lessThanAMinuteString: "",
prependTimeString: "",
prependWordString: "",
remotePath: null,
remoteTarget: null,
success: function() {},
error: function() {}
},
i = this,
r = e(this);
i.settings = e.extend({}, t, n);
var a = i.settings;
if (!this.length) return a.error.call(this), this;
if ("it" == a.lang) var s = a.lessThanAMinuteString || "Meno di un minuto",
l = "minute";
else if ("fr" == a.lang) var s = a.lessThanAMinuteString || "Moins d'une minute",
l = "minute";
else if ("de" == a.lang) var s = a.lessThanAMinuteString || "Weniger als eine Minute",
l = "minute";
else if ("es" == a.lang) var s = a.lessThanAMinuteString || "Menos de un minuto",
l = "minute";
else if ("nl" == a.lang) var s = a.lessThanAMinuteString || "Minder dan een minuut",
l = "minute";
else if ("sk" == a.lang) var s = a.lessThanAMinuteString || "Menej než minútu",
l = "minute";
else if ("cz" == a.lang) var s = a.lessThanAMinuteString || "Méně než minutu",
l = "minute";
else if ("hu" == a.lang) var s = a.lessThanAMinuteString || "Kevesebb mint egy perc",
l = "perc";
else var s = a.lessThanAMinuteString || "Less than a minute",
l = "minute";
var u = function(n) {
if ("" !== n) {
var t = n.trim().split(/\s+/g).length,
i = a.wordsPerMinute / 60,
r = t / i;
if (a.round === !0) var u = Math.round(r / 60);
else var u = Math.floor(r / 60);
var g = Math.round(r - 60 * u);
if (a.round === !0) e(a.readingTimeTarget).text(u > 0 ? a.prependTimeString + u + " " + l : a.prependTimeString + s);
else {
var o = u + ":" + g;
e(a.readingTimeTarget).text(a.prependTimeString + o)
}
"" !== a.wordCountTarget && void 0 !== a.wordCountTarget && e(a.wordCountTarget).text(a.prependWordString + t), a.success.call(this)
} else a.error.call(this, "The element is empty.")
};
r.each(function() {
null != a.remotePath && null != a.remoteTarget ? e.get(a.remotePath, function(n) {
u(e("<div>").html(n).find(a.remoteTarget).text())
}) : u(r.text())
})
}
}(jQuery);
$('.post').each(function() {
$(this).readingTime({
readingTimeTarget: $(this).find('.eta'),
remotePath: $(this).attr('data-file'),
remoteTarget: $(this).attr('data-target')
});
});
$('.post').readingTime();
//]]>
</script>
<style>
.eta{
display: inline-block;
padding-right: 5px;
}
</style>
<!-- //START// Template Settings -->
<script>
//<![CDATA[
windowWidth = window.innerWidth;
//]]>
</script>
<script>
//<![CDATA[
// jquery replacetext plugin
(function(e) {
e.fn.replaceText = function(t, n, r) {
return this.each(function() {
var i = this.firstChild,
s, o, u = [];
if (i) {
do {
if (i.nodeType === 3) {
s = i.nodeValue;
o = s.replace(t, n);
if (o !== s) {
if (!r && /</.test(o)) {
e(i).before(o);
u.push(i)
} else {
i.nodeValue = o
}
}
}
} while (i = i.nextSibling)
}
u.length && e(u).remove()
})
}
})(jQuery);
// Timeago jQuery plugin
(function(e) {
if (typeof define === "function" && define.amd) {
define(["jquery"], e)
} else {
e(jQuery)
}
})(function(e) {
function r() {
var n = i(this);
var r = t.settings;
if (!isNaN(n.datetime)) {
if (r.cutoff == 0 || Math.abs(o(n.datetime)) < r.cutoff) {
e(this).text(s(n.datetime))
}
}
return this
}
function i(n) {
n = e(n);
if (!n.data("timeago")) {
n.data("timeago", {
datetime: t.datetime(n)
});
var r = e.trim(n.text());
if (t.settings.localeTitle) {
n.attr("title", n.data("timeago").datetime.toLocaleString())
} else if (r.length > 0 && !(t.isTime(n) && n.attr("title"))) {
n.attr("title", r)
}
}
return n.data("timeago")
}
function s(e) {
return t.inWords(o(e))
}
function o(e) {
return (new Date).getTime() - e.getTime()
}
e.timeago = function(t) {
if (t instanceof Date) {
return s(t)
} else if (typeof t === "string") {
return s(e.timeago.parse(t))
} else if (typeof t === "number") {
return s(new Date(t))
} else {
return s(e.timeago.datetime(t))
}
};
var t = e.timeago;
e.extend(e.timeago, {
settings: {
refreshMillis: 6e4,
allowPast: true,
allowFuture: false,
localeTitle: false,
cutoff: 0,
strings: {
prefixAgo: null,
prefixFromNow: null,
suffixAgo: "ago",
suffixFromNow: "from now",
inPast: "in a moment",
seconds: "a few seconds",
minute: "%d minute",
minutes: "%d mins",
hour: "%d hour",
hours: "%d hrs",
day: "%d day",
days: "%d days",
month: "month",
months: "%d months",
year: "%d year",
years: "%d years",
wordSeparator: " ",
numbers: []
}
},
inWords: function(t) {
function l(r, i) {
var s = e.isFunction(r) ? r(i, t) : r;
var o = n.numbers && n.numbers[i] || i;
return s.replace(/%d/i, o)
}
if (!this.settings.allowPast && !this.settings.allowFuture) {
throw "timeago allowPast and allowFuture settings can not both be set to false."
}
var n = this.settings.strings;
var r = n.prefixAgo;
var i = n.suffixAgo;
if (this.settings.allowFuture) {
if (t < 0) {
r = n.prefixFromNow;
i = n.suffixFromNow
}
}
if (!this.settings.allowPast && t >= 0) {
return this.settings.strings.inPast
}
var s = Math.abs(t) / 1e3;
var o = s / 60;
var u = o / 60;
var a = u / 24;
var f = a / 365;
var c = s < 45 && l(n.seconds, Math.round(s)) || s < 90 && l(n.minute, 1) || o < 45 && l(n.minutes, Math.round(o)) || o < 90 && l(n.hour, 1) || u < 24 && l(n.hours, Math.round(u)) || u < 42 && l(n.day, 1) || a < 30 && l(n.days, Math.round(a)) || a < 45 && l(n.month, 1) || a < 365 && l(n.months, Math.round(a / 30)) || f < 1.5 && l(n.year, 1) || l(n.years, Math.round(f));
var h = n.wordSeparator || "";
if (n.wordSeparator === undefined) {
h = " "
}
return e.trim([r, c, i].join(h))
},
parse: function(t) {
var n = e.trim(t);
n = n.replace(/\.\d+/, "");
n = n.replace(/-/, "/").replace(/-/, "/");
n = n.replace(/T/, " ").replace(/Z/, " UTC");
n = n.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
n = n.replace(/([\+\-]\d\d)$/, " $100");
return new Date(n)
},
datetime: function(n) {
var r = t.isTime(n) ? e(n).attr("datetime") : e(n).attr("title");
return t.parse(r)
},
isTime: function(t) {
return e(t).get(0).tagName.toLowerCase() === "time"
}
});
var n = {
init: function() {
var n = e.proxy(r, this);
n();
var i = t.settings;
if (i.refreshMillis > 0) {
this._timeagoInterval = setInterval(n, i.refreshMillis)
}
},
update: function(n) {
var i = t.parse(n);
e(this).data("timeago", {
datetime: i
});
if (t.settings.localeTitle) e(this).attr("title", i.toLocaleString());
r.apply(this)
},
updateFromDOM: function() {
e(this).data("timeago", {
datetime: t.parse(t.isTime(this) ? e(this).attr("datetime") : e(this).attr("title"))
});
r.apply(this)
},
dispose: function() {
if (this._timeagoInterval) {
window.clearInterval(this._timeagoInterval);
this._timeagoInterval = null
}
}
};
e.fn.timeago = function(e, t) {
var r = e ? n[e] : n.init;
if (!r) {
throw new Error("Unknown function name '" + e + "' for timeago")
}
this.each(function() {
r.call(this, t)
});
return this
};
document.createElement("abbr");
document.createElement("time")
});
// SelectNav
window.selectnav = function() {
"use strict";
var e = function(e, t) {
function c(e) {
var t;
if (!e) e = window.event;
if (e.target) t = e.target;
else if (e.srcElement) t = e.srcElement;
if (t.nodeType === 3) t = t.parentNode;
if (t.value) window.location.href = t.value
}
function h(e) {
var t = e.nodeName.toLowerCase();
return t === "ul" || t === "ol"
}
function p(e) {
for (var t = 1; document.getElementById("selectnav" + t); t++);
return e ? "selectnav" + t : "selectnav" + (t - 1)
}
function d(e) {
a++;
var t = e.children.length,
n = "",
l = "",
c = a - 1;
if (!t) {
return
}
if (c) {
while (c--) {
l += o
}
l += " "
}
for (var v = 0; v < t; v++) {
var m = e.children[v].children[0];
if (typeof m !== "undefined") {
var g = m.innerText || m.textContent;
var y = "";
if (r) {
y = m.className.search(r) !== -1 || m.parentNode.className.search(r) !== -1 ? f : ""
}
if (i && !y) {
y = m.href === document.URL ? f : ""
}
n += '<option value="' + m.href + '" ' + y + ">" + l + g + "</option>";
if (s) {
var b = e.children[v].children[1];
if (b && h(b)) {
n += d(b)
}
}
}
}
if (a === 1 && u) {
n = '<option value="">' + u + "</option>" + n
}
if (a === 1) {
n = '<select class="selectnav" id="' + p(true) + '">' + n + "</select>"
}
a--;
return n
}
e = document.getElementById(e);
if (!e) {
return
}
if (!h(e)) {
return
}
if (!("insertAdjacentHTML" in window.document.documentElement)) {
return
}
document.documentElement.className += " js";
var n = t || {},
r = n.activeclass || "active",
i = typeof n.autoselect === "boolean" ? n.autoselect : true,
s = typeof n.nested === "boolean" ? n.nested : true,
o = n.indent || "→",
u = n.label || "Menu",
a = 0,
f = " selected ";
e.insertAdjacentHTML("afterend", d(e));
var l = document.getElementById(p());
if (l.addEventListener) {
l.addEventListener("change", c)
}
if (l.attachEvent) {
l.attachEvent("onchange", c)
}
return l
};
return function(t, n) {
e(t, n)
}
}();
$(document).ready(function() {
selectnav('nav');
selectnav('nav1');
});
// Tabslet jQuery plugin
(function($, window, undefined) {
$.fn.tabslet = function(options) {
var defaults = {
mouseevent: "click",
attribute: "href",
animation: false,
autorotate: false,
pauseonhover: true,
delay: 500,
active: 1,
controls: {
prev: ".prev",
next: ".next"
}
};
var options = $.extend(defaults, options);
return this.each(function() {
var $this = $(this);
options.mouseevent = $this.data("mouseevent") || options.mouseevent;
options.attribute = $this.data("attribute") || options.attribute;
options.animation = $this.data("animation") || options.animation;
options.autorotate = $this.data("autorotate") || options.autorotate;
options.pauseonhover = $this.data("pauseonhover") || options.pauseonhover;
options.delay = $this.data("delay") || options.delay;
options.active = $this.data("active") || options.active;
$this.find("> div").hide();
$this.find("> div").eq(options.active - 1).show();
$this.find("> ul li").eq(options.active - 1).addClass("active");
var fn = eval(function() {
$(this).trigger("_before");
$this.find("> ul li").removeClass("active");
$(this).addClass("active");
$this.find("> div").hide();
var currentTab = $(this).find("a").attr(options.attribute);
if (options.animation) {
$this.find(currentTab).animate({
opacity: "show"
}, "slow", function() {
$(this).trigger("_after")
})
} else {
$this.find(currentTab).show();
$(this).trigger("_after")
}
return false
});
var init = eval("$this.find('> ul li')." + options.mouseevent + "(fn)");
init;
var elements = $this.find("> ul li"),
i = options.active - 1;
function forward() {
i = ++i % elements.length;
options.mouseevent == "hover" ? elements.eq(i).trigger("mouseover") : elements.eq(i).click();
var t = setTimeout(forward, options.delay);
$this.mouseover(function() {
if (options.pauseonhover) {
clearTimeout(t)
}
})
}
if (options.autorotate) {
setTimeout(forward, 0);
if (options.pauseonhover) {
$this.on("mouseleave", function() {
setTimeout(forward, 1000)
})
}
}
function move(direction) {
if (direction == "forward") {
i = ++i % elements.length
}
if (direction == "backward") {
i = --i % elements.length
}
elements.eq(i).click()
}
$this.find(options.controls.next).click(function() {
move("forward")
});
$this.find(options.controls.prev).click(function() {
move("backward")
});
$this.on("destroy", function() {
$(this).removeData()
})
})
};
$(document).ready(function() {
$('[data-toggle="tabslet"]').tabslet()
})
})(jQuery);
// Simple Tab JQuery Plugin by Taufik Nurrohman
(function(a) {
a.fn.simplyTab = function(b) {
b = jQuery.extend({
active: 1,
fx: null,
showSpeed: 400,
hideSpeed: 400,
showEasing: null,
hideEasing: null,
show: function() {},
hide: function() {},
change: function() {}
}, b);
return this.each(function() {
var e = a(this),
c = e.children("[data-tab]"),
d = b.active - 1;
e.addClass("simplyTab").prepend('<ul class="wrap-tab"></ul>');
c.addClass("content-tab").each(function() {
a(this).hide();
e.find(".wrap-tab").append('<li><a href="#">' + a(this).data("tab") + "</a></li>")
}).eq(d).show();
e.find(".wrap-tab a").on("click", function() {
var f = a(this).parent().index();
a(this).closest(".wrap-tab").find(".activeTab").removeClass("activeTab");
a(this).addClass("activeTab");
if (b.fx == "slide") {
if (c.eq(f).is(":hidden")) {
c.slideUp(b.hideSpeed, b.hideEasing, function() {
b.hide.call(e)
}).eq(f).slideDown(b.showSpeed, b.showEasing, function() {
b.show.call(e)
})
}
} else {
if (b.fx == "fade") {
if (c.eq(f).is(":hidden")) {
c.hide().eq(f).fadeIn(b.showSpeed, b.showEasing, function() {
b.show.call(e)
})
}
} else {
if (b.fx == "fancyslide") {
if (c.eq(f).is(":hidden")) {
c.slideUp(b.hideSpeed, b.hideEasing, function() {
b.hide.call(e)
}).eq(f).delay(b.hideSpeed).slideDown(b.showSpeed, b.showEasing, function() {
b.show.call(e)
})
}
} else {
if (c.eq(f).is(":hidden")) {
c.hide().eq(f).show()
}
}
}
}
b.change.call(e);
return false
}).eq(d).addClass("activeTab")
})
}
})(jQuery);
// SmoothScroll for websites v1.2.1
! function() {
function e() {
var e = !1;
e && c("keydown", r), v.keyboardSupport && !e && u("keydown", r)
}
function t() {
if (document.body) {
var t = document.body,
o = document.documentElement,
n = window.innerHeight,
r = t.scrollHeight;
if (S = document.compatMode.indexOf("CSS") >= 0 ? o : t, w = t, e(), x = !0, top != self) y = !0;
else if (r > n && (t.offsetHeight <= n || o.offsetHeight <= n)) {
var a = !1,
i = function() {
a || o.scrollHeight == document.height || (a = !0, setTimeout(function() {
o.style.height = document.height + "px", a = !1
}, 500))
};
if (o.style.height = "auto", setTimeout(i, 10), S.offsetHeight <= n) {
var l = document.createElement("div");
l.style.clear = "both", t.appendChild(l)
}
}
v.fixedBackground || b || (t.style.backgroundAttachment = "scroll", o.style.backgroundAttachment = "scroll")
}
}
function o(e, t, o, n) {
if (n || (n = 1e3), d(t, o), 1 != v.accelerationMax) {
var r = +new Date,
a = r - C;
if (a < v.accelerationDelta) {
var i = (1 + 30 / a) / 2;
i > 1 && (i = Math.min(i, v.accelerationMax), t *= i, o *= i)
}
C = +new Date
}
if (M.push({
x: t,
y: o,
lastX: 0 > t ? .99 : -.99,
lastY: 0 > o ? .99 : -.99,
start: +new Date
}), !T) {
var l = e === document.body,
u = function() {
for (var r = +new Date, a = 0, i = 0, c = 0; c < M.length; c++) {
var s = M[c],
d = r - s.start,
f = d >= v.animationTime,
h = f ? 1 : d / v.animationTime;
v.pulseAlgorithm && (h = p(h));
var m = s.x * h - s.lastX >> 0,
w = s.y * h - s.lastY >> 0;
a += m, i += w, s.lastX += m, s.lastY += w, f && (M.splice(c, 1), c--)
}
l ? window.scrollBy(a, i) : (a && (e.scrollLeft += a), i && (e.scrollTop += i)), t || o || (M = []), M.length ? E(u, e, n / v.frameRate + 1) : T = !1
};
E(u, e, 0), T = !0
}
}
function n(e) {
x || t();
var n = e.target,
r = l(n);
if (!r || e.defaultPrevented || s(w, "embed") || s(n, "embed") && /\.pdf/i.test(n.src)) return !0;
var a = e.wheelDeltaX || 0,
i = e.wheelDeltaY || 0;
return a || i || (i = e.wheelDelta || 0), !v.touchpadSupport && f(i) ? !0 : (Math.abs(a) > 1.2 && (a *= v.stepSize / 120), Math.abs(i) > 1.2 && (i *= v.stepSize / 120), o(r, -a, -i), void e.preventDefault())
}
function r(e) {
var t = e.target,
n = e.ctrlKey || e.altKey || e.metaKey || e.shiftKey && e.keyCode !== H.spacebar;
if (/input|textarea|select|embed/i.test(t.nodeName) || t.isContentEditable || e.defaultPrevented || n) return !0;
if (s(t, "button") && e.keyCode === H.spacebar) return !0;
var r, a = 0,
i = 0,
u = l(w),
c = u.clientHeight;
switch (u == document.body && (c = window.innerHeight), e.keyCode) {
case H.up:
i = -v.arrowScroll;
break;
case H.down:
i = v.arrowScroll;
break;
case H.spacebar:
r = e.shiftKey ? 1 : -1, i = -r * c * .9;
break;
case H.pageup:
i = .9 * -c;
break;
case H.pagedown:
i = .9 * c;
break;
case H.home:
i = -u.scrollTop;
break;
case H.end:
var d = u.scrollHeight - u.scrollTop - c;
i = d > 0 ? d + 10 : 0;
break;
case H.left:
a = -v.arrowScroll;
break;
case H.right:
a = v.arrowScroll;
break;
default:
return !0
}
o(u, a, i), e.preventDefault()
}
function a(e) {
w = e.target
}
function i(e, t) {
for (var o = e.length; o--;) z[N(e[o])] = t;
return t
}
function l(e) {
var t = [],
o = S.scrollHeight;
do {
var n = z[N(e)];
if (n) return i(t, n);
if (t.push(e), o === e.scrollHeight) {
if (!y || S.clientHeight + 10 < o) return i(t, document.body)
} else if (e.clientHeight + 10 < e.scrollHeight && (overflow = getComputedStyle(e, "").getPropertyValue("overflow-y"), "scroll" === overflow || "auto" === overflow)) return i(t, e)
} while (e = e.parentNode)
}
function u(e, t, o) {
window.addEventListener(e, t, o || !1)
}
function c(e, t, o) {
window.removeEventListener(e, t, o || !1)
}
function s(e, t) {
return (e.nodeName || "").toLowerCase() === t.toLowerCase()
}
function d(e, t) {
e = e > 0 ? 1 : -1, t = t > 0 ? 1 : -1, (k.x !== e || k.y !== t) && (k.x = e, k.y = t, M = [], C = 0)
}
function f(e) {
if (e) {
e = Math.abs(e), D.push(e), D.shift(), clearTimeout(A);
var t = D[0] == D[1] && D[1] == D[2],
o = h(D[0], 120) && h(D[1], 120) && h(D[2], 120);
return !(t || o)
}
}
function h(e, t) {
return Math.floor(e / t) == e / t
}
function m(e) {
var t, o, n;
return e *= v.pulseScale, 1 > e ? t = e - (1 - Math.exp(-e)) : (o = Math.exp(-1), e -= 1, n = 1 - Math.exp(-e), t = o + n * (1 - o)), t * v.pulseNormalize
}
function p(e) {
return e >= 1 ? 1 : 0 >= e ? 0 : (1 == v.pulseNormalize && (v.pulseNormalize /= m(1)), m(e))
}
var w, g = {
frameRate: 150,
animationTime: 800,
stepSize: 120,
pulseAlgorithm: !0,
pulseScale: 8,
pulseNormalize: 1,
accelerationDelta: 20,
accelerationMax: 1,
keyboardSupport: !0,
arrowScroll: 50,
touchpadSupport: !0,
fixedBackground: !0,
excluded: ""
},
v = g,
b = !1,
y = !1,
k = {
x: 0,
y: 0
},
x = !1,
S = document.documentElement,
D = [120, 120, 120],
H = {
left: 37,
up: 38,
right: 39,
down: 40,
spacebar: 32,
pageup: 33,
pagedown: 34,
end: 35,
home: 36
},
v = g,
M = [],
T = !1,
C = +new Date,
z = {};
setInterval(function() {
z = {}
}, 1e4);
var A, N = function() {
var e = 0;
return function(t) {
return t.uniqueID || (t.uniqueID = e++)
}
}(),
E = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(e, t, o) {
window.setTimeout(e, o || 1e3 / 60)
}
}(),
K = /chrome/i.test(window.navigator.userAgent),
L = "onmousewheel" in document;
L && K && (u("mousedown", a), u("mousewheel", n), u("load", t))
}();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*GLOBAL SETTINGS, USER CAN CHANGE*/
var MONTH_FORMAT = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var NO_IMAGE = "https://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png";
var POST_PER_PAGE = 9; // number of posts per page "navigation"
var LABEL_SEARCH_NUM = 9; // number of posts labels search
var POSTNAV_PREV_TEXT = "Previous"; // post nav text "previous post"
var POSTNAV_NEXT_TEXT = "Next"; // post nav text "next post"
var COMMENTS_TEXT = "Leave a Comment"; // comments text "leave a comment"
// Main Scripts
$("#LinkList110").each(function() {
var e = "<ul id='nav'><li><ul id='sub-menu'>";
$("#LinkList110 li").each(function() {
var t = $(this).text(),
n = t.substr(0, 1),
r = t.substr(1);
"_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '">' + r + "</a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '">' + t + "</a><ul id='sub-menu'>")
});
e += "</ul></li></ul>";
$(this).html(e);
$("#LinkList110 ul").each(function() {
var e = $(this);
if (e.html().replace(/\s| /g, "").length == 0) e.remove()
});
$("#LinkList110 li").each(function() {
var e = $(this);
if (e.html().replace(/\s| /g, "").length == 0) e.remove()
})
});
$(document).ready(function() {
$(".cmm-tabs").simplyTab({
active: 1,
fx: "fade",
showSpeed: 400,
hideSpeed: 400
});
$("#slink").click(function() {
$('#searchbar').toggle()
});
$('.blogger-tab').append($('#comments'));
$(".cmm-tabs.simplyTab .wrap-tab").wrap("<div class='cmm-tabs-header'/>");
$('.cmm-tabs-header').prepend('<h3>' + COMMENTS_TEXT + '</h3>');
$("#menu").show();
$("ul#sub-menu").parent("li").addClass("hasSub");
$("abbr.timeago").timeago();
$(".footer-sections .widget h2").wrap("<div class='widget-title'/>");
$(".index .post-outer,.archive .post-outer").each(function() {
$(this).find(".block-image .thumb a").attr("style", function(e, t) {
return t.replace("/default.jpg", "/mqdefault.jpg")
}).attr("style", function(e, t) {
return t.replace("s72-c", "s1600")
})
});
$('.PopularPosts ul li img').each(function() {
$(this).attr('src', function(i, src) {
return src.replace('/default.jpg', '/mqdefault.jpg')
}).attr('src', function(i, src) {
return src.replace('s72-c', 's1600')
}).attr('src', function(i, src) {
return src.replace('w72-h72-p-nu', 's1600')
})
});
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn()
} else {
$('#back-to-top').fadeOut()
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
return false
});
var tab1 = $("#sidebar_tabs #tab1 .widget h2").text();
$(".tab-opt .opt-1 a").text(tab1);
var tab2 = $("#sidebar_tabs #tab2 .widget h2").text();
$(".tab-opt .opt-2 a").text(tab2);
var tab3 = $("#sidebar_tabs #tab3 .widget h2").text();
$(".tab-opt .opt-3 a").text(tab3);
$("#tab1 .widget h2,#tab2 .widget h2,#tab3 .widget h2,#tab1 .widget-title,#tab2 .widget-title,#tab3 .widget-title").remove();
$(".sidebar_tabs").tabslet({
mouseevent: "click",
attribute: "href",
animation: true
});
if ($(".sidebar_tabs .widget").length === 0) {
$(".sidebar_tabs").remove()
}
});
$(document).ready(function(a) {
var b = a("a.newer-link");
var c = a("a.older-link");
a.get(b.attr("href"), function(c) {
b.html("<strong>" + POSTNAV_NEXT_TEXT + "</strong><span>" + a(c).find(".post h1.post-title").text() + "</span>")
}, "html");
a.get(c.attr("href"), function(b) {
c.html("<strong>" + POSTNAV_PREV_TEXT + "</strong><span>" + a(b).find(".post h1.post-title").text() + "</span>")
}, "html")
});
$(window).bind("load", function() {
$('.box-title h2 a,.Label a,.postags a,.label-head a').each(function() {
var labelPage = $(this).attr('href');
$(this).attr('href', labelPage + '?&max-results=' + LABEL_SEARCH_NUM + '')
})
});
$(".related-ready").each(function() {
var b = $(this).text();
$.ajax({
url: "/feeds/posts/default/-/" + b + "?alt=json-in-script&max-results=3",
type: 'get',
dataType: "jsonp",
success: function(e) {
var u = "";
var h = '<div class="related">';
for (var i = 0; i < e.feed.entry.length; i++) {
for (var j = 0; j < e.feed.entry[i].link.length; j++) {
if (e.feed.entry[i].link[j].rel == "alternate") {
u = e.feed.entry[i].link[j].href;
break
}
}
var g = e.feed.entry[i].title.$t;
var c = e.feed.entry[i].content.$t;
var $c = $('<div>').html(c);
if (c.indexOf("//www.youtube.com/embed/") > -1) {
var p = e.feed.entry[i].media$thumbnail.url;
var k = p
} else if (c.indexOf("<img") > -1) {
var q = $c.find('img:first').attr('src');
var k = q
} else {
var k = NO_IMAGE
}
h += '<li><div class="related-thumb"><a class="related-img" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"/></div><h3 class="related-title"><a href="' + u + '">' + g + '</a></h3></li>'
}
h += '</div><div class="clear"/>';
$(".related-ready").html(h);
$('.related-img').each(function() {
$(this).attr('style', function(i, src) {
return src.replace('/default.jpg', '/hqdefault.jpg')
}).attr('style', function(i, src) {
return src.replace('s72-c', 's1600')
})
})
}
})
});
window.onload = function() {
var e = document.getElementById("mycontent");
if (e == null) {
window.location.href = "https://nexus-decode.blogspot.com/"
}
e.setAttribute("href", "https://nexus-decode.blogspot.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.setAttribute("style", "display: inline-block!important; font-size: inherit!important; color: #888!important; visibility: visible!important; opacity: 1!important;");
e.innerHTML = "Nexus"
}
//]]>
</script>
<script type='text/javascript'>
var postperpage=POST_PER_PAGE;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
var urlactivepage=location.href;
var home_page="/";
</script>
<div class='back-to-top'>
<a href='#' id='back-to-top' title='Back to Top'><i class='fa fa-long-arrow-up'></i></a>
</div>
<!--
</body>--></body>
</html>
In this article I will show you how to open a new window and resize it appropriately.
The opening
First of all, we have to decide which element will open a new window. Imagine we want to open a new window when the user clicks on an image. The window will contain a larger image. Our small picture will be something like:
))
If you prefer, we can use the onClick event:
The function
The open() method has a simple syntax. We are talking about a method applied to the window object:window.open (URL, windowName[, windowFeatures])URL is the URL of the page to be opened;
windowName is the name or target of the new window. It can be:
_blank - a new window;
_parent - the URL is loaded in the parent window;
_self - the URL replaces the window;
_top - the URL replaces the frame set;
name - the name of the window;
windowFeatures are features assigned to the new window. Those features can be:
status - can be yes, no, 0 or 1 (default is yes) - display the status bar;
titlebar - can be yes, no, 0 or 1 (default is yes) - display the title bar;
toolbar - can be yes, no, 0 or 1 (default is yes) - display the tool bar;
menubar - can be yes, no, 0 or 1 (default is yes) - display the menu bar;
height - in pixels - determine the height;
width - in pixels - determine the width;
top - in pixels - determine the top position;
left - in pixels - determine the left position;
location - can be yes, no, 0 or 1 (default is yes) - display the address bar;
fullscreen - can be yes, no, 0 or 1 (default is no) - display in full screen or not;
channelmode - can be yes, no, 0 or 1 (default is no and for IE only) - display in theater mode or not;
directories - can be yes, no, 0 or 1 (default is yes and for IE only) - display directories button or not.
We are going to use some of those optional features.
The popupImg function
Let's see the function:function popupImg(url)
{ prev = window.open("","_blank","resizable=no,scrollbars=no,location=no,menubar=no,status=no,toolbar=no");
prev.document.open(); prev.document.writeln("Preview ")
prev.document.writeln("");