I have a problem with js and jQuery, let me explain.
I have a situation which loads a html content dynamically, after this I call a function that contains all my jQuery codes. But why? It's because I need that all the events bound before, works with the new content. So, my problem is, it works but just the first time.
Example:
$(document).ready(function() {
myfunctions();
});
function myfunctions()
{
/* It calls datepicker plugin */
$('.datepicker').datepicker();
/* It opens a lightbox with the new html content */
$('.open-popup').click(function() {
$.popup.open(function() {
callbacks: {
/* It runs when lightbox has just opened */
open: function() {
myfunctions();
}
}
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note:
Realize that the cdoe is opening a lightbox and the callback "open" calls again the "myfunctions()", so if has a element with class "datepicker" the plugin is called again to this element. This code works fine in the first time, but if I close the lightbox and open it again doesn't work anymore.
Anyone can help me?
Related
I have this burger menu which I can't invoke the button onclick event function when I click it.
HTML code:
<button class="nav-aside-close"><i class="fa fa-times"></i></button>
JQuery code:
$('.nav-aside-close').on('click', function () {
console.log('test');
$('#nav-aside').removeClass('active');
$('#nav').removeClass('shadow-active');
});
If I click any area outside the burger menu, it works. Below is the code which works:
$(document).click(function(event) {
if (!$(event.target).closest($('#nav-aside')).length) {
if ($('#nav-aside').hasClass('active')) {
$('#nav-aside').removeClass('active');
$('#nav').removeClass('shadow-active');
} else {
if ($(event.target).closest('.aside-btn').length) {
$('#nav-aside').addClass('active');
$('#nav').addClass('shadow-active');
}
}
}
});
Actual code I have uploaded it at http://js.findingsteve.net
If you're using Chrome, open up DevTools (F12) and do this on the Console tab and hit Enter:
getEventListeners(document.querySelector('button.nav-aside-close'))
If you see any click events registered, it should work.
Anyway, I noticed you are putting the main.js file on the <head> and not using jQuery.ready, so your click handler is essentially never attached since the DOM element is not ready by the time the script executes.
Solution:
Add the jQuery alias $ on the very first line of your JS file, that is a shorthand for jQuery.ready BTW.
$(function($) {
"use strict"
// Fixed Nav
var lastScrollTop = 0;
Don't forget to also remove the jQuery function assignment from the end of the line, since it's no longer an IIFE.
setStickyPos();
})(jQuery);
Alternative, you can keep everything as is and move your main.js file to the <body> element, right before the closing </body> tag. That is pretty much the same as having the scripts executed when all the elements above it have finished loading.
It's probably because .nav-aside-close is hidden in the initial render.
Try this instead:
$("#nav").on("click", ".nav-aside-close", function() {
$("#nav-aside").removeClass("active");
$("#nav").removeClass("shadow-active");
});
Based in #Ana Liza Pandac comment
It should be:
$("#nav").on("click", "#nav-aside .nav-aside-close", function() {
$("#nav-aside").removeClass("active");
$("#nav").removeClass("shadow-active");
});
Your tree is: nav->nav-aside and obj with class nav-aside-close
The difference is on:
$("#nav").on("click", "#nav-aside .nav-aside-close", function()
Im new to JS, so Im sorry for such easy question. I have slide up/down menu, I want it to be closed by default when the page loads and open when clicking. How can I do this? Thanks very much for the responses. Here is the code:
$('.button-show').click(function() {
if ($(this).hasClass('hidden-menu')) {
$(this).next().slideDown(300);
$(this).removeClass('hidden-menu');
} else {
$(this).next().slideUp(300);
$(this).addClass('hidden-menu');
}
return false;
You need to have the .hidden-menu class on the menu when the page loads. You can add it directly to the html so that it is hidden without any javascript having to run:
<div class="menu hidden-menu">
Or you can use some javascript after the DOM has loaded, which is similar to what you have now just somewhere outside of the click handler:
$(".menu").addClass("hidden-menu")
Add to your .ready() function to set the hidden-menu class by default:
// when your page finished loading
$(document).ready(function () {
// check if there is no .hidden-menu class
if (!$(".MENUCLASS").hasClass("hidden-menu")
{
// then add it
$(".MENUCLASS").addClass("hidden-menu");
}
});
or just simply put it in your HTML element, no hassle:
<div class="MENUCLASS hidden-menu">
// stuff
</div>
hope that helps
on page load you just add inline css display:none;
you problem will be solved.
First of all you have to hide your div by default using CSS and apply jQuery see below code
$('.button-show').click(function() {
jQuery('.menu').slideToggle();
jQuery(this).toogleClass();
});
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 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.
I am struggling with jQuery for a long time now. It is very powerful and there are lot of great things we can do with jQuery.
My problem is that I use a lot of jQuery features at the same time. E.g. I have a site that displays items, 12 items per page and I can paginate through the pages using jQuery. On the same page I implemented a thumpsUp button that uses jQuery too.
The more jQuery features I use, the harder it gets to arrange them properly. E.g.:
$(document).ready(function() {
$(".cornerize").corner("5px"); //cornerize links
$('a#verd').live('click', exSite); //open iframe
$("a.tp").live('click', thumpsUp); //thumps up
$("a#next").click(getProgramms); //next page
$("a#previous").click(getProgramms); //previous page
//for the current page reload the content
$("a#page").each(function() {
$(this).click(getProgramms);
});
//this isn't working...
$('.smallerpost').live('click', alert('test'));
});
Have a look at the last code line. I want to perform an alert when the div element is clicked. Instead of doing so the page shows me the alert when I refresh the page. A click on the div has no effect.
What am I doing wrong? What would be a strategy here to have clean and working jQuery?
Change that line to
$('.smallerpost').live('click', function () {
alert('test');
});
and while you're there...
$("a#page").each(function() {
$(this).click(getProgramms);
});
has exactly the same effect as:
$('a#page').click(getProgramms);
... but technically there should be only one element with id='page' anyway
Your code $('.smallerpost').live('click', alert('test')); calls the alert immediately and passes its return value into the live function as the second parameter. What you want to pass there is a function to call, so you want:
$('.smallerpost').live('click', function() {
alert('test');
});
or
$('.smallerpost').live('click', handleSmallerPostClick);
function handleSmallerPostClick() {
alert('test');
}
...depending on how you structure your code.