Pre 3.8 there was simply side and core for positioning admin dashboard widgets. Now that we are in the 3.8+ world we have 4 columns. I've looked all over but I cannot seem to find anyone with an example on how to position a widget in a specific column.
For example I created a custom widget and have coded it to force itself to the top left position as seen here - http://cl.ly/image/3H1b1G052n2X
Specifically I'm asking how can I move the "Activity Widget" to the top right?
You can disable 2 columns feature, applying this filter in your theme, functions.php
// force one-column dashboard
function shapeSpace_screen_layout_columns($columns) {
$columns['dashboard'] = 1;
return $columns;
}
add_filter('screen_layout_columns', 'shapeSpace_screen_layout_columns');
function shapeSpace_screen_layout_dashboard() { return 1; }
add_filter('get_user_option_screen_layout_dashboard', 'shapeSpace_screen_layout_dashboard');
Source: http://digwp.com/2013/12/bring-back-single-column-dashboard-in-wp-3-8/
Related
I have 4 main components for my React portfolio site called Home, Portfolio, About, Contact. The components are linked in Navigation. If I click on those link, Component appears. But the problem is if I scroll the Portfolio page 50% and click on About. The About page stay automatically scrolled top by 50%. I don't want an automated scroll. Rather I want the component will start from top 0;
I have tried "css-snap-type" but it doesn't work.
How can I solve the problem?
you could solve this using a react component that will scroll the window up everytime you click on a different link.
checkout this documentation is pretty straight forward https://reactrouter.com/web/guides/scroll-restoration
If you are using gatsby it comes with and API called called shouldUpdateScroll you could implement it on the gatsby.browser.js
const transitionDelay= 500
exports.shouldUpdateScroll = ({
routerProps: { location }, //location
getSavedScrollPosition, //last position on the previous page
}) => {
if(location.action === 'PUSH'){
window.setTimeout(()=> window.scrollTo (0,0), transitionDelay)
}
else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
()=> window.scrollTo((savedPosition || [0,0])),
transitionDelay
)
}
return false
}
U need to set window.scrollTo(0, 0) when u click on link so it would start on top of page.
I am using the Twenty Thirteen theme as a base for a custom child theme that I am creating. The client would like only three widgets in the footer and I need to evenly space them. When I put three widgets there is still room on the right for a fourth (I am not using the sidebar widget, which would knock the 4th widget below the top three).
I found this code in the functions.js file:
/**
* Arranges footer widgets vertically.
*/
if ( $.isFunction( $.fn.masonry ) ) {
var columnWidth = body.is( '.sidebar' ) ? 228 : 245;
$( '#secondary .widget-area' ).masonry( {
itemSelector: '.widget',
columnWidth: columnWidth,
gutterWidth: 20,
isRTL: body.is( '.rtl' )
} );
}
} )( jQuery );
It looks like it changes the width but how do I change it to make it only 3 widgets across instead of four?
Thanks,
Matt
The gutterWidth option adds additional spacing between columns, but not on the outer sides of the container. You can alter that value to increase spacing.
However, I think you are going to have to alter other files to properly achieve the task.
I have two QDockWidget's, only one of them is visible at the time, I manage that by toggleViewAction().
What I need to do is that I want the two QDockWidget's to be in the same location, with the same size and docked at the same dockWidgetArea with the same orientation and order relative to other QDockWidgets.
I did most of the that by this code:
void myMainWindow::slotToggleDocks(QAction* action) {
if(action == viewDock1) {
Dock1->setFloating(Dock2->isFloating());
Dock1->resize(Dock2->size());
Dock1->restoreGeometry(Dock2->saveGeometry());
Dock1->move(Dock2->pos());
addDockWidget(dockWidgetArea(Dock2), Dock1);
...
Dock2->hide();
} else if(action == viewDock2) {
Dock2->setFloating(Dock1->isFloating());
Dock2->resize(Dock1->size());
Dock2->restoreGeometry(Dock1->saveGeometry());
Dock2->move(Dock1->pos());
addDockWidget(dockWidgetArea(Dock2), Dock1);
...
Dock1->hide();
}
}
this code make the two have the same location and size and docked to the same area (left, right, ...) but it doesn't guarantee that the Docks will have the same layout with the other QDockWidget's in the same dockWidgetArea.
Meaning if this was the before layout:
Layout before http://holmez.net/qdockwidget/1.png
This is after toggling:
Layout after toggling http://holmez.net/qdockwidget/2.png
This is what I want:
Expected result http://holmez.net/qdockwidget/3.png
I managed to do that by a simple trick, add this line of code:
splitDockWidget(Dock1,Dock2,Qt::Horizontal);
before hiding Dock1, and this line:
splitDockWidget(Dock2,Dock1,Qt::Horizontal);
before hiding Dock2.
This fixed the problem of the arrangement of docked widgets, not sure if this is the best way but it works for me.
What about only using 2 QDockWidgets, but having QStackedWidgets INSIDE of them which you can use to swap views? That's what I'm currently doing, and it works great.
Another advantage is that swapping views is as simple as:
stackedWidget->setCurrentIndex(index);
What about using QTabWidget?
The 2 widgets will have to be in the same Qt::DockWidgetAreas
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})
I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.