I would like to select only jpg file and use magnific popup.
$('.entry-content').each(function () {
$(this).magnificPopup({
delegate: 'a',
type: 'image'
});
});
Because of using $('.entry-content'), downloadable files are not working...
Any advice is helpful. Thank you.
You can check to see the file ending is .png.
$('.entry-content').each(function () {
if($(this).attr("src").match(/\.jpg$/)) {
$(this).magnificPopup({
delegate: 'a',
type: 'image'
});
}
});
It works now. Here is the code I use.
$('a[href*=".jpg"], a[href*=".jpeg"]').each(function(){
$(this).magnificPopup({
type:'image'
});
});
Thank you #Oleander and #Brad Larson
Related
I have a console error that says Uncaught ReferenceError: tinymce is not defined and I really don't know how to solve that. It says that the error is in the javascript file below:
(function() {
"use strict";
tinymce.PluginManager.add('wdm_mce_button', function( editor, url ) {
editor.addButton('wdm_mce_button', {
text: 'Team',
icon: false,
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent('[team_section]');
}
});
editor.addButton('services', {
text: 'Services',
icon: false,
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent('[services_section]');
}
});
});
})();
So the error should be in the "tinymce.PluginManager.add" line. I must mention that this code is running on wordpress and I use it to add some buttons in my classic editor. I'm waiting for some help please.
Thank you!
My question is the following:
I have multiple filters on my page, that filter events schedule dynamically, so when I click on any of the filters, my url changes without reloading the page.
For example:
http://.../schedule/#Screening,Free
http://.../schedule/#Talk,Expo
Then, I have share buttons with Sharrre:
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank")
a.icon.icon-linkedin2.js-linkedin-filters(href="#", target="_blank")
a.icon.icon-facebook.js-facebook-filters(href="#", target="_blank")
$('.js-facebook-filters').sharrre({
share: {
facebook: true,
},
url: window.location.href,
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('facebook');
}
});
Inspite of that fact that inside sharrre I have url variable that equals to current link, it shares only that link which is derived when page is loaded for the first time.
I tried to put it inside click event on the icons - that does not work.
I tried to put sharrre inside a function (eg. initialiseShare) and do window.initialiseShare = initialiseShare; - that also does not work.
And I tried to remove and append the button, changing data-url attribute, and it also does not work.
function initialiseShare(link) {
$('.js-twitter-filters').sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
} }); }
+
$(document).ready(function() {
initialiseShare();
$('.js-twitter-filters').on('click', function(){
var clone = $('.js-twitter-filters').clone();
$('.js-twitter-filters').remove();
$('.social--share-filters').append(clone);
$('.js-twitter-filters').data('url', window.location.href);
initialiseShare();
return false;
});
});
+
jade for the icon
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank" data-url="#")
Please, help!
Thank you in advance!
P.S. I can use any other solution except those which could lead to buttons which cannot be customised in design.
Try this:
$('body').on('DOMNodeInserted', '.js-twitter-filters', function(e) {
$(this).sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
}
});
});
Explanation:
You're trying to bind to dynamically loaded elements. When your script executes on page load, the elements are not available for jQuery to perform the binding with "sharrre" - so you can use the .on() live binding delegate to bind to elements after insertion.
Reference:
http://api.jquery.com/on/
I'm collecting some data from a series of similar webpages and store them in excel sheet. I'm using the opener class in urllib2 within python for this work.
The problem is that in one group of these pages, you need too click on a hyperlink so that the needed data appear.
Is there any way that I could fake the click on this hyperlink and include it in the address that I send within my python code?
This is the href tag of the link:
<a href="#" onClick="refresh_reg_table();refresh_reg_list(); return false;">
And here are the functions called in onClick:
function refresh_reg_table(order){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('table_registrations', 'ajax/get_table_registrations.php', {
method: 'get',
parameters: {
table: 'registrations',
idevent : 143593,
sorted : order},
evalScripts: true,
});
}
function refresh_reg_list(){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('reg_list', 'ajax/get_list_registrations.php', {
method: 'get',
parameters: {
type: 'table_name_reg',
idevent : 143593
},
evalScripts: true,
});
}
All you can do through the address bar is using the javascript: prefix and it would run all your JavaScript code after that javascript: prefix.
you also better change the your hyperlink like:
...
Use javascript:yourFunction() to start the page's function - i dont think there's any other way around it
I have an iframe within one of my webpages. It points to another page on the same domain. I've been trying to make the elements draggable within it and I'm having trouble. I got it working last night but make some changes before saving that version and now can't figure out how I had it before so I know it can be done. I have the iframe highlighting elements right now but when I put the code to drag and drop in as I had it before, it doesn't work. The code in the main page is:
function init() {
var $head = $("#myframe").contents().find("head");
$head.append($("<link/>", { rel: "stylesheet", href: "http://ajax.googleapis.com /ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css", type: "text/css" }));
$head.append($("<link/>", { rel: "javascript", href: "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js", type: "text/javascript" }));
$head.append($("<link/>", { rel: "javascript", href: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js", type: "text/javascript" }));
$head.append($("<link/>", { rel: "stylesheet", href: "my_styles.css", type: "text/css" }));
}
function iframeLoad() {
$head.append($("<link/>", { rel: "javascript", href: "my_js.js", type: "text/javascript" }));
}
My code for the jquery to drag and drop is:
$(document).ready(function() {
$("p").draggable();
});
$(document).ready(function() {
$("h1").draggable();
});
$(document).ready(function() {
$("div").draggable();
});
The url is: http://johnverber.com/Opti/url.html in case you want to see it.
Not a full answer to your question but can't do code examples in comments clearly. You can clean up that last bit, you don't need to check if the DOM has loaded 3 times. Combine it into one:
$(document).ready(function () {
$("p,h1,div").draggable();
});
Looks like you are creating 'link' tags for your js files when it should be 'script' tags.
I have a form with various textfields and two buttons - Export to Excel and Export to CSV.
The user can provide the values to different fields in the form and click one of the buttons.
Expected behaviour is that an Ajax request should be fired carrying the values of fields as parameters and the chosen file (Excel/CSV as per the button click) should get downloaded (I am not submitting the form as there needs to be done some processing at the values before submit).
I have been using the following code in success function of Ajax request for the download:
result = Ext.decode(response.responseText);
try {
Ext.destroy(Ext.get('testIframe'));
}
catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'testIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.filename,
frameBorder: 0,
width: 0,
height: 0
});
The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.
Thus, is there a way to download a file using Ajax when the file is not present at the server physically? Just to add that I have a long list of parameters which I need to send to the server and hence can not add them all to the src of iframe.
Could anyone guide at this?
Thanks for any help in advance.
You may use component like this:
Ext.define('CMS.view.FileDownload', {
extend: 'Ext.Component',
alias: 'widget.FileDownloader',
autoEl: {
tag: 'iframe',
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL
},
stateful: false,
load: function(config){
var e = this.getEl();
e.dom.src = config.url +
(config.params ? '?' + Ext.urlEncode(config.params) : '');
e.dom.onload = function() {
if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
Ext.Msg.show({
title: 'Attachment missing',
msg: 'The document you are after can not be found on the server.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}
}
}
});
Put it somewhere in viewport, for example:
{
region: 'south',
html: 'South',
items: [
{
xtype: 'FileDownloader',
id: 'FileDownloader'
}
]
}
Do not forget to require it in your viewport class:
requires: [
'CMS.view.FileDownload'
]
Action handler may look like this:
var downloader = Ext.getCmp('FileDownloader')
downloader.load({
url: '/attachments/' + record.get('id') + '/' + record.get('file')
});
It's very important to have Content-Disposition header in response, otherwise nothing is downloaded.
Regards go to http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4
This thing works for me.