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
})
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 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>
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 .
Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS
You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});
try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO
What I am trying to accomplish is, using jQuery, dynamically replace the content (generated from another javascript) of div tag with id="Test".
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
$("#Test").html('<b>test content</b>');
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
As you can see,
$("#Test").html('<b>test content</b>');
replaces the html code of div tag with id="Test" with html code
<b>test content</b>
this works perfectly fine. I am getting rendered html as
begin
test content
end
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function TestScript(){
document.write('<b>test content</b>');
};
</script>
<script type="text/javascript">
$(function(){
$("#Test").html(TestScript());
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
Here,
$("#Test").html(TestScript());
replaces the html code of div tag with id="Test" with generated html from javascript
TestScript()
I am getting rendered html as
test content
It replaces the entire content of the html file. How to resolve this problem?
Kindly help.
Thanks,
John
Try this:
<script type="text/javascript">
function TestScript(){
return '<b>test content</b>';
};
</script>