Seems it's just a static text. But I want to e.g. redirect to home page by clicking on navbarText label... Just adding "
Workaround:
Create a CSS style class:
.navbarText {
cursor:pointer;
}
Assign the class to the text element
Create a onClientLoad Javascript which uses jQuery:
$(".navbarText").click(function(){
// do your redirect stuff here
});
If you don't use jQuery then you can also do this with Dojo (for which I can't provide code because I don't use Dojo).
Related
I would like to ask a way to inject css or delete injected css through browse action pop up window for the chrome extension. I had try to look through few places to get ideal on how to do it but I fail to understand them.
I would like to make extension which similar to "A browser action with a popup that changes the page color" but click on the div in the popup.html to load or unload the css file that created.
This is my current work (https://github.com/Zhekoay/Self-Custom-Dark-Theme) which direct insert css using content script. Now i would like to make it able to load or unload differently instead one-time load all.
Chrome API can't remove CSS injected via manifest.json.
Inject the code just like the demo extension does, but use a file parameter with a name of your content script that will add or remove (if it exists) a link element under document.documentElement with an id equal to chrome.runtime.id and href pointing to a web accessible CSS file.
remove "content_scripts" from manifest.json
add "web_accessible_resources": ["*.css"] to manifest.json
add a click handler for the div in popup.js
in the click handler: chrome.tabs.executeScript({file: 'content.js'});
content.js:
(function() {
var styleElement = document.getElementById(chrome.runtime.id);
if (styleElement) {
styleElement.remove();
return;
}
var css = ({
'www.youtube.com': 'app_yt_HoveredImg.css',
'www.messenger.com': 'fb_messenger_styles.css',
'www.google.com': 'google_styles.css',
'translate.google.com': 'google_styles.css',
'apis.google.com': 'google_styles.css',
})[location.hostname];
if (!css) {
return;
}
styleElement = document.createElement('link');
styleElement.id = chrome.runtime.id;
styleElement.rel = 'stylesheet';
styleElement.href = chrome.runtime.getURL(css);
document.documentElement.appendChild(styleElement);
})();
Note, in this workflow you only need "permissions": ["activeTab"] instead of "tabs": the advantage is that activeTab doesn't ask for permissions when the extension is installed.
Is there a way to force a new window for this menu action? I can't see anything. i was thinking of adding a class, and some JS code to redirect if the class is there.
If your only intent is to open a window in a new tab, then why don't you set the target="_blank" in your transformation or where ever you are generating the HTML markup?
I am not saying that it's incorrect, however it's just that you can avoid js for this and rather do it in HTML.
Here's what i've done.
In the Navigation panel, i added the class 'nw'. I have this snippet add the target attribute.
// we need to use .nw as a class to indicate that a link should open in a new window.
$('.nw a, a.nw').each(function(i,v){
var $this = $(this);
$this.attr('target','_blank');
});
You can use the JS option and put in JS like: window.open("http://www.google.com");
I want to add a meta tag in my each individual page of life ray. I am could only find meta tag with description which is in the SEO of the pages in Control panel.
<link rel="alternate" href="http://example.com/xyz/abc" hreflang="en-au" />
Please help me out with this. I am unable to find an answer to this.
The best and permanent way is to create custom theme (or modify default one) and add general meta-tags, javascript / css files (which you want to appear on each page of portal) through head section of theme's portal_normal.vm file. However, if you want to restrict these tags for specific page(s) you can still do it through Velocity Objects like public / private layout, admin / user difference, current page name / URL, there are numerous options available.
If you are new to theme design, you can start with: Creating Liferay Themes
The other possible and quick way is to add js / css dynamically using javascript / jQuery as following:
if you are using pure javascript:
window.onload = function(){
loadjscssfile("myscript.js", "js");
loadjscssfile("javascript.php", "js");
loadjscssfile("mystyle.css", "css");
}
Or you can use jQuery:
jQuery(function(){
loadjscssfile("myscript.js", "js");
loadjscssfile("javascript.php", "js");
loadjscssfile("mystyle.css", "css");
});
general method:
function loadjscssfile(filename, filetype){
if (filetype=="js"){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
Reference: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Add above code to the javascript section of the root of your pages.
I'm using asp.net mvc with ext.net and I'm trying to create a set of tabs that load information only when they are selected by the user.
I can manage to load a partial view into a tab/panel using the ContentFromAction functions:
But I can't figure out how to populate a tab/panel only when a tab is selected.
I've based my project on the Ext.NET MVC Examples Explorer version 2.5 code base and this code on the TabPanel > Basic > Ajax Load example found here
I've cut down the example as far as I can to reproduce the problem:
In my view I create the tab and configure the loader (exactly the same as the example project):
Index.cshtml
X.Panel()
.ID("Tab3")
.Title("Ajax Tab")
.BodyPadding(6)
.AutoScroll(true)
.Loader(X.ComponentLoader()
.Url(Url.Action("Ajax"))
.LoadMask(m => m.ShowMask = true)
.Params(new Parameter("containerId", "Tab3"))
.Mode(LoadMode.Html)
)
It correctly calls into my controller (exactly the same as the example project):
Axax_LoadController.cs
using System.Web.Mvc;
namespace Ext.Net.MVC.Examples.Areas.TabPanel_Basic.Controllers
{
public class Ajax_LoadController : Controller
{
public ActionResult Ajax(string containerId)
{
return View("Ajax");
}
}
}
Which in turn displays the appropriate view in the tab after it's been clicked on:
Ajax.cshtml (this works)
#using Ext.Net.MVC
<div>
<p>I am content loaded via Ajax when the tab is selected</p>
</div>
The problem begins if I try to add controls in my view, as follows:
Ajax.cshtml
#using Ext.Net.MVC
#{ var X = Html.X(); }
<div>
<p>I am content loaded via Ajax when the tab is selected</p>
#X.TextField().Text("I am a text field")
</div>
This fails with the exception:
ItemTag validation (_tkn_1): Reference token (init_script) was not found.
If I modify the file Ext call to return Html as follows:
Ajax.cshtml
#using Ext.Net.MVC
#{ var X = Html.X(); }
<div>
<p>I am content loaded via Ajax when the tab is selected</p>
#X.TextField().Text("I am a text field").ToHtmlString()
</div>
It correctly renders the following text in my selected tab:
I am content loaded via Ajax when the tab is selected
<#:item ref="init_script" index="0">Ext.create("Ext.form.field.Text",{renderTo:"App.id534c5fe0f159f3fb_Container",value:"I am a text field"});</#:item><div id="App.id534c5fe0f159f3fb_Container"></div>
I believe that the ext.net code is written by #geoffrey.mcgill on stack overflow so I'm hoping he can help rescue me.
You need to use a PartialViewResult. Please look at these examples.
Partial Content
Partial Items
Personally, I would recommend to follow the Partial Items example. You always can wrap any non-Ext.NET content in an Ext.NET Container. The benefit of this approach is the fact that you don't need to worry about destroying Ext.NET components if you reload the content. Though, anyway, I would recommend to set up explicit IDs for Ext.NET components in a partial view. At least, for top level components.
I would like to add a target (e.g. _blank) property for a basicLeafNode on the Widget Container from the extension library.
I do not see the property for this.
Instead I could use the onClick property and return an URL. But then I still would have no target defined.
I could add a postScript method
var target = url;
view.postScript("window.open('"+target+"','_blank')")
but this fires when the container is loaded.
Can I add a target property without using the onClick Property?
In case I use the onClick property what method should I use or how I prevent the postscript is executed when the container is loaded?
The basicLeafNode doesn't currently provide a target property. You have 2 courses of action:
implement your own custom node as Michael suggested (hard)
use a class on the link e.g. "newpageopen" and add an onPageReady script that selects all a elements with the calss newpageopen and add the target property to the resulted HTML.
Something like this:
require(["dojo/ready","dojo/query"], function(ready){
ready(function(){
dojo.query("a.newpageopen").attr("target", "_blank");
});
});
Hope that helps;
To make this list of solutions a bit longer here another on wich does not require dojo or jquery:
Instead of using your code as SSJS like:
var target = url;
view.postScript("window.open('"+target+"','_blank')")
You can use the Client Side Code and add SSJS code in #{javascript:}' wich i think is the shortest solution on this Problem. Here a hardcoded example:
<xe:basicLeafNode>
<xe:this.onClick><![CDATA[window.open('#{javascript: return "http://www.google.com";}','_blank');]]></xe:this.onClick>
</xe:basicLeafNode>
the above example will also work with viewScope variables or SSJS funktions:
<xe:basicLeafNode>
<xe:this.onClick><![CDATA[window.open('#{javascript: return viewScope.url;}','_blank');]]></xe:this.onClick>
</xe:basicLeafNode>
You can add the target attribute using JavaScript. It's kind of inconvenient way but would work.
You can use dojo.query to query the HTML output generated by basicLeafNode on the Widget Container. Once you get the node of <a> then you can add attribute using dojo.attr.
One problem you might face is that the ID generated by XPages contains the character :, which will not work so you would have to escape it.
function escapeColon(controlID) {
return controlID.replace(/:/g, "\\3A");
}
So your code would be something like:
dojo.addOnLoad(function() {
dojo.attr(dojo.query(escapeColon("#{id:ID_of_basicLeafNode}") + " > a")[0], "target", "_blank");
});
The code escapeColon("#{id:ID_of_basicLeafNode}") + " > a" would generate a CSS selector. Here I am assuming that basicLeafNode on the Widget Container would generate something like this <div id="_id1:basicLeafNode"><a href=".... So the CSS selector would search for a tag with that ID and inside it the <a> tag. You would have to modify this based on the output that is generated.
As I said its a bit inconvenient. Also I haven't tested this code.