use custom border - javascript

is there any way to use custom border by css or can make by JavaScript or jquery.
i want to use a different style of border.
like we use
border-style:dashed;

with CSS3 you can use border-image, which is what you are looking for. for more information click here - but note, that this is only supported by very few good browsers (firefox, safari - maybe opera - but no IE (until some day IE9 comes...)).
EDIT:
if you could give some more information how the border should look like, we could try to do some cross-browser-solution - but the best way is to use border-image... and some not-too-ugly-standard-border-fallback for that dumb piece of software called "IE".

CSS3 can do this, but IE won't support it until IE9.
Check out this link: CSS3 border images.

Related

OpenLayers - Detect Switch between full screen, regular screen

I have been searching but have not come to an answer.
Is there a way to detect the event which OpenLayers enters FullScreen/exits FullScreen? In short, i need to toggle classes of some divs. I tried adding events to the buttons, but then it doesn't work if they press escape instead.
Thanks.
The comment suggesting using 'screenfull' is a good option for now. screenfull is just a wrapper that smooths out the cross browser implementation issues of the fairly new 'Fullscreen API'. Until the browsers have fully implemented the standards for these events, that little wrapper is a good way forward.
If you are just wanting to style things differently, there is a CSS pseudo selector for that - :fullscreen. No JavaScript required! You can read the documentation for it on MDN and there is also a great example. Take special note of the need for the vendor prefixes and the fact that some browsers say full-screen rather than the standard fullscreen. The various mix of selectors you'll need seem to currently be:
:-moz-full-screen - Gecko based browsers
:-ms-fullscreen - IE/Edge
:-webkit-full-screen - WebKit based browsers
:fullscreen - Standards compliant browsers

How can we make horizontal scrollbar?

I need to add horizontal scrollbar. It should have same interface for all browsers and compatible with android, windows, tablets etc.
Customize the scrollbar and make it cross-browser it's still complicated with full CSS.
Webkit-based browser make the customisation possible with CSS only as you do. But your snippet doesn't work even on Firefox, for example.
Maybe you should have a look to some JS plugins, in particular this one what I had to use in the past.
Demo
Don't be afraid with the theme, you can create yours. You'll find a tutorial to do it here.
Hope this helped you, even if it's not a full-CSS solution but this is the only way I know to deal with stylised scrollbar.

Applying CSS3 'Opacity' Property

I'm working on a site where I've created a simple CSS3 hover effect, where if a link is hovered, it changes the opacity and looks like a rollover effect. It seems to be working perfectly on all browsers (even older ones, such as Firefox 2). Just wanted some input if this is a problem and I should consider javascript instead? Or is using CSS a good (semantically correct) way of going about a rollover?
Generally, if an effect can be achieved using CSS alone, it's usually better to use CSS then to use JavaScript to achieve it.
Sure, you can use JavaScript and/or libraries like jQuery, but why? If the browser is capable of doing it natively, not only will it work better, it will look better and smoother.
Generally, people using newer browsers get benefits from the new technology.
People who do not update their systems tend to not care about how things look, so as long as the site is functional and the effect is not very important, I'd say don't bother to make all browsers behave exactly the same. It's a waste of time and effort.
For anchor elements, the :hover pseudo-class is widely supported, and is a good way to go. I believe the only in-use browser that doesn't support it is IE 6. The opacity property is less widely supported, so your effect may not look the way you want in some browsers. If you need to use the :hover pseudoclass on elements other than a, I think you'll lose IE 7 as well.
See http://www.w3schools.com/css/css_pseudo_classes.asp for some background information on :hover and other pseudo-classes.

standard feedback button in many sites?

I noticed that many website have a nice 'feedback' button in their page.
It usually appear on the left side and it is displayed vertically 'f e e d b a c k' .
see http://www.protectedplanet.net/ for an example.
I would like to know (Because I could not figure that out) if this is achieved just by a css transformation , javascript
(and if so how to do it) or if it just a gif/jpg ?
Thanks
p.s.
Rather than guessing can people explain how exactly it works.
For example if people says it's an image where is it ?
It usually is a background image (for compatibility with older browsers). Some text is also present in the markup, but positioned outside the view-port.
The site you supplied as example uses an image and the feedback functionality is a widget:
a#uservoice-feedback-tab {
background-color: #FF6600;
background-image: url("http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png");
}
It's an image, because only the newest browsers support CSS 2D transforms. Although in theory, you could use 2D transforms and add support for IE8- by using the proprietary DXImage filters. But then, you couldn't get support for other older browsers without equivalent support (Safari 2, Firefox 2.0, Opera 9, etc.).

IE6 Hover Issue

The CSS :hover doesn't work in IE6 for elements that are not links. Is there a workaround? e.g. how do I apply the :hover to a div?
There's whatever:hover. I've never used it myself but from what I hear, it works well.
Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.
You can use the famous IE7.js from Dean Edwards, which has the nice advantage, that you can use the :hover selector in your CSS.
Apart from that, I doubt that you can achieve it with CSS alone. IE can handle JS in CSS files via expression(), but you can't get to an expression to handle hovering without a selector handling hovering, if you catch my drift.
Then, finally, a short jQuery solution:
$(document).ready(function () {
$('div').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
Then you can use this in your stylesheet:
div:hover, div.hover { ... }
If you only need for paticulars div
and you are not using jquery then go
for suckerfis js as #futta
suggested.http://www.htmldog.com/articles/suckerfish/
If you are planning to use Hover on more tags in future and don't want to edit every time js for this the go for Whatever.htc in for IE6. as #Pekka suggested.
Suckerfish vs. .htc
IIIIN the blue corner we have
Suckerfish, the original lightweight,
accessible, cross-browser,
standards-compliant :hover mimic.
IIIIN the red corner we have '.htc' -
the JavaScript files accessed via CSS
to mimic :hover.
Ding ding!
And Suckerfish instantly lands a heavy
blow on .htc's validity - .htc simply
isn't standards compliant CSS.
Oooo... .htc sneaks in a crafty jab
without the need for additional
selectors...
Suckerfish bounces around the ring.
He's much lighter weight than his
opponent.
And OH! The IE 5.0 uppercut! That's
something that .htc just doesn't have
the skill to do, whereas Suckerfish
can work IE 5.0 seamlessly.
.htc is dazed! And the contest is
over! Suckerfish wins on points! TKO!
IF you want to get benefit for other things (other than Hover) also in
IE then go for IE7.js as #Boldewyn suggested
And If you are already using jquery
and want to use hover in a limited
way then go for This way :
How to enable hover on a div for IE6 using jquery in minmal code?
NO pure and valid CSS solution available for this in IE6.
One Non- valid CSS expression solution is available
but i would not not advise to use
this because it's slow
Solution: http://www.visibilityinherit.com/code/ie6-hover-expression.php
suckerfish and it's offspring provde great lightweight alternatives for this purpose too.

Categories