I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.
I've looked at this. But it seems that it uses div block rather than pop up.
It seems that #Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.
Try this:
tinyMCE.init({
mode: "exact",
elements: "test",
skin: "o2k7",
skin_variant: "red",
setup: function (ed) {
ed.onMouseUp.add(function (ed, e) {
var x = tinyMCE.activeEditor.selection.getContent();
if(x)
alert(x);
});
}
});
JSFIDDLE DEMO
Try Bootstrap Popover. Following is a sample code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
It works well for me, hope it will resolve your issue.
$("#myDiv").mousedown(function(){
$("#myDiv").mouseup(function(){
$("#myPopUp").show();
});
});
#myPopUp
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
hello please select the text and see
</div>
<div id="myPopUp">
popover message
</div>
Related
I'm learning jQuery & JavaScript from scratch and cannot wrap my head around why css cannot be added with jQuery. Basically, I'm trying to see whether the the sentence bolds when the user clicks on the first sentence. I have been referencing w3school and external resources, but not sure why there is an error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<h3>Click on this heading to update below paragraph </h3>
<p id="pText">this is a paragrah</p>
<script>
$(document).ready(function() {
$("h3").click(function() {
$('pText').css("font-weight", "bold");
document.getElementById('pText').innerHTML = "this is updated paragraph";
});
});
</script>
</body>
</html>
You have missed to prefix the id symbol (#) in the selector:
$('#pText').css("font-weight", "bold");
I will also suggest you not mix up vanilla JS and jQuery unnecessarily.
You can replace
document.getElementById('pText').innerHTML = "this is updated paragraph";
with the following equivalent jQuery:
$('#pText').html("this is updated paragraph");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h3>Click on this heading to update below paragraph </h3>
<p id="pText">this is a paragrah</p>
<script>
$(document).ready(function () {
$("h3").click(function () {
$('#pText').css("font-weight", "bold");
$('#pText').html("this is updated paragraph"); // you can use jQuery here
});
});
</script>
</body>
I am a beginner in JavaScript and HTML. I am trying to prevent buttons from submitting forms. It is not working with my below code. It is working when I remove the type:button and return false in the code but if I remove it is always submitting the form.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button type="button" onclick="myFunction1();return false;" style="font-size:24px">Button <i class="fa fa-info-circle"></i></button>
<script type="text/javascript">
function myFunction1(){
}
</body>
</html>
JQUERY
You should be able to do:
$('#formid').submit(false);
or
$('#formid').submit(function(e){ e.preventDefault(); });
To use the jquery library visit the official website
http://jquery.com/download/
PURE JS
document.getElementById('formid').addEventListener('submit', function(e) {
e.preventDefault();
});
here is your example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function countRabbits() {
for(var i=1; i<=3; i++) {
alert("Rabbit number " + i);
}
return false;
}
</script>
</head>
<body>
<input type="button" onclick="countRabbits()" value="Count rabbits"/>
</body>
</html>
First of all, take care about closed pair tags. In your snippet you have unclosed script tag. Don't use button where it isn't necessary, but use the input type button instead.
I have a text file and I want that text into my <p id="top_ten"></p> I have not used jQuery before, but I was hoping I could give it try. Based on other sources, I feel like I am close, but I must be missing a detail or step somewhere.
This is what I currently have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>S&P 500 Top Performers</title>
<meta name="description" content="Gather top performers from S&P 500"/>
<link rel="stylesheet" href="../static/css/styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.get("../Todays_Top_Ten.txt", function(data) {
document.getElementById("top_ten").src=data;
})
});
</script>
</head>
<body>
<h1>S&P 500 Top Performers</h1>
<div class="sec" id ="sec_1">
<p id="top_ten"></p>
</div>
Top Ten
</body>
</html>
I'm having a tough time with something that I think is pretty simple. I hope you folks can help me.
I'm using a jquery plugin called zoomtoo.
I need to have the plugin function (zoomToo()) applied on a child div (modal-img-wrap) inside its parent div (modal).
The JS script:
<script type="text/javascript">
$(function() {
$(".modal").zoomToo({
magnify: 1
});
});
</script>
The HTML code:
<body>
<div id="ex2" class="modal">
<div class="modal-img-wrap">
<img class="modal-img" src="homedrive.jpg" />
</div>
</div>
</body>
Here is a working example. Notice the attributes in the divs. And bind the jquery.zoomtoo.min.js script, because it's minified, e.g. smaller. If you already have a css class on the image containing div (modal-img-wrap), then you can also directly reference it inside js. So, instead of .modal .modal-img-wrap you can write .modal-img-wrap in js script.
Good luck.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="dist/jquery.zoomtoo.min.js"></script>
<script type="text/javascript">
$(function () {
$(".modal-img-wrap").zoomToo({
magnify: 1
});
});
</script>
</head>
<body>
<div id="ex2" class="modal"><!-- Not this div -->
<div class="modal-img-wrap" data-src="homedrive_big.jpg"><!-- I need this div selected by the plugin. -->
<img class="modal-img" src="homedrive_normal.jpg" />
</div>
</div>
</body>
</html>
I'm confused, you can select the div by name $( "#MyDiv" ). Set the name property of the div.
$(function() {
$("#MyDiv").zoomToo({
magnify: 1
});
});
</script>
I cant figure out how to keep tooltip hover functionality when click on element that shows tooltip on hover. So basically i want to hide tooltip every time cursor leaves element, no matter if its clicked or not.
Here's example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">Tooltip</button>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
You can use jquery to say when mouse leave lose the focus of the active element see code below:
$('#btn').on({
mouseleave: function() {
document.activeElement.blur();
}
});
Of course I've just added the id to the button to make it easier to test.