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.)
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';
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
In GitHub, I cannot stand how the side menu is located on the right side when you are in a repository. It drives me nuts, so I want to script something that will change the float:right property on the side menu to float:left.
A buddy of mine suggested I write a chrome extension for this. Before I look into that, I wanted to get feedback on what options I have to accomplish this.
You could either use Greasemonkey (named Tampermonkey in Chrome) to add user scripts, or if the CSS element has an unique path to identify it, you can use Stylish to overwrite CSS properties.
I recommend the latter. It is easy and will certainly work.
I have made a basic tabbar view app in xcode but I need it to be a webapp as I will be viewing the data from a server so do not need/ want it on the app store.
I've looked at some other questions with this kind of topic and nothing is relevant. Also I've done plenty of googling and looking into other code plus using things like cubiq.org's slide-in menu.
I really want that tabbar look. I've tried to do this in HTML with images as buttons and using frames but (I think) because I'm using the JS code to stop the UIview from moving (to look more native) it seems that the buttons open the link in a new page, or switch to Safari, rather then open them in the same frame as they would in a regular browser.
Alternatively, does anyone know of a way I can implement a taskbar in a webapp?
Regards,
Eric.
Have you seen JQuery Mobile !?
It's awesome... but still in Beta.
They have precisely the toolbar you're looking for: JQuery Mobile Navbar
Without code, it's hard to pinpoint your problem exactly, but you should not be doing:
Text of Button
Because the above code will actually load a different page. Rather, you want:
<div class="some_button_type" onclick="doSomeAction()"><!-- ... --></div>
And that "doSomeAction()" function should use DOM manipulation to transform the current page to look like whatever you want it to look like (rather than navigating to some separate page).
P.S. I'm assuming you have some CSS styling based on class type, and you might want content in the DIV (for example, for the text of the button). I've also omitted some attributes (e.g. "role") that you want.
My Problem in a subject. For Example: how can i dev my own Alert Pop-ups
I think, its possible with overlays, but i dont know how.
My suggestion would be to use a combination of javascript and CSS. The key to the pop-up will be using a z-index in the CSS that puts it in front of the rest of the page content.
The javascript would just be used to activate and deactivate this section. You could also set up some other CSS classes to darken the rest of the page content, and apply those classes in the same javascript function.
What about ol'good?
<script type="text/javascript">
alert("Hello, I'm a pop-up!");
</script>
Eventually, you could use jQuery UI Dialog module: http://jqueryui.com/demos/dialog/
Edit: I think you should also say if you are interested in JavaSctipt OR XUL based solution.
Edit 2:
If you want to use XUL, check out this links:
https://developer.mozilla.org/en/XUL_Overlays
https://developer.mozilla.org/en/Building_an_Extension
http://www.gmacker.com/web/content/tutorial/firefox/firefoxtutorial.htm
I found them very useful when I was working on my own extensions.
Truly, all you need is a:
<box id="myBox"> content here </box>
plus some logic to open it.
My suggestion would be to use BlockUI , its light-weight and very easy to use.