Load lightbox automatically on page load - javascript

I have a lightbox that loads onclick (see the link 'test' at this page: http://www.300hours.com/test.html ). I want to modify the code so that the lightbox loads automatically when a user loads the page.
My current href is:
<a href='/uploads/1/2/2/3/12234663/4105150_orig.png' id='#interstitial' rel='lightbox' onclick='if (!lightboxLoaded) return false'>test</a>
I've tried a few Javascript and Jquery solutions posted, but so far nothing works. I'm not very familiar with JS and Jquery - I think my problem must be some kind of syntax error. Anyone who can help me out with a working sample would be much appreciated. Many thanks in advance!

Just trigger the onclick event using a jquery trigger().
$(document).ready(function(){
$("#interstitial").trigger("click");
});
It's a bit dirty but it gets the job done!

Related

jQuery .load not loading button

I've been trying to load a button from another page onto my page using jQuery. I've been following theinstructions detailed in the following url and havent beeen able to get it to work. I am still a bit new to jQuery so i may have small mistakes. Anything will help. iframe to Only Show a Certain Part of the Page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> $("#m").load('https://www.minds.com/theantimedia .minds-subscribe-button');
</script>
<div id="m"></div>
Update: I've been running it by opening it from an html file in my browser. I dont know if its like php and wont work. Also if i've broken any rules by posting this please warn me and i'll delete this question. Thanks!

Wordpress Search & Filter Autosubmit

I'm working with the Wordpress Search & Filter plugin and it's exactly what I needed for filtering though my gallery and shop content! I would like to make my selections submit every time a dropdown is changed, as opposed to having to click the submit button. (See link below).
In researching other posts, I've found that the solution is to implement this into my theme's java script file:
$(".searchandfilter select").change(function() {
$(".searchandfilter").submit();
});
I have put the line into my WooThemes Canvas's 'general.js' file but it seems to make no difference. I still need to click on the submit button to make changes. I've tried placing it in various other js files but I've had no luck. The page in questions is this one:
http://richardrosenman.com/wordpress/portfolio/
Does anyone have any insight as to what I'm doing wrong? I would REALLY appreciate any help as I'm stuck (and somewhat of a novice with Javascript!).
Thanks!
jQuery is loaded with jQuery.noConflict(); therefore you cannot use $ as selector (other libraries may be using it), instead use jQuery as selector:
jQuery(document).ready(function(){
jQuery(".searchandfilter select").change(function() {
jQuery(".searchandfilter").submit();
});
});
I think you can add it to general.js end of file since I see that file is loaded.

Application.js doesn't work inside a partial

I have a classic scheme - in application.js are included all needed JS routines and in the app working fine.
Then I have an AJAX link (remote="true") - after click on this link is called respective partial (lets say _display_popup.html.haml - this popup window is opened by display_popup.js). This is working fine as well.
Here coming the problem - in this opened popup window are not included the JS routines from application.js. I am struggling with this issue whole day, but I still can't find the reason why...
Could anyone, please, give me any advice, in what is the problem and how I could to fix it?
Thank you in advance
Take a look at http://api.jquery.com/live/
I was having problems with js not working inside my partials loaded with ajax. I just added the .live to attach to elements added after the document is loaded.
$('input:radio').click(function () { }); // Doesn't work with partials loaded remotely
$('input:radio').live("click",(function () { }); // works fine

How to execute custom js after jQuery Mobile has created a new page div?

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.
Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.

jQuery Thickbox Issue

I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.
A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.
I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?
A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress
Any ideas?
in thickbox.js:
$(domChunk).click(function(){
was replaced with this:
$(domChunk).live(click, function(){
Stuart got it right: thank you so much!
I was stuck with a similar problem issue: in my case, the target of an appended link (through jQuery .append() method ) was not loaded in a thickbox.
My jQuery code was executed in a document.ready() function:
$("#subpages").append('','<a href="..." class="thickbox" [...]');
Simply adding:
tb_init('.thickbox'); //required to reinitialize thickbox as DOM was manipulated
just after the last line fixed the problem.
Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this
I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?
If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.

Categories