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.
Related
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
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.
I have a very basic question about using the "this" keyword to retrieve a DOM element.
Consider the following HTML/Javascript:
<div class="container">
<div class="regular-div">
<script type="text/javascript">
console.log(this);
</script>
Here is a div withOUT onclick
</div>
<div class="onclick-div" onclick="console.log(this)">
Here is a div with onclick
</div>
</div>
While clicking the "onclick-div" it does return the DOM object for that div. However, the console.log event calls 'this' indirectly in the "regular-div" and returns window.
Is it possible to get "this" DOM object when 'this' is called indirectly? My purpose is I want to fire a function in line in the HTML, but need to send the function "this". Here's an example of what i'm trying to do:
<div class="container">
<div class="regular-div">
<script type="text/javascript">
loadSomeHTML(this, varA, varB, varC);
</script>
</div>
</div>
Thanks everyone for any clarification of how "this" works in the above context.
In your first example, the script isn't in any way associated with the div. It's just been output within the div, but it's not connected to it. The script runs as the page is being parsed.
Is it possible to get "this" DOM object without a user interaction?
If you mean inline with the parsing of the HTML, you could do this:
<div class="container">
<div class="regular-div">
Here is a div withOUT onclick
</div>
<script type="text/javascript">
(function() {
var list = document.querySelectorAll('div');
console.log(list[list.length - 1]);
})();
</script>
</div>
Note that the script tag is immediately after the ending </div> tag for the div you're trying to target. The script gets what's currently the last div in the document as of when the script runs. Or of course you could identify the div in some way (a class, for instance) and use that (and then potentially remove it so you could do it again later in the document).
It looks dodgy, but it's perfectly valid cross-browser, and was even recommended at one stage by the Google Closure Library engineers.
Live Example:
<div class="container">
<div class="regular-div">
Here is a div withOUT onclick (look in console for result)
</div>
<script type="text/javascript">
(function() {
var list = document.querySelectorAll('div');
console.log(list[list.length - 1]);
})();
</script>
</div>
Example using a class we move:
<div class="container">
<div class="target-me">
The first div
</div>
<script type="text/javascript">
(function() {
var div = document.querySelector(".target-me");
div.classList.remove("target-me");
console.log(div);
})();
</script>
<div class="target-me">
The second div
</div>
<script type="text/javascript">
(function() {
var div = document.querySelector(".target-me");
div.classList.remove("target-me");
console.log(div);
})();
</script>
</div>
Note I didn't use id, because if we used an id and JavaScript wasn't enabled, we'd end up with an invalid document (because it would have multiple elements with the same id). It'd be fine if JavaScript were enabled (because we'd remove the id from earlier ones before later ones were created), but...
Javascript has no implicit connection to the HTML DOM. The reason why onclick works the way you want is because the HTML DOM implementation passes the element to the js callback. You need to do something similar in your other case. One way to do this is:
<div class="container">
<div class="regular-div" id="mydiv">
<script type="text/javascript">
loadSomeHTML("#mydiv", varA, varB, varC);
</script>
</div>
</div>
Then your js implementation does the lookup to find the element:
function loadSomeHTML(selector, varA, varB, varC) {
var el = document.querySelector(selector);
// now el is where you want to insert your HTML
// ...
}
The code inside the script tag doesn't have any connection with the tag itself. this should, basically, return the object on which the current function was called, or the global environment, window. In the first div, the code is just executed, on no object, so window is returned. The value of onclick, on the other hand, is treated as a function (with even some parameters, like e), that gets called on the element with the attribute. So, the code in the script element is executed in the global scope, whereas the one in the attribute is in a function scope (that's why all vars are shared across script tags).
As explained in How may I reference the script tag that loaded the currently-executing script?, the proper way of obtaining a reference to the script element whose code is being executed is
document.currentScript;
Then, to get the parent node of that element, use
document.currentScript.parentNode;
<div class="container">
<div id="regular-div">
<script type="text/javascript">
alert('#' + document.currentScript.parentNode.id);
</script>
Here is a div withOUT onclick
</div>
</div>
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.
I'm having the following Smary template (it's a file-tree, files are populated separately and then list_html is assigned to geberated file tree hrml)
<script>
$("#directory-list-root").on("click", "div.content", function() {
$("div.selected", "#directory-list-root").removeClass("selected");
$(this).addClass("selected");
// Check if directory is expanded
var node = $(this).parent("li.directory");
if (node.hasClass("expanded")) {
node.removeClass("expanded");
$(this).siblings("ul.container").hide();
} else {
node.addClass("expanded");
$(this).siblings("ul.container").show();
}
} );
</script>
<div id="directory-list-root">
<ul class="container" style="padding:5px" id="tree">
{$list_html}
</ul>
</div>
In the code it's used twice (in jquery-ui dialogs that are shown one after another). And the problem is that for the first time handling function is OK, but for the second click-handler is not working. If I remove tree from the first dialog then handlers in the second are assigned.
Do you know how that can be fixed?
Thank you in advance!
PS. I'm running Smarty 3.1.13 if that matters.
If the template is used twice there will be two elements with the id directory-list-root in the document, which is illegal. The result is that things won't work.
Instead of using a fixed id, use a dynamic one by incrementing an internal counter variable each time, e.g. by using {counter}:
<script>
$(function() {
{counter name=tree assign=uniqueId}
var $root = $("#directory-list-root-{$uniqueId}");
$root.on("click", /* etc */);
});
</script>
<div id="directory-list-root-{$uniqueId}">
<ul class="container" style="padding:5px" id="tree">
{$list_html}
</ul>
</div>