So, I have following jquery function:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
});
}
})
This creates an lightbox at the bottom of <body> like below:
Before lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
</body>
After lightbox is opened:
<body>
<button> Show lightbox</button>
<script src="https://...jquery.min.js"></script>
<script src="https://...custom_js.js"></script>
<div class="lightbox">Lightbox content</div>
</body>
Problem is that none of the jQuery function inside of this lightbox works as it was created after the page was loaded.
How do I "re-render" a js file after the lightbox is created?
Thanks!
Here is an example:
jQuery('#tags').keyup(function(e){
console.log(e);
if(e.which == 188) {
var tag = ...;
var data = '<button>tag</button>';
tags.push(tag);
jQuery('.tags ul').append(data);
jQuery(this).val('');
}
});
Here, a tag input will be "appended" or added to a div class="tags". However inside of the lightbox, this function is not executed at all.
Re-rendering a JS file is not how javascript is supposed to work.
What I recommend you to do is to run the a function in the afterContent callback.
As you can see in the featherlight documentation, there is a plenty of callbacks that can help you with this.
Example:
jQuery('.button').click(function(e) {
if(!isMobile) {
jQuery('.button').featherlight({
afterContent: function () {
// Do your code here
// The lightbox content will be ready
}
});
}
})
The proble here is that the light ox is dynamically added.
If you need any triggers to work inside or on that lightbox element you will need to use:
$(document).on('click', '.lightbox .button', function(){
...
});
Note that you do not want this code inside that lightbox, but inside your regular js file. Simply because we do not like inline js, and second you can trigger every dynamic content on the fly with above code.
Related
I'm trying to display a span tag only after the page has fully loaded, the span content is generated via a different scrpt and I want to prevent the flicker it show while loading, so I tried the following code to show the tag only once page has fully loaded and content correctly generated by that other script:
<span id="ETOButton" style="display:none;" onload="LoadETOButton()">hello</span>
<script>
function LoadETOButton(){
document.getElementById("ETOButton").style.display="inline block";
}
</script>
what am I doing wrong?
edit: the span correctly show after page load, but this created a different issue, now the span is placed outside the div that should contain it, probably wrapper (Wrodpress) is being checked against its content to dedermine the width.
What you're currently doing is waiting for the span to finish loading before the function is called.
What you need to do instead is add an event listener onto your window, which will be called when the page is done loading.
Also you had a typo with "inline block", it should be "inline-block".
function LoadETOButton() {
document.getElementById("ETOButton").style.display = "block";
}
window.addEventListener("load", LoadETOButton);
<span id="ETOButton" style="display:none;">hello</span>
Use this code do your work:-
function LoadETOButton() {
document.getElementById("ETOButton").style.display = "block";
}
window.addEventListener("load", LoadETOButton);
<span id="ETOButton" style="display:none;">hello</span>
it is inline-block not inline block
You need to call the function LoadETOButton in order to do the CSS changes.
<span id="ETOButton" style="display:none;" onload="LoadETOButton()">hello</span>
<script>
function LoadETOButton(){
document.getElementById("ETOButton").style.display="inline-block";
}
LoadETOButton();
</script>
for this you can use native js:
<script>
window.onload = function(){
document.getElementById("ETOButton").style.display="block";
}
</script>
or jquery:
<script>
$(document).ready( ()=> {
function LoadETOButton(){
document.getElementById("ETOButton").style.display="inline block";
}
LoadETOButton();
});
</script>
Use document ready function, if you are using JQuery library
$(document).ready(function(){
$("#ETOButton").show();
});
or
$(document).ready(function(){
$('#ETOButton').css('display', 'block');
});
If you want the solution in pure javascript then add load event listener
function YourMethodName() {
document.getElementById("ETOButton").style.display = "block";
}
window.addEventListener("load", YourMethodName)
I have a html file which looks like this.
<head>
<script>
document.onready
{
document.getElementById("demo").innerHTML="Works";
}
</script>
</head>
<body>
<div id="demo">
</div>
</body>
When I put the script tags at the bottom of the page, everything works fine. But when I put the script in <head></head tag, it does not work. I guess it is not able to access elements that are below the script.
On many sites like StackOverflow, JavaScript is in head tag. How is it then able to access HTML elements that are below it?
What should I do now? Should I just move my script to the bottom or is there a way by which JavaScript can access elements below it?
Try using something like this:
window.addEventListener('load', function() { document.getElementById("demo").innerHTML="Works"; }, false);
Where did you get document.onready from? That would never work.
To ensure the page is loaded, you could use window.onload;
window.onload = function () {
document.getElementById("demo").innerHTML="Works";
}
Your syntax is incorrect.
document.ready= function () {
//code to run when page loaded
}
window.onload = function () {
//code to run when page AND images loaded
}
I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
};
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>
I want to load an HTML page as a div inside my webpage by removing its HTML and body tags. But the HTML page has a <body onload=" ... " > , I need this function to continue working. Seems <div onload=" ... " > is not working. How can I insert this onload function into my website's body (on this page only) without directly editing my original website code (php)?
Have you used jQuery before? If so, just get the id of your div (let's say "SomeDiv") and then use the "ready" method like this:
$("#SomeDiv").ready(
function(){
//do stuff
});
you can use jQuery.load to load the contents of the page into your div
$(document).ready(function() {
$("#containing-div").load("[url of page with onload function]");
});
the code above goes in the page that contains the div. the page with the onload function doesn't get changed.
You can add an additional Javascript tag at the end of the loaded page (once inserted inside the div) which will executing as soon as it's loaded. Like this:
<div>
Insert the inner html content of that pages here and add this script at the bottom and add the onload function of the original html to this script.
<script type="javascript">
alert("hello world");
</script>
</div>
Just remember to have the javascript available to your page. What I mean is that if the javascript function called which is called inside onload="..." is defined in the <head> of the loading html document and you're throwing the <head> out then this won't work.
Not the best but one way is to check the div periodically if it's loaded:
var myInterval = setInterval(function () {
if ($('.mydiv') && $('.mydiv').width() > 0) {
// write your logic here
clearInterval(myInterval);
}
}, 3000);
If you want to add the onload event on a div, you cannot, but you can add onkeydown and trigger the onkeydown event on document load.
<div onkeydown="setCss();"></div>
$(function () {
$(".ccsdvCotentPS").trigger("onkeydown");
});
I'm trying to make a infobox when i click the head the content slides down
but when i do it it just slides down and then up again.
It is in a ascx document and i need to use it on a dotnetnuke container
it works perfectly in a html file
here's the code
<script type="text/javascript">
$(document).ready(function () {
$('.head').click(function () {
$('.content').slideToggle();
});
});
</script>
or
$(document).ready(function () {
$('.textbox .content:eq(1)').hide();
$('.textbox .head').click(function () {
if ($(this).next('.content').is(':visible')) {
$(this).next('.content').slideUp();
} else {
$(this).next('.content').slideDown();
}
});
});
In the first example, you'll toggle all of the content areas if you have multiples of the same container on the page.
The second example looks like it should work, but, again, if you have multiple instances of the container, and that script is in the container itself, you'll register the handler multiple times. Try moving the script to an external file and referencing it in code, so it only gets included once. See DotNetNuke jquery script in container for an example of that.