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 .
Related
Currently I use
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#output").load("https://somesite.com/Search.html");
});
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
to implement an offsite html into my current page.
Howevee this way, the visitor is required to press the "Search" button to reveal the content.
Is there a way to 'automatically' load this, without user interaction ?
(I know a way to trigger the button at siteload, but I'd rather have the button not be there in the first place)
Move the load call out of the click event listener:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#output").load("https://somesite.com/Search.html");
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
I will make FilePond images draggable inside preview area the images position can be change with each others some can help out how to do that?
check screenshot
https://imgur.com/a/BZGLemx
<div id="main">
<div id="header">
<h1>Drag and drop fileupload</h1>
</div>
<div id="content">
<form class="dropzone" id="fileupload"></form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(".dz-image").draggable();
});
</script>
<script src="./dropzone.js"></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
$("#fileupload").dropzone({
url: "upload"
});
</script>
Remove the custom scripts and set the allowReorder to true.
FilePond.create({
allowReorder: true
})
I have this code, and I want to hide a div clicking on a tag
I was using some jQuery scripts to do that, but I don't know why, the scripts aren't loading.
Code:
<body>
<div class="myprojects">
my projects
</div>
<br>
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('#links').hide();
</script>
<script>
$(document).ready(function(){
$("#myprojects").click(function(){
$("#links").fadeToggle();
});
});
</script>
</body>
I want people to click on "my projects" and then, the links div to show up, but scripts aren't loading.
You have selector issues in several places. e.g:
You used the id selector
$('#links').hide();
You should use the class selector:
$('.links').hide();
Same issue with #myprojects, it should be .myprojects the class selector.
BTW, why not put the hide logic inside the $(document).ready method?
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
</script>
<script>
$(function() {
$('.links').hide();
$(".myprojects").click(function() {
$(".links").fadeToggle();
});
});
</script>
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<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() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});
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.