I wanted to have a feature in my Jommla based application, that when ever a user brings the mouse over a particular paragraph in article the color of text should change. so that the paragraph looks more prominent on the screen.
I want this thing to be dynamic. Just wanted to know which is the best place to do that. Where in the Joomla the article parsing takes place ?. If I am lucky is there any plugin that can help achieve that ? Kindly let me know
You can make a slight modification to Trev's solution and make it work without having to change any articles.
.contentpaneopen p:hover {color:#ff0000;}
By default, Joomla assigns the contentpaneopen class to articles, this would produce the effect on all P tags that are children of that class.
By far the easiest thing to do would be to add a style to paragraph in question in your article and then add an appropriate hover rule in the css, e.g.
<p class="highlight>some text in here</p>
and
p.highlight:hover
{
color: #ff0000;
}
Just tried it here and it worked for me on the last paragraph:
http://thelunarscape.com/blog/an-increasingly-active-sun
Better solution than using a plugin in this case, unless you want to something more fancy I guess as content plugins are run every time an article is loaded no matter if it's needed or not.
Another more advanced way to achieve this is with help of MooTools.
Include MooTools with in your application with:
jimport( 'joomla.html.html.behavior' );
JHtml::_('behavior.framework'); //MooTools core
JHtml::_('behavior.framework', true); //This is for MooTools more libraries
Next create a script that changes the css of the paragraph with id "myid":
$js = <<<EOD
window.addEvent('domready', function(){
$('myid').setStyle( 'border', '1px solid #000000')
});
EOD;
$document =& JFactory::getDocument();
$document->addScriptDeclaration($js);
Why use MooTools?
MooTools makes it possible to tweak the highlightning and even animate the highlight. It should also have better support for the older browsers.
Related
I want to open a link in a new window using reStucturedText. Is this possible?
This opens link in the same window:
You can `check your location here. <http://geoiptool.com>`_
To open a page in a new window or tag you can add the attribute target="_blank" to your hyperlink although I'm not sure how you can add attributes to inline hyperlinks in reStructuredText. However, from the Docutils FAQ, is nested inline markup possible, you can use the raw directive to include raw HTML into your document, for example
You can |location_link|.
.. |location_link| raw:: html
check your location here
Update to address comments
I've had the question "why does reStructuredText not have [insert some awesome feature]".
In this case, "why does reStructuredText not have a way to specify how links are opened" — I think reStructuredText doesn't have an easy way of doing this since the behaviour of how clicking a link works isn't really it's responsibility. reStructuredText transforms markup — how that markup is ultimately displayed is not up to reStructuredText, but whatever browser or viewer the user chooses to use.
In the case of opening a link in a web browser, good useability practice dictates that you should not force a user to open a link in a new tab (which is what adding target="_blank" is doing). Rather, you should leave the choice of how to open the link up to the user. If a user wants to open a link in a new tab, then they can use their middle mouse button (or whatever their favourite shortcut key is).
So I think that it is perfectly acceptable that reStructureText does not have an easy target="_blank" feature. The fact that it is possible is nice for people who really want to do this is good, and the fact that it is a bit of pain to do so is good for discouraging this practice.
If you don't want to modify the theme, you can do what Ivonet did but with a custom.js file in the _static/js folder, then adding it to the conf.py like this:
html_js_files = [
'js/custom.js'
]
Leave out the html tags in _static/js/custom.js if you do this:
$(document).ready(function () {
$('a[href^="http://"], a[href^="https://"]').not('a[class*=internal]').attr('target', '_blank');
});
This will also work if you'd like a shorter version.
$(document).ready(function () {
$('a.external').attr('target', '_blank');
});
I agree completely with the accepted answer, especially with the part where reStructuredText is not responsible for how a link behaves.
I still want it though so it should be solved in the theme. As I want all my external links to open in a new tab it becomes very cumbersome to do it as described above.
In my case I use a third party theme (sphinx_rtd_theme) and I put the following script near the end of the layout.html:
<script type="text/javascript">
<!-- Adds target=_blank to external links -->
$(document).ready(function () {
$('a[href^="http://"], a[href^="https://"]').not('a[class*=internal]').attr('target', '_blank');
});
</script>
It seems to do the job just fine.
Hope it helps.
I recommend that you should use JavaScript to set target="_blank" for each external links.
See https://github.com/sphinx-doc/sphinx/issues/1634
I have found lots of ways to control a QtComboBox using style sheets, but not directly from code (well, you can use the setStyleSheet method).
I have a requirement to disable all widgets when a page is disabled, and I can accomplish that requirement. The problem is trying to make a QtComboBox look disabled (also a requirement).
Is there a way to change the QtComBox drop-down arrow to another image in code?
I have found that sometimes you have to implement an entire style sheet in Qt whenever you want to change one part of the widget.
Do I have to implement a disabled style sheet in code and use the setStyleSheet method?
And then, do I have to re-implement an enabled style sheet when the page is re-enabled?
It seems there should be something like: myComboBox->setDownArrowImage(url . . .);
Am I missing something?
Thanks.
Use pseudo states.
Stylesheet example:
QComboBox:enabled {color: red;}
QComboBox::down-arrow:enabled {image:url(:/images/downarrow.png);}
QComboBox::disabled {color: white;}
QComboBox::down-arrow:disabled {image:url(:/images/downarrowdisabled.png);}
I am designing a single page website and want the fixed nav links to change colour whenever the user scrolls to the specified location. Seems pretty easy to do, I thought it was pretty easy to do, but I am having problems making it work.
I only downloaded the Scrollspy JS Plugin, as I am not using the Twitter Bootstrap CSS. I just require the Scrollspy Plugin.
Could you check this jsFiddle and provide some guidance? I have already checked out the documentation here, but I've had no luck. Any help is greatly appreciated :)
http://jsfiddle.net/xjTpk/28/
Ignoring the serious issues with your use of JSFiddle1, and the typographic errors2, the principle things wrong are
You need the .nav class on the <ul> in the navbar, and
The #welcome is not an existing element, causing a JS error.
Here's a fixed demo:
JSFiddle
Oh, and you don't need both data-api and js to initialize the plugin; choose one.
1 Loading Bootstrap 2.0.2 + 2.0.4 at the same time; trying to include a <body> in the html panel
2 Using upperCamelCase on a function that doesn't need it: scrollSpy();
Key thing you are missing is you have to have a "nav" class on the ul element (or some other parent element) as that is used in the scrollspy code as part of a selector.
I couldn't get yours to work for some reason but here is a simplified example:
http://jsfiddle.net/UWzeD/5/
Your ul needs a nav class, but most important for scrollspy to work properly is that your target needs to be one level about the ul. Otherwise I've found that scrollspy doesn't work.
There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.
I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.
Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?
Right, I got it:
Using just a standalone Firefox Add-On use the following code:
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.ca",
contentScriptWhen: 'end',
contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
});
};
Just replace DIVID with whatever you want.
Similarly, in Greasemonkey, just add this to the script:
document.getElementById('DIVID').style.visibility='hidden';
The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!
Install the latest FF
Install the latest AdBlock Plus
Go to the website right click on specific element and then Inspect Element(Q)
Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule
You can just use GreaseMonkey which is a very useful plugin for firefox. You can write your own script in JavaScript which operates on the page.
However, chances are that someone might have already written a script for the site in question that you can install from the http://userscripts.org/ repository.
In well-formed HTML, any particular value for the id attribute should occur at most once in a document. If your mission is to seek and destroy a recurring phenomenon, it might be labeled (if at all) with a class. This is the case with Twitter's "promoted tweets", for example.
var promotedTweets = document.getElementsByClassName("promoted-tweet");
for (k=0; k<promotedTweets.length; k++) {
promotedTweets[k].parentNode.removeChild(promotedTweets[k]);
}
Wouldn't Adblock Plus do the trick here? You can feed it an element hiding rule (based on the class or ID attribute) on any given website, if I recall correctly.
I used the up-and-coming jpm tool to write this, and incorporated the suggestions here. It is specifically for filtering certain div tags here on StackOverflow—how fitting. The code and the xpi add-on file is at Github.
An alternative in Firefox is to create a userContent.css file and add css which hides the div.
See https://superuser.com/a/319322/ and note the comment which points out that "Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true".
Can anyone help me understand what is happening when I try to print from a joomla site:
When I use the print icon I get the expected result of just printing the article (ie no headers, side modules etc) but I also lose all the default.css that is used for my template. ie no type styling and only see the style that has been included inline in the article. The result is pretty grim as the text size is all wrong.
However, if I try to print directly from the browser I keep the format applied from the default.css of my template but do not see any of the images that are included in JCE ImageManager PopsUps- presumeably because the browser is blocking pop-ups.
Can anyone explain what I need to add to a print.css and how joomla knows to use this when printing using the print icon.
Many thanks in anticipation of a reply!
You can identify a print stylesheet by doing something like this:
<link rel="stylesheet" media="print" href="print.css">
I am not sure though if joomla can identify it by this. On Joomla do it like this:
$doc =& JFactory::getDocument();
$doc->addStyleSheet( 'http://www.example.com/css/mystylesheet.css', 'text/css', 'print' );
Have a look here: http://docs.joomla.org/JDocument/addStyleSheet on the Joomla part. Maybe this is sufficient, but it may also depend on the version