I am using the Leaflet plugin Sidebar v2 for a resource map I've created. However, even when minimized it permanently pushes the zoombox controls over to the position it's in when the sidebar is activated.
How can I get the zoombox to push right back to it's normal position when the sidebar is minimized?
The plugin is changing css for .leaflet-left (https://github.com/Turbo87/sidebar-v2/blob/gh-pages/scss/leaflet-sidebar.scss#L31)
When sidebar is minimized, you have to set .leaflet-left to its initial value
.leaflet-left {
left: 0;
}
How you will do that depends on your implementation. You could show a JSFiddle example of how code looks like at the moment
Related
I have a very simple HTML web page that has one large image on it with several text boxes (drawn in the image) that I would like to have a user click on and a popup window open up with more text. Currently, I'm using hotspots and the behaviors tag in Dreamweaver to call a pop-up window for each box on the image.
Q1 - How do I hide the scrollbars on the popup window in HTML?
Q2 - Is there a better way to do this with little coding like a modal popup? I have lots of these popups with different text in each I will need.
Thank you in advance!
To hide the scroll bar there is some CSS you can use, attached below. And for making popups, I have never tried hotspot and behavior tag however I just created one a few days ago using position absolute and using display none and block. Basically, you have to create the whole design of your popup anywhere in the code and you then set it to display: none, and whatever click you have for it to pop up, you add a little javascript function to it which will change the properties of that popup to display: block or anything else that you are using.
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
I am developing a design that is supposed to become responsive in the end. It also is supposed to look clean and simple. But while developing, I realized something: When I open the page on my Mac - Chrome - it displays fine. But upon resizing it, or opening the same page on a smaller display device, the bottom is cut off...
I have used the web inspector, changed everything that I saw to something else but couldn'T figure out where the problem is. So I really need help here, as I got lost.
The basic idea:
http://tympanus.net/Blueprints/SlidePushMenus/
The demo site:
http://dev.dragonsinn.tk
The code is hosted on a Gitlab repo on my server; here:
http://git.ingwie.me/ingwie/bird3/blob/master/cdn/themes/dragonsinn/css/main.ws.php
The problem is, that in order to simplify my CSS coding, I used my self-made CSS framework, WingStyle ( http://github.com/IngwiePhoenix/WingStyle ). It is meant to look like CSS, but offer better options for cross-browser compatiblity. So don'T get scared of the not-quite-CSS syntax :)
To reproduce the problem:
Open the site mentioned above, and resize your window. Then, open the right panel by hitting the pac-man icon (top right) and try to scroll down. You should not be able to see the version information. Resize the window, and at the bottom of the right panel, you may see a version string (BIRD#3.0.0-dev...).
How can I it possible, that it actually does scroll?
Without studying your code to deeply I'd suggest you change your panel css as follows:
.panel-side {
width: 240px;
/* height: 100%; replaced with bottom: 0*/
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
}
This will give you a 100% percent height container and all overflowing content will be scrollable.
i made a sidebar template in ASP .NET. when I click on button X on the left top corner, the sidebar on the left appear. The sidebar is made in the Master page. I used this master page in other pages, I've made a div on a page . The problem is its appearing over the sidebar not under the sidebar. Any how i can get it under the sidebar ?
here's link to the image of the template
http://ge.tt/7bGLHnu1/v/0?c
It's hard to help without any code.
Have you tried to set different values of z-index?
it could look like this:
#div{ z-index: 100;}
I am using Bootstrap 3 for developing a website. I need to create a navbar which should shrink as the user scrolls down.
Something like - http://osticket.com
How can I create this? I am using Bootstrap's fixed-top example as a starting point - http://getbootstrap.com/examples/navbar-fixed-top/
I need to put a logo onto the left instead of the text and it should reduce its size as the user scrolls down.
Good example of shrinking when scrolling has been documented here: http://www.bootply.com/109943
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
You can simply do it the same way they did it. If you look at the page source, they are simply adding a class to the body element when the page is scrolled. This class is overwriting the display format of the header.
To detect if the page has been scrolled down, they are using a javascript function with events listeners. You can look at the function source code here:
http://osticket.com/sites/all/themes/Porto/js/sticky.js
You have to add java-script for this function. CSS classes have to be updated accordingly to get the shrink on scroll affect. Complete example is shown on this link. http://www.bootply.com/109943#
So I have a sticky header implemented using CSS and a long HTML page. At the bottom of the page is a <div> element containing a Google Map.
When I scroll down the page, all content moves behind the sticky header as you'd expect, except for the Google Map, which moves on top of it.
What do I have to do to get the Google Map to move behind the sticky header when scrolling in the same way that the other elements do?
Google Map container z-index: -1;
Header container z-index: 999;
be sure to add position to both.