I have a little menu that should expand to reveal the HTML below, which is hidden at present.
Following jQuery:
$('.mobileMenu').click(function(e) {
$(this).toggleClass('arrowDown').next().slideToggle('slow');
});
This piece of code works great on this page (click the "hide" feature on the left col)
However I need to utilise the same feature with my menu for "mobile width".
If you resize your browser down to 320 or so and go here you'll see the menu is just +menu (bit smashy at the mo but working). Click it, and the menu does expand to show the links, but they are hanging over the main content area.
All divs in the navigation div are display:block but they still don't push the main div down. I want the entire green navigation div to expand with it's content.
You have a fixed height on the navigation div of 60px and menuWrapper at 30px. You need to make this relative.
change your css from
#rightCol {
width: 72.5%;
float:right;
}
#leftCol
{
width: 25%;
float:left;
}
to
#rightCol {
width: 72.5%;
display:inline-block;
}
#leftCol
{
width: 25%;
display:inline-block;
}
it should work. I have tested this on chrome
Related
I'm getting started working with Electron to build a desktop app. How can I customize the window title bar (which contains the close, minimize, and full screen buttons) to add custom views? Safari is an example that I am thinking of:
Your only option in Electron would be to create a frameless (aka borderless) window, and then create a "fake" title bar with CSS, including any UI elements you need.
Electron/webkit provides CSS properties that allows you to make any element draggable, like a titlebar:
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
The first, and cross-platform option is to create a frameless window. The second is macOS only, and allows you to hide the title bar, but retain the window controls, allowing for the addition of custom buttons.
Example:
const { BrowserWindow } = require('electron')
// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()
Then you could use the css properties -webkit-user-select and -webkit-app-region to specify the drag zone.
Hide the default titlebar by creating a frameless window:
// main.js
window = new BrowserWindow({
titlebarStyle: 'hidden',
trafficLightPosition: {
x: 15,
y: 13, // macOS traffic lights seem to be 14px in diameter. If you want them vertically centered, set this to `titlebar_height / 2 - 7`.
},
})
Then create your own makeshift titlebar using HTML + CSS:
<!-- index.html -->
<body>
<header class="titlebar"></header>
...
</body>
/* styles.css */
.titlebar {
background-color: #f0f0f0;
height: 40px;
border-bottom: 1px solid #d0d0d0;
-webkit-app-region: drag; /* Allow user to drag the window using this titlebar */
-webkit-user-select: none; /* Prevent user from selecting things */
user-select: none;
}
The result so far:
Notice that the titlebar appears under the scrollbar. It even moves when the user scrolls. We need to separate it from the scrollable content by wrapping everything below the titlebar in a <div class="main-content"> and then adding these styles:
.main-content {
height: calc(100vh - 40px); /* Force the content to take up the viewport height minus the titlebar height */
overflow: auto; /* Allow the main content to be scrollable */
}
body {
overflow: hidden; /* Make the HTML body be non-scrollable */
}
Final result:
Now you can add whatever HTML content you want up there.
We're looking at whether we can specify the container in which the menu will slide in over as currently it slides over the entire page (zposition set to "front") but we'd like to specify a container within the page which it would slide over. Is this possible?
Thanks.
Received this answer from Fred (mmenu) which worked:
.mm-menu {
top: 91px !important;
height: calc( 100% - 91px ) !important;
width:320px !important;
}
This lets the menu sit off the top which is just what we wanted.
how can I make the position of the popup button in the RadCalendar control (http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx) to be on the other side, eg:
I'm not using Rad Telerik, so I'm not sure if there are other ways to do it, but it's possible to make it look like what you are asking by working with CSS.
I've made some tests on the demo page, and this is a CSS that should help you.
div.RadPicker table.rcSingle .rcInputCell ~ td {
position: relative;
right: 113px;
display: block;
}
div.RadPicker table.rcSingle .rcInputCell .RadInput {
position: relative;
left: 42px;
}
How to disable Street View dragging / swiping? This is important especially on mobile devices, where the both the Street View and the whole web page are scrolled by swiping on the screen with a finger. In fact if you try to scroll the page touching with finger a point where you have a Street view, you will scroll the Street view instead of the page.
If the Street view is full-width this may be an usability issue.
Google API does not provide this option, but I managed it to work by placing an invisible div on top of the Street view, preventing the underlying Street View receiving evented. I created a toggle button "Drag Street View / Drag web page). The button can dynamically show/hide Street view controls according to the enabled/disabled state of the Street View.
Example here: http://www.genovaperte.it/item/antico-forno-ursida/
Please see it from a mobile touch device because the toggle button is needed and shown, in my context, only for mobile touch devices. In desktop devices Street View is Always navigable by default because there aren't issues with this.
Outline of the code (here using jQuery and Modernizr):
CSS:
.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px #firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */
HTML:
<div id="directory-main-bar">
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ...
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true,
</div>
JS:
function toggleStreetViewControls(state) {
mapDiv = $("#directory-main-bar");
if(!state) {
$('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */
mapDiv.addClass('hide-gmnoprint');
}
else {
$('.prevent-dragging').remove();
mapDiv.removeClass('hide-gmnoprint');
}
}
if (Modernizr.touch){
var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv);
$('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv);
mapDiv.addClass('hide-gmnoprint');
}
swDraggableButton.click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'});
toggleStreetViewControls(false);
} else {
$(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'});
toggleStreetViewControls(true);
}
});
}
I would like to have in Wordpress the normal text width 660px and the images between text wider than the text (max-width:1000px).
How can i handle that?
You could give images negative left and right margins. In order to work, though, they shouldn't be max-width, but just width:
.container {
width: 660px;
}
img {
width: 1000px;
margin-left: -170px;
margin-right: -170px;
}
Another alternative, use a grid system and great a new .row or whatever your grid system calls it for each image, with columns that are wider than the one used for the text.