I currently have this JS, which is injected into foreign pages using a Chrome Extension. The following code adds a div element as the first child of the body element:
const div = document.createElement('div');
div.id = 'suman-per-tab-controls';
div.innerHTML = '<b>foooooo</b>';
document.body.insertBefore(div, document.body.firstChild);
I also tried:
document.body.prepend(div);
With the following screenshot in mind:
If you look at the screenshot of the Quora website, you will notice that the div that I created is hidden behind their header.
I am assuming that the only way to get my div above the Quora is CSS? Does anyone know of some handy CSS that nearly always if not always put a div above any existing content on a page?
Try please following codes inside your css file,
.suman-per-tab-controls {
position: absolute;
z-index:9999;
}
or
.suman-per-tab-controls {
position: fixed;
z-index:9999;
}
or
.suman-per-tab-controls {
position: relative;
z-index:9999;
}
Inspect the Quora navigation bar. and change it position property from fixed to relative.
change position fixed to relative. Then you will see your newly added div.
Related
I'm working on a page in our project.
I want div element with class attribute "site-info" put in bottom of page. I try {position:absolute;bottom:0} this element put in center of page. div with class called "modal-dialog" don't get height of page and div element called "site-info"
is in below this element but Appeared on center of page.
You can use css for this.
.site-info{
position: fixed;
bottom: 0;
width: 100%;}
There is a SO resource related to this... Make div stay at bottom of page's content all the time even when there are scrollbars
Pre-req:
<a href="#a"
onClick="MyWindow=window.open(\'https://<Server IP>/ClickHereNotes.html#<Div Name AAA>\',\'MyWindow\',width=600, height=300); return false;">Click Here.</a>
By clicking on the link above, the embedded html page is opened but only the target div name AAA is displayed.
Below is the toggle like function I have used in the html script tag:
div {
display: none;
}
div:target {
display: block;
}
Problem: When the link above is clicked in Chrome it opens a popup window, while displaying the whole div html content
When I try to open the link in IE 11, the pop up window appears but the window size does not wrap around the html content of the div in concern. There is also no scroll bar.
Things I have tried so far, but did not work:
Adding scrollbar=yes
Adding min-height
Adding % in width and height.
removing width and height.
Adding a char after href=#.
What property should I use to display the pop up window with complete div HTML content?
Try this instead
add this attribute Overflow:scroll to your div
You are trying to show a new page with bookmark .
which is possible by Just create CONTENT Will come on top when url with #BookMark1 will
but still another content will show while scrolling .
to make hide this u need to code for java script.
remove
div { display: none; }
div:target { display: block; }
and add:
html, body{ overflow: auto; }
and add
scrollbar=yes
in tag
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.
I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)
Not sure if its possible but no harm asking.
I have a page which shows an invoice. There is an option to void the invoice via a button. What I want is to do create a watermark effect across the page but it has to be on top of the page content.
I tried using image and CSS background on the invoice container DIV element but that will be hidden if by the invoice content itself. Below is the CSS styles I am using for the class
background-image:url(/images/icons/void.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:35% 55%;
If anyone has any solution, either CSS or Javascript, ... it will be appreciated. Thanks again.
Simple CSS
#voidBox {
position : absolute;
top : 20px; /*Change to Desired Position from top of screen*/
left : 20px; /*Change to Desired Position from left of screen*/
z-index : 1000; /*Sets element above everything else (only works on absolute and fixed position elements)*/
background : url('/images/icons/void.png') no-repeat;
display : none;
}
Then when the button is pressed, do some simple JS
document.getElementById('voidBox').style.display = 'block';
Using jyore's solution, I modified the CSS and HTML as shown below
/* CSS */
#VoidBox {
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
font-size:200px;
color:#CCC;
font-weight:bold;
letter-spacing:40px;
position:absolute;
z-index:1000;
top:20%;
left:15%;
opacity:0.5;
filter:alpha(opacity=50);
}
/* HTML */
<div id="VoidBox" style="display:none;">VOID</div>
Now I have the watermark effect over my invoice page without using any image file. Using JQuery, I displayed the DIV when an invoice is voided.
/* JQuery */
$("#VoidBox").show();
Hope this is useful for someone else.
Here is my method for doing this. Basically you need to layer two divs on top of each other within a container.
My solution uses an invoice div with a content div and a void message div inside. hide the void message div unless the container has a 'void' class. It is then a simple matter to toggle the void class on the container using javascript.
My made a jsfiddle with comments to demonstrate: http://jsfiddle.net/trafnar/etFmC/1/