jquery SlideToggle in dnn - javascript

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.

Related

Bootstrap "hidden.bs.collapse" doesn't call my function

I do have a problem with the trigger-event of bootstrap.
I try to call a function after my content got hidden or shown.
After my search i found this solution, but it doesn't work yet:
$(document).ready(function () {
$('#widget-box').on('hidden.bs.collapse', function () {
alert("hidden");
})
$('#widget-body').on('hidden.bs.collapse', function () {
alert("hidden");
})
$('#SearchForm').on('hidden.bs.collapse', function () {
alert("hidden");
})
});
The widget-box is the one getting the collapsed class.
The widget-body is the one getting shown/hidden.
The SearchForm is the content of widget-body which dis-/appear.
Neither of this 3 functions shows me an alert. What am I doing wrong?
Use external javascript file. Try to write your jQuery code into external javascript file and link that external javascript file to your html file using script tag.

Lightgallery not working (using jade and loading page separately)

I am relatively new to javascript and I cannot figure out what I might be doing wrong here to implement lightgallery in my code.
I included all stylesheets (in the header) and relevant scripts. Here is what part of my head and body looks like.
head
link(rel='stylesheet', href='nodescripts/css/lightgallery.css')
body
//jade block for pages
block content
script(src='/nodescripts/jquery.min.js')
script(src='/nodescripts/bootstrap.min.js')
script(src='/nodescripts/wow.min.js')
//gallery
script(src='/nodescripts/js/lightgallery.js')
script(src='nodescripts/js/lg-thumbnail.min.js')
script(src='nodescripts/js/lg-fullscreen.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js')
script(src="/javascripts/loadPages.js")
script.
//loads main menu page (function from loadPages.js)
loadIndex()
script.
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'
});
});
The loadIndex function in loadPages.js (goes to server side, works without a pb)
function loadIndex (){
$.get('/Index', function(content){
$("#upperContainer").css('background-image', 'url(/images/SF-background.jpg)');
$('#mainContainer').html(content);
});
}
And here is the images markup I use:
#photoRow.row
ul#lightgallery
li
a.item(href='/images/s-gallery/big(1).jpg')
img(src='/images/s-gallery/small/small(1).jpg')
li
a.item(href='/images/s-gallery/big(2).jpg')
img(src='/images/s-gallery/small/small(2).jpg')
li
a.item(href='/images/s-gallery/big(3).jpg')
img(src='/images/s-gallery/small/small(3).jpg')
The lightgallery is supposed to appear in the index page, which is loaded by the loadIndex() function (I am using a navbar with several pages).
Am I not doing the lightgallery call properly? Is my $(document).ready(...) happening at the same time than my index page is being loaded? (Though I know that scripts are technically called synchronously).
Basically my images show no effect at all and remain a non styled list..
Can someone help?
Call lightGallery from the loadIndex function as below.
Because it is an AJAX function the callback is executed after the document ready function is fired so the plugin could not find any elements to work with.
function loadIndex (){
$.get('/Index', function(content){
$("#upperContainer").css('background-image', 'url(/images/SF-background.jpg)');
$('#mainContainer').html(content);
$("#lightgallery").lightGallery({
selector: '.item'
});
});
}

JS/jQuery: recall function that contains all jQuery codes

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?

Re-rendering jQuery function

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.

Execute script after loaded in div [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Initialize script
I have a page (Page1.html) and in this page a div (#div1) that get its content from other divs in another page (Page2 #div1/2/3/4/5). The content is loaded in by jQuery load script. The content is loaded in based on choice in a select box, so the content is loaded in after Page1 has finish loaded.
Problem:
When I get some content from Page2 that's depending on jQuery, these elements don't work. They don't execute.
My questions:
Is there any way to make the a whole inloaded #div from Page2 (all the content) to execute WHEN its loaded in? Right now the existing elements "initialize" when they are loaded in, for example: function initializeSlider(){ slider };.
Now I am trying to add in some more elements depending on jQuery, and wounder if initializing all the objects is the correct way of execute all these scripts, or is there any way that execute all the jQuery elements at once so no need to initializing all object one by one?
Executing or Initializing one script:
If there is no way to execute/initialize all scripts at once when a div is loaded in. I am trying to execute or initialize this script without success, have tried both the "$(document).ready(function() {" and initialize it similar to the slider but the element is not executing.
$(document).ready(function() {
$(".lil").click(function () {
$(this).toggleClass("highlight");
});
});
Depending on what you're initializing; for events make sure and use .on():
$("#div1").on('click', '.lil', function () {
$(this).toggleClass("highlight");
});
Use:
$(document).ready(function() {
$("#div1").on('click', '.lil', function () {
$(this).toggleClass("highlight");
});
});
You could give that function a name. Something like:
function toggleClasses(classToToggle) {
$(classToToggle).click(function () {
$(this).toggleClass("highlight");
});
}
Then, your main page could have:
$(document).ready(function() {
toggleClasses('.lil');
});
And at the bottom of the partial view that you load from page 2, add this:
<script>
toggleClasses('.partialViewClass');
</script>
That way, as soon as that Partial View is done loading, it will call that same function.
If all you're doing is toggling that class, you might want to add a parameter for a secondary class to differentiate the elements in the partial view from the elements in the original page, that way the ones in the original page won't get toggled back when the partial view gets loaded.
So the ones in your partial view would need the highlight class as well as that secondary differentiation class (class="lil partialViewClass"). Pass the class as the parameter to the function so each one will only toggle what it should.

Categories

Resources