If I use insertAfter() id block then textbox is not clickable!
<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#id").click(function() {
$("#id").insertAfter($(".logo"));
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text" />
</form>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var clickedOnce = false;
$(document).ready(function(){
$("#id").click(function(){
if(clickedOnce === false) {
$("#id").insertAfter($(".logo"));
clickedOnce = true;
}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text" />
</form>
</div>
</body>
This is because you when you clicked the second or more times, it is still inserting #id after .logo and it will make the textbox buggy.
You need to check if the button has been clicked once.
It is Working Check.
<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var moved = false;
$("#id").click(function() {
if(!moved) {
$("#id").insertAfter($(".logo"));
moved = true;
}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text"/>
</form>
</div>
</body>
Related
I would like to scrape the contents of a DIV based on a class within the DIV for example, my page would contain
<html>
<head></head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>
The result would be:
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
I have tried
$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).closest('div').find('.foo'));
});
But just get an empty result?
You should first find .foo and then select parent of it using .closest()
$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).find(".foo").closest('div'));
});
$(".foo").closest("div").css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
body
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
body
</body>
</html>
For Better approach need to target body first than find your particular class find('.foo') you can view the working example as below :
$(document).ready(function(){
$('body').closest('body').find('.foo').css("color", "red")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>
<input value="hello" id="p1" readonly style="width: 100%;">
<br><p>
<div class="btn-main">Copy!</div>
When visitors press the class "btn-main" I want the input value to be copied to their clipboard.
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
<button id="demo-btn" onclick="copyToClipboard(document.getElementById('demo-btn').innerHTML)">Copy!</button>
You may use jQuery clone() Method
Description :- The clone() method makes a copy of selected elements, including child nodes, text and attributes.
$(document).ready(function(){
$("button").click(function(){
$("p").clone().appendTo("body");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
</body>
</html>
It can be done like this as well,
document.getElementById("copyBtn").addEventListener("click", function() {
target = document.getElementById("p1");
target.focus()
target.setSelectionRange(0, target.value.length);
document.execCommand('copy');
});
<input value="hello" id="p1" style="width: 100%;">
<br>
<p>
<button id="copyBtn" class="btn-main">Copy!</button>
<textarea></textarea>
<p> Press Ctrl + V in the text area to see the copied text</p>
I try to put background-color in paragraph through jquery before this i create div and there is two buttons show and hide when click on show div displayed and when click on hide div is hide .. so after this when i try this background-color not visible
check this code
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
});
$document.ready(function () {
$("p").css("background-color", "red");
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="show" />
<input type="button" id="btnhide" value="hide" />
<div id="dvmain" style="width:100%;height:400px;background-color:red;">
</div>
<p>this is paragraph one</p>
<p>this is paragraph two</p>
<p>this is paragraph three</p>
</body>
any solution?
Replace your script like this,
$(document).ready(function () {
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
$("p").css("background-color", "red");
});
And remove this part
$document.ready(function () {
$("p").css("background-color", "red");
});
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").css("background-color", "red");
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="show" />
<input type="button" id="btnhide" value="hide" />
<div id="dvmain" style="width:100%;height:400px;background-color:red;">
</div>
<p>this is paragraph one</p>
<p>this is paragraph two</p>
<p>this is paragraph three</p>
</body>
I am working on something, and I don't have any codes for now, because I have no idea how to do this! Please help me out here :D
What I think would be nice is if I could make a password that changes my style:
<html>
<head>
<style>
.passwordProtected {
display:none; <- this is supposed to change to "block" when the password is written in, and they click "Show div"
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password"> <--- This is where they type the password
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
</body>
</html>
What do I do?
If I'm understanding you right, the code would look something like this:
<html>
<head>
<style>
.passwordProtected {
display:none;
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password">
<button onclick='showDiv();'>Show div</button>
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
<script type="text/javascript">
function showDiv(){
var myDiv = document.querySelector('.passwordProtected');
myDiv.style.display = 'block';
}
</script>
</body>
</html>
You can find out more about styling with JavaScript here: http://www.w3schools.com/jsref/dom_obj_style.asp.
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE