I have going to add the below code in the revolution slider in the WordPress website from adding to the "Html/Text" Layer. Output showing the inner sider but not showing the user interface.
After saving the code that is converted in the NoScript tag.
Note: My motive is that how can I add " onClick="goog_report_conversion
('https://apps.apple.com/us/app/people-app/id1335211174')" on image click.
there are a few step to with this.
Setup your Google Analytics account for your site.
Hyperlink your Slides and/or Layers.
Add the "ga-button" class to your hyperlinks.
Add the following script to your slider's Custom JavaScript section.
jQuery('body').on('click', '.ga-button', function() {
var $this = jQuery(this),
data = $this.attr('data-link') || $this.attr('href');
if(!data) {
data = $this.attr('data-actions');
if(data) data = data[0].url;
if(!data) data = $this.attr('id');
}
gtag('event', 'click', { event_category: 'outbound', event_action: 'click', event_label: data});
});
Track All Slide Changes:
jQuery(window).on('load', function() {
jQuery('.rev_slider').each(function() {
var ids = jQuery(this).attr('id').split('rev_slider_')[1].split('_')[0],
api = eval('revapi' + ids);
api.on('revolution.slide.onchange', function(e, data) {
var data = 'Slider ' + ids + ' changed to slide #' + data.slideIndex;
gtag('event', 'click', { event_category: 'outbound', event_action: 'click', event_label: data});
});
});
});
All done Enjoy;
Related
I'm trying to make it so when a user clicks on a image in the content of my website, it will then load that image into google image search and display the results.
This is the code I am using
<script>
var gurl = "http://www.google.com/searchbyimage?sbisrc=cr_1_3_2&image_url=";
$(document).ready(function() {
$('.thefeed').delegate('p img', 'click', function(e) {
e.preventDefault();
window.open(gurl + this.src, '_blank');
});
});
</script>
and a html snippet
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</p>
The idea is for when you click on the image, it would open up this page.
var gurl = "http://www.google.com/searchbyimage?sbisrc=cr_1_3_2&image_url=";
$(document).ready(function () {
$('.thefeed').delegate('p img', 'click', function (e) {
e.preventDefault();
// Check if click is on image
if (e.currentTarget.tagName === 'IMG') {
window.open(gurl + e.currentTarget.src, '_blank');
}
});
});
One thing is that google is rewriting the url and we cannot stop that from this code. This would correctly generate the url for you now.
this was pointing to .thefeed in this case which should be now resolved
Pen: https://codepen.io/anon/pen/eRExWW
I have very few knowledge about using api, javascript.
(I'm a html/css coder)
I've been requested to use this API to get instagram pictures
that users posted using certain hashtag.
Here's the demo that's been shared by jsfiddle
http://jsfiddle.net/j9ynxvox/10/
$(function() {
// 「表示」を押すと、画像を取得します
var endpoint = 'https://tagplus.jp/demo/api/json/medias';
// ポップアップ用の関数
var popup = function(item) {
var $container = $('<div>', {'class': 'popup-container'});
$('<div>', {'class': 'popup-overlay'}).appendTo($container);
var $template = $($('#popup-template').html());
$template.find('.popup-image').attr('src', item.images.standard_resolution);
var userLink = 'https://instagram.com/' + item.media_user.username;
$template.find('.user-link').attr('href', userLink);
$template.find('.profile-picture')
.attr('src', item.media_user.profile_picture);
$template.find('.media-user-name').text(item.media_user.username);
$template.appendTo($container);
$('body').append($container);
$container.fadeIn();
};
$(document).on(
'click',
'.popup-overlay',
function(e) {
e.preventDefault();
$('.popup-container').fadeOut(
'fast',
function() {
$(this).remove();
}
);
}
);
$('button').click(function() {
$('#thumbnail').text('');
$.get(
endpoint,
{count: 12},
function(res) {
res.data.forEach(function(item) {
var $thumb = $('<img>', {
'class': 'insta-thumb',
src: item.images.thumbnail
});
$thumb.appendTo($('#thumbnails'));
$thumb.click(function(e) {
e.preventDefault();
popup(item);
});
});
},
'jsonp'
);
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$('.popup-container').fadeOut(
'fast',
function() {
$(this).remove();
}
);
}
});
});
In my case, I've been asked to use this API address. https://tagplus.jp/plazastyle_Campaign/api/json/medias
(its called http://tagplus.jp/)
To start off, I simply copied and pasted this jsfiddle code
to my local files but it is not working when I click the button to load instagram pictures.
Here's my demo
http://1ne-studio.com/test2/sample.html
id : test
pass : ny2016
Why is it not working and how could I fix this?
Thank you for your time!
(In my case, I've been asked to use this API address. https://tagplus.jp/plazastyle_Campaign/api/json/medias)
EDIT: So it looks like your script is totally different from the one in the fiddle. Replace your script to the one from the fiddle and try again!
Old answer:
It's because you do not have jQuery!
Add this somewhere in the head and try again
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
I have a panel that slides open on an element click called "details" and populates the panel via ajax depending on the data attribute value. I also have it setup that if you close outside that panel, it will close. If the panel is open and the user clicks on a different "details" element, I want the panel to close and open again populated with the data from the new data attribute.
Problem is that the codes checks if the panel is visible and won't load the ajax if it is. How can I change this so the click event knows the mousedown event is completed before it does it's thing?
// SLIDING PANEL
$(".details").on("click", function(e){
e.preventDefault();
var panel = $("#DetailsPanel");
var mkey = $(this).data("masterkey-id");
var _self = $(this);
// fetch data ONLY when panel is hidden...
// otherwise it fetches data when the panel is closing
if (!panel.is(':visible')) {
panel.load("/com/franchise/leads.cfc?method=getLeadDetails", { mkey: mkey }, function(response, status, xhr) {
// if the ajax source wasn't loaded properly
if (status !== "success") {
var msg = "<p>Sorry, but there was an error loading the document.</p>";
panel.html(msg);
};
// this is part of the .load() callback so it fills the panel BEFORE opening it
panel.toggle("slide", { direction: "right" }, "fast", function(){
_self.parent().parent().addClass("warning");
});
});
} else {
panel.toggle("slide", { direction: "right" }, "fast", function(){
_self.parent().parent().removeClass("warning");
});
};
return false;
});
$(document).on("mousedown", function(){
$("#DetailsPanel").hide("slide", { direction: "right" }, "fast", function(){
//_self.parent().parent().removeClass("warning");
});
});
// don't close panel when clicking inside it
$(document).on("mousedown","#DetailsPanel",function(e){e.stopPropagation();});
$(document).on("click", "#ClosePanel", function(){
$("#DetailsPanel").hide("slide", { direction: "right" }, "fast", function(){
$("#LeadsTable tr").removeClass("warning");
});
});
// END SLIDING PANEL
Setting a timeout worked for me in another context:
onclick="window.setTimeout( function(){ DO YOUR STUFF }, 2);"
This solves many problems of this type.
I'm not totally sure about this but if you use "mouseup" instead "click" could work as you expect. Try it and let me know if I'm wrong.
Ok, so I found this little nugget http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ and it works pretty good. No issues so far.
Here is the new code
$(".details").on("click", function(e){
e.preventDefault();
var panel = $("#DetailsPanel");
var mkey = $(this).data("masterkey-id");
var _self = $(this);
// fetch data ONLY when panel is hidden...
// otherwise it fetches data when the panel is closing
var wait = setInterval(function() {
if( !$("#DetailsPanel").is(":animated") ) {
clearInterval(wait);
// This piece of code will be executed
// after DetailsPanel is complete.
if (!panel.is(':visible')) {
panel.load("/com/franchise/leads.cfc?method=getLeadDetails", { mkey: mkey }, function(response, status, xhr) {
// if the ajax source wasn't loaded properly
if (status !== "success") {
var msg = "<p>Sorry, but there was an error loading the document.</p>";
panel.html(msg);
};
// this is part of the .load() callback so it fills the panel BEFORE opening it
panel.toggle("slide", { direction: "right" }, "fast", function(){
_self.parent().parent().addClass("warning");
});
});
} else {
panel.toggle("slide", { direction: "right" }, "fast", function(){
_self.parent().parent().removeClass("warning");
});
};
}
}, 200);
return false;
});
A the end of my index.html file I'm including two script files. One of files handles loading page content with jquery. The other file handles manipulating a tabbed content area on my home page, also jquery. If I put the file for the tabbed content area after the file for the ajax page load file, then tabs work but the ajax for the page load does not work. If I reverse the order of those files, then the page load ajax works but not the tabs. What could be causing this?
Here's the file for the tabbed content:
$(document).ready(function (){
initialize();
});
function initialize() {
//Click on nav to load external content through AJAX
// $('#topnav a').click(function(e){
// e.preventDefault();
// $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
// }); //clicked on nav
$(function() {
$("#tabedarea").organicTabs();
$("tabedarea").organicTabs({
"speed": 200
});
});
}
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$navtabs = base.$el.find(".navtabs");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hidetabs").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$navtabs.delegate("li > a", "click", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
//var newHeight = base.$el.find("#"+listID).height();
//$allListWrap.animate({
// height: newHeight
//});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".navtabs li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 300
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
And here's the file for the page load ajax:
// remap jQuery to $
(function($){})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function (){
initialize();
});
function initialize() {
//Click on nav to load external content through AJAX
$('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){
e.preventDefault();
$('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
}); //clicked on nav
//handle AJAX for left nav
}
You're creating global functions with the same name initialize change the names of those or just one. The one that's loaded afterwards overrides the first
The problem is having both the functions the same name. Use two different names for the functions.
Then you don't need to add two page load handlers. Add a single page load handler in the latter script and call the two methods in it.
suppose your two functions are initialize() and init2() then at the latter js file use
$(document).ready(function () {
initialize();
init2();
});
Currently coding a mates portfolio and not to my surprise the code isn't loading in IE!
I'm coding it using standard AJAX, here's the relevant jQuery:
//ajax shtuff
$(window).load(function() {
// Ajax Cache!
$.ajaxSetup ({
cache: false
});
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $('.current').attr('href');
// Initial Page Load
$('#con').prepend($loadW);
$('#main').fadeOut('slow', function() {
$(this).load($loadurl + ' .page', function() {
$(this).parent().find('#whiteLoader').fadeOut('slow', function() {
$(this).parent().find('#main').fadeIn('slow').css({background: 'red'});
$(this).remove();
});
});
});
$('nav ul li a').each(function() {
$(this).click(function(e) {
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $(this).attr('href');
// Prevent default hotlink
e.preventDefault();
// Add the current state
$('*').removeClass('current');
$(this).addClass('current');
// Load the Page
$('#main').fadeOut('slow', function() {
$('#con').prepend($loadW);
$('#main').load($loadurl + ' #main', function() {
$('#whiteLoader').fadeOut('slow', function() {
$('#main').fadeIn('slow');
$(this).remove();
});
});
});
});
});
});
Literally have no idea why this doesnt work lol, here's a link to the live page (I've put the background as red just to show you the area.)
Also the reason the initial page is using the 'this' method is because I was testing it both ways.
http://212.7.200.35/~tfbox/zee/
have you tried
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
instead of window.load?
Often IE has trouble styling / selecting any of the new HTML5 elements such as section and nav. Try using something like this or simply using a div