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.
Related
I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.
So, after many hours of trying to get this working (and being tempted to just give up and light myself on fire) I've decided the best thing to do is ask the mega minds that hang here on stackoverflow.
Now, here's what I've been trying to accomplish. I need to append/inject the rel attribute to the links in the Essential Grid plugin for WordPress. I've opened a ticket with ThemePunch (the plugin author) and their response was to copy (and edit accordingly) the snippet of code below which, if done correctly, would append the tags with the (in my case) rel="m_PageScroll2id". I've tried all sorts or selectors (classes, #'s, etc) and no matter what I do, I never see the rel="m_PageScroll2id" being added to anything anywhere in Firebug or Chrome Inspector. So, anyhoo, I've pasted my lastest jQuery failure below as well as a link to the page containing the Essential Grid.
The instance of Essential Grid is directly below the homepage slider and contains 6 grid items. Also, just so you guys can see what I need to make happen, I also set up an item in the site's main nav called 'TEST'. If you inspect that link, you'll see the rel="m_PageScroll2id" that I need to happen on links in Essential Grid.
I'm adding the code in the Custom JS panel in Ess Grid.
`$(function() {
$('.welcome a').attr('rel', 'm_PageScroll2id');
});`
And here's a link to the page in question: http://wclatlanta.wpengine.com/
I watch on your site, dev-console said $ is not a function. But jQuery - is a function in the same place. Replace
$(function() {
$('.welcome a').attr('rel', 'm_PageScroll2id');
});
with
jQuery(function() {
jQuery('.welcome a').attr('rel', 'm_PageScroll2id');
});
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the 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.
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.