Develop Reference

How to force remove text after footer in html

I have this text, once I include some vuejs extension. I need the extension badly but it seem that it cause some text to display on my footer.
Is there any hack to remove it?.
Please check immediately after my footer, there some text there.I don't have editing tool to edit the image.
Please help

You could use some CSS to simply hide it. It might not be ideal, but could work just fine depending on your situation.
.footer{
display:none;
{

you can use JavaScript to remove that div element.
let footer = document.getElementsByClassName("footer");
footer.remove();

Don't display anything below some element

is it possible to hide every content after a certrain element (e.g. after a certain class of div)?
The problem is: I'm using a 1&1 webpage builder with a layout-template (annoying like hell) because of my boss. I'd like to remove the footer, but nothing has worked yet as it seems that the template prevents me from hiding the footer with simple CSS (I'm happy for any suggestions here as well).
But maybe it's possible to hide anything that comes after a certain element like a div or image (or whatever) so that I can put the element right before the footer?
Thanks in advance.

You should be able to use JS if it is possible on 1&1.
As you probably have JQuery you can do it like this:
$('.footer-class').remove();
or
$('.footer-class').css('display', 'none');
I don't think that 1&1 would have different classes or ids for footers each time someone refreshes it, so I think it should work.
Please provide a working example or your website address. This will help us.

Can you give us the footer's classes, id and all attributes? The simplest solutions is style="display:none" added to the footer

Not able to scroll on custom scrollbar using Selenium

We are using custom scrollbar(mcustomscrollbar) for our website, but I am not able to scroll through custom scroll bar using selenium. Tried:
injecting javascript ( Eg: ((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView(false);", el) ).
But no use, it doesn't work.
Finally I found a solution using injecting jquery:
jQuery('.mCustomScrollbar').mCustomScrollbar('scrollTo',$('#xyz'))
Now I need to scroll using a particular webelement instead of id attribute. Is there a way for that using any kind of technique?
Reference:
Check this image:
https://drive.google.com/file/d/0B1y-4W_7TTOXU1lBdEt6WkNrZFE/view?usp=sharing
SignUp for more information here

you can try this one:
you added css
style="display: table-cell; height: 100vh; vertical-align: middle; max-width: 100vw;overflow: scroll;position: fixed;margin-left: -306px;"

Not sure if you figured out how to do this with just Javascript, but I do the following to scroll my mcustomscrollbar:
((JavascriptExecutor)getDriver()).executeScript("arguments[0].scrollIntoView();", driver.findElement(By.cssSelector("div.class")));
.. where 'driver' is the Webdriver instance. The div.class can be any CSS element.
I got to this page by trying to see if anyone has had issues with mcustomscrollbar sometimes scrolling back to the top of the page, instead of staying put. For me right now, I have to scroll down for each form input on the bottom of the page, which is works only most of the time. You see anything like that Suresh?
EDIT: Also found this page that provided me with this scroll command that's working for me.
((JavascriptExecutor)getDriver()).executeScript("$('.mCustomScrollbar#content').mCustomScrollbar('scrollTo',document.querySelector(\"div.class button.class\"))");
You can use any CSS selector in the querySelector.

Dom element change notification

I am having the weirdest of problems. In chrome browser alone, one of my html divs get an additional inline css tag added to it. This tag is style="overflow:hidden", this was causing the layout to break and we quick found out this was the problem.
However there is no place in the codebase that we could search which lets us know how this tag is getting added. is there a way to debug this? I tried the chrome javascript debugger but it did not help me find the issue. In all other browsers the tag does not appear. In chrome it appends itself to a div element. We tried searching on the div element assuming that jquery/javascript is doing a late manipulation of the element but still cannot find where it is happening.
Is there a watch we can set on an element to see when it is changing or who is manipulating it?

As I said in the comment you can override the class controlin your css file.
.control{
overflow:auto !important;
}

Hmm! Obviously you could step through the javascript that is on your page.
To rule out javascript you could try disabling javascript totally. Or add an inline style with
overflow: auto!important
to the div element

Hard to help with the information provided but what you can do is add overflow: visible !important; to that .control. Check this out in the console and you will see this overrides the inline hidden style
JSFIDDLE

Reddit style 'join' popup

Is reddit's join popup that appears on the page hidden on the page or is it injected via ajax?
How do they do it? (general terms if someone out there knows, I will dig into the source myself but need some guru pointers).

For reddit, its a hidden element. You can use tools like Shadowbox or nyroModal to achieve this kind of effect (since you can adjust the animation)

Its not so much AJAX as it is javascript, and it is generally refered to as a Lightbox or a Dialog

It's there but hidden with CSS, and shown with Javascript. With jquery, you could achieve the similar effect by triggering:
$('#join_div').show();
Try to view the page with CSS disabled and you'll see it's at the bottom of the page. (Optionally, you could try viewing the source.)