On my website http://www.ruigrok-nederland.nl/ i cant select text.
Its working fine on Chrome and Firefox.
How is this possible?
I am 100% sure it is not a configuration in Internet explorer, because it works well on other pages.
Thanks
On your page I am getting an error every time I click the left mouse button or moving the cursor. The onclick error is stopping IE from dealing with what is happening when you and click-drag to select the text.
It is possible to select the text using keyboard shortcuts. If you fix the JavaScript errors that I mentioned above the page will start to work as desired.
your error exists here:
function mousePos (e) {
if (!mie) {
mouseX = e.pageX;
mouseY = e.pageY;
}
else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
document.show.mouseXField.value = mouseX;
There is no document.show object. I don't know where you're getting this from/what sample could you got it from??? Also, you are mixing variables... your function is getting e as the parameter/variable event object, but you are using event in your else statement. That won't work since event is undefined.
document.show.mouseYField.value = mouseY;
If you don't have a good reason otherwise, you can use jQuery to do this, since one of the goals and benefits of jQuery is cross-browser functionality:
<html lang="en">
<head>
<meta charset="utf-8">
<title>select demo</title>
<style>
p {
color: blue;
}
div {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click and drag the mouse to select text in the inputs.</p>
<input type="text" value="Some text">
<input type="text" value="to test on">
<div></div>
<script>
$( ":input" ).select(function() {
$( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
});
</script>
</body>
</html>
Related
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
I have been looking for a solution for this for a long time and I just could not find what I was looking for. I have made a code that is an automatic traffic light and it loops through. How can I change it so when I click it goes through the sequence and stops when it gets back to Red?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body onload="startTime();">
<img id="img1" />
<script>
var imgArray = new Array("Red.jpg","RedA.jpg","Green.jpg","Amber.jpg");
var imgCount = 0;
function startTime() {
if(imgCount == imgArray.length) {
imgCount = 0;
}
document.getElementById("img1").src = imgArray[imgCount];
imgCount++;
setTimeout("startTime()", 1000);
}
</script>
</body>
</body>
</html>
You just need to change setTimeout function syntax.
setTimeout(function(){
startTime();
},1000);
Check working example
I have built a jquery html5 canvas sketching app that accepts mouse events for desktop (pen tablets just use mouse events). I would also like to allow drawing with the finger on iphone, ipad, andriod devices as a mobile web enabled app. Since mobile devices also trigger mouse click events on their own: Does this mean that I should detect the type of browser and replace all mouse bindings with touch bindings in order to prevent events from double firing?
Here is a stupid example:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1600px" height="1600px" style="border:1px dashed gray;background-color:white;">
</canvas>
<script>
function brushStart() {
$('#myCanvas').css('background-color','blue');
}
function brushEnd() {
$('#myCanvas').css('background-color','red');
}
function brushMove() {
$('#myCanvas').css('background-color','yellow');
}
$('#myCanvas').bind('mousedown', brushStart);
$('#myCanvas').bind('mouseup', brushEnd);
$('#myCanvas').bind('mousemove', brushMove);
$('#myCanvas')[0].addEventListener('touchstart',brushStart,false);
$('#myCanvas')[0].addEventListener('touchend',brushEnd,false);
$('#myCanvas')[0].addEventListener('touchmove',brushMove,false);
</script>
</body>
</html>
I've used the following to do what you're looking for:
$("#myCanvas").bind("touchstart mousedown", function (event) {
var e = event.originalEvent;
e.preventDefault();
startX = (e.targetTouches != undefined) ? e.targetTouches[0].screenX : e.offsetX;
startY = (e.targetTouches != undefined) ? e.targetTouches[0].screenY : e.offsetY;
});
A couple of points -- you need to access the originalEvent in jQuery in order to work with targetTouches. Also, as I'm sure is apparent, you can substitute any property pair you need for offsetX/Y for the mouse events.
How do I prevent scrolling without preventing default, because I still want the touchmove event to be processed:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1600px" height="1600px" style="border:1px dashed gray;background-color:white;">
</canvas>
<script>
function brushStart() {
$('#myCanvas').css('background-color','blue');
}
function brushEnd() {
$('#myCanvas').css('background-color','red');
}
function brushMove() {
$('#myCanvas').css('background-color','yellow');
}
$('#myCanvas').bind('mousedown', brushStart);
$('#myCanvas').bind('mouseup', brushEnd);
$('#myCanvas').bind('mousemove', brushMove);
$('#myCanvas')[0].addEventListener('touchstart',brushStart,false);
$('#myCanvas')[0].addEventListener('touchend',brushEnd,false);
$('#myCanvas')[0].addEventListener('touchmove',brushMove,false);
</script>
</body>
</html>
When you say you want it to be processed - it still can be. Just write it like this:
$('#myCanvas')[0].addEventListener('touchmove', function(e) {
e.preventDefault();
brushMove();
},false);
I don't guarantee that preventDefault alone will stop the scrolling, but that's how you'd write it if you wanted it to prevent the default and do your own method too. You could also put the call in brushMove itself.
Let me just say that you probably need to be doing preventDefault in touchStart and not touchMove. touchMove might actually be too late, because if it is scrolling there might be no touchMove events to be had!
I am pretty sure i seen sites that make firefox (and other browsers?) select text only within a div and not span across other divs. How do i do that
it seems giving overflow: hidden encloses the text selection in that div only.
Hope it helps
source
https://stackoverflow.com/a/5505944/932473
Based on this.
<html>
<head>
<title>No Select!</title>
<script>
window.onload = function() {
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla
}
</script>
</head>
<body>
Select me!
</body>
</html>
By the way try to avoid this kind of stuff as it's not cool to prevent visitors from their basic rights!! If someone wants to select a text, they'll know how to do it and there's no way to prevent it.