Is there a way (html/css only - without using extra javascript) to add a little 'pull-tab' button that triggers a vanilla Bootstrap 5 offcanvas side menu?
I want to use the standard offcanvas demo like here (https://getbootstrap.com/docs/5.2/components/offcanvas/#live-demo) but with a little pulltab like the screenshot below. The pulltab button should also slide out along with the offcanvas element.
Thanks for any help!
Related
I am trying to make a toggle box similar to the one you use in the Angular Material docs when you want to view the source code. You press the <> button on the menu bar and the panel slides open underneath revealing the html. For example, this page has one: https://material.angularjs.org/latest/demo/button
I can't seem to find it anywhere in the docs and I am not sure what the element is called or how to use it.
Is there a way to mimic the function of Mozilla Firefox tab function to jQuery Tabs that, when there are multiple of tabs, it adds a next button to view next tab after the last displayed tab.
I want to add this next button(encircled), to the jQuery tabs UI functionality. Also, if possible, to add the animation on the menu tab to move tabs as next/previous button is clicked, like on the said browser.
Thanks!
This could help. You will need custom logic.
This CSS trick can also help out. You can tweak the logic for the placement of the next button and you are good to go.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
Im looking to extend the jquery tabs to add next and previous buttons - which i have done using the show event. The problem is that its a big chunk of code added to that event for each page that needs tabs and these buttons. How i go about making it a reusable component?
David
Write a jquery plugin to wire your tabs up by convention. Here's a tutorial: http://docs.jquery.com/Plugins/Authoring
Decorate your tab list with something like , then have your plugin pick up on ul's with class "scrollable". Write all your logic in there. You shouldn't need to call any function explicitly for each page.
I have an Asp.NET website being written in C#. There is a DataGrid () that has three columns of buttons (). I an using jQuery UI to redesign site and I wanted to style the buttons in this grid. After finding no way to do it with HTML/ASP markup, I decided to use a jQuery selector to set the style. This works to style the buttons, but in IE 8, when I hover over a button, the rest of the buttons disappear and they don't come back until I refresh the page. My javascript looks like this:
$('input[type~="submit"]').button ();
$('input[type~="submit"]').css ('font-size', '10px');
Any help would be greatly appreciated.
The issue was my lack of a DOCTYPE declaration. Making it strict fixed the issue.