It's the first time I post here, even if I've been using this site for quite a long time now. Here is my issue : I'm using jquery-steps to create a validation/checkout form and I'd like to disable tab navigation, which allows users to jump between steps freely (from step 1 to step 3 for example). The tabs have to remain visible.
I realize that the solution might be quite simple, but I'm really stuck for now :/ ...
Thanks for your help, please excuse any english mistake !
Ok, after some extended research, I managed to find an alternative solution to my problem. I noticed that all headers are stored inside a ".steps" div. Thus, I added a new CSS property :
.steps {
pointer-events: none;
}
which disables all mouse actions for that particular class. I know it's not the cleanest solution possible but hey, it works for me :) !
(thx for your help rafael)
Have you already checked out the examples of jquery-steps.com? If not, check out the advanced form example here!
See also this blog article which describes How to create a Form Wizard using jQuery Steps in detail.
Ran into the same problem today and managed to fix it by adding disabled class to the li elements inside the div.steps. Using pointer-events CSS was not a solution for me as had to disable certain step navigations at certain points. Although this approach might break your CSS i.e. if you have disabled and done classes and disabled styles are overwriting the done ones, nothing a bit of tweaking won't fix though.
Related
first of all, I couldn't find a way to phrase my problem in one sentence, so I'll try to be more explicit in the post.
So I've been developing on VS, essentially doing web development with Razor MVC, for almost a year now and there's something that has been bugging me. On most of my projects I use a unique stylesheet in which I put all of my rules. My problem is, if I reload the page, the CSS won't apply and I have to make a change to my CSS and save it for the rest of the sheet to works. I also noticed that if I leave VS, the CSS now apply permanently. So it's not really a big issue that won't let me work properly, but still it's a bit boring to have to change a value and then hit ctrl+z each time I reload the page.
So I wanted to know if anyone had had the same problem, and if yes what was the solution; and if no, I'll listen to any idea.
Thanks for your time and have a nice day :)
So how can I make a slide button like in the picture below using ionic framework ?
Awesome question!!
In CSS or the web community in general it is called a Toggle button. According to ionic's official website, what you call it, will not get the results you are looking for.
Here is the official code snippet:
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
And here is the Official Codepen that goes with it
And if you have anymore of these related questions you should check out the official docs!
Happy developing!
Edit:
What you are wanting I think isn't completely possible with ionic, if I find a better solution I will share, but I seem to be stumped now :/
Edit2: I am starting to conclude as bad as it seems, that this isn't but only common to e.g. IOS, but not finding it in any examples, just standard toggle buttons. The animation is done as though it was a checkbox. So essentially you are checking it. It just looks different. You may have to engineer this yourself. Again I will add a better solution if I find one, but as for now, I don't think there is a way to get it exactly as you wish.
I'm working on a web app for folks with brain injuries. I'd like to make the cursor in the textbox more noticeable than a think blinking line.
Is there a way to make it larger?
(Searched on Google and SO. No luck)
This isn't naively possible/reliable on all browsers as it's controlled by the OS. I would suggest a help doc of sorts that links your users to modify their system so that not only yours, but all websites, are easier for them to navigate.
see: http://etc.usf.edu/techease/4all/vision/how-do-i-change-the-cursor-options-in-windows-7/#html
Here is a demo of how to do it from another post (Styling text input caret)
Demo: http://shachi.prophp.org/demo.html
I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)
After spending hours and hours I turned out to have this form and I just feel hopeless now...I can't figure out what to do or why the spaces are so messed-up and just lost...
http://jsfiddle.net/C7u9P/2/
I posted picture of what I am trying to make it look like and how it currently looks.... T_T
Any help on what to do or whats wrong is appreciated.
The Awesome Form:
My form:
If you want to recreate something it is better to start completely over at times. The generated code from java was certainly too complex to try and convert.
So heres a setup you could start out with:
http://jsfiddle.net/MwnSn/11/
I'll let you do the details yourself, the icons shouldn't be too hard and styling the inputs is possible too ofcourse. Be aware that I made use of the style normalization done by jsfiddle, I recommend using that stylesheet in your own work too. Only really tested in Chrome so you might want to check and debug IE, and it will probably break down when limited in width. Using the proper clearfix would also improve it a little. (overflow:auto to clear floats in that div.)
No tables.