By adding :
.scroll {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
I can select text on desktop browsers except on IE.
I figure out that when I comment my import :
//require('ionic-npm/js/ionic');
On IE I can select text but I need ionic so I can't comment that line. Also I don't what to touch to ionic.js.
Do you have any idea?
I found an answer here:
forum.ionicframework: How to make text selectable?
Link: Original forum Post
Are you referring to using this technique on mobile or desktop?
On mobile it still seems to be working for me, but If it isn't working for you on desktop, that might be because it doesn't work if the user can use their mouse to click-and-drag to scroll the page. To disable this type of scrolling you can either enable overflow-scroll on your content:
<ion-content overflow-scroll="true">
Or you can disable the mouse click-and-drag-to-scroll events by further changing ionic.js like so...
Add 'return;' to the beginning of this mouseDown function:
self.mouseDown = function(e) {
if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) {
return;
}
self.doTouchStart(getEventTouches(e), e.timeStamp);
if( !ionic.tap.isTextInput(e.target) ) {
e.preventDefault();
}
mousedown = true;
};
So that it looks like this:
self.mouseDown = function(e) {
return; // <--- This disables all mouseDown events from scrolling the page
if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) {
return;
}
self.doTouchStart(getEventTouches(e), e.timeStamp);
if( !ionic.tap.isTextInput(e.target) ) {
e.preventDefault();
}
mousedown = true;
};
This change makes it so you can still use the ionic scroll features with your mouse wheel, but disables mouse click-and-drag scrolling so that you can use your mouse to select text.
Related
i am working on this Wordpress website and as you can see is a one scroll landing page. Every section as an id and this class id is connected to the navigation points like this
Example:
http://ergon.nowcommu.myhostpoint.ch/home/#idee
What i need is to highlight the active navigation point when you scroll with the mouse on the sections and when you click on the navigation on the relative link.
How can i do it?
Your website has already been built with functionality that changes the class of the menu item once it's content/counterpart is in the viewport of the end user.
If you inspect the element, you will notice that the a tags in your menu receive a class .mPS2id-highlight when their content counterparts are in view.
Thusly, you can simply add a CSS rule to achieve your goal.
I've tested the rule below in firebug on your website and it seems to work fine (the !important was necessary):
.mPS2id-highlight {
color: #b51339 !important;
}
If you would like to keep your border functionality, you can use the following rules instead:
.cssmenu > ul.menu > li:hover {
border-bottom: 0 solid;
}
.mPS2id-highlight {
border-color: #b51339 !important;
color: #b51339 !important;
}
You need declare the highlight with javascript particularly you do with jquery in custom code de your wordpress with something like this:
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
also you look at the console of the browser because it have an error in your page
Want to apply HTML 5 fullscreen APi to background image of div
<div class="bgimg" style="background-image:url('img/home-1.jpg')" />
<img src="img/fullscreen.png" id="fullscreen-btn">
</div>
I want onclick fullscreen-btn background image of div bgimg ie home-1.jpg should open in fullscreen. I tried below code but not workin Kindlt suggest
<scritpt>
$(function() {
var bg = $('.bgimg');
$('#fullscreen-btn').click(function () {
goFullScreen(bg.attr('style', 'background-image:url()'));
});
});
function goFullScreen( element )
{
if ( element === undefined )
{
// If no element defined, use entire document
element = document.documentElement;
}
if ( element.requestFullScreen )
{
// Spec, supported by Opera 12.1+
element.requestFullScreen();
}
else if ( element.mozRequestFullScreen )
{
// Supported by Firefox 10+
element.mozRequestFullScreen();
}
else if ( element.webkitRequestFullScreen )
{
// Supported by Chrome 15+ & Safari 5.1+
element.webkitRequestFullScreen();
}
// Still no IE support, sorry folks :(
}
Seems to be working for me. You just needed to add the image path in your javascript with quotes around it.
$(function() {
var bg = $('.bgimg');
$('#fullscreen-btn').click(function () {
goFullScreen(bg.attr('style', "background-image:url('img/home-1.jpg')"));
});
});
FIDDLE
I believe, but will admit am not 100% sure, that the fullscreen API can only full screen an HTML element. So that is why it will fullscreen div.bgimg but will not fullscreen the background image of the element. <img> is an HTML element, however, so I would think that would work. Is there any reason you would not want to use that instead of setting the background image of your divs?
If so, you could try to wire up some JS that connects visible divs with the background images (Like what you have now) to invisible images and load those to your fullscreen script instead.
I need to hide the focus outline when I click on a link.
But i also need to show it when I slide links with tabindex.
Some websites doing this with any specific workaround.It seems that is the dafault behaviour.
But in my website, when I click on a link it shows also the outline.
How can I show he outline only when I slide links with tabindex key?
Thanks in advance.
Helmut
If the tab behaviour is specifically what you need to detect when adjusting the CSS outline property, I don't believe CSS can ascertain the input device type from the such states as :focus or :active.
Instead, you could hide the outline for all elements on the page with CSS:
a:focus, a:active {
outline:0;
}
a.tabbed {
outline:1px solid red;
}
Then you'd to use JavaScript to adjust the outline for certain elements that receive focus with the tab key.
document.addEventListener('keyup', function (e) {
var code = e.keyCode ? e.keyCode : e.which;
var el = document.activeElement;
if (code == 9 && el.tagName == 'A') {
el.className = "tabbed";
}
}, true);
I've added a quick example: http://codepen.io/anon/pen/aljsu
The JSFiddle speaks for itself
Open this fiddle http://jsfiddle.net/NfRN5/
Click the input field
Change tabs on your browser
Come back to the fiddle - the width effect will run again =/
Is there a way to prevent this and make it steady when the user navigates away and comes back?
To view the problem in this thread, you will need to click the "Expand snippet" button. The small preview doesn't demonstrate the issue in question.
input.search-field {
width: 100px;
transition: all 1s ease-in-out;
}
input.search-field:focus {
width: 300px;
}
<input type="search" class="search-field">
In chat you mentioned you were trying to emulate Apple.com's search bar.
After peaking at their JS, I came up with this fiddle: http://jsfiddle.net/NfRN5/7/
The trick is to only blur the input in the 10ms following a mousedown, or some keypresses.
var $search = $('.search-field'), searchBlurable = false
$search
// Always focus when focused
.focus(function(e){
$search.addClass('focused')
searchBlurable = false
})
// Only blur after mouse or key events
.blur(function(e){
if(searchBlurable){
$search.removeClass('focused')
}
})
// Set Blurable for tab/esc
.keydown(function(e){
if(e.keyCode === 27 || e.keyCode === 9) { // esc || tab
searchBlurable = true
$search.blur()
}
})
// Set Blurable for 10ms after a mousdown
$('html').mousedown(function(e){
searchBlurable = true
window.setTimeout(function () {
searchBlurable = false
}, 10)
})
I don't believe that can be achieved in pure CSS.
Try some JavaScript / jQuery: http://jsfiddle.net/NfRN5/3/
var $fields = $(".search-field")
$fields.focus(function(){
$fields.removeClass('focused')
$(this).addClass('focused')
})
You can't use the blur event because that is called by the browser when you change tabs.
I made some assumptions about what the rest of the code in your app will look like, you might have to add some other triggers to remove the focused class.
I use a complementary class to handle it.
Add the "focus" class to the active element when the window loses focus (window.blur) and remove the class when it gets focus back.
window.addEventListener("focus", function () {
document.querySelectorAll(".focus").forEach((el) => {
el.classList.remove("focus");
}, false);
});
window.addEventListener("blur", function () {
let el = document.activeElement;
if (el !== null) el.classList.add("focus");
}, false);
input.search-field {
width:100px;
transition: all 1s ease-in-out;
}
input.search-field:focus,
input.search-field.focus {
width:300px;
}
<input type="search" class="search-field">
// I am trying to apply an "onfocus="this.blur();"" so as to remove the dotted border lines around pics that are being clicked-on
// the effect should be applied to all thumb-nail links/a-tags within a div..
// sudo code (where I am):
$(".box a").focus( // so as to effect only a tags within divs of class=box | mousedown vs. onfocus vs. *** ?? | javascript/jquery... ???
function ()
{
var num = $(this).attr('id').replace('link_no', '');
alert("Link no. " + num + " was clicked on, but I would like an onfocus=\"this.blur();\" effect to work here instead of the alert...");
// sudo bits of code that I'm after:
// $('#link_no' + num).blur();
// $(this).blur();
// $(this).onfocus = function () { this.blur(); };
}
);
// the below works for me in firefox and ie also, but I would like it to effect only a tags within my div with class="box"
function blurAnchors2()
{
if (document.getElementsByTagName) {
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onfocus = function () { this.blur(); };
}
}
}
Thanks guys - I have gone for the css(a:focus):
img, a:focus{
outline: none;
}
It seems to be working right(tabbing is still working and the borders are gone when clicking) for me... in both ie and firefox. Will have to now retrofit some other links to use it...
Thanks again.
It's not recommended to blur. If all you're looking at doing is hiding the focus lines, use this instead:
a[i].onfocus = function () { this.hideFocus = true; };
This will work for all versions of IE. For other browsers (including IE8 in standards mode) you can set the outline CSS style to hide focus outlines:
a {
outline: none;
}
This would make your page much more keyboard friendly than blurring an element as it takes focus.
I would suggest using only CSS to remove the border.
img, a:active{
outline: none;
}
Or is there a specific reason why JS must be used?