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
Related
I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
Seems like to me there should be an option for that but i can't seem to find it.
This question was asked many times but only workarounds were answered and that's not what i'm looking for.
I am changing my css incode and i want to load the original css back instead of coding it myself, how can that be achived?
I don't wanna reload the entire file, just load some div or class css.
See this post for a solution.
Based on that you can do something like this:
$("#fix").click(function(e) {
e.preventDefault();
$("div").removeAttr("style");
});
Note: This assumes you are using JQuery to change the styles in the first place
Here is a working example
if you're using jQuery apply
$(selector).removeAttr('style')
to your elements
I want to load the original css back instead of coding it myself
This is not necessary. You are trying to reload a resource that should just continue to exist. Once it's loaded, you don't need to load it again. If you need to override a style, apply a class to it. To revert to original, remove the class. That's how cascading style sheets work.
If there is a particular reason the css needs to be dynamic, you can try loading css into the Document via the DOM (document.createElement("style") etc.), but support for this is a bit sketchy I believe.
if you want to reset the WHOLE style and not only divs' you'd better use the all selector
$('*').removeAttr('style');
I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.
Check this fiddle. When you click on the button, it covers up the UI.
Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
I did it like this.
var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);
Check this fiddle for a clear idea.
But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?
Thank you.
P.S - I need to do this without using jQuery or the library blockUI.
You are trying to append stuff to head; append it to body instead.
http://jsfiddle.net/dAKQX/
Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.
you need to append your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/
or like this in your code:
document.body.appendChild(blockUI);
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.)