When creating a next JS app you always have a root div just after the body div like this:
<body>
<div id="__next">
I am using a Javascript plugin that requires me to insert some code immdiately after the body tag. Like this:
<body>
//My code here
<div id="__next">
Is it possible to do this? If so How?
Yes, you can do using a prependTo function of JQuery as follows:
$(document).ready(function () {
$('<input type="text">').prependTo('body');
// in your case it would be
$('<div id="__next">').prependTo('body');
});
I have found the answer to my question is to create a _document.js file. This will over-ride the defult document that is created by next.
Documentation here: https://nextjs.org/docs/advanced-features/custom-document
Related
I am facing an issue in jquery , i want to add a css test class in body tag.
My code
(function($) {
if($("#root").length){
$("#root").closest("body").addClass('co_queue_page'); //not working
}
})(jQuery);
<div class="row"> //react code
<div id="root">
<div>
<header>
<div class="container-fluid">...</div>
</header>
</div>
</div>
</div>
what should i do? some help me help?
You don't need to use .closest() method, there is only one tag in HTML document, just do it by selecting the <body> directly:
(function($) {
if($("#root").length){
$("body").addClass('co_queue_page');
}
})(jQuery);
To select the <body> element, using jQuery, you can use:
const element = $(document.body);
const element = $("body");
Then you can use .addClass() to add your custom class dynamically, like so:
element.addClass("co_queue_page");
jQuery fiddle working example
This can be also done without any jQuery, accessing the body DOM element through the document object:
const element = document.body;
element.classList.add("co_queue_page");
Vanilla JS fiddle working example
Please add the below code:
$("body").addClass("class_name");
I use Filtrify plugin for filtering by advanced tag. This link is an example I used.
I focus this script on html file
$(function() {
$.filtrify("container", "placeHolder");
});
and
<div id="placeHolder"></div>
<ul id="container">...</ul>
When I add the script code below on html file, it only show <ul id="container"> not show <div id="placeHolder">.
My script I added
function $(element) {
return document.getElementById(element);
}
Please explain why and how can I add the script above?
You can't have jQuery and your own function both providing a value for a variable called $.
Rename one of the $ functions.
This is div which loads elements at rum time.
<div class="name" id="projct_name"></div>
after loading elements its becomes:-
<div id="projct_name" class="name">
<div>
<span >Proof testers</span>
</div>
</div>
I want the value of span.
$(document).ready(function() {
var prodct_name=$('#projct_name').find('div').find('span').html();
alert(prodct_name);
});
Each time page load get the alert null value because elements loads after alert.
I want to delay my js code so that all elements of page loads before my code run. It can be possible??
Try the below code:-
function pageLoadCompelet(){
var prodct_name=$('#projct_name').find('div').find('span').html();
alert(prodct_name);
}
And call this function on window.onload :-
window.onload=pageLoadCompelet;
I think Jquery Initialize will solve your issue.
Step 1: Insert this in the head-section of your page:
<script src="https://raw.githubusercontent.com/AdamPietrasiak/jquery.initialize/master/jquery.initialize.js"></script>
Step 2: Place the following javascript below or above the other code you already tried:
$("#projct_name span").initialize( function(){
alert($(this).html());
});
The plugin uses MutationObserver which is a really robust way of handling DOM changes.
would like to place the script into a .js file that opens already with
$(document).ready(function() {
});
I have tried but it feel slike because im putting the onMouse over command into the html I don't think it will be possible?
<head>
<style>
div > p {
cursor: pointer;
}
</style>
<script>
var monkeySrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png";
var lionSrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/lion-icon.png";
var treeSrc = "http://totaltreeworks.co.nz/wp-content/uploads/2011/02/Tree-256x256.png";
var falconSrc = "http://icons.iconarchive.com/icons/jonathan-rey/star-wars-vehicles/256/Millenium-Falcon-01-icon.png";
function changeImage(src){
document.getElementById("myImage").src = src;
}
</script>
</head>
<body>
<div class="images">
<img id="myImage" width="256" height="256">
</div>
<div>
<p onmouseover="changeImage(monkeySrc)">Monkey are funny!</p>
</div>
<div>
<p onmouseover="changeImage(lionSrc)">Lions are cool!</p>
</div>
<div>
<p onmouseover="changeImage(treeSrc)">Trees are green!</p>
</div>
<div>
<p onmouseover="changeImage(falconSrc)">Falcons are fast!<p>
</div>
</body>
</html>
If you were to take your existing JavaScript and place it in an external file, it would work just fine. It would work because all of your variables and your function would be in the global scope.
Going one step further you'll want to move those onmouseover event handlers into the JavaScript itself.
Given a small change to your current HTML and assuming jQuery you could do something like the following:
<p data-kind="monkey">Monkey are funny!</p>
then
var urlMap = {
monkey : 'http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png'
...
};
$('p').on('mouseover', function () {
var kind = $(this).data('kind');
var url = urlMap[kind];
changeImage(url);
});
which you would then be able to wrap in the $(document).ready, the shorthand for which is just $(function () { /* The code from above here */ });
You would need to bind the event handlers programmatically from within the .js file. jQuery would make this very simple and allow you to use arbitrary CSS selectors, but you can do the same in pure JS using e.g. document.getElementById and document.addEventListener.
You can bind the function to the event using Javascript addEventListner
1- Add id attribute to each of your paragraphs tags
<p id="p1"> .....</p>
2- Grab a variable that points to each of those
var p1 = document.getElementById('p1');
3- add event listner
p1.addEventListener("mouseover", changeImage(monkeySrc));
If you put your javascript code in another file and replace <script>...</script> with <script src="javascriptcodefilename.js"></script> in your HTML file, it still works as intended.
Example: http://codepen.io/anon/pen/waLqxz
It might be cleaner to add all of your urls to an array where the key is the name of the link, so you would have something like urls['lionSrc'] = "www.xyz.com";...
then in your changeImage function you would do document.getElementById("myImage").src = url[src];
this way you could even check to see if the image exists already, and if not, show an "image not found" icon.
Learning from http://dojotoolkit.org/reference-guide/1.9/dijit/Dialog.html, I know how to create dijit/Dialog widget programmatically and dynamically. But now I need to update the implementation of a form within our application which has many inputs. I want to create a dijit/Dialog for the specific DIV, and hope its div elements will be this dialog's elements. How is it possible?
Please try the following code. This code, will remove your div node from it's parent. div will be moved into body tag.
dojo.require("dijit.Dialog");
var myDialog=new dijit.Dialog(
{
title:"Dialog Title",
content:dojo.byId("divNodeID")
}
);
myDialog.show();
Hope this helps you. Thanks!
If you surround your with the HTML that will create a Dialog, it should work.
For example, if your code is:
<form>
... some HTML ...
</form>
then consider coding:
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="MyTitle">
<form>
... some HTML ...
</form>
</div>