I have a button generated inside an iframe. Unfortunately, I can't change how it looks, as it's delivered by 3rd party library. I thought of a little trick to use my own button and keep the generated one inside:
<button id="my-button">Click Me</button>
This way, I can tell the library to place its buttons inside mine, so the <iframe> would get appended like this:
<button id="my-button">
Click Me
<iframe src="..."></iframe>
</button>
Now, the only thing left is to hide the <iframe>. I can't simply use visibility: hidden, because that way the click event no longer works. Why I did is instead:
#my-button {
overflow: hidden;
position: relative;
}
#my-button > * {
position: absolute;
top: 0;
bottom: 0;
opacity: .0001;
}
It seems to be a good solution, as I don't see the 3rd party button and I can do whatever I want with my own button. I just need to make sure it's not larger that the button inside, which would render part of my own button unclickable.
What I would prefer, would be rendering that other element somewhere else and hiding it with display: none or position: absolute outside of my viewport and then triggering the click inside it. Due to modern CORS policies, as far as I know it's not possible to reach elements inside the <iframe> though - am I right?
Is there any more reliable way to achieve the same effect without so much trickery? I'm not that excited about opacity: .0001, it make me anxious that in some browsers it will leave some visible trace of the other button.
It isn’t possible to have an element of the parent trigger a click on a button (or any other element) within an iFrame for security reasons.
Related
When I have a page load into the popup lytebox window, I want only the window contents to be scrollable and NOT the page behind (so that you don't click off and then lose your place).
I've tried a few things using variations of
document.body.style.className = "noscroll";
Here is the css I used that I added:
.noscroll { position: fixed; overflow-y:hidden }
.yesscroll { position: static; overflow-y:auto }
I've also tried this using just "overflow". No luck either.
I tried using an "onClick" and I also used Lytebox's own Event Callbacks to call a script to set the new class onLoad with BeforeStart and onunload with AfterEnd.
But nothing is working—not even when I put an alert() in the code to check if it's being called at all. Does anyone have any experience with this?
Thanks!
I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)
I'm looking for something between display: none and visibility: hidden. In other words, I want for div element (with flash content) to be loaded, but not displayed at all.
To make it more clear: there is a flash object embedded through swfobject.embedSWF in the div. When I change display (via javascript) from block to none and then from none to block, it works different in different browsers:
in IE it works like I want it to work - I change the display to block and the object is still there, but in Chrome and FF it is loaded again, like for the first time when swfobject.embedSWF was called.
how about setting it to
HTML (somewhere on the page)
<body>
<!-- other code -->
<div id="my-div">
<!-- your object / embed code -->
</div>
</body>
in the CSS
#my-div {
left: -9999px;
position: absolute;
}
EDIT: on reading your question again, I understood differently... you want to keep the div out of view... right?
so you can still use on of the below mentioned jQuery calls to show it... but if you want to keep it hidden the above CSS should be enough... still the object should be rendered and loaded
$("#my-div").css({ position: "static" });
// or
$("#my-div").css({ left: 0 });
Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.