I'm making a cricket registration website with a group of people who decided to use Ruby on Rails for the database management. We're also trying to make it one page, so I have the registration forms currently loading in on iFrames. I know this isn't ideal, and if we were using PHP, I'd be able to use Ajax, but I don't know any other way around using iFrames. The difficulty with this is, I can't resize these iFrames when a button inside them is clicked. For example, there is this:
<div class="links">
<%= link_to_add_association 'Add Player', f, :players %>
</div>
Which is a button inside the 'links' class that says "Add player". When clicked, it will extend the content downwards, populating it with more forms to fill in. However, because the Iframe already has it's height, it doesn't adjust properly, leaving the extra content hidden.
Is there any way I can fix this? Alternatively, is there any way I can avoid using iFrames while still maintaining the one page aspect?
Cheers guys!
there's a iframe onload event which can you override the existing height of you're iframe. Let say:
<iframe id='stipsImage' onload='iFrameLoaded()' src='http://...' />...</iframe>
then on your javascript:
//apply css on iframe when ready
iFrameLoaded() {
$('#stipsImage').contents().find("body")
.append($("<style> " +
" body{ text-align: center; } " +
" img{ width: 700px; height: 748px; margin: auto; border: 1px solid #ccc } " +
"</style> "));
}
Related
I'm trying to embed a google form on my blogger blog but I want to remove or hide somehow the branding link and text that google shows at the end of the form: https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?usp=sf_link
Is it possible somehow to hide that or make the text from that class the same as form color so it cant be visible by user? Thank you!
I'm afraid not!
I've been having the same problem; this is called a Cross Origin Policy issue or CORS for short.
Due to security issues, JS rejects to read or change the content of a page in another domain; so you can't use JS to do this. CSS also only acts on the content on the page but the content of the iframe is not on the page.
But a cross-over
you can use blank rectangles to not let them be shown but it's not really guaranteed.
:root {
--hiderColor: red;
}
#hider {
width: 640px;
height: 55px;
margin-top: -50px;
background: var(--hiderColor);
position: absolute;
z-index: 10;
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?embedded=true" width="640" height="937" frameborder="0" marginheight="0" marginwidth="0" class="iframe">Loading…</iframe>
<div id="hider"></div>
It's not really escape-proof but it does the trick; also I shall say you shouldn't do this!
By the way, I used the red colour so you know how it works you, can change the colour;
And a note: the widths of the div and iframe must be one and the same
Good luck!
External iframe means you have no control on what's inside.
I had that problem for something I made for a class, I used
div.a {
display: none;
}
I haven't tried it, but you should be able to use
<p style="color:black">(Link Here)</p>
To recolor the text. Again, I haven't done much restyling of links, but these should work.
I'm generating a modal form with the following standard code:
function openMyForm() {
SP.UI.ModalDialog.showModalDialog({
url: currentSite + "/SiteAssets/myForm.aspx"
title: "My Form",
allowMaximize: false,
showClose: true,
width: 1000,
height: 600
});
}
There's a problem with the CSS however - the close button position is off:
The issue can be traced to the following CSS:
.ms-dlgTitleBtns {
margin-top: -10px;
margin-right: -18px;
height: 30px;
float: right;
}
Specifically margin-right should be 0px.
myForm.aspx is in an iFrame generated by SharePoint, which includes the above CSS. How can I change that value or otherwise get that close button in the right place. I.e.:
I've tried adding
.ms-dlgTitleBtns {
margin-right: 0px !important;
}
and
$(function() {
$(".ms-dlgTitleBtns").css("margin-right","0");
});
to myForm.aspx but of course there's no effect due to the iFrame.
The problematic element with the class ms-dlgTitleBtns is located on the hosting page, rather than on the form itself; putting your custom script/CSS on the same page saves you from having to modify content on a different page through an iframe.
You can add your JavaScript/CSS to the page from which the dialog box is being opened instead of adding it to the form itself.
(Just make sure you properly refresh your app.js file after implementing the change.)
If the iframe is served from the same site as the outer page, you can access it with:
$('#iframeId').contents()
Thriggle is correct, the dialog framing comes from the hosting sharepoint page, not your form. You can tweak the styling using a script editor on the host page.
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click
I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>
I have a screen in which there are different functions. There is a dropdown box onchange of which an Ajax call goes and a jsp page is returned in response. This response i then put inside a div below my dropdown box.
Now what i want is that untill this jsp is not filled in the div element the screen is blocked either by an alert box or some other dialog box.
How can i achieve this ?
You can use blockui jquery plugin from here. Call blockUI before making ajax call and unblockUI in your ajax callback.
#linusunis fed,
If you want to prevent the user from clicking on anything I suggest overlaying a div element & maybe making it semi-transparent. Below is CSS for the div & jQuery code to animate displaying the screen overlay and removing the screen overlay. Just call "block_screen" when you make your call & "unblock_screen" after you received the data & placed your new div on the page. This is just off the top of my head so you may need to double check for errors but it looks good to me.
You need to include jQuery on the page for this to work. Download it here: http://code.jquery.com/jquery-1.7.1.min.js
<style type="text/css">
.blockDiv {
position: absolute:
top: 0px;
left: 0px;
background-color: #FFF;
width: 0px;
height: 0px;
z-index: 10;
}
</style>
<script type="text/javascript" language="javascript">
function block_screen() {
$('<div id="screenBlock"></div>').appendTo('body');
$('#screenBlock').css( { opacity: 0, width: $(document).width(), height: $(document).height() } );
$('#screenBlock').addClass('blockDiv');
$('#screenBlock').animate({opacity: 0.7}, 200);
}
function unblock_screen() {
$('#screenBlock').animate({opacity: 0}, 200, function() {
$('#screenBlock').remove();
});
}
</script>
I would use Jquery and Jquery UI. Jquery UI provides a modal dialog in which you could place a loading message that will keep the user from clicking elsewhere on the screen.
http://jqueryui.com/demos/dialog/#modal
If you actually want to block the UI, just make the AJAX request synchronous.
Just use a boolean flag, which until is set (on receiving content), you lock the functionality. And once this flag is set, proceed further. Assuming you do have control over those functions.
you can use a div, along with z-index, opacity and cursor styling. although I don't know you application, blocking the entire page doesn't sound like a great user experience to me. perhaps you could place the div only over the affected area of the page