I want to create a sliding effect as seen in http://demos.flesler.com/jquery/scrollTo/ but with plain html and css. is that possible? if so, how?
If it is html5 and css3, no problem (I won't use IE (-: )
thanks in advance!
See this demo:
http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
And the explanation here:
http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
It shows how to set up a CSS3 scrollTo transition, however, only works with the link anchors - not the scrollbar - which is a deal-breaker for me.
I think you can use the psuedo :target to achieve this, quick Google search fetched this example - it gives a detailed write up on how it works on this page. I'm sure Google will bring up other results and more examples to get it working how you want it :)
Of course only certain new browsers will understand :target but if this doesn't bother you then you have nothing to worry about.
Related
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.
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 am using the HTML and CSS of a Pure CSS accordion that works perfectly in the demo.
Demo here: http://codepen.io/fivera/pen/yboeE
But I can't get it to work on my WordPress website. See here: http://webdesigncustomizations.com/accordion-portfolio.
I checked the rest of the CSS on my site for compatibility issues and I couldn't find anything that was causing the issue. Could anyone pinpoint the issue?
Thank you!
Clare
The problem is not CSS, unless other CSS rules overide the ones in the file. Have you checked?
The problem is most likely in your theme, either your header and/or sidebar. It could be something really simple, finding the error is the hard part. Try validating your HTML.
If you had posted the entire thing I might have been able to help you more.
As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there any browser compatible way of doing this (IE 6+ proof)?
I've made a very simple HTML+CSS site for a conference, and I would like to use JS only if necessary. So, I'm just asking if I can do it sticking only to HMTL/CSS, in a compatible way, of course.
The few solutions I've found are old or incompatible with some browser versions.
IE6-proof pure CSS solution?
NO
[Leave the dead rest in their graves, don't try to make them run a marathon. That's what you're doing when you're asking for IE6 to do things like this.]
IE7/8?
Yes, there is one solution (the principle is the same one used in this older demo of mine), but it is not persistent (meaning that if you click anywhere else on the page, your expanded content will collapse) and it behaves a bit weird in IE7 (meaning that you have to hover off the clicked element after you click it in order to see your content expanding).
IE9+ and the other browsers?
YES! Also persistent. Same principle as the one I used here.
JavaScript/ jQuery method?
Yes! See this: a jQuery version of the same demo.
You can do simple Hover dropdown menus with just HTML & CSS which are supported cross browser:
http://jsfiddle.net/fkS2z/
You can improve on this with fades or slidedowns with CSS transitions which are not supported in lower version of IE:
http://jsfiddle.net/N9fDy/1/
Not so much with clicking though.
I know this is an extremely simple question... but I do not know the name of the element I am looking for so I can not research it.
I am looking to add one of those up/down arrow buttons that allows you to increment a textbox.
If you can wait for HTML5, you could have used input type="number" for this. You can find here a link to a live example (works in browsers supporting HTML5 only though, currently that's only Opera).
But until then you'll need to look around for a Javascript library using the keyword "spinner".
I think what you're talking about is a Number Spinner/UI Spinner.
You'll need javascript in order to do something like this. Here is a jQuery example that you might find useful.