how to access the element inside iframe, from parent document? - javascript

function contents_nb(name, height) {
1. document.getElementById('contents_iframe').height = height+'px';
2. var $currentIFrame = $('#contents_iframe');
3. $currentIFrame.contents().find(".wrap_contents").hide();
4. $currentIFrame.contents().find(".greetings").fadeIn(2500);
}
this is my jquery syntax.
no.1 ~ 3, it works well.
but line no.4, it doesn't work.
structure of html document inside iframe is ...
<body>
<div class="wrap_contents">
<div class="greetings">
</div>
<div class="operational_philosophy">
</div>
</div>
</body>
</html>
what is the reason? what causes this problem?
and syntax of the parent html document is..
<iframe id="contents_iframe"></iframe>
what is the problem??
why can not find class inside class?

You may used jquery contents() function to access/find the elements,
$("#iframeID").contents().find("#contentID");

Related

adding css class in <body> javascript

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 want to add html tag without ending tag

I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');
Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");
I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.
$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>

Why can't I retrieve "this" dom element without onclick?

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>

Show all dropzone errors instead of one at a time [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

Javascript InsertBefore - in a different div both within a parent div

I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?
<body>
<div id="whole section">
<div id="group_a">
<h3 id="event_1">Heading 1</h3>
<p> some text </p>
**// I would like to insert an hr element here**
<h3 id="event_2">Heading 2</h3>
<p> more text </p>
</div>
<div id="group_b">
**// I can only insert code here though**
<script type="text/javascript">
function add_hr(){
var new_hr = document.createElement('hr');
var reference = document.getElementById('event_2');
document.body.insertBefore(new_hr, reference);
}
window.onload = function(){add_hr();};
</script>
</div>
</div>
</body>
insertBefore requires that the reference element be a direct child of the element on which you call it. Your line
document.body.insertBefore(new_hr, reference);
...tells the browser to insert new_hr before the reference element directly contained by document.body. But document.body doesn't directly contain the reference element, it's inside a div. So you get an error, because the reference element can't be found directly inside the element you're inserting into.
You can fix that by using the reference element's parent:
reference.parentNode.insertBefore(new_hr, reference);
Live Example | Source

Categories

Resources