So I have a code below that I have sand boxed over and it will not allow user to see the web page I have encoded as its blocked from getting viewed is there any attributes other than "sandbox" that I can use to show a website from a different source into my website
<div style="border: 6px solid #117013; overflow: hidden; margin: 1px auto; max-width: 975px;">
<iframe sandbox="allow-scripts" scrolling="no" src="https://www.chelseafc.com/en/news" style="border: 0px none; margin-left: -18px; height: 1250px; margin-top: -559px; width: 680px;">
</iframe>
</div>
Related
i have problem with my website i have whitespace background between img and text on the right side on the screen, take a look of my screenshots to see what i mean,i will provide the code to see if i actualy make mistake in my code to programming this website i use bootstrap to be responsive on mobile but however you see in my screenshots is not. how can i fix this can anyone have solution? i try whit bootstrap use d-block but its still showing me whitespace.
HTML
.myimg {
position: absolute;
top: 60em;
left: 60em;
width: 100%;
height: auto;
}
.myimg2 {
border-radius: 100%;
width: 35%;
}
.name {
position: absolute;
top: 37em;
left: 23em;
color: azure;
text-shadow: 2px 2px 2px black;
}
.mytext {
position: absolute;
top: 48em;
color: wheat;
text-shadow: 2px 2px 2px black;
}
<div id="aboutMe">
<img src="Images/background.jpg" width="1920" height="1080" alt="bg">
<div class="aboutMeContent ">
<div class="container">
<div class="row">
<div class="myimg">
<img src="Images/me.jpg" alt="me" class="myimg2">
</div>
<h1 class="name">Stefan Momcilovic</h1>
<h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
</div>
</div>
</div>
</div>
The solution is to set the CSS left propery to 0 so that there is no gap between the left side of the HTMLElement and page.
.myimg {
position: absolute;
top: 60em;
left: 0;
width: 100%;
height: auto;
}
.myimg2 {
border-radius: 100%;
width: 35%;
}
.name {
position: absolute;
top: 37em;
left: 0;
color: azure;
text-shadow: 2px 2px 2px black;
}
.mytext {
position: absolute;
top: 48em;
left: 0;
color: wheat;
text-shadow: 2px 2px 2px black;
}
<div id="aboutMe">
<img src="Images/background.jpg" width="1920" height="1080" alt="bg">
<div class="aboutMeContent ">
<div class="container">
<div class="row">
<div class="myimg">
<img src="Images/me.jpg" alt="me" class="myimg2">
</div>
<h1 class="name">Stefan Momcilovic</h1>
<h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
</div>
</div>
</div>
</div>
1- if you want to make the responsive page and improve your code, an absolute position not suitable for the responsive page.
2- when you use absolute position, consider the relative position for the parent node as well as consider the box model of the parent;
for your question, if you remove left or assign left:0 then overflow-x eliminated.
for example :
.myimg {
position: absolute;
top: 0;
text-align:center;
width: 100%;
height: auto;
}
I couldn't do this because my javascript part was not good. I have a design in mind. When you click the button and upload the picture, the picture will appear in that circle. At the same time if you want to remove the cross button.
Theme screenshot
<div class="upload">
<img src="images/upload.png" class="uploadImage" alt="">
<input type="file" class="imageUpload">
<style>
.upload{
width: 130px;
height: 130px;
border-radius: 50%;
border: 3px dashed #ddd;
}
input[type="file"].imageUpload{
cursor: pointer;
font: 300 14px sans-serif;
color:#9e9e9e;
width: 128px;
height: 128px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
position: relative;
z-index: 2;
display: block;
margin-top: -2px;
}
input[type="file"].imageUpload::-webkit-file-upload-button{
display: none
}
img.uploadImage{
position: absolute;
margin-top: 41px;
z-index: 1;
left: 70px;
width: 39px;
}
</style>
There is a design for the album page. I'm gonna use a design here. Click on the button and the image after the bear will be listed next to the size button. At the same time the cross button can be removed at any time.
Theme screenshot
I would appreciate it if you tell me with a simple design. It's like I can handle it myself if I understand your logic.
Somewhat like you want
<form>
<input required type="file" name="fileToUpload" multiple data-preview-to="#preview" />
<div id=preview></div>
<input type=hidden name="who-sent" value="jake sent me">
<button>submit</button>
</form>
$($(this).data("preview-to")).html($.map(this.files, function(f) {
return `<figure>
<img src="${URL.createObjectURL(f)}">
<figcaption><input type=checkbox checked> ${f.name}</figcaption>
</figure>`
}))
JSFiddle Example
I have limited knowledge on IFrames. So far I know that the "src" of an IFrame should have an URL from where the content will be fetched. But lately, I am seeing many IFrames whose contents are as follows:
<iframe id="google_ads_iframe_/20346936/skysports/homepage_0" title="3rd party ad content" name="google_ads_iframe_/20346936/skysports/homepage_0" width="728" height="90" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="javascript:"<html><body style='background:transparent'></body></html>"" style="border: 0px; vertical-align: bottom; height: 90px;"></iframe>
Now if we look into the "src" attribute its
src="javascript:"<html><body style='background:transparent'></body></html>""
So what does this mean and how are much Iframes populated. Any knowledge or pointer would be much appreciated.
Thanks a lot.
It's injecting content to iframe.
There is good articles about that:
INJECTING HTML INTO AN IFRAME
Inject Content into a new IFrame
How to Inject Custom HTML and CSS into an iFrame (video)
Simple example:
HTML
<div class="main">
<iframe id="iframe1">
</iframe>
</div>
CSS
#iframe1 {
border: solid 1px;
border-radius: 8px;
width: 80%;
min-height: 80%;
max-height: 80%;
color: red;
padding-top: 1em;
margin: 0 auto;
}
JS
$('#iframe1').contents().find('html').html("<h1 style='text-align: center;'>This IS an iframe</h1>");
Result
I've been trying really hard on this but to no win.
I have a button and a div. When user clicks that button the file browser opens up and allows user to choose image. The image gets added to the div. That's the front image.
I've got the code for that. But I also wanted to duplicate the controls so that the user can add back image. But that doesn't seem to work. Help me fix the code
OR
If you guys can suggest some better alternative then it would be amazing.
Here's the jsbin demo:
http://jsbin.com/pulug/1/
HTML:::
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<fieldset>
<legend>Choose Front Image</legend>
<input type=file id='file' class="button" onchange="startRead()"/>
<div id="dragherefront" >Drop files here</div>
<div id="manualfront"></div>
</fieldset>
<fieldset>
<legend>Choose Back Image</legend>
<input type=file id='file' class="button" onchange="startRead()"/>
<div id="draghereback" >Drop files here</div>
<div id="manualback"></div>
</fieldset>
</body>
</html>
CSS::
#dragherefront{
width: 128px;
height: 128px;
background-color: rgba(221,214,155,0.4);
border: 1px dashed black;
text-align: center;
position: absolute;
opacity: 0;
overflow: hidden;
}
#draghereback{
width: 28px;
height: 128px;
background-color: rgba(221,214,155,0.4);
border: 1px dashed black;
text-align: center;
position: absolute;
opacity: 0;
overflow: hidden;
}
#manualfront{
width: 128px;
height: 128px;
overflow: hidden
background-color: rgba(221,214,221,0.3);
border: 1px dashed black;
overflow: hidden;
z-index: 0;
}
#manualback{
width: 128px;
height: 128px;
overflow: hidden
background-color: rgba(221,214,221,0.3);
border: 1px dashed black;
overflow: hidden;
z-index: 0;
}
Both inputs have the same ID file. You cant copy the code 1:1, you need to change the IDs (for example set it in the first code snipet to file1 and in the second to file2). The same with the divs. And you have to rewrite the code a bit so that it works with multible fields.
I'm using JavaScript with HTML and I have a page that includes multiple iframes. I want to be able to blur some of these iframse (not hide then) so that users can see what is inside these frames but cannot click on them or type in them.
Is there a way to do this?
iframe.contents().find('body').blur()
Something like this may be what you want: http://jsfiddle.net/Paulpro/xcWcn/1/
HTML:
<div id="frame1-blocker" class="frame-blocker"></div>
<iframe id="frame1" src="http://google.com" style="width: 500px; height: 300px; padding: 0px; border: 0px;"/>
CSS:
.frame-blocker{
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 500px;
height: 300px;
}
I would suggest positioning a transparent DIV over each "blurred" iFrame to prevent clock events propagating downward. iFrame tags themselves do not to my knowledge provide the functionality you want.
And for what it's worth, "blur" in Web parlance refers to moving the text cursor outside of a control!
Here is a demo of a way using an overlay within the iframe:
#hidden {
display: none;
}
iframe {
width: 200px;
height: 200px;
}
a {
color: #f00;
text-decoration: underline;
cursor: pointer;
}
<div>
<a class="activate" rel="1">Active Test 1</a><br/>
<a class="activate" rel="2">Active Test 2</a><br/>
<a class="activate" rel="3">Active Test 3</a>
</div>
<iframe id="test1"></iframe>
<iframe id="test2"></iframe>
<iframe id="test3"></iframe>
<div id="hidden">
<div id="overlay" style="display: none; position: absolute; left: 0; top: 0; z-index: 100; background-color: #000;"></div>
<div>
http://www.yahoo.com/
</div>
</div>
$('iframe').each(function(){
$(this).contents().find('body').append($('#hidden').html());
});
$('div a.activate').click(function(){
$('iframe[id^=test]').contents().find('#overlay')
.css('height','200px')
.css('width','200px')
.fadeTo('fast', 0.5);
$('iframe#test'+this.rel).contents().find('#overlay')
.css('height','0')
.css('width','0')
.fadeTo('fast', 1);
});
http://jsfiddle.net/ZTpXa/