i have a chrome extension which automatically open a window using
window.open();
when user open some specific websites.
what i want is the new window which i open from the background script through window.open() should be displayed behind the current webiste opened by the user.
i have tried window.open properties like alwaysLowered=1, z-lock=1 etc. but not working.
Also tried.....
var w = window.open('url');
if(w){
w.blur();
window.focus();
}
all these have no effect on chrome. can anybody help?
If you don't need the handle to the opened window (returned by window.open), you can use the chrome.windows API's methods create and update:
In background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({ url: "http://www.google.com/" }, function(win) {
chrome.windows.update(win.id, { focused: false });
});
});
Theoretically, passing the focused: false property in the createInfo argument should achieve the same result in one step, but it is not working for me with Chrome version 31.0.1650.57 on Windows.
UPDATE:
The above code seems to not "blur" the window on Macs. To overcome this (while determining the position and size of the new window - as per OP's comment) use the following code:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
url: "http://www.google.com/",
width: 430,
height: 150,
top: top_popup,
left: left_popup
}, function(win) {
chrome.windows.update(tab.windowId, { focused: true });
});
});
chrome.windows.getCurrent(function(winCurrent){
chrome.windows.create({url:url, function(win){
chrome.windows.update(winCurrent.id, {focused: true});
});
});
Try this, its fast so viewer doesn't feel much
Related
EDIT
OK. So I found the problem. It is owl carousel's auto height function. If I remove it the images will load. However, I need that function because the images are all different sizes! What should I do?
Owl carousel seems not to be loading any of the slides. Not sure why because when I preview just locally it works perfectly fine.
Site: http://imdarrien.com/
See the image below (from developer console)
As seen in the image above, you have an error in your Javascript.
Replace
$("#name").mouseover(function () {
$('.slider').stop().animate({
width: $('#name').width()
}, 1000);
}).mouseout(function () {
$('.slider')..stop()animate({
width: 0
}, 1000);
});
with
$("#name").mouseover(function () {
$('.slider').stop().animate({
width: $('#name').width()
}, 1000);
}).mouseout(function () {
$('.slider').stop()animate({
width: 0
}, 1000);
});
Notice the .. in $('.slider')..stop()animate({.
UPDATE
I would recommend you to use the debugger tools to find and solve such simple script issues yourself. Use f12 key to open the debugger tools in chrome.
On Google Chrome, printing a Highmap makes it resize and stick to the left. But the map won't take its initial shape after printing. See this Fiddle : http://jsfiddle.net/5u6z7csf/1/
The code is very basic :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?',
function (geojson) {
var data = Highcharts.geojson(geojson, 'map');
$('#container').highcharts('Map', {
series: [{
data: data
}]
});
});
I tested it on IE and Firefox and it works fine using them.
Is there a way to walk around this problem ?
Thank you for the reporting, it is requested here
on this page there is a button with a jQuery effect. I want to speed up the animation and see how it will look like. So I opened up the inspector and notices there is a fade effect with 500 speed. I want to chagne this to 100 and see what it'll look like. How can I do this using the consoles script window? Thanks
You can run the following code in your console window, the script just remove the element and add it again you can change the speed in fadeTo()
$(".hover").remove();
$('.otherbutton,.homebutton,.downloadbutton,.donatebutton')
.append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
If you open the elements tab and expand the section of code you are interested in you can double click the code to edit it.
I made this fiddle
http://jsfiddle.net/nAb6N/10/
As you can see I have 2 animators , a element and body class,
I am adding class to body after the first click on a element but once I click on body is not closing it. If I define animators as
var animators = $$('#opendiv,body');
it works ok except that I do not want the div to open on body click. I need it to close on body click.
Any help is appreciated.
Thank you!
Right. Seems as if you really require an outerClick pattern to close. Here's the one that is most notably used within mootools devs, allowing you to create a custom event, based on click:
Element.Events.outerClick = {
base : 'click',
condition : function(event){
event.stopPropagation();
return false;
},
onAdd : function(fn){
this.getDocument().addEvent('click', fn);
},
onRemove : function(fn){
this.getDocument().removeEvent('click', fn);
}
};
The way it works is: it is based on a normal click. upon adding, it adds the callback as a click event on the document. when a click happens within the element itself,it stops bubbling via event.stopPropagation();, else, it will bubble and the callback will run.
here's how it ties together after the above:
http://jsfiddle.net/dimitar/nAb6N/13/
(function() {
var opener = $('opendiv');
var boxtoopen = $('box');
boxtoopen.set('morph', {
duration: 700,
transition: 'bounce:out'
});
boxtoopen.addEvent('outerClick', function(event) {
boxtoopen.morph(".openOff");
opener.removeClass("hide");
});
opener.addEvent('click', function(e) {
e.stop();
boxtoopen.morph(".openOn");
this.addClass("hide");
});
})();
I have also 'outsourced' the morph properties to the CSS as it makes more sense, semantically.
P.S. note that you need mootools 1.4.3 or 1.4.5, but not 1.4.4 as there's a morph bug to do with units in that release. the jsfiddle above uses 1.4.6 (mootools edge).
Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div – until all pre-processing is complete – at which point, show the map).
Hooking up the map's idle event doesn't help that much, since the map is already displayed when this event hits.
I know that the container div gets inline-styled by GMaps after loading, my first idea was to clear out the style attribute (whilst listening to the idle event), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.
Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?
Any thoughts on this?
Thank you in advance!
Also remember to call:
google.maps.event.trigger(map, 'resize');
if you have changed the size of the <div>. A display:none <div> has no size.
Or you could just hide it like with css visablility or css opacity.
$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();
google.maps.event.addListener(map,"idle", function(){
$('#Loader').hide();
$("#GoogleMap").css({ opacity: 1, zoom: 1 });
});
This works for me. I'm using the JQuery library.
$(document).ready(function(){
$('#Checkbox').click(function(){
$('#googleMapDiv').toggle();
initialize(); // initialize the map
});
});
another way to show the hidden map when map is first time rendering the <div> is to set style: visibility.
When firstly hidden, use visibility = hidden; to show use visibility = visible
the reason is: visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
this works fine for me, I use jquery tabs
setTimeout(function() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(default_lat, default_lng));
map.setZoom(default_map_zoom);
}, 2000);
om this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
This will work
google.maps.event.addListener(map, "idle", function ()
{
google.maps.event.trigger(map, 'resize');
});
better way:
gmap.redraw = function() {
gmOnLoad = true;
if(gmOnLoad) {
google.maps.event.trigger(gmap, "resize");
gmap.setCenter(gmlatlng);
gmOnLoad = false;
}
}
and in show click event:
$("#goo").click(function() {
if ($("#map_canvas").css("display") == "none") {
$("#YMapsID").toggle();
$("#map_canvas").toggle();
if (gmap != undefined) {
gmap.redraw();
}
}
});
depending on what you are doing another posibility could be to have multiple bools you set to true when each process is done.
For example:
if you have a geocode service running which you want to wait for, you could have a var called
GeoState
and in the result part of the geocoder set GeoState to true,
then have a timed function check if all the services have returned true, when they have, make the map visible.