jQuery Steps right align - javascript

I am working on an Arabic website and I am using jquery steps wizard. my problem is that I am unable to move/ align steps to the right side of the page. I am able to move using CSS but the page won't get responsive anymore.
$("#wizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "none",
stepsOrientation: "vertical",
titleTemplate: '<span class="number">#index#</span>',
The below image is attached for the reference
Help me out with this problem.

Related

Can fixedColumns be used with paging and without scrolling vertically?

I have a table with paging.
I'm trying to fix certain columns, but don't want to get rid of the paging, I simply want to add horizontal scrolling, but not vertical.
Can this be done with the FixedColumns plugin?
I've tried specifying the options like this:
table.dataTable({
autoWidth: false,
ajax: "/Source",
deferRender: true,
//fixed Column
scrollX: true,
fixedColumns: {
leftcolumns:1
}
//
}
fix on your browser first using inspect element by changing CSS and then the final change in coding by writing *!Important** on CSS where you change. then you successfully set according to your wish.
simple replace dataTable CSS with custom CSS by writing !important.

jQuery Accordion expand first enabled panel

I am using a jQuery Accordion but I have a small problem: Based on some conditions, my accordion could have the first enabled H3 to be the second or third one. The first ones I am disabling by adding this class to them
"ui-state-disabled".
My accordion looks like this:
$("#accordion").accordion({
active: true,
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
Is there a way so that the accordion will only expand the first enabled section? Right now, if I put active: 0 and the first element is disabled, it will expand it nonetheless.
Any suggestions ?
This may not be the most elegant of solutions, but it'll work. You need to find the index of the first H3 inside the #accordion element that does not have the class .ui-state-disabled... so here's that.
You may also realize this already, but you'll want to remove the ability to click to open disabled sections, so I threw that in.
$("#accordion").accordion({
active: $('h3:not(.ui-state-disabled):first').index('#accordion h3'),
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
$(".ui-state-disabled").unbind("click");
Demo on Codepen
edited to add back in your icons: icons

jQuery Accordion disabled section icon

I am using a jQuery accordion and with some help I managed to figure out most of my issues but now I have one that I could not figure out.
My accordion looks like this
$("#accordion").accordion({
active: true,
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
and I have 2 icons defined for opened and closed sections.
I also have in my accordion some disabled sections that are closed and cannot be expanded. As far as I can see it's either all icons for all sections or none at all.
Is there any way of removing the icon for just the disabled sections ?

sidr menu scroll is working fine in desktop but dont on mobile

Im following the sidr documentation because Im trying to do a slider responsive menu.
Im importing the light css that the creator of this provided:
<link rel="stylesheet" href="jquery.sidr.light.css" type="text/css" />
And then I have my html, and the script to initialize the plugin.
And its working fine on destktop when I click in the link to open the menu the menu opens with my menu and submenu items, and with a scroll vertical bar because I have a menu with many items.
But on mobile, the scroll its not working, I have a horizontal bar and not vertical and when I scroll my menu dont goes down, I only move my other html content.
Somebody thery already tried to use this script and now how I can solve this situation?
This is my jQuery to start the script:
$(document).ready(function() {
$('#simple-menu').sidr({
name: 'sidr',
speed: 200,
side: 'left',
source: null,
renaming: true,
body: 'body'
});
});

draggable / moveable <div> horizontally

How can I make a div that is draggable / moveable horizontally, but not vertically?
I would prefer if this could be done without JQuery UI. JQuery is fine. Or vanilla JS.
Creating such a behavior yourself would be quite a bit of work. I would recommend using jquery ui :
http://jsfiddle.net/basarat/f7nNf/1/
Its a single line of code:
$( "#draggable" ).draggable({ axis: "x" });
And you don't event need to download the complete jquery ui. You can do a custom build with only draggable here : http://jqueryui.com/download/
Read more about draggable here: http://jqueryui.com/draggable/#constrain-movement

Categories