Using Themeroller Bookmarklet - bookmarklet

I want to make my jQuery-UI-using webpage themeable with the Themeroller Firefox bookmarklet. When I open the bookmarklet on the themeroller demopage, everything changes like expected. On my own page, or on other example pages only the URL changes but the style isn't applied.
I need the developer tool, to find the final style of jQuery-UI in my existing webpage. How can I get that working?
I used Firefox and I put my page on a webserver, so no Firefox doesn't apply local security restrictions.

I had the same issue. This link solved my problem.
To summarize: something is not playing nice with versions of FF above version 10.
To fix: right-click your bookmark for "ThemeRoller Dev Tool", go to 'Properties'.
Change 'Location:' to this -->
javascript:(function(){if(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert("Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox");return%20false}else{if(window.jquitr){jquitr.addThemeRoller()}else{jquitr={};jquitr.s=document.createElement("script");jquitr.s.src="http://jqueryui.com/themeroller/developertool/developertool.js.php";document.getElementsByTagName("head")[0].appendChild(jquitr.s);var%20a=function(){jquitr.reloadCSS=function(){var%20c=jquitr.getHash(),b;if(jquitr.trString!==c&&c!==""){jquitr.trString=c;b='<link%20href="http://jqueryui.com/themeroller/css/parseTheme.css.php?'+c+'"%20type="text/css"%20rel="Stylesheet"%20/>';if($("link[href*='parseTheme.css.php'],%20link[href='ui.theme.css']").size()>0){$("link[href*='parseTheme.css.php']:last,%20link[href='ui.theme.css']:last").eq(0).after(b)}else{$("head").append(b)}if($("link[href*='parseTheme.css.php']").size()>3){$("link[href*='parseTheme.css.php']:first").remove()}}window.setTimeout(jquitr.reloadCSS,1000)};jquitr.reloadCSS()};window.setTimeout(a,1100)}}})();
Then 'Save'. This solved it for me.

Related

Modify url in Firefox

I want to intercept and modify a url in firefox so that part of it turns into a "better" version of the website.
More specificity I want to turn this:
https://www.youtube.com/shorts/(video-id)
into this:
https://www.youtube.com/watch?v=(video-id)
I want a general solution so I can do this to more sites than just youtube.
I found my answer, not completely what I wanted but good enough:
https://git.bradleylaboon.com/lb.laboon/youtube-shorts-disabler
also as:
https://addons.mozilla.org/sv-SE/firefox/addon/youtube-shorts-disabler/
It is so simple I can do a new addon for every site if need be.
The only problem I have is that it does not work if I follow a link/left klick on a YouTube short within YouTube, apparently Firefox does not report that the URL has changed to the plugin. A simple page refresh (F5 in my case) fixes that.

CK Editor and Firefox 33 conflict

Today, I open my website which use CKEditor.
I encounter a strange behavior. In any page that has CKEditor, jquery click event listener seems to not work.
This is odd. I have try to open the same website in chrome and firefox 32 with no problem.
I even try to visit CKEditor website to make sure that this problem is not caused by my script.
And I can ensure that the problem is occurred exactly as in my website. CKEditor has javascript based menu, if you click "Full featured" link, the element on the left-side should be changed with respective element. But it doesn't response as it should be. (Just for the record, this website also works fine in chrome and firefox 32)
I have also use firebug to find any helping-error-message, but I can't find any error message there.
I am sure this must be firefox's bug. Hopefully they will fix this in firefox 34.
However, does anybody experience the same problem? Is there any workaround for this?
UPDATE : Seems that this problem is caused by plugin (firePHP or fireQuery). Look at the comments for more information.

How to change firefox's about:home page with theme?

I want to create a theme, and I also need to customize about:home page. None of the themes that I've downloaded from library, didn't change about:home page. I know how to change about:home manually, but I need to change it with the theme. Is it possible?
P.S. Themes in the library have screenshots with different about:home pages. But my firefox 16.0.2 doesnt change about:home page. Mb this feature was removed?
I'm not sure about the solution but you might get some clues by following steps:
Run about:config on firefox
Click on "I'll be careful, I promise"
You'll get configuration of your browser, simply type the config name on search box
You might get any clue how to do your task.

WYSIWYG buttons don't show in IE for CKEditor

I have a fresh installation of Liferay on Tomcat and in IE7 it doesn't show the buttons for visual editing in the editor when I try to edit content.
It works on in Firefox or Chrome.
Does anyone have an idea why would that happen? I am not sure where to dig, I don't see javascript exceptions and it doesn't look like the buttons are even populated in IE. It is hard to debug IE problems since I don't have a tool like Firebug there.
I downloaded the 6.1 and still have the same problem, adding the URLs of what I see. Looks like IE only has the text box and in the DOM I don't see the same things that I see in FF.
http://i44.tinypic.com/35jf5td.jpg
http://i43.tinypic.com/11qqvt0.jpg
Update on this:
I checked with some people in our organization and they have the buttons on their browser.
I checked the version of the IE browser and it's the same down to the last digit. Properties are the same as well. The only difference is that I have some plugins installed that the other browser doesn't. I tried disabling all the plugins but it didn't help.
The suspect plugin is Google Chrome Frame (ChromeFrame BHO). Can someone please try to add this plugin and see if it messes things up? The disabling it doesn't help.
Liferay CE 6.0 contains few bugs within the WYSIWYG editor integration.
One issue with IE is LPS-16004 (solution included). This might be the same problem as you are experiencing.
I remember we had also problem with javascript race condition in editor initialization, which sometimes loads the editor incorrectly.
But I strongly suggest you to move to Liferay CE 6.1 as it is much more stable.
Ok, I finally figured it out, so if someone has the same problem, here is the reason - we have Google Chrome Frame plugin installed in our organization, but it only works on white-listed domain names. In this case the domain the site was on wasn't whitelisted, but the portal looked at the agent string and saw chromeframe there and assumed it can use it as chrome browser, which broke things.
Right now I will try to white-list the domain and see if it works. Another solution would be to try and find a place where we look for the agent string and fix it there, not sure where this place is.

Firefox Live DOM

Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.

Resources