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.
Related
I have on my site, a page with several DIV's with some content (let's say that each one is a TO DO task).
I need to view that page URL and choose which DIV I want to delete permanently (in a way that even if I refresh the page, it won't be there anymore).
Is this possible?
I have this code, but the "deleted" DIV re-apear as soon I refresh the page...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#removeDIVid1").click(function () {
$("#id1").remove();
});
$("#removeDIVid2").click(function () {
$("#id2").remove();
});
$("#removeDIVid3").click(function () {
$("#id3").remove();
});
});
</script>
</head>
<body>
<div id="id1"><p>paragraph 1 <button id="removeDIVid1">Remove DIVid1</button></p></div>
<div id="id2"><p>paragraph 2 <button id="removeDIVid2">Remove DIVid2</button></p></div>
<div id="id3"><p>paragraph 3 <button id="removeDIVid3">Remove DIVid3</button></p></div>
</body>
</html>
The remove method just takes the object out of the DOM, and when you refresh the page, since the DOM tree is generated again, with your div elements. I think generating these tasks dynamically using jQuery will solve your problem. Let me know if you need help with the code.
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 need to apply this line:
target="_blank" onclick="exoMobilePop();"
To all links on my Drupal 7 website.
Can anybody help me with this?
If you really need this functionality on links and not on the whole document you can go with this solution.
...
<script>
(function() {
var linksOnPage = document.querySelectorAll("a");
var link = "";
for (var i = 0; i < linksOnPage.length; i++) {
link = linksOnPage[i];
link.setAttribute("target", "_blank");
link.addEventListener("click", function(e){
exoMobilePop();
});
}
})();
</script>
</body>
</html>
But be careful. This will address literally every link on your page. Including administrative links, menu items, etc. If it's not desired, you can replace "a" with a more specific selector.
Try the <base> tag. The target attribute specifies the default target for all hyperlinks and forms in the page. Place the tag in the <head> section.
Note: This attribute can be overridden by using the target attribute for each hyperlink/form (if needed).
<head>
...
<base target="_blank">
...
</head>
Use JavaScript (or jQuery) to handle and reroute the click events. JSFiddle
JavaScript
document.addEventListener("click", function (e) {
// e.preventDefault(); // Prevent a link from following the URL
exoMobilePop();
});
jQuery
$("body").on("click", "a", function (e) {
// e.preventDefault(); // Prevent a link from following the URL
exoMobilePop();
});
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>
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!