My wordpress blog is having issues with syntax highlighter evolved plugin, and there's this weird div element popping out:
<div style="z-index: -1; position:absolute; top:0px; left: 0px; width: 100%; height: 4031px;"></div>
This causes my page to extend, creating a big space at the end of the page. This also is found on every wordpress blog. Funny thing is, only chrome sees that (using Inspect Element). I've already tried in IE9 developer tools and FF firebug, the div is not there and my page is fine.
NOTE: I've already posted a separate question here. And my question here is different from that.
I want to fix this little problem so bad, and it just came to my mind to use JavaScript for this. What I want to do is: Remove the div with javascript.
It's easy removing a div with an ID or class, but this one doesn't have any. I also do not want to affect all the other divs. How can I accomplish this?
P.S. It has no parent IDs or class. It's right after the container class div. It's parent is <body>.
EDIT: Here's the html:
If it's always last or close to last you can use jQuery or normal CSS3 selectors
$('body > div:last-child').remove();
OR
$('body > div:nth-last-child(n)').remove();
More on CSS3 Selectors and .remove()
OR you could use CSS i.e.
body > div:last-child (or div:nth-last-child(n)) {
display: none;
}
You could do something like this:
var els = document.getElementsByTagName('div');
for (var i = 0; l = els.length; i < l; i++) {
if (els[i].innerHTML == 'style....') {
els[i].parentNode.removeChild(els[i]);
}
}
If you are using jQuery, You can reference the div using a parent or sibling div that might have an ID or class defined.
For examample :
<div id="parentDIVID">
<div>your problem div</div>
</div>
Then you can use jQuery to reference your problem div like this : $("#parentDIVID > div")
If you can provide more html code surrounding your problem div, we can construct a jQuery selector that will work in your case.
Update : Based on the markup provided
function removeDiv() {
var parent = document.getElementById("stimuli_overlay").parentNode;
var children = document.getElementById("stimuli_overlay").parentNode.childNodes;
for (var i = 0; i < children.length; i++) {
if (children[i].style.zIndex == -1)
parent.removeChild(children[i]);
}
}
Update: Based on the fact that you can't rely on the div used below.
If the div really is the always the last div in the document, this is actually easier:
var divs, div;
divs = document.getElementsByTagName("div");
if (divs.length > 0) {
div = divs.item(divs.length - 1);
div.parentNode.removeChild(div);
}
Live example
length - 1 will remove the last div in the document. If you needed to skip a lightbox div or something, adjust to use - 2 or - 3, etc.
Old Answer using the earlier information:
Given that structure, something along these lines:
// Get the div that follows it, which conveniently has an ID
var div = document.getElementById('stimuli_overlay');
// If that worked...
if (div) {
// ...move to the previous div, with a bit of paranoia about blank non-element
// nodes in-between
div = div.previousSibling;
while (div && (div.nodeType !== 1 || div.tagName !== "DIV")) {
div = div.previousSibling;
}
// Check that this really is the right div
if (div && div.tagName === "DIV"
// The following checks look for some of the style properties that your
// screenshot shows are set on the div
&& div.style.position == "absolute"
&& div.style.zIndex == "-1"
&& div.style.top == "0px"
&& div.style.left == "0px"
&& div.style.width == "100%"
&& /* ...possibly more checks here... */) {
// Remove it
div.parentNode.removeChild(div);
}
}
Related
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed last month.
I've created a script that hides a DIV Class if it contains the text "No Event Found" or "Error". This part is working great, however when this happens I would like a hidden DIV ID to load in it's place. (#brxe-akqmjs)
<script>
const divs = document.getElementsByClassName('etn-not-found-post');
for (let x = 0; x < divs.length; x++) {
const div = divs[x];
const content = div.textContent.trim();
if (content == 'No Event Found' || content == 'Error') {
div.style.display = 'none';
}
}
</script>
How do I go about getting this to load correctly? The DIV I want to show is set to display:none.
Many thanks in advance.
I have tried adding if statements but this only results in the original code breaking.
You can simply using jquery hide() and show() method to hide and show the content. Here I rewrite the function in jquery format.
<script>
const divs = $('.etn-not-found-post');
for (let x = 0; x < divs.length; x++) {
const div = divs[x];
const content = div.textContent.trim();
if (content == 'No Event Found' || content == 'Error') {
div.hide();
}else{
div.show();
}
}
</script>
It depends on how that hidden DIV with ID been implemented.
Let me try to cover two approaches:
DIV is hidden with css using display: none;
DIV is hidden using attribute hidden
For both cases, first get the element reference by ID. For e.g.
var divWithID = document.getElementById("divWithID");
Now for case 1,update the style property.
dovWithId.style.display = "block";
For case 2, set the hidden attribute value to false
divWithID.setAttribute("hidden", false);
Hope this helps and clarifies your question.
I would like to be able to get the non-absolute css path of an element using Javascript so that I can subsequently call:
document.querySelectorAll()
I am trying to grab all elements from a page who share the same css path.
For example using the search results page from Google:
A css selector (absolute) would be:
div.g:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > h3:nth-child(1) > div:nth-child(1)
A css path (non-absolute) would be:
html body#gsr.srp.tbo.vasq div#main div#cnt div.mw div#rcnt div.col div#center_col div#res.med div#search div div#rso div.bkWMgd div.srg div.g div div.rc div.r a h3.LC20lb div.ellip
Every answer I have seen usually returns the absolute path (css selector) to an element - i.e the nth child. For example: Get CSS path from Dom element.
Does anyone have an idea on how to get just the pure css path which would be applicable to multiple elements on the page?
Edit: What I am really looking for is the source code in the Firefox Web Developer Inspector tool where you can right click and choose 'Copy CSS Path'. If someone has a pointer to this I would appreciate it.
This is a little more difficult since you have to decide what level of specificity you want. You can choose to include or ignore tags, ids, classes, and attributes, all of which have their own format. I've written a function which does this for you.
nonabsoluteCSS() takes in any element and booleans for whether or not to include the element's tag name, classes, id, and attributes. It's recursive and will climb up the DOM tree until it hits the <body> element.
You can expand on this function even more if you want to get into things like pseudo-elements and siblings, but this should be a good place to start.
$(function(){
$("a").click(function(){
console.log(nonabsoluteCSS(this, true, true, true, true));
});
});
function nonabsoluteCSS(elm, useElements, useClasses, useIds, useAttributes)
{
if($(elm).length < 1)
return false;
var p = $(elm).parent()[0];
var e = $(elm)[0];
var output = "";
if(!useElements && !useClasses && !useIds && !useAttributes)
output = "*";
else
{
if(useElements)
output += e.tagName.toLowerCase();
if(useClasses)
{
for(var i = 0; i < e.classList.length; i++)
output += "."+e.classList[i];
}
if(useIds && e.id != "")
output += "#"+e.id;
if(useAttributes)
{
for(var i = 0; i < e.attributes.length; i++)
{
output += "["+e.attributes[i].name+"=\""+e.attributes[i].value+"\"]";
}
}
}
if(p.tagName.toLowerCase() != "body")
{
return nonabsoluteCSS(p, useClasses, useIds, useAttributes) + " " + output;
}
else
{
return output;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p class="class1">
<span class="class2 class3" id="spanid">
<a href="#">
Click me to see my CSS path.
</a>
</span>
</p>
</div>
My goal is to detect if my element is displayed firstly; I guess narrowed down to display: block;.
If it is; I'd like to iterate through all the elements underneath it within the document to add classes to them. The elements are dynamic; so I just need to add a common selector so that I can hide them (or display: none;) them - when my first element's display: block; is met.
Below is what I have; I'm mainly wondering how to detect if elements are underneath #banner > if so add a common selector (class) to them so that I can then hide (display:none;)
function CheckIfExistThenHideBelow () {
var inElgbl = document.getElementById('banner');
if (typeof(inElgbl) != 'undefined' && inElgbl != null)
{
// How to check if below element inElgbl in doc?
var divsToHide = document.getElementsByClassName("below");
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none";
}
}
This is simpler than you think. Just loop over the target element's siblings that come after it and hide each by applying a class.
function removeSiblingsAfter(someElement){
// Check some element to see if it is currently being displayed as a block
if(getComputedStyle(someElement).display === "block"){
// Begin looping while there is a next sibling that is an element
while(someElement.nextElementSibling){
// Adjust the looping variable to be the next sibling
// so that the loop can eventually end
someElement = someElement.nextElementSibling;
someElement.classList.add("hidden"); // Hide each sibling
}
}
}
removeSiblingsAfter(document.getElementById("sampleTarget"));
.hidden { display:none; }
<div>Sibling Before<div>
<div id="sampleTarget">Target Element</div>
<div>Sibling After</div>
<div>
Sibling After
</div>
<div>Sibling After</div>
I have an "a" tag into a "li" and am appending few images on hover of a "li" into same "a" tag and I have to use inline style on all those img elements but the problem is when I hover first time on "li" these styles apply only on first img tag which is always exist there but not on others but if I hover over "li" again then those inline styles applies on all img tags. for this am using this JS code given below:
$(document).ready(function() {
var mouseover_interval;
var $image;
$('li.product-details').mouseenter(function() {
current_image = -1;
$image = $(this).find('a.current_product_image img');
data_srcs = $image.attr('data-srcs').split(",");
if(data_srcs.length >1){
for (var i = data_srcs.length - 1; i >= 0; i--) {
img = new Image ;
img.src = data_srcs[i];
new_img = $('<img>').attr('src', data_srcs[i]).css({display:"none"}).addClass("over");
$(this).find('a.current_product_image').append(new_img);
var countImg = $(this).find('a.current_product_image img');
countImg.each(function(){
$(this).css({
position : 'absolute',
left : '50%',
marginLeft : -$(this).width()/2,
top : '50%',
marginTop : -$(this).height()/2,
});
});
}
}
else{
return false;
}
$images = $(this).find('a.current_product_image img.over');
mouseover_interval = setInterval(function(){
{
$image.fadeOut(500);
if(current_image == -1){
$($images[$images.length-1]).fadeOut(500);
}
else{
$($images[current_image]).fadeOut(500);
}
current_image+=1;
$($images[current_image]).fadeIn(500);
if(current_image == $images.length-1){
current_image = -1;
}
}
}, 1000);
}).mouseleave( function(){
clearInterval(mouseover_interval);
$image.fadeIn(500);
$(this).find('a.current_product_image img.over').remove();
});
});
How to add styles on all appended elements hovering over "li" first time? Please let me know if am using anything wrong there.
Thanks in advance,
Ashwani Sharma
The reason this is happening is - most likely - the additional images haven't loaded into the DOM yet (remember that it takes time for assets - particularly images - to load when you add them in dynamically).
To confirm this, try logging the countImg var and see whether it reports one too few for the number of images you expect to have. I suspect that's your issue.
You could try passing attributes into the element before adding it into the page. Something like this:
new_img = $('<img>', {
src: data_srcs[i],
class: 'over'
}).hide();
This should create an object that looks like:
<img src="your/source.jpg" class="over" style="display: none;" />
Your problem will still be that it won't actually load into the page until you turn off the display: none, most browsers are intelligent enough to not pull images until they are actually needed (ie: not when hidden).
Also note that your declaration of $image is only set once, at the very beginning of the function. It therefore will only contain the elements it finds at that point in time. If you dynamically add additional images (ie: your new_img)to the parent element, they won't automatically get added to that $image variable.
I'm a bit of a novice when it comes to Javascript, but I've managed to create this script which 'greys out' text and inputs found in a div. It accepts a boolean (show) to declare whether the elements are being hidden or reshown, as well as the name of the div(s) to hide.
It works exactly as intended in Chrome and Firefox, but IE won't do a thing. Through 'debugging' using alerts, I think the issue lies with this line:
var div = document.getElementsByName(divName);
...of the following code:
function hideAndShow(show, divName) {
var hideColor = "#DFDFDF";
// Find all matching divs and loop through
var div = document.getElementsByName(divName);
for (var count1 = 0; count1 < div.length; count1++) {
// Find and loop through all elements in div
var elements = div[count1].getElementsByTagName("*");
for (var count2 = 0; count2 < elements.length; count2++) {
if (elements[count2].tagName == "TEXTAREA" || elements[count2].tagName == "INPUT") {
elements[count2].disabled = !show; //Disable
elements[count2].style.borderColor = (show) ? "" : hideColor; // Change border colour
elements[count2].value = ""; //Clear existing text
}
}
// Change the colour of anything left, such as text
div[count1].style.color = (show) ? "" : hideColor;
alert(div[count1].id);
}
}
Can anybody please help or point me in the right direction? I'm stumped!
It's possible that IE is getting confused by your page: http://www.romantika.name/v2/javascripts-getelementsbyname-ie-vs-firefox/
afaik the IE implementation of getElementsByName actually searches on id
In IE7 at least:
// works in IE but not Chrome
<div id="test"></div>
alert(document.getElementsByName('test').length);
// doesn't work in IE, works in Chrome
<div name="test"></div>
alert(document.getElementsByName('test').length);
Libraries like jQuery deal with all this nonsense for you and make selecting DOM elements trivial.
If you want to do it in pure JS, you might want to look at providing an implementation of getElementsByClassName (see here for an example) to solve the problem.