I have an adblock script on my site, that registers, when people uses adblock. My problem is now, that I want a pop up to appear on the site, when it finds a user with adblock. The "hard" about this, is that I don't want a regular pop up, like this:
var w = window.open('', '', 'width=350,height=100,resizeable,scrollbars');
w.document.write('text');
w.document.close();
This code ends up as a "regular" pop up.
I want a on the site pop up, if you know what i mean.
I have an example of it here.
You are looking to create a modal dialog.
You can use any modal library by searching for "modal javascript" on your favorite search engine. A few have mentioned interesting libraries in the comments on your question.
Making your own modal is also easy:
Create the <div> with the content you want and give it a style such as:
.modal {
display: none;
position: fixed;
width: 350px;
height: 100px;
margin-top: -50%;
margin-left: -50%;
top: 50%;
left: 50%;
background-color: #FFF;
/* ... */
}
Instead of the code you show above, simply call $(elt).show() if you are using jQuery, or elt.style.display="block"; in pure DOM js.
Related
I come from a C# background so bear with me I already know the way I'm going about this isn't ideal:
But I need to do this:
Create a centered popup that scrolls with the page when the user clicks on some text the code must be embedded JavaScript in a HTML page(s), nothing server side (other than maybe css).
-preferably text links to popups need to be reusable I don't want to embed a bunch of code each for each link.
-I've looked at a lot of "pop-up" tutorials/exmaples but since I need embedded client side javascript it limits what works.
The result I would like to have a webpage with premade popups that I can reference from other webpages like OpenPopup(webpage.getElement(popupNumber12)) or have arrays with popup titles, descriptions that I can pass though.
Sounds like you're looking have to a modal rather than a popover since you don't want it to close after interacting with the page. I would just have a modal open with an onClick event and then describe its position as:
.modal {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Assuming the width of the modal you want to display is 300px.
If you're working with SCSS
$width = 300px
$height = 300px
.modal {
width: $width;
height: $height;
position: absolute;
left: calc(50% - $width)
top: calc(50% - $height)
}
I'm working on a accessibility issue with an element. I need to hide this element so users can't click/tap it but without disabling the event. I don't want to disable it because voiceover will not be able to trigger the event if it's disabled. I'm using below css but there is still a small hitzone that I can't get rid of.
position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;
What I have tried so far:
visibility:hidden;
z-index: -1;
onmousedown
It doesn't work as I would like :(
EDIT------------
So I tried to play around with the css and added below to simply relocate the select element and minimize the chance users will click/tap on it:
left: 0;
top: -36px;
z-index: 100;
So there is still a hitzone but it's nearly impossibly for someone to click/tap it. Voiceover can live with this and it doesn't change any behavior for users.
If you're using bootstrap, you could try using the class "sr-only".
If not, well, there's no harm in "borrowing" the style from that:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
I borrowed this sample from this answer since I haven't got the bootstrap source to hand but it looks accurate to me.
You can find out more from the Bootstrap accessibility page
Have you tried display:none . Give it a shot. If not, please post your code here, so we can see the actual problem.
Why don't you just make the element transparent. That way users' won't be able to click or tap on it, and you will still get the events.
I am implementing facebook's comments box and what i want is that the comments which i grab thru GET and render to template should be invisible to human but visible to search engines.
as experiment, i did this: http://jsfiddle.net/4D8hh/
how can i make first hide the second? but the second should stay crawlable.
z-index seems to be wrong choice here, with what else can i do it?is it possible?
Use display:none for anything you want to have on the page, but not have visible to the user. The content will be there... it just won't "show" on the page.
just put
background:white;
and that should be it
but qoura has some other wonderful idea please take a look here it works for them it should work for you . :)
https://plus.google.com/106413090159067280619/posts/KDSVtgHiuie
May I raise my concern here. Google don't appreciate people are trying to get a better search ranking by hiding text. And it probably won't work at all. Seen from a user perspective, why don't you want the comments to be visible?
Anyway, if you really wanna go down this road, start using:
http://schema.org/Comment
And then you can take the elements out of context with position absolute:
position: absolute;
left: -9999em;
Or like Twitter Bootsrap, .sr-only:
.sr-only
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.
An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.
Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}
I've been trying out a few lightboxes for my website using MooTools 1.4, and I found this one that works and looks really nice (with easy implementation):
http://andrewplummer.com/code/quickbox/
On the demo website, the lightbox works perfectly, clicking the image brings up the overlay and image, and clicking the overlay removes them.
On my website, when you click an image that's marked appropriately, the lightbox pops up and everything works properly, however, when you exit the lightbox by clicking the overlay or pressing q/x/esc, the overlay hides and everything looks great. The only problem with this is that for some reason, this is being embedded into the body of my code:
<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>
The problem that this causes is that it isn't ever removed after the lightbox is closed, so the entire page is blanked in
#qbOverlay {
display: block;
position: absolute;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
This is a problem because this makes the entire top of the page this overlay, and it's never removed after the lightbox is closed. When it's like this, I can't click any links or use any input boxes in the area that it's covering.
I have a feeling that the thing causing this problem is this:
close: function(){
this.quickBox.setStyle("display", "none");
this.quickBox.setStyle("cursor", "auto");
this.overlay.fade("out");
this.active = false;
}
I've tried using MooTools with compatibility mode and having every extra turned on, but with no luck.
This is an actual bug in mootools 1.4 https://github.com/mootools/mootools-core/issues/2074
Its about to be fixed this week in 1.4.1 (hopefully) but you can take the updated Fx.tween element shortcut protiotypes code for the fade here:
https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098
Alternatively, use a simple tween on opacity instead of .fade(), it allegedly works. You can also do a destroy on the overlay, which to me is the best fix