I have simple html
<div class="main-app"></div>
<button class="btn"> CLICKME </button>
<script src="./index.js"></script>
another html to load: contact.html:
<div class="contact">
this is contact component
</div>
and javascript:
function load_component() {
document.getElementsByClassName("main-app")[0].innerHTML='<object type="text/html" data="./contact.html" ></object>';
// here is when I want to check if this particular content is ready
var loader = setInterval(function () {
if(document.getElementsByTagName("object")[0].readyState !== "complete") return;
clearInterval(loader);
}, 300);
}
document.getElementsByClassName('btn')[0].addEventListener("click", function(event) {
load_component();
});
As you see on following screen it creates whole html dom (#document) inside our html. How can I check if that document is ready?
and here is screen from inspect element of added html:
Related
I'm using this js code to show/hide elements on my site:
<script>
function myFunction3() {
var x = document.getElementById("dsec-three");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Can anyone help me to set it so the elements are hidden on load and only show once activated?
you can use class for show/hide elements same as :
function showHide(){
element = document.getElementById('element1');
showHideEle(element)
}
function showHideMulti(){
elements = document.getElementsByClassName('multi');
Array.from(elements).forEach(ele => {
showHideEle(ele)
});
}
function showHideEle(ele){
let isHide = ele.classList.contains('hide');
if (isHide) {
ele.classList.remove("hide");
} else {
ele.classList.add("hide");
}
}
.hide {
display: none
}
<p class="hide" id="element1">para 1</p>
<button onclick="showHide()">Show/Hide</button>
<br />
<p class="hide multi">para 2</p>
<p class="hide multi">para 3</p>
<p class="hide multi">para 4</p>
<button onclick="showHideMulti()">Show/Hide Multi</button>
Your function myFunction3 already does the job of hiding and showing the relevant elements. All you need to do now is invoke the function when your document loads. You can do this by adding the following line inside your <script>:
document.addEventListener("load", myFunction3);
If you need the elements to stay hidden by default and show them after the document loads, you'll need to set the display property of those elements to none either via inline CSS.
Example (if your element is a div) :
<div id="dsec-three" style="display:none">
...
</div>
what do you mean by activated?
if you mean that after the load of your page, you would need an event listener.
follow these steps:
set the initial display of your element to none.
create an event listener like load: and add your function there:
document.addEventListerer('load', function(){
myFunction3();
})
the above code is telling the browser: 'when ever the page loads, call this function'
I want to add a class to the parent if the child has a specific class.
The problem: It's in an iFrame and I'm not very good with jQuery. It don't really has to be jQuery, any other way would be also great. Just notice: The iFrame is on my domain, but I can't access it, because it's generated by a plugin.
If you have any ideas how to fix it, I would appreciate it
My HTML looks somewhat like this in devtools:
<iframe src="#" id="iFrameResizer0">
<div class="book-day">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
</iframe>
and my jQuery:
$(document).ready(function () {
$("#iFrameResizer0").contents().find(".book-day button")
if ($('.book-day button').hasClass('disabled')) {
$(".book-day button").parent().addClass('disabled');
}
});
if everything works correct I want my html looks like this afterwards:
<iframe src="#" id="iFrameResizer0">
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
</iframe>
Devtools:
NOTE: this code has to be executed AFTER the iFrame has loaded and rendered. If you execute this in the head of the parent page without wrapping it in $(function() { ... }), it will not work
You have more than one book-day, you will need to loop:
$("#iFrameResizer0").contents().find(".book-day button").each(function() {
$(this).parent().toggleClass('disabled',$(this).is('.disabled'));
})
or perhaps
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().addClass('disabled');
})
PS: To remove them you do not need to give them a class:
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().remove;
})
If you still have issue with the timing, try this script right after the iframe tags - right after the </iframe>
<script>
$("#iFrameResizer0").on("load",function() {
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().remove(); // or .addClass('disabled');
})
})
</script>
UPDATE: Alternatively drop the iFrame completely:
Replace the iframe tags with <div id="iFrameResizer0"></div>
and add
<script>
$("#iFrameResizer0").load("/wp-json/ssa/v1/embed-inner?integration.../type/Reservierung",function() {
$("#iFrameResizer0").find(".book-day button.disabled").each(function() {
$(this).parent().remove(); // or .addClass('disabled');
});
});
</script>
Example pretending your iframe.content() works as expected (same origin)
$(function() { // on page load. This might STILL be too early
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().addClass('disabled');
})
});
.disabled {
background-color: grey
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iFrameResizer0">
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
</div>
You don't have to check for every button if it has disabled class or not. You can directly select those button having disabled class.
In Javascript, you have to iterate for all the buttons having disabled class, and add disabled class to it's parent. However, in jQuery, as you can see, you can achieve that, without using any loop.
For JavaScript :
$(document).ready(function() {
var all = document.querySelectorAll('#iFrameResizer0 .book-day button.disabled');
all.forEach((item) => {
item.parentElement.classList.add('disabled');
})
});
For jQuery :
$("#iFrameResizer0 .book-day button.disabled").parent().addClass('disabled');
Since the iframe is observing same-origin policy, This is possible.
First you need to select your iframe element using the following JS
var iframe = document.getElementById('iFrameResizer0');
Now you need to get the content in your iframe
var iframeContent = iframe.contentDocument;
Then select elements inside your Iframe which you wish to modify
var iframeElement = iframeContent.getElementsByClassName("book-day");
var i = 0, ilen = iframeElement.length - 1;
for (var i = 0; i < ilen; i++) {
var button = iframeElement.getElementsByTagName("button");
if(button.className == 'disabled')
{
iframeElement[i].className == 'disabled';
}
}
Then hide your element using CSS display:none property
.disabled {display:none;}
I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>
Please try adding inline style attribute. See example below:
<div style="display:none;"></div>
Given Script load data from specific div of external source on click. Now trying to add div class when loading content like image and text. I mean when contents loads new classes will auto added with <div class="images"> img</div> and <div class="summery"> text text text</div>
HTML:
<button class='btn'/>
<div id="load-here"></div> <!-- Load Here -->
</body>
Script:
$(function() {
var page = null;
var counter = 0;
function getNext() {
// Grab the next element from the array of date-outer divs and copy it to the .content div
if (counter >= page.length)
return;
var elm = $(page[counter]).clone();
elm.find('script').remove(); // Remove script tags in the div
elm.appendTo('#load-here');
counter++;
}
$('button.btn').click(function(e) {
if (page === null) {
page = false; // Prevents the request from being made twice
$.get('http://test-html-site.blogspot.com/search/label/', function(data) {
page = $(data).find('article.post.hentry');
getNext();
});
} else if (page !== false) {
getNext();
}
});
});
HTML Structure of external site: Given script load .date-outer per click. Means it load data form external site/link on click.
<body>
<div class="blog-posts hfeed">
<div class="date-outer">
Contecnt 1: img, text </div>
<div class="date-outer">
Contecnt 2: img, text </div>
<div class="date-outer">
Contecnt 3: img, text </div>
</div>
</body>
My question is when data loading, want to add custom class to image and text using given script. This is the example site.
I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.
Err… You mean $('#menubar a').click(…) ?
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>