I'm using a custom Tumblr share button on my Blogger-based website and I'd like the share screen to open in a pop-up window. Right now it opens in a new tab.
Can someone please show me how to do this?
<div class='tumblr-button'>
<script>
var strPostUrl = "<data:post.url/>";
var strPostTitle = '<data:post.title/>';
var strNewUrl = strPostUrl.replace("http://","");
var strNewTitle = strPostTitle.replace(/"/g, '"');
document.write("<a href='http://www.tumblr.com/share/link?url="+strNewUrl+"&name="+strNewTitle+"' target='_new'><img src='http://platform.tumblr.com/v1/share_1.png'/></a>");
</script>
</div>
<div class='tumblr-button'>
<script>
var strPostUrl = "http://google.com";
var strPostTitle = 'Google';
var strNewUrl = strPostUrl.replace("http://","");
var strNewTitle = strPostTitle.replace(/"/g, '"');
</script>
<a href='javascript:void(0);' id='tumblr'><img src='http://platform.tumblr.com/v1/share_1.png'/></a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tumblr').click(function(){
var width = 775,
height = 500,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
var url = "http://www.tumblr.com/share/link?url="+strNewUrl+"&name="+strNewTitle;
window.open(url , 'tumblr', opts);
});
});
</script>
check demo code on http://jsfiddle.net/gzMXd/
Use javascript window.open() function
$('#buttonID').click(function() {
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.focus();
});
Syntax:
window.open (URL, windowName[, windowFeatures])
eg. window.open ("http://jsc.simfatic-solutions.com", "mywindow","status=1,toolbar=1");
Related
this is my code:
var x = 582,y = 500,w = 200,h = 200;
var term = Math.random().toString(16).substr(2, 8);
var win = window.open(`https://www.example.com/search?q=${term}`, "", "width=" + w + ",height=" + h+",status=no");
win.moveTo(x, y);
win.document.scroll(0,findPos(win.document.getElementById("id_rc")));
Works as normal, but when the window is opened, the element is not scrolled into view.
Add your desired ID into URL itself (#id_rc), so that browser would automatically scroll that element to view, just like with normal references in URL:
var x = 582,y = 500,w = 200,h = 200;
var term = Math.random().toString(16).substr(2, 8);
var win = window.open(`https://www.example.com/search?q=${term}#id_rc`, "", "width=" + w + ",height=" + h+",status=no");
win.moveTo(x, y);
I am creating a popup form. I am using the code below and I want the form to show up in the center of the page with the pre determined height/width. The popup is all over the place. It will pop up on the left top, right middle and with different sizes. How can I set it to be consistent?
<a class="collapse-item" href="#" onclick="reqcred()">Cards</a>
<script>
function reqcred() {
w = window.open("{% url 'test_popup' %}","popup_form", 'left=100,top=100,height=450,width=650');
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
I figured it out. This is what I did.
<script>
function reqcred() {
var height = 750
var width = 950
var left = Number((screen.width/2)-(width/2));
var top = Number((screen.height/2)-(height/2));
w = window.open("{% url 'test_popup' %}","popup_form", 'width='+ width + ', height=' + height + ', top='
+ top + ', left=' + left);
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
I am working on a project and have been shown a method where we use a function to open a new window. The code looks like this:
Javascript:
function createWindow() {
let url = "https://google.com";
let win = window.open(url, "My New Window", "width=300, height=200");
document.getElementById("result").innerHTML =
win.name + " - " + win.opener.location;
}
let h = window.outerHeight
let w = window.outerWidth
window.document.write("Height and width of the window are: " + h + " and " + w)
HTML:
<h3>Click to open a new Window:</h3>
<button onclick="createWindow()">Open a Window</button>
<p id="result"></p>
is there a reason why we would use this over using a button with an anchor tag and a target tab?
I have html which has header footer and divs between. I am trying to create an event when the window is scrolled to footer. As the footer appears immediately an alert must popup which shows a message.
Here is my HTML content
http://jsfiddle.net/q4bw82gy/
I have tried the below jquery code, but it is not working for resolutions other than desktop
$(window).scroll(function() {
var scrollPosition = $(window).height() + $(window).scrollTop();
var theight = ($('.banner-section').height()+$('.section-one').height()+$('.section-two').height()+$('.read-one').height()+$('.read-two').height()+$('.next-program').height())-($('.navbar-dark').height()+
($('.main-navigation').height()));
var height1 = $(window).scrollTop();
var height2 = $('.main').height()-$('.expand-section').height()-$('.ftr').height();
if(height1 >= theight){
alert('message 1');
}
else{
alert('message 2');
}
});
Please help with a better solution
Do you want something like this?
$(function() {
$(window).scroll(function() {
var footerTop = $('.ftr').position().top; // or .offset().top
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
if (footerTop <= scrollTop + viewportHeight) {
console.log("true|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
} else {
console.log("false|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
}
});
});
I am trying to display preloaded images in a newly created popup window. Here is the code:
HTML
<div id="hiddenImages" style="display: none;"></div>
<img src="SmallImage1.gif" width="196" height="130" border="0">
<img src="SmallImage2.gif" width="196" height="130" border="0">
JS
<script type="text/javascript">
preloadImages('BigImage1.png','BigImage2.png');
</script>
// PreLoadImages:
function preloadImages() {
var hiddenDiv = document.getElementById('hiddenImages');
var i;
var img;
for(i = 0; i < arguments.length; i++) {
img = document.createElement('img');
img.src = arguments[i];
img.id = arguments[i];
img.alt = '';
hiddenDiv.appendChild(img);
}
}
// OpenImage:
function OpenImage(element,e)
{
e.preventDefault();
var big_image = element.getAttribute("href");
var img = document.getElementById(big_image);
var top = (screen.height/2)-(img.height/2);
var left = (screen.width/2)-(img.width/2);
var str = "\"" + "width=" + img.width + ",height=" + img.height + ",top=" + top + ",left=" + left + ",status=0, scrollbars=0, resizable=0" + "\"";
alert(str);
var myWindow = window.open(img.src , "win1", str);
}
When I output 'str' variable in OpenImage() function, this code gives perfect dimensions of the big image. However, the size of popup window is always different than size of the image. IE stretches the popup window horizontally while Google Chrome stretches it vertically. In spite of the fact that both browsers show exactly the same dimensions for the image. And these dimensions of the image are actually being set as size of the pop up window.
Regards.
Try this out, also try to rename your variable top, I think javascript read this as a keyword.
var str = "width=" + img.width + ",height=" + img.height + ",top=" + tops + ",left=" + left + ",status=0, scrollbars=0, resizable=0 ";