I want to do text editor and change the texts which is inside the content editable elements and also selected by the user.
my question is:
How to get the selected texts inside the content editable elements?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
//alert("selected texts");
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444" contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
This should get you started, although you will need to consider expanding on this code to cater for situations where someone selects outside of your text area and when someone presses the button and nothing is selected.
Oh, and I have console logged the output rather than alerted it.
$(document).ready(function(){
$("#show").click(function(){
range = window.getSelection().getRangeAt(0);
console.log(range.toString());
});
});
You can use window.getSelection() method.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
alert(window.getSelection().toString());
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444"contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
Related
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
Hi guys im new to jquery/ javascript. i found some code in w3schools and i want to use it in my website. but i want the animation to trigger ever time i load the page. please help me how to do this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
i want to do something like this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Is this what you wanted:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
try this
$(document).ready(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
if you are approaching for executing the function after Page loaded, then Put below JavaScript at end of your HTML design:
<script type="text/javascript">
window.onload = myFunction();
</script>
And define the function at start of the Page as you've done already!
So, final Code becomes like below:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script type="text/javascript">
window.onload = myfunction();
</script>
</body>
</html>
Let me know by accepting it, if it works :)
I think best way is to use event listener.
<script type="text/javascript">
window.addEventListener('load',myfunction,false);
</script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery id selector works only for the first element
I want jquery to select all divs with id = box:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/sizer.js"></script>
<title>
Design tests
</title>
</head>
<body>
<div id="box" style="width:300px;">
Hallo
</div>
<div id="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$("#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
</body>
</html>
But it only selects the first one. Can somebody please help me? This isn't difficult is it?
HTML allows only one element with a given id. That's the reason (internally jQuery uses getElementById which returns one element).
From the spec :
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
If you want to select more than one element, use a class, not an id :
<div class="box" style="width:300px;">
Hallo
</div>
<div class="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
You cannot have more than 1 same ID, use a class instead
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/sizer.js"></script>
<title>
Design tests
</title>
</head>
<body>
<div class="box" style="width:300px;">
Hallo
</div>
<div class="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
</body>
</html>
change your selector to div#box and it'll work like so
$(document).ready(function(){
$("div#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
Also note that it's bad practice to have multiple elements with the same id.
The syntax $('#box') means go and select the first element whose id matches "box". What you want to do is using class instead or if you insist on using id $('div[id="box"]') will do what you want
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');
I have an object tag with a blank data value and a menu of hyperlinks. I need the data value of the object tag to change to the href link set in each menu item upon click, preferably using javascript.
All help appreciated and thank you in advance.
EDIT:
Lets say i have an object tag with data="" If Link A has a href="this.html" I want the data attribute of object to become data="this.html" when Link A is clicked
On clicking the Anchors link the object data gets changed ,hoping this is what you want
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var thisObjectText=$(this).attr("href");
if(thisObjectText!=null && thisObjectText!="")
{
$('#swf').attr("data",thisObjectText);
alert($('#swf').attr("data"));
}
});
});
</script>
</head>
<body>
<div id="test">
Aaaa
Baaa
Caaa
Daaa
</div>
<object id="swf" width="400" height="400" data=""></object>
</body>
</html>
By going through your question what i analyzed is you have anchor tags on clicking those anchor tag " the value attached to that tag should pass to the objects"
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var obj=new Object;
obj={};
var thisObjectText=$(this).attr("name");
obj.value=thisObjectText;
alert("object value on clicking links " + obj.value);
});
});
</script>
</head>
<body>
<div id="test">
Aaaa
Baaa
Caaa
Daaa
</div>
<div id="result">
</div>
</body>
</html>