I'm using a short Jquery script to hide a div-element upon page load, which reappears under certain conditions. When a user scrolls down the page, new content will load with Ajax, containing that very same div-element that I want to hide. How can I fire that Jquery again upon said div-element being loaded?
<head>
<script type="text/javascript">
(function($) {
$(window).load(function() {
$( ".the_button" ).hide();
if (...certain condition is met...) {
$( ".the_button" ).show();
}
});
})(jQuery);
</script>
</head>
<body>
<div class="the_button"><button>Share</button></div>
<p>Ajax-loaded button:</p>
<div class="the_button"><button>Share</button></div>
</body>
The button shows on subsequent Ajax loads, but I want it to be hidden like the first one.
You can put both scripts inside "filename.js" - file and include it in your html with script tag.
Then just put your whole script inside function like this
$(window).load(function () {
function functionName(){
$(".the_button").hide()
if (...certain condition is met...) {
$(".the_button").show()
}
functionName()
(...calling it right after load...)
$.ajax({
(...ajax things goes here...)
})
.done(function(){
functionName()
(...call your function again here...)
})
}
})
This thing could help you handle ajax.
http://api.jquery.com/jquery.ajax/
Related
I am trying to make my div on my page to load last, what i mean is after everything is loaded then it must load that div using jquery or javascript ?
here is what i tried
<script type="text/javascript">
$(document).ready(function(){
$.get('url', function(data) {
$('.image').html(data);
});
});
</script>
Don't use $(document).ready() because this event fires probably too early for your intention. Use the window.onload event which fires after the page is fully loaded (including images and other resources)
window.onload = function() {
$.get('url', function(data) {
$('.image').html(data);
});
};
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.
I'm trying to write a click event for an arbitrary button on an html page. I'm referencing jQuery and the JavaScript file in the here:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/product-swap.js"></script>
and the button here:
<button class="btn">Click Me</button>
I'm really just trying to have an alert appear on the screen to test the references. JavaScript:
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Won't you appear, please!?");
});
When I click the button...nothing happens. Nothing appears in the log or in the console or in an alert window.
I know this is probably something arbitrary and stupid but I'm fairly new to JavaScript/jQuery and I'm racking my brain over this one.
Thanks!
try with this man:
$(document).ready(function(){
$('.btn').on('click', function() {
console.log("STUPID LOG");
// Reset the window object
delete window.alert;
alert('test');
});
});
Is the button after the script? If so then you can either move the button to before the script, or wrap the script in a
$(function(){ /* Code goes here */ });
Put your JQuery lines inside this:
$( document ).ready(function() {
//your code.
});
The HTML page isn't ready when you call the script, enclose your code with $(function(){...});, it will wait until the page is ready.
$(function(){
$('.btn').click(function() {
console.log("STUPID LOG");
alert("Fantastic, I will appear!");
});
});
I also recommend you to put your script tags at the end of your HTML page, the render of visual elements will be faster.
u can try like this too
function myFunction() {
alert("I am an alert box!");
}
<button onclick="myFunction()">Click Me</button>
I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.
According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>
Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals
you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});
I created a intro for a website using jquery into the index.html file. I "fadeIn" and "fadeOut" some .jpg images in a row. So, after this ends, I want to load an html file which will be the "home page" and the browser url will change from "www.blabla.com" to "www.blabla.com/home.html" and if the user refresh the browser it won't play the intro again, just appear "www.blabla.com/home.html".
I use the code you see below to load the home.html after the intro ends, but it seems to appear from the beginning in the back of the page and if refresh the page intro plays again.
<script type="text/javascript">
$(function() {
$( document ).ready(function() {
$("#image1").delay(0000).fadeIn("slow").delay(3000).fadeOut("slow");
});
$( document ).ready(function() {
$("#image2").delay(3000).fadeIn("slow").delay(3000).fadeOut("slow");
});
$( document ).ready(function() {
$("#image3").delay(6000).fadeIn("slow").delay(3000).fadeOut("slow");
});
$( document ).ready(function() {
$("#home").delay(10000).fadeIn("slow").load('home.html');
});
});
<div id="intro>
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
</div>
<div id=main></div>
How can i change this?
Just add a callback function to your final fadeOut and use plain Javascript to redirect the browser to home.html. Just make sure that that page actually exists.
I've also streamlined your code as all of the document ready bits weren't needed inside of $(function(){ ... });
$(function() {
$("#image1").delay(0000).fadeIn("slow").delay(3000).fadeOut("slow");
$("#image2").delay(3000).fadeIn("slow").delay(3000).fadeOut("slow");
$("#image3").delay(6000).fadeIn("slow").delay(3000).fadeOut("slow", function() {
window.location.href = "home.html";
});
});
});
Let me know if you have any questions.