I am trying to develop a google chrome extension and part of it is chrome.tabs.create( { url: "https://google.com/search?q=" +document.execCommand("paste") } ); and the link comes up as "https://google.com/search?q=true" Any help is great!!! Thanks!
execCommand('paste') does not work that way. It does not return the contents of the clipboard, rather it does exactly what would happen if someone pressed Command+V or Control+V. It would paste the text whereever the text cursor is.
What you probably want to do in your extension is create a textarea in your extension's background HTML page, focus it, then execute the command. From there you can read the text from the textarea.
If you aren't familiar with background pages, you can get the details from Chrome's Documentation.
Using a background page is necessary because Chrome applies different sandbox restrictions to it. execCommand('paste') can only be used in more privileged places, like a background page.
You can use sendMessage to communicate between JS files and your background HTML page.
Related
I'm wondering if it matters when you save an image in a folder, like when you right click on an image, Do you choose:"Save link as" or "save image as" as I have tried both but for some reason I cannot display the image as my background for a website. Is there anything wrong with the code that I did? Every time I drag the URL into a new tab or browser I only get 6 bullet points on a blank page.
I mainly used an external CSS sheet, then decided to try to fix it by using an internal sheet on HTML, and since that did not work, instead I tried to implement it in the body tag rather than the header tag but nothing worked. Would I have to use the tag? But how else will I be able to implement a background?
file:///Users/kevinnguyen/Desktop/Screen%20Shot%202019-01-26%20at%2011.09.11%20PM.png
The one above is the HTML file.
file:///Users/kevinnguyen/Desktop/Screen%20Shot%202019-01-26%20at%2011.12.19%20PM.png
this is the external file of CSS.
I'm a new to programming as I self taught myself the basics, yet I want to learn so much of it, it's thrilling.
Your links to the images don't work because they point to files on your computer. You need to upload them somewhere and put the link here to be able to see them. Anyway, if you have background-image:url("6928140-swiss-alps.jpg") your image should be in the same folder as the css file. And it should be called 6928140-swiss-alps with the .jpg extension at the end.
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I want to return image(s) through asmx webservice and show them in a html page.
I should not images are located in a folder named by numbers (1.jpg, 2.jpg and etc.) on server and also I should note that I don't want to make and use url for each image because it may cause security issues for me.
I have a textbox in my html page with a submit button and I want to see "1.jpg" in my html page when I insert 1 in textbox and press submit button.
Please help me to play out.
I have a textbox in my html page with a submit button and I want to see "1.jpg" in my html page when I insert 1 in textbox and press submit button.
Simply return the image data from your service along with the appropriate Content-Type header, such as image/jpeg. Then, use JavaScript to create an img element that references your service:
<img src="images.asmx?image=1.jpg" />
I don't want to make and use url for each image because it may cause security issues for me.
I don't know what security issues you're referring to, but just because you can access these images via script doesn't make them secure. Anyone can access them this way unless you take steps to prevent it. It's no different than simply changing the URL.
I've created a toolbar in html that I need to be able to load of any given webpage; I'm thinking of loading it on the page through the use of a bookmarklet but I can't quite get my head around how I go about doing it.
An example of what a need to happen is as follows.
I navigate to any webpage on the internet, I click the bookmark for my toolbar and it appears at the bottom of the page without affecting any of the content on the page, it will stay fixed even when scrolling.
I've added a picture of how the toolbar will look, any suggestions on how I can implement the required functionality?
http://d.pr/bVeM
Many Thanks
What you will need to do is use CSS to keep it at the bottom. Basically you stick your toolbar html code in a <div> tag and then use CSS to keep it at the bottom. Try reading this link or this link on how to do it
Create a script file that you can host somewhere (if it's just for you, you can use localhost). In that script build the toolbar. Your bookmarklet will look something like this:
javascript: document.body.appendChild(document.createElement("script"))
.src = "http://myserver/myscript.js"; void 0;
It wraps here for readability. It won't wrap in your bookmarklet.
The javascript: tells the browser you are executing a script. The void 0 at the end prevents the page from navigating to the return value of the JavaScript.
Hai,
I have one file upload form in an HTML file. The code is like:
<form>
Select File:<input type="file">
</form>
How can I have only one button (or a link) to upload a file, without having this normal textfield and a browse button? GMail achieves this, but I don’t know how.
How about this http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
There is a Yahoo User Interface uploader, see http://developer.yahoo.com/yui/uploader/
It requires flash on the browser, though.
JQuery UI also has a customized file uploader: http://wiki.jqueryui.com/w/page/12137894/FileUploader
That's going to involve JavaScript.
Simple. Here is how it goes. First you create a dummy button element or an anchor element. Set its z-index to 1. Place the file upload (<input type='file' >) over the aforementioned anchor or button element(dummy) and set opacity filters for the file upload to zero and z-index to be 2. Now it will appear as though ur link or button or image is being clicked. Whereas the file upload layer on top is the one that is being clicked hence you will get your File upload dialog. (Positioning the file upload element can be done with css easily.)
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (no text field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
If you want to get rid of the field next to the “Choose file” button, you’ll pretty much have to code your own file upload field using the JavaScript File API, or (if you need to cater for older browsers that don’t support it) a browser plug-in like Flash.
Web browsers generally decide how they display HTML form controls. This is actually quite good, as it means the fields look the same on different websites, which means users can be confident that they know what the controls do.