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.
Related
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
Implemented a Kendo Grid exactly as stated in the examples.
Here is the pager in the example:
Here is my pager:
Notice how the arrows are right at the top of the buttons.
Why is it like this? I thought if you install KendoUI that everything should work well out of the box?
I have tried this in Chrome, Firefox and IE and the same results.
Does anyone know how to fix this?
The worst part is the refresh on the right hand side, it's completely out of alignment to the item count next to it.
I have even tried a fresh install on a new solution and that did not fix the problem either.
Can someone please help me? Is there perhaps more steps to install Kendo UI properly?
I had this similar problem some time ago. After searching problem I found out that I didn't have doctype on my page.
<!DOCTYPE html>
My page had DOCTYPE html, however the declaration was set to transitional. I removed this and it worked. It also works if you set it to strict.
http://www.w3schools.com/tags/tag_doctype.asp
This misalignment issue is occurring due to kendo icon property which is set to super.
To resolve the issue, we need to set this to middle
.k-icon
{
vertical-align: middle;
}
Include above property in inline css of that page.Like we need to include this into <style> </style>tag.
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".
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.
I'm running into a situation where IE8 appears to be dropping CSS selectors. I find this hard to believe, but I can't figure out what is happening.
In a .css file I have this declaration:
#srp tr.objectPath.hover td {
border-top:none;
}
However, when I inspect the file in IE8 through the built-in developer tools, the declaration is modified to this:
#srp TR.hover TD {
border-top:medium none;
}
I don't care about the change in case or the restatement of the rule, but dropping the '.objectPath' is a real problem because it targets the rule more broadly than I intend.
I note that this page is, and must stay in, Quirks mode.
Any ideas what is happening?
Thanks!
In Quirks Mode IE 8 renders the page and treats the DOM as IE 5.5 would render. That's the reason IE 8 in Quirks Mode ignores the multiple classes. It is not a bug in IE 8, if you want your page to be parsed and rendered properly, then you must have a proper DOCTYPE set to render the page in Standards Mode.
tr.objectPath.hover is not correct syntax if you are trying to use the hover pseudo-class. The correct syntax would be with a colon (ie tr.objectPath:hover). When the machine is reading your code, it reads objectPath as the tr's class name, but then when it gets to hover it gets rid of the old class name and replaces it with the hover class (whether there are actually any elements belonging to that class or not. Also, if this is the case, then I don't see what you are trying to do by referring to the child of an instance of :hover.
It you are in fact using hover as a class name (which I wouldn't recommend as it could be confusing to people reading your code) and you want the CSS to apply to the td children of a tr that is of both the objectPath and hover classes, you might consider just creating a new class for elements that are of both classes and using that instead (ie. #srp tr.newClass td).
EDIT: Looking further into the matter, it appears that this is (yet) a(nother) known bug in IE. I have tested it out in IETester and it seems to exist in all versions of IE. The only solution I could see on your end is very very messy:
First, it would require using JavaScript in your CSS since you don't have access to anything else. This is possible but very prone to bugs.
Second, it would require creating a getElementsByClass function in that JavaScript that could take multiple class names as parameters. This would be a very sizable chunk of code.
Finally, you would probably want to look into specifying this code to be used only by IE so that users of other browsers don't have to deal with any potential problems from all this stuff.
To clarify, I would NOT recommend doing this. Instead, I would suggest contacting someone who does have access to the HTML source code (assuming you are actually working in partnership with them) so that they could apply the much simpler fix of adding an objectPathhover class to the tr elements that belong to both classes or even to their td children.
It looks like you've got some incorrect syntax in your declaration, but its hard to tell exactly what you're doing. Are you trying to match to a hover state or is there a class actually called 'hover' ?
If going for the state, try:
#srp tr.objectPath:hover td {
...
}
If there is another class, you may need 2 separate declarations:
#srp tr.objectPath td {
...
}
#srp tr.hover td {
...
}