I need help with using an iframe. I want to make it so that if someone clicks on a button then they see my widget <iframe src="domain.com" style="border: 0; width: 100%; height: 250px;"></iframe>
Now I use
<form name="form_reg_full" id="form_reg_full" class="clearfix" method="post" action="domain.com">
But it only redirects to domain.com and it doesn't show my widget
If i understood correctly what you've said this code would be ok for you:
Javascrpit
function show_frame(state)
{
document.getElementById("myiframe").style.display = state;
}
Html
<input type="button" onclick="show_frame('block');" value=" show frame" />
<iframe id="myiframe" style="border: 0; width: 100%;
height:250px;display:none; width: 1020px; height: 320px" src="domain.com">
</iframe>
Related
I'm trying to make a slideshow on my webpage that will iterate through a list of html projects and showcase them using an iframe. I'm stuck on how to make the loop that will change the src each time and open the new project.
This is the code I've been able to come up with:
<div class="buttns">
<button id="previous" type="button"><</button>
<div>
<iframe
style="
width: 480px;
height: 270px;
position: relative;
left: 0px;
top: 0px;
overflow: hidden;
"
frameborder="0"
type="text/html"
src=""
width="100%"
height="100%"
allowfullscreen
>
</iframe>
</div>
<button id="next" type="button">></button>
</div>
<script type="text/javascript">
$("#next").click(function () {
$("#p_elem").attr("src", function (data) {
var webpages = [
"../Wolfie873.github.io/Test Projects/DissapearingCircles.html",
"../Wolfie873.github.io/Test Projects/GuessTheNumber.html",
"../Wolfie873.github.io/Test Projects/TestReaction.html",
];
for (var i = 0; i < webpages.length; i++) {
return webpages[i];
}
});
});
</script>
If someone can point me in the right direction, I would greatly appreciate it as I am new to coding.
On our site, we use vimeo to display a carousel video of "signature styles" on our homepage. I would like to add a link so that when you click this video, it will direct you the a "signature styles" page.
I am new to using liquid/shopify. I know how to do this in HTML, but it doesn't appear to be working like I thought.
Here is the original code in the "background-video.liquid" file:
<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="background-video" data-section-settings='{{ section_settings }}'>
<div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}">
<div class="ImageHero__VideoHolder"></div>
</div>
</section>
And here is some code I tried to replace the above lines with:
<a href="https://www.clarasunwoo.com/search?q=signature+styles&type=product">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://vimeo.com/540236561" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
</a>
All you need to do is create an overlay div that "blocks" the actual iframe from being interacted with via z-index. You can then use JavaScript to handle the click and redirection of the user.
<div style="padding: 56.25% 0 0 0; position: relative">
<iframe
src="https://vimeo.com/540236561"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
<div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;"></div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
const overlay = document.querySelector(".overlay");
overlay.onclick = function () {
window.location.href = "https://www.clarasunwoo.com/search?q=signature+styles&type=product";
};
</script>
Good day.
I need help in options Google maps.
My site has block with Google maps. The map has options to display avatar user if he registered in Google+ (gmail). The avatar has circle form with diametr about 32px (how in the example: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?hl=ru).
I want that avatar has square form with size 60x60px and margin-right 70px.
How do it?
Thank you advance!
The code avatar on Google maps:
<iframe src="https://www.google.com/maps/api/js/widget?pb=!1m2!1u22!2s12a!2sru#WzEsMTUxXQ.."
frameborder="0" allowtransparency="true" scrolling="no"
style="border: 0px; overflow: hidden; position: absolute; right: 0px; visibility: visible; width: 37px; height: 37px;">
<html jstcache="0">
<head>
<link id="__2__" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style>div.login-control{color:white;font-family:Roboto,Arial;font-size:11px;font-weight:500}div.login{border-radius:2px;background-color:#5f84f2;padding:4px 8px 4px 8px;cursor:pointer}.login-control .tooltip-anchor{color:#5B5B5B;display:inline;font-family:Roboto,Arial;font-size:13px;font-weight:normal;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;width:50%}.login-control .tooltip-content{background-color:white;font-weight:normal;right:0px}div.login a:link{text-decoration:none;color:inherit}div.login a:visited{color:inherit}div.login a:hover{text-decoration:underline}div.profile-photo{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);width:32px;height:32px;overflow:hidden}div.profile-photo-light{background-color:white}div.profile-photo-light div{color:black}div.profile-photo-dark{background-color:black}div.profile-photo-dark:hover{background-color:white;color:black}div.profile-photo img{float:right;width:32px;height:32px}.tooltip-anchor{width:100%;position:relative;float:right;z-index:1}.tooltip-anchor>.tooltip-tip-inner{background-color:transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;height:0;left:-8px;position:absolute;top:5px;width:0;z-index:1}.tooltip-content{border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);display:inline-block;line-height:100%;padding:10px 11px 9px 11px;position:absolute;margin:0;top:10px;white-space:nowrap}.tooltip-content a{color:#3a84df;text-decoration:none}.tooltip-content a:hover{text-decoration:underline}.tooltip-content .user-email,.tooltip-content .user-name{padding-right:12px}.sign-in-explanatory-text{margin-bottom:6px}.tooltip-content a{overflow:hidden}.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon.png);background-size:14px 12px;display:inline-block;height:12px;padding-right:6px;vertical-align:middle;width:8px}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon_hdpi.png)}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon_hdpi.png)}}.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2_hdpi.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2_hdpi.png)}}</style>
</head>
<body jstcache="0" style="overflow: hidden;">
<script>
window.parent.frames['gm-master'].initWidget(window);
</script>
<div jstcache="0" style="position: absolute; top: 0px; right: 0px; width: 500px; height: 500px;">
<div jstcache="0" style="position: absolute; top: 0px; right: 4px;">
<div jstcache="69" class="login-control" jsaction="mouseenter:loginControl.resize;mouseleave:loginControl.resize;loginControl.resize">
<div jstcache="2" jsaction="loginControl.login" class="login" style="display: none">
<a jstcache="3"> <span class="g-logo"> </span><span>Войти</span></a>
</div>
<div jstcache="4" class="profile-photo-light profile-photo" jsan="7.profile-photo-light,7.profile-photo">
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
</div>
<div class="tooltip-anchor">
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="6" class="sign-in-explanatory-text" style="display: none">Войдите в свой аккаунт, и Google Карты станут ещё удобнее</div>
<div>
<a jstcache="7" class="" style="display: none"></a>
<a target="_blank" jstcache="8" href="https://plus.google.com/113092786366482147078?socpid=238&socfid=maps_api_v3:logincontrol" class="user-name" jsan="7.user-name,8.href,0.target">+aleksandr</a>
<a target="blank_" jstcache="9" href="https://support.google.com/maps/?p=thirdpartymaps&hl=ru" jsaction="mouseup:loginControl.learnMore">Подробнее...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tag:
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
It's currently not possible to customize the UI for the Signed In experience. I'd recommend opening a feature request on the Google Maps API Issue Tracker describing your use case so the team can start tracking interest in it.
I know this is 2 months old question and already chosen an answer, but if anyone else if looking for this. you can achieve the margin thing applying css directly to the iframe element.
This is the code i'm using
iframe[src^="https://www.google.com/maps/api/js/widget?"] {
margin-top: 50px;
margin-right: 52px;
}
How it looks
Open the following HTML on iPad Safari. Scroll down within the iframe. Select male or female radio button which causes a CSS change. Notice the iframe scrolls back to the top. I have the same issue in an application that I'm working on and this issue only happens on iPad (Android and desktop browsers don't have this issue).
<!DOCTYPE html>
<html>
<head>
<title>iframe test</title>
<style>
body {
margin: 0;
padding: 20px;
}
div.iframe-container {
width: 850px;
height: 400px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
border: 1px solid #cecece;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<form>
<input id="genderMale" type="radio" name="gender" value="male" onchange="onRadioSelect();"/>
<label for="genderMale">Male</label>
<input id="genderFemale" type="radio" name="gender" value="female" onchange="onRadioSelect();"/>
<label for="genderFemale">Female</label>
</form>
<br/>
<div class="iframe-container">
<iframe src="http://www.engadget.com" height="100%" width="100%" frameBorder="0"></iframe>
</div>
</body>
</html>
<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null)) {
$(".iframe-container").css("overflow", "auto");
}
function onRadioSelect(event) {
switch($("input:checked").val()) {
case "male":
$("body").css("border", "2px solid #ff0000");
break;
case "female":
$("body").css("border", "2px solid #0000ff");
break;
}
setTimeout(function() {
$("body").css("border-style", "none");
}, 250);
}
</script>
Any ideas how to prevent this from happening? I'd like the scroll position to remain unchanged as other things happen within my parent page.
I had the same issue.
Solved with a scrollable div.
Created a div around the content (not the iframe) with the following style:
<div style="-webkit-overflow-scrolling:touch; overflow-x:hidden; overflow-y:auto; height:100%;">
<iframe src='#' />
</div>
If that doesn't solve the issue try removing the <DOCTYPE> because HTML5 doesn't support <DOCTYPE>
I need to view pdf file embed with google drive link and view link in iframe.
I have tried following code:
<iframe src="https://drive.google.com/viewerng/viewer?url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf" width="400px" height="300px" />
Advance thanks..
Try this..
<iframe src="https://drive.google.com/viewerng/viewer?
url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf?
pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="400px" height="300px" />
This works:
<iframe src="https://drive.google.com/file/d/(your file id)/preview?usp=embed_googleplus" style="border: 0; top: 0; left: 0; width: 640; height: 700; position: absolute;" allowfullscreen></iframe>
You can use like this
<iframe src="https://docs.google.com/file/d/(your file id)/preview"></iframe>