I'm building a chrome extension but when I use the "default_popup" I can see that it only allows a max height and width, and it is appearing inline over the content of the website. Is it possible to reduce the main browser page to 80% and have 20% of the visible screen for the extension?
Is there another term I can use instead of "default_popup" in "browser_action" to achieve this?
I ran into this issue with an extension recently. I wanted content to be inserted at the top of the browser window and I wanted that content to extend to 100% of the width content window. Since a popup is limited in both width and height, I went with the approach of creating the element to be inserted (for me that was a wrapper div with some content and some buttons) and then appending each of these elements to the body of the page. For example:
let body = document.body;
let wrapper = document.createElement('div')
wrapper.setAttribute('id', 'kty208wrapper')
let header = document.createElement('h1')
header.setAttribute('id', 'kty208header')
// create buttons for increasing/decreasing font size
let btnBigger = document.createElement('button')
btnBigger.innerHTML = "+"
let btnSmaller = document.createElement('button')
btnSmaller.innerHTML = "–"
// add wrapper, header, and bigger/smaller buttons to page
body.insertBefore(wrapper, body.firstChild);
wrapper.appendChild(header)
wrapper.appendChild(btnBigger)
wrapper.appendChild(btnSmaller)
With the wrapper div I used body.insertBefore to insert the content before the start of the body content (so that my wrapper div would show at the very top of the page).
Then I appended the header and buttons to the wrapper div.
Then I was able to write my functions to reference the inserted html elements like so:
let currentSize = 60;
btnBigger.onclick = function() {
currentSize = parseFloat(currentSize) + 5 + 'px';
bigURL.style.fontSize = currentSize
bigURL.style.lineHeight = currentSize
}
Since I wanted this code to be run when a user clicked the extension icon (and not on page load) I created a background script called background.js and listened for the onClicked event. One a user clicked the icon I executed the code above, which was stored in a separate file called content.js. I had to have separate scripts because background scripts don't have access to modify the dom.
chrome.browserAction.onClicked.addListener(function(tab) {
// when a user clicks the extension icon, execute content.js
// content.js has access to the current tab's DOM while
// background.js doesn't.
chrome.tabs.executeScript(null, {file: "content.js"});
});
I hope this helps!
I have created few forms and one pdf preview for this, whenever anyone will going to fill that form pdf preview will get updated with respect to it and after filling all the forms we can take pdf of it.
I want to be shown the particular section is getting updating (like changing the background color or underline it) on right side
when you giving the input on particular text box.
Please find the live code at http://ibus.proserindustries.com/
Posting this answer from the comment.
$("#propertytubelight").keyup(function() {
$("#propertytubelight1").text($("#propertytubelight").val());
document.querySelector("#propertytubelight1").scrollIntoView({ behaviour: "smooth", block: "nearest", inline: "start" });
});
This uses scrollIntoView method to scroll the input field with it's linked html element
In a web page I have an input field and a div that is fixed to the bottom of the window (with these CSS properties: position:fixed; and bottom:0;
I made a Codepen to show what I'm talking about: https://codepen.io/anon/pen/xpQWbb/
Chrome on Android keeps the div visible even when the soft keyboard is open:
However, Safari on iOS seems to draw the soft keyboard over the fixed element:
(I should mention I'm testing on the iOS simulator on my Macbook, because I don't have a working iPhone)
Is there a way to make iOS Safari keep the element visible even when the soft keyboard is open, like how Chrome does it?
I recently ran in to this problem when creating a chat input that should stay fixed at the bottom of the page. Naturally the iOS keyboard displayed on top of the chat input. Knowing the exact keyboard height seems more or less impossible. I embarked on a quest to find a solid value to base my calculations on so i can manually position the chat input container above the keyboard. I wanted to find the actual "innerHeight" value, in other words the currently visible area of the webpage. Due to how the iOS keyboard works, the only way to get that value with the keyboard open seems to be to scroll to the very bottom of the page, and then take a sample of "window.innerHeight".
So, i set up an event listener on my input field on 'click' (since on 'focus' caused a lot of issues for me). This opens the keyboard, which takes a while, so after i set a timeout for 1000ms to make sure (hopefully) that my keyboard is fully open. After 1000ms i quickly scroll to the bottom of the page with javascript, save the value of "window.innerHeight" in this state, and scroll back to where i was. This gives me the actual height of the visible area on the screen.
It seems like the browser window is placed behind the keyboard until you scroll to the very bottom, in which case the whole window 'scrolls up' and the bottom is placed at the top of the keyboard view.
Once i have this value i use currently scrolled value (window.scrollY) plus the value i saved minus the height of my absolute positioned element to determine where to place it. I opted to also hide the input while scrolling since it's flicking around quite a bit. Another downside to this is that you get a quick flick of the page when it does the measurement at the bottom.
Another thing i couldn't solve was the variable height of the address bar. I just made the input a bit higher than i needed so it would have some "padding" at the bottom.
var correctInnerHeight = window.innerHeight;
var isFocused = false;
var docHeight = $(document).height();
var input = $('.myInput');
input.click(function(e){
isFocused = true;
input.css('position', 'absolute');
// Wait for the keyboard to open
setTimeout(function(){
docHeight = $(document).height();
var lastScrollPos = $(document).scrollTop();
// Scroll to the bottom
window.scroll(0, $(document).height());
// Give it a millisecond to get there
setTimeout(function(){
// Save the innerHeight in this state
correctInnerHeight = window.innerHeight;
console.log(correctInnerHeight);
// Now scroll back to where you were, or wish to be.
window.scroll(0, lastScrollPos);
fixInputPosition();
// Make sure the input is focused
input.focus();
}, 1);
}, 1000);
});
input.on('blur', function(){
input.css('position', 'fixed');
input.css('top', 'auto');
input.css('bottom', '');
isFocused = false;
});
$(window).scroll(function(){
fixInputPosition();
});
function fixInputPosition(){
if(isFocused){
var offsetTop = ($(window).scrollTop() + correctInnerHeight) - input.height();
offsetTop = Math.min(docHeight, offsetTop);
input.css('top', offsetTop);
input.css('bottom', 'auto');
}
};
body, html{
margin: 0;
}
html{
width: 100%;
height: 2000px;
}
.myInput{
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='myInput'>
Check out this thread, it talks about a work around that may be more feasible in terms of code. In brief it talks about using the height of the keyboard to move the content into view. All be it a bit hacky it may be difficult to pin down the exact height of the keyboard across devices.
Unfortunately, due to the nature of the IOs Safari keyboard it's not part of the browser viewport so cannot be referenced as you would do typical elements.
#Bhimbim's answer may a good shot too.
Regards,
-B
i experienced this before. What i did back then was :
Make a listener when keyboard is hit.
When keyboard is hit resize you webview's height with screen height - keyboard height.
To do this trick you need to make sure that you html is responsive.
I can show more code in the IOS side, if you're interested i can edit my answer and show you my IOS code. Thank you.
Hi again, sorry, i was mistaken, i thought you were creating apps with webview inside. If you still wanna do this by listening the keyboard i still have work around for you. It may not the perfect way, but i believe this will work if you want to try. Here my suggestion :
You still can have listener from webpage when the keyboard is up. You can put a listener on your textfield by jquery onkeyup or onfocus.
Then you will know when the input is hit and the keyboard will show.
Then you can create a condition in your java script to manipulate your screen.
Hope this give you an insight friend.
#Beaniie thank you !.
Hi Andreyu !. Yes correct, we can not know the keyboard height, not like my case with WebView, I can know the keyboard height through IOS code. I have another work around, not so smart, but might work. You can get the screen size and compare to array of IOS device screen size. Then you might narrowed down the keyboard height by surveying through IOS devices. Good luck friend.
Try using position:absolute and height:100% for the whole page.
When the system displays the keyboard,it plTaces it on top of the app content.
One way is to manage both the keyboard and objects is to embed them inside a UIScrollView object or one of its subclasses, like UITableView. Note that UITableViewController automatically resizes and repositions its table view when there is inline editing of text fields.
When the keyboard is displayed, all you have to do is reset the content area of the scroll view and scroll the desired text object into position. Thus, in response to a UIKeyboardDidShowNotification, your handler method would do the following:
1.Get the size of the keyboard.
2.Adjust the bottom content inset of your scroll view by the keyboard height.
3.Scroll the target text field into view.
Check the Apple developer's guideline to learn more:https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
I make advance data grid to view tabulate data. Each row has icon. When user click that icon show extra data for the that row.
I want show popup in my page center. I used PopUpManager.centerPopUp(panel); to do it. This is my code sample.
panel = new TitleWindow();
panel.showCloseButton = true;
panel.addEventListener(CloseEvent.CLOSE,closeHelp);
panel.addChild(txt);
PopUpManager.addPopUp(panel, Application.application.linkbody, false);
PopUpManager.centerPopUp(panel);
Now pop up show in center of hole page but not screen. When data grid have more data popup window is hide. I want show it center of screen. How can i do it. Can i set popup position manually? Please help me.
You can either set the position manually, or change the parent to center it in your application.
PopUpManager.addPopUp(panel, Application.application as DisplayObjectContainer, false);
PopUpManager.centerPopUp centers the popup on its parent.
I would think PopUpManager.addPopUp(panel, this, false); should do it. If not, try PopUpManager.addPopUp(panel, Application.application, false);
I am creating a site in flash that is reading in entries from a database. I want the swf to expand downward on the html page so the user can use the browser scroll bars to see all the content. I don't want to paginate everything into a 800 px high swf or something - I want the page to expand just like it would if it were html. Possible?
We do exactly that in a private project. We have a function that uses ExternalInterface.call (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html):
if (ExternalInterface.available) ExternalInterface.call('resizeScene', newHeight)
to call a javascript function which simply resizes the div element:
function resizeScene(newHeight)
{
document.getElementById('website').style.height = parseFloat(newHeight) + 'px';
}
You may also want to investigate
http://livedocs.adobe.com/flex/3/langref/flash/display/Stage.html#align
and
http://livedocs.adobe.com/flex/3/langref/flash/display/Stage.html#scaleMode