Admin LTE theme + Laravel Mini sidebar issue - laravel-5.4

I used Admin LTE theme with Laravel and stucked at one known issue,
there is no solution of that in Admin LTE theme,
IF I toggle side bar its showing miniside bar,
but when i navigate to another page the toggled sidebar again opened,
It should not open because i already minimized it,
Please help,

Your Sidebar is open. So the body doesn't have the class sidebar-collapse.
Once you toggle it, the mini sidebar shows up. So the body has sidebar-collapse.
Now when you navigate to other url the body will not have the class sidebar-collapse, that's why side bar is opened.
Now you need to add the class sidebar-collapse when you navigate to another page.
Trigger the sidebar-toggle and add a variable to localstorage which will have TRUE as its value.
Now when you navigate to another page, fetch the localstorage variable value and add the class to body by checking localstorage variable.
Ex :
$('.sidebar-toggle').on('click',function(){
var cls = $('body').hasClass('sidebar-collapse');
if(cls == true){
localStorage.setItem('collapse',0);
} else {
localStorage.setItem('collapse',1);
}
});
window.onload = function() {
var collapse = localStorage.getItem('collapse');
if(collapse == true){
$('body').addClass('sidebar-collapse');
} else if(collapse == false) {
$('body').removeClass('sidebar-collapse');
}
}
I hope this will help you.

If i correctly remember, you must add in the body a class named "collapsed" (or something similar, check it with an inspector) that manage the behavior of the menu. Adding it, menu will be shown, remove it will hide it. You can modify the internal js library adding a cookie, so you can easily know how the menu should be.

Related

<a> tag goes to new page, but does not go to the top of the new page

I'm working on a gatsby-react project that has multiple pages. On the header & footer there are links to other pages within my project. When I click on the link, the URL changes, the browser loads the new page and renders it normally.
The only problem is that the new page isn't loaded from the top. For example, if I'm currently viewing the bottom of the page and I click a link, then I expect to be taken to the top of the new page. What happens is I am taken to the new page, but I stay at the bottom. This image should explain what I mean.
I'm NOT using GatsbyLinks as they cause problems in the project, I use normal <a> tags for links instead.
Can I add anything to the <a> tag that can force going to the top of the page? If not then is there some other linking component I can use?
Thanks in advance!
The process of scroll restoration is handled automatically by Gatsby, however, using anchor links (<a>) for internal navigation (outside the scope of React) may lead to this kind of issue, since the data of the page it's cached but you are not using internal navigation to manage or restore it.
That said, I would suggest using the useScrollRestoration hook when needed:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
For a more global approach, you can also play with gatsby-browser.js APIs such as onRouteUpdate and shouldUpdateScroll, both triggered in each change of page (navigation):
exports.onRouteUpdate = () => {
if (typeof window !== `undefined`) { window.scrollTo(0, 0)}
}
exports.shouldUpdateScroll = args => {
return false;
};
By default, shouldUpdateScroll gets the last scrolled position, ideally, just changing and returning false it should work for your described scenario.

How do I link to mid-page content that's already inside a mid-page link?

I'm making a page that has 4 in-page tabs on it. To link to those tabs, the URL is
URL/#tab-1-tab; URL/#tab-2-tab etc
Now, in one of the tabs I want to have buttons that link to specific points on a page inside another tab, but not sure if it's actually possible to link to.
I've made the anchors on that page with
<a name="1"></a>
But I can't figure out how to link to them. I tried
URL/#tab-4-tab/#1 and URL/#tab-4-tab#1
Not sure what else to try. The links do work if I go to the tab with the anchors, then erase the tab url bit and just put in the anchor link, so instead of
URL/#tab-4-tab, I type in URL/#1
Then it jumps to the right point.
But that doesn't work if I'm on any other tab or page.
Is it possible to do this somehow?
If your using tabs to switch div CSS properties like display:none / display:block then you will need some jQuery / JavaScript to switch them based of URL no differently then your jQuery that listens for the tabs "onclick" event then shows that relative div.
First step would be to obtain a JavaScript URL reader that listens for variables or hashtag-bookmarks. Here is an example of a variable reader I have used before.
http://jsfiddle.net/googabeast/hhkuj/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
//usage
var myVar = getUrlVars()["tab"];
That would make the URL format slightly different then your above posting, something more like "index.php?tab=2" / "index.php?tab=3" etc...
Next phase would be generate a switch based off the incoming URL variables to properly show the requested div.

assistance with html code for popup window

I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})

Unable to refresh JTabbedPane

I am using JTabbedPane with JPanel to display JTable on one tab and text, dropdown and jbutton on other tab.
First time it is working fine but if i minimize or switch screen to other application and come back to my application it display data correct but with a serious problem with tab change in JTabbedPane. Now tab screen goes to blue and don't display the data.(I hope data is there but it is not repainting or refreshing complete window).
Now with blue screen i do the same procedure and change tab in JTabbedPane it shows correct data.
I used repaint but it doesn't work.
Help needed to refresh window or tab correctly.
It may problem of Browser you are using jdic.dll. Try using any other browser to reload your tabbed pane.
I guess this "issue" is an evergreen. I assume, that most people stumble over this issue possibly when implementing JTabbedPane changes (removing and adding of tabs) in the wrong event-method:
For example, if you want to remove a tab and add a new one in the tabbed pane based on a selection in a JComboBox, you have to put your logic into an 'itemStateChanged'-event of the ItemListener added to this combo-box. If you put your tab-change-logic e.g. into an propertyChangeEvent (PropertyChangeListener), you are doing it all wrong and the timing is always messed up for repainting/refreshing tabbed pane UI elements!
If you use the right event-method, you don't even have to call setVisible, revalidate nor repaint. It will all work out perfectly.
Here's a simple example:
JComboBox<String> c_editor = new javax.swing.JComboBox<String>();
c_editor.setModel(new javax.swing.DefaultComboBoxModel<>(
new String[] { "CSV", "EXCEL", "HTML" }
));
c_editor.addItemListener(new java.awt.event.ItemListener() {
public void itemStateChanged(java.awt.event.ItemEvent evt) {
c_editorItemStateChanged(evt);
}
});
...
protected void c_editorItemStateChanged(ItemEvent evt) {
// get the value selected in the combo box
final String val = c_editor.getSelectedItem().toString();
if (tabbed_pane.getTabCount() > 1) {
// remove the panel which is at position 1
tabbed_pane.removeTabAt(1);
}
if (val.equals("CSV")) {
// add the panel for viewing CSV files
tabbed_pane.addTab("CSV Editor", p_csv);
} else if (val.equals("EXCEL")) {
// add the panel for viewing Excel files
tabbed_pane.addTab("Excel Editor", p_excel);
} else if (val.equals("HTML")) {
// add the panel for viewing HTML files
tabbed_pane.addTab("HTML Editor", p_html);
}
}
That's all, nothing else necessary - the UI will update itself. PS: This issue has nothing to do with browsers as suggested by the 'favoured' answer in this thread, it's all about Java Swing GUI's.

How to make tabs on the web page?

How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs