How to dim display of a webpage [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm currently working on a chrome extension and want to dim the display/add a black transparent background over the existing website such as facebook, youtube, etc. How would this be done in CSS and implemented in JavaScript?

You would do this in CSS, more so than in javascript.
The big picture is that you would create a div that you would style like this:
<div id="overlay"></div>
<style>
#overlay{z-index:9999999;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}
</style>
That would create an div that sits on top of your page content and makes the entire page more dim. (Note that the z-index value of your overlay must be set higher than the z-index values of every other element on the page. Every page is different. By default, the z-index of every element is zero - but most websites place some items above others, so the highest-used z-index could be almost anything.)
Note that the "a" at the end of rgba() is the opacity value - a value of 0.3 will allow most of what lies beneath to be visible, but colored by the first three values 0,0,0, which is black.
How would you do that just with javascript? Here is a short video that explains how create html and add it onto a page with javascript:
https://www.youtube.com/watch?v=VsXCK_2DJzA
There is just one problem: (SOLVED BELOW)
Because your overlay div is sitting on top of the page content, the user cannot interact with the page content anymore (cannot click in fields, cannot press buttons, etc). Due to the z-index (which is necessary to place your overlay on top of the other page content), the overlay now sits between the mouse cursor and the page content. Anywhere the user clicks, they are clicking on the overlay.
The solution, pointed out to me by David Bailey in the comments, is to use the css attribute pointer-events: none; on the overlay div. This tells CSS to ignore any clicks on that element (the overlay) and pass them through to the underlying components.
/* Note: this is NOT jQuery - look carefully. */
const $ = document.querySelector.bind(document);
$('#mybutt').addEventListener("click", function() {
alert("You clicked me");
});
$('#mybutt2').addEventListener("click", function() {
$('#mybutt2').innerText = 'Try clicking buttons NOW';
$('#olay').classList.add("noPtrEvts");
});
#olay{
pointer-events: none;
z-index:9999999;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.3);
}
.noPtrEvts{
pointer-events: auto !important;
}
<div id="olay"></div>
<h1>An Example Webpage</h1>
<div><img src="http://placekitten.com/300/150" /></div>
<button id="mybutt">Click me First</button>
<button id="mybutt2">Remove pointer-events CSS</button>

There is no way to do this in JavaScript alone, unless you bring in a CSS script as this is still, I have edited your post's tags to bring in the correct experts to help.
You would do something like this:
body{
background-color: #302E2E;
}
In CSS, but you may need to look at the element classes and Id's to make it work universally on all platforms

Related

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

How to use angularjs $anchorScroll on div only if div is hidden?

I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.

Multiple print styles in one document for different DIVs

I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});

jQuery Mobile, transparent black overlay effect

I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/

How can I make a box inside the page appear after clicking a link?

I want an image, that when pressed, shows another image apear from the left of the screen to a point in the background image. I then want to zoom in on that image and make a modal box apear. How can I do this?
The point in the background need to stay the same. When I resize the browser it needs to appear at the same point.
See a working demo of the following code here.
The first part of your problem can be solved using position:absolute within a position:relative container that holds your background image.
#wrapper {
overflow-x:hidden;
width:100%;
position:relative;
}
#absSlide {
width:100px;
position:absolute; top:200px; right:-100px;
}
Make sure the wrapper is as wide as the window and that the overflow-x:hidden so that the slide in div isn't visible before the click. The slide in will be positioned just off stage to the right and top:XXXpx where XXX is the distance from the top of the page where your background element is. Your jQuery would look something like this to animate in the hidden div on click:
$('#showSlide').click(function(e){
e.preventDefault();
$('#absSlide').animate({'right':0},450);
});
You should be able to modify this code so that it works on the left side instead and animate the left property in the jQuery. I didn't want to make it too easy as your question was very general. You should ask a separate question for the rest of your problem after you share the working code for what you're able to implement on the first part.

Categories