I have a section in my apps that loads data from a JSON file and displays pictures in a grid.
Example of JSON data:
"categories": [
{
"title": "Test",
"image": "./assets/images/listing/200x200basquet.png",
"page": "TestPage"
},
Now I have a function when you click on one of the images it navigates you to 1 page, instead of different pages per image.
goToFeed(category: any) {
console.log("Clicked goToFeed", category);
this.nav.push(FeedPage, {
category: category
});
}
Does anybody have an idea on how can I re-write that function to specific navigate to the page that the image correlates?
Thanks
Related
I bought a template and have asked to the writer but still no respond so far. Actually, I need a quick answer. Any body here can help to fix?
It's about to show Quick View of a single product detail to show in a window popup when a link is clicked. I have no idea how to put any data and get the data when popup appear, no browser refresh. Please don't ask me what have I done, I have no idea at all. I usually used ajax in a form.
The html link is like this :
<div class="quick-view">
<a title="Quick view" class="search" href="#"></a>
</div>
and the ajax call :
$(document).on('click','.quick-view .search,a.quick-view',function(){
var data = {
// data here....
}
$.post('quick_view.php', data, function(response){
$.fancybox(response, {
// fancybox API options
fitToView: false,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
// OWL Product thumb
$('.product-img-thumb .owl-carousel').owlCarousel(
{
dots:false,
nav:true,
navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
margin:21,
responsive : {
// breakpoint from 0 up
0 : {
items : 2,
},
// breakpoint from 480 up
480 : {
items : 2,
},
// breakpoint from 768 up
768 : {
items : 2,
},
1000 : {
items : 3,
}
}
}
);
})
return false;
})
any answers is appreciated.
If you add an ID to your elements that fire the event you can access and use it's ID or other Attribute to send it as data in your AJAX-call. To do this you use the event.target which points to the element that triggerred the event. In this way you can use the same call for a whole bunch of elements on the same page:
$(document).on('click','.quick-view .search,a.quick-view',function(event){
// Get the id of the element and add it to the data sent with call
var data = {
elementId: event.target.id
}
// Rest of your Ajax call
}
I'm trying to create my first Chrome extension.
It's basically an adblocker for specific elements, in this case - the Facebook comments section.
It works with the all_urls but not with that specific domain.
Manifest file:
{
"name": "My extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://visir.is/*"], //where your script should be injected
"css": ["style.css"] //the name of the file to be injected
}
]
}
style.css file:
.fbcomment {
display: none;
}
Any ideas how to correct "matches"?
I have tried *://visir.is/* as specified in https://developer.chrome.com/extensions/match_patterns but it only works with all_urls
Viktor,
You are on the wrong way. Your extension should work on Facebook site, and so the matches statement in the manifest must be exactly as the following:
"matches": ["https://www.facebook.com/*"]
Than you need to find all the comments in the timeline (most probably by css class), detect the presence of the target site address (//visir.is/) and then hide these comments.
Because the timeline dynamically load more posts you will also need to observe the new nodes and apply your function on them too (see the example from my Chrome extension below):
var obs = new MutationObserver(function (mutations, observer) {
for (var i = 0; i < mutations[0].addedNodes.length; i++) {
if (mutations[0].addedNodes[i].nodeType == 1) {
$(mutations[0].addedNodes[i]).find(".userContentWrapper").each(function () {
injectFBMButton($(this));
});
}
}
injectMainButton();
});
obs.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false });
I tried this : https://developer.chrome.com/extensions/options.html and made an option page.
So a selection has been added under my extension icon with the name of Option.
My question is that is there a way to rename Option and change it something like Setting or some words in other languages ?
The "Options" label at chrome://extensions is automatically adapted to the user's language. Extensions cannot change the value of this label.
The value of the "Options" option at the dropdown menu at the extension's button cannot be customized either, but you can create a new context menu item under the button as of Chrome 38. E.g.
chrome.contextMenus.create({
id: 'show-settings', // or any other name
title: 'Settings',
contexts: ['page_action', 'browser_action']
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == 'show-settings') {
chrome.tabs.create({
url: chrome.runtime.getURL('settings.html')
});
}
});
I suggest to just stick to "Options" though, because users do already know what the option does. Consistency in UI/UX is important, imagine how you productive you'd be if every application had a different way of (e.g.) closing/quiting the application.
manifest.json to test the previous script:
{
"name": "Contextmenu on browserAction button",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Right-click to see a context menu"
},
"permissions": [
"contextMenus"
]
}
Easier way to trigger events.
chrome.contextMenus.create({
title: 'GitHub',
contexts: ['page_action'],
onclick: () => console.log('GitHub'),
});
Right, based on this question Tweet clickable links with twitteroauth?,
How do I actually parse the entire string and replace the t.co link portion with a
portion?
For example i tweet this -
Hey check out this link www.google.com
and in my website currently it shows
Hey check out this link http://t.co/generatedlink
So how do i parse it and make it into this
Hey check out this link http://t.co/generatedlink
which would display like this in my website:
Hey check out this link http://t.co/generatedlink
How am I able to detect that a certain portion of the tweet text has a link inside it? Or am I going about this wrong?
You need to understand Twitter Entities.
When you request the tweet, make sure you use include_entities=true
For example:
https://api.twitter.com/1/statuses/show.json?id=220197158798897155&include_entities=true
In the response, you will see an element called "entities" inside that, you will see "urls".
That will contain all the URLs and their position (indices) within the tweet.
"text": "Twitter for Mac is now easier and faster, and you can open multiple windows at once http://t.co/0JG5Mcq",
"entities": {
"urls": [
{
"url": "http://t.co/0JG5Mcq",
"display_url": "blog.twitter.com/2011/05/twitte…",
"expanded_url": "http://blog.twitter.com/2011/05/twitter-for-mac-update.html",
"indices": [
84,
103
]
}
],
}
function urlify(text) {
var urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function(url) {
return '' + url + '';
})}
var text = "Hey check out this link http://t.co/generatedlink";
var a = urlify(text);
alert(a);
The above solution is perfect for your needs. I have a Fiddle link too Check it out http://jsfiddle.net/UhzCx/
I got this answer here Detect URLs in text with JavaScript
If you can use javascript, here is an example http://jsfiddle.net/3VF96/13/
Function
function generateURL(text){
var str=text;
var n=str.indexOf("http");
var strv=str.substring(0,n);
var link=str.substring(n,str.length);
strv=strv+" <a href='"+link+"'>"+link+"</a>";
$("#Link").append(strv);
}
How do I write a chrome extension such that every time a user clicks the icon, my script is run but no popup is opened? (I would look this up in the docs myself but for whatever reason they suddenly stopped working, 404ing every page, as I got to this point).
I'm assuming it's just setting up the manifest correctly. Here's what I have now:
{
"name": "My Extension",
"version": "0.1",
"description": "Does some simple stuff",
"browser_action": {
"popup" : "mine.html",
"default_icon": "logo.png"
},
"permissions": [
"notifications"
]
}
Remove popup from your browser_action section of the manifest and use background pages along with browser Action in the background script.
chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});
First, if you don't want to show a popup, remove "popup" : "mine.html" from your manifest.json (shown in your question).
Your manifest.json will look something like this:
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "Does some simple stuff",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "logo .png"
},
"permissions": ["activeTab"]
}
Note that manifest_version must be there and it must be 2.
Note that the activeTab permission has been added.
Note that you can only do one thing when the browser action button is clicked: either you can show a popup, or you can execute a script, but you can't do both.
Second, to execute a script when the icon is clicked, place the code below in your background.js file (the filename is specified in your manifest.json):
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "testScript.js"});
});
Finally, testScript.js is where you should put the code you want to execute when the icon is clicked.
If you want to follow the manifest 3 then you should do:
chrome.action.onClicked.addListener(function (tab) {
console.log("Hello")
});
Further note that you will not see the Hello in normal console, to see the hello go to extensions menu and click on inspect views in front of the specific extension menu.
Instead of specifying a popup page, use the chrome.browserAction.onClicked API, documented here.
you need to add a background file.
but firstly ou need to add an attribute in manifest.json like,
"background":{
"scripts":["background.js"]
}
now name a file in your extension folder as background.js
there is a way of sending objects from background to your content scripts suppose your content script is named content.js then what you need to do is write this code snippet in background.js file
chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
msg={txtt:"execute"};
chrome.tabs.sendMessage(tab.id,msg);
}
what the above code is doing is sending an object named msg to content page and this msg object has a property txtt which is equal to "execute".
what you need to do next is compare the values in content script as
chrome.runtime.onMessage.addListener(recievefunc);
function receivefunc(mssg,sender,sendResponse){
if(mssg.txtt==="execute"){
/*
your code of content script goes here
*/
}
}
now whenever you click the extension icon an object named msg is sent from background to content. the function "recievefunc()" will compare its txtt property with string "execute" if it matches your rest of the code will run.
note: msg,txtt,sendfunc,receivefunc,mssg all are variables and not chrome keywords so you can use anything you want.
hope it helps.
:)
In manifest 3 you might do it like this
// manifest.json
"background": {
"service_worker": "back.js"
},
// back.js
chrome.action.onClicked.addListener(tab => {
chrome.tabs.create({
url: 'index.html'
});
});
This was just what I needed but I should add this:
If all you need is a one-time event like when a user clicks on the extension's icon, then Background Pages is a waste of resources as it will run in the background ALL the time.
Use Event Pages instead:
"background": {
"scripts": ["script.js"],
"persistent": false
}