I set my DIV as contenteditable = true so I can capture image from clipboard. I managed to paste the image. When I right click and check View Selection Source, I able to see the base64 value. Once i copy and save the base64 value, I managed to see the image I paste earlier. How do I get the View Selection Source value programatically.? Any advice or any link for references is highly appreciated.
HTML
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
Image
Find the img element in your contenteditable element, and grab its src attribute.
Note that this doesn't work with Safari.
You can detect webkit-fake-url pseudo-protocol and branch your code to inform the user that you can't grab their image on their browser.
Related
I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.
I am setting up a new app on GoodBarber and using the html section as I want to be able to more personalize my app. However, I am trying to set a background to a section and it will not display the file that I had uploaded to Google Drive as my background.
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
body {
background-image: url(https://images.app.goo.gl/16UbvTJEEPf8AuNG9);
}
<body>
</body>
</html>
You have two problems. Firstly, you need to include your CSS within your <style> tag.
<style>
body {
background-image: ...
}
</style>
The next issue is that the URL you're using isn't actually an image at all. It's a link to a page with images on it. The actual image URL is https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg. You can find that by right clicking the image on the page and opening the image in a new tab, then copying the URL.
Once you use the right URL, and put your CSS in the right place, it will work fine: https://jsfiddle.net/nx4wc8pd/
I have a page with iframe. The iframe contains input elements. When the user places the cursor into the first input textbox in the iframe and presses the tab key, the focus jumps out from the iframe and the next element in the parent page gets the focus. (instead remaining in the iframe, and place to focus on the 2nd input element.)
I've tried to place tabIndex attribute for the input elements with no effect.
I would like to ensure the input elements in the iframe can be accessed by pressing tab key.
* Begin Edit
Risking the minuses, but I have to share my opinion...
I recognized answering this question is this is not obvious.Regarding the UX consequences of this behavior: Seeing the browsers and html/css we still have these white holes what are teleport us to the stone-age of UI/IX: the 80s and early 90s...
Just place yourself into the situation of an end user, who tries to navigate between UI elements using the tab key...
End Edit *
...sorry if one felt be offended because there is not obvious answer for this in the age of HTML 6+... I think instead we should solve or workaround this to ensure enduser UX.... or is not this reproducable? Please let me know if I missed something.
Please consider this simple example that contradicts your claim. Tab works correctly navigating through form elements of both child frame and parent frame.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer Frame</title>
<style>
.iframe-wrapper {
height: 80px;
}
</style>
</head>
<body>
<div class="iframe-wrapper">
<iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
<input type="button" value="No, press me!">
</body>
</html>
And inner-frame.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner Frame</title>
<style>
.wrapper {
border: 2px solid #f0f0f0;
}
</style>
</head>
<body>
<div class="wrapper">
<div>Hello, world. I am iframe.</div>
<input type="text" name="" id="" value="Write in me">
<input type="button" value="Press me">
</div>
</body>
</html>
Tested on Windows with Chrome, Firefox and IE - all latest versions.
I've also made a JS fiddle to demonstrate it. But for some reason for iframe to render you need to press Run first. http://jsfiddle.net/zecu3yvn/
I'm working on a webpage where I need to be able to click on buttons that change iframes with in a parent page. I thought this would be a simple task but no matter what I do, the button keeps opening a new window rather than opening the page inside the iframe. The page looks perfect and the iframe loads up but when I click the button in the parent window to change the page it opens in a new tab. Here is the complete code I'm using (minus the changed webpage names) if someone could point out what I'm doing wrong please.
<head>
<style>
body
{
background-image:url(bg4.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background-size:100%;
}
p.pos_fixed
{
position:fixed;
top:98px;
right:298px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stupid webpage that dont work</title>
</head>
<body>
<p class="pos_fixed">
<iframe id="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
<center>
<a href="http://www.google.com" target="MSL">
<img src="MSL.jpg" alt="MSL" width="42" height="42"></a>
</center>
</p>
</body>
</html>
In order for your link to target the iframe, you must add the "name" attribute to such frame, nothing to do with "id"
<iframe id="MSL" name="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
Also, your DOM structure is very bad, you should not nest iFrames inside paragraphs. In short, the target attribute in anchor elements need to match the name attribute in the iFrame unless it is a reserved one such as "_blank", "_self", "_parent", or "_top".
Okay, time for my dumb question of the day.
I have an external css file that basically assign a background image to a button.
Css Code:
input.keypad
{
cursor: pointer;
display: block;
min-width: 64px;
width: 64px;
height: 64px;
margin: 0;
border: 0;
background: url(images/btn1.jpg) no-repeat center top;
}
Html code:
<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">
My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.
I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?
Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.
You select the element and you will see all css properties of it.
(source: getfirebug.com)
You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.
Here's some suggestions...
First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.
Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".
Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:
<input type="image" class="keypad" src="images/btn1.jpg"/>
... whilst keeping the size declarations in CSS as they are now.
See if some of those might help.
Firstly I'd like to thank Balon for pointing me in the right direction.
After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.
Here is an example of what I am trying to put across:
Code Before (Broken):
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
Code After (Fixed):
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>