I have a button here and what I want is when mouseover this button, it will show some text automatically.
I use title to achieve this.
The HTML code is:
<oj-buttonset-one id="splitDualYButtonSet" value="{{dualY}}" on-value-changed="[[updateDualY]]" title = "split">
<!-- ko foreach: dualYOptions -->
<oj-option value="[[value]]"><span data-bind="text:label"></span></oj-option>
<!-- /ko -->
</oj-buttonset-one>
when mouseover the button it will show "split" but now the front is too small. How to change the style of the title?
Thanks!
Check this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script >
function hitMe() {
document.getElementById("hello").innerText="yoo";
};
</script>
</head>
<body>
<button id="hello" onmouseover="hitMe()" >Yes</button>
</body>
</html>
Related
Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>
Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});
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.
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>