Is there any way to run some function before and accordion it's fully opened?
Here's the code:
$.each($('.accordion-toggle'),function(){
$(this).click(function() {
if($(this).hasClass("collapsed")){
//loading content via ajax
};
});
I tried to use .on('show') functions and changing data-toggle with javascript opening and closing content, but it seems to be very complicated due to existing code.
Try this...
$.each($('.accordion-toggle'),function(){
$(this).click(function() {
if($(this).hasClass("collapsed")){
\\loading content via ajax
}
});
});
You forget the ";"...
Related
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'
});
});
}
I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.
You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call
Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.
I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});
simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});
I'm using the Reveal modal plugin by Zurb.
http://www.zurb.com/playground/reveal-modal-plugin
Does anybody know how I can get the modal to execute (as in open the popup box) when my page has finished loading as opposed to when the handler is clicked?
I'd like to use it to display a simple message each time somebody opens my homepage.
I've dug through the code and tried a few things, but I'm a self confessed jQuery noob.
I was going to post the entire contents of the jQuery plugin itself, but it might just be easier to download it and take a look for yourself.
Thanks!
:)
$(function() {
$('#myModal').reveal();
});
OR
$(document).ready(function() {
$('#myModal').reveal();
});
Couldn't you just do the following after you instantiate your modal:
$(document).ready(function() {
// instantiate modal first
$('#myModal').reveal();
});
Something like this should work:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').reveal();
});
</script>
Hey had trouble getting this to work on a page using other .js libraries where JQuery NoConflict was being used -- in that case try this:
jQuery(document).ready(function($) {
$('#myModal').reveal();
});
Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn't good if you have a load of blog posts which have anchor links to the same page (ie href="#specs").
Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?
I only need a solution for anchor links on the same page (ie: href="#specs").
thanks
You could try adding a data-ajax="false" on the anchor tag.
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.
Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.
$(document).ready(function() {
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});
Hope this helps. It is the same solution user700284 offers but in an automated way.
You can add the following code to the end of your page:
<script type="text/javascript">
$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
</script>
And add the class "native-anchor" to your anchor links.
It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.
I found this sollution here: jQuery Mobile Anchor Linking
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
First you have to place this code into a custom.js file
$(document).bind('mobileinit', function () {
$.mobile.loader.prototype.options.disabled = true;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.loadingMessage = false;
});
Then add this file into your webpage before the jquery mobile js is loaded. becuase 'mobilinit' event is triggered immediately
Thank you
this solution worked for me
<script>
$(document).ready(function() {
$("a").each(function() {
if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
});
});
</script>
I replaced # with index.php which is my document root.
But, it doesn't work for form button i.e input type="submit"
// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
$('a[href*="#component"]').each(function () {
// then set data-ajax to false,
$(this).attr("data-ajax", false);
// at this point you can add the class to your target a tags.
// You can do it elsewhere but because for this example my
// 'a' tags are automatically generated so I just add the class here
$(this).addClass('in-pagelink');
// then target the class and bind to a click event
$('a.in-pagelink').bind('click', function (ev) {
// here I redirect the page with window.location.assign
// as opposed to window.location.href. I find that it works better
window.location.assign(this.href);
// then I close my navigation menu
closeAll();
});
});
I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.
Page I'm working on is here: http://turningpointpro.com/page.php?id=10
I ended up finding two solutions. The first and best was to put this whole bit:
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
into the ajax callback, not the prettyPhoto.init(); function I was calling before.
I also had some luck with using the API instead of re-loading prettyPhoto again.
Hope this helps someone.
If you are using ASP.NET with Ajax, the scriptmanager will allow you to use a function called pageLoad() that is called every time the page posts back (async or otherwise).
your code:
function pageLoad()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$(function() {
$('#navigation a.button').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('#portfolio').quicksand( $(data).find('li'), { adjustHeight: 'dynamic' }, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); } );
});
e.preventDefault();
});
});