Im having issues making the code below to work. Basically, I wanted to move an element by appending to body on mouseover. whats wrong with my code?
Thanks
<div class="wrp">
<p>this is a wrap</p>
<p><img src="myimg.jpg" /></p>
</div>
<div class="wrp">
<p>this is a wrap2</p>
<p><img src="myimg.jpg" /></p>
</div>
<div class="wrp">
<p>this is a wrap3</p>
<p><img src="myimg.jpg" /></p>
</div>
<script type="text/javascript">
$(".wrp").hover(function(){
$("img", this).appendTo("body");
});
</script>
expected output:
<html>
<head/>
<body>
...
<img src="myimg.jpg" />
</body>
</html>
Would be handy if you showed us the output that actually happened. But that's besides the point...
Try doing the following instead:
<script type="text/javascript">
$('.wrp > img').hover(function(){
$(this).appendTo('body');
});
</script>
I haven't tested it, it's off the top of my head. But it should work.
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>
So I am concatenating using an variable and it will only print undefined.
I have looked for hours for the solution and haven't found the reason closest was form this question jQuery "undefined" prints when appending to html element but the solutions give have still not worked.
Please help and explain so I can learn and understand.
thank you.
my code below.
$(document).ready(function(){
var nam="";
$("#sayHello").click(function(){
nam = $("textBox1").val();
if(nam != ""){
$("#welcome").html("<p>Hello "+ nam +"</p>").show;
}
;});
});
this is my jquery/javascript
and here is my html
<body>
<div id="container">
<div id="inputBox">
Here is my first text box.
<input id="textBox1" type="text" value=""/>
<button id="sayHello">Submit</button>
</div>
<div id="welcome">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="myJQ.js"></script>
</body>
I have edit your code try it
$(document).ready(function(){
var nam="";
$("#sayHello").click(function(){
nam = $("#textBox1").val();
if(nam){
$("#welcome").html("Hello "+nam)
}
});
});
<body>
<div id="container">
<div id="inputBox">
Here is my first text box.
<input id="textBox1" type="text"/>
<button id="sayHello">Submit</button>
</div>
<div id="welcome">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="myJQ.js"></script>
</body>
Want to create a DIV which toggle when I click on youtube subscription button. Also, I want to hide the Youtube button.
This seems easy, but Jquery toggle method is not working on youtube sub button.
CODE ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//Your code here
$('#xx2').click(){
$('#cc').toggle();
}
});
</script>
<div id="cc" style="display:none;" >
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" ></div>
</div>
See this photograph :
Please close the script tag and provide some text inside the xx2 div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(e){
$('#cc').toggle();
});
});
</script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" >text</div>
</div>
Syntax error
Change $(document) instead of $("document")
And click function declaration was wrong. initiate the click function of xx2 and the toggle inside the click function
$(document).ready(function(e) {
$('#xx2').click(function() {
$('#cc').toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe" data-channelid="UCwevqbHI8ppBSvVKESoLpPQ" data-layout="full" data-count="default">xx</div>
</div>
there is error in the syntax of jquery, use following cod:
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(){
$('#cc').toggle();
});
});
</script>
Maybe the classic way will work:
HTML:
<div id="cc">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default">
xxx <!-- The xxx is used for better hitting -->
</div>
</div>
I removed the style attribute from #cc.
Added following CSS:
div.cc {display:none;}
Javascript:
$(document).ready(function(){
$('#xx2').click(function() {
$('#cc').toggleClass("cc");
});
});
So far I understand your problem right, this did work according Jsfiddle.net .
I am trying to append anchor tag in a div but unfortunately its not working:
Following is my code
$(document).ready(function() {
$('.test-inner').append('');
$('.test-image').appendTo('.new-img-holder');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="test-inner">
<img class="test-image" src="cine-sudarshan.jpg" alt="">
</div>
Your code is working even with V1.2.3
It is certainly linked to another part of your code.
$(document).ready(function(){
$('.test-inner').append('');
$('.test-image').appendTo('.new-img-holder');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="test-inner">
<img class="test-image" src="cine-sudarshan.jpg" alt="">
</div>
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