I'd like to add a slider (like this: http://www.menucool.com/javascript-image-slider) on my Wordpress.com blog on the sidebar without changing my theme. However, I'm not allowed to use Javascript or CSS. Is there a way I can write this?
Looks like you are using an HTML editor which does not allow you to write your own javascript. Editors which provide "themes" are easy to use, but canNot guard/sustain its "theme" properties/appearances against javascript and CSS code. Therefore, most internet editors do not allow it. They offers only certain objects which the "theme" can process.
Since much of the theme is defined in CSS properties, it would be nice if the theme creator would provide documentation and allow the user to enter CSS which would alter the actual theme declarations. JavaScript and CSS could easily render the theme inoperative. And what seems to be "functional" CSS and/or JavaScript code could suddenly disrupt the theme due to any alteration. Supplying ability and documentation for either would require theme versions to be retained so that the chosen theme could continue to operate properly with your JavaScript and CSS. In other words... If the editor provider tweaked the theme, then your functional theme/CSS/JavaScript combination could easily be rendered inoperative and call-in complaints would arise.
If you're not allowed to use jQuery, then a flash object would be the only option IMO.
Related
I have been tasked to alter the design of a web application build around/utilizing jQuery Mobile, so that it fits a desktop browser better. I don't want to just remove all jQuery Mobile right away, but rather do the transition over time. The whole web application is using one page with a bunch of subpages, so I've made a new page using the same subpages for the desktop version, since this allows me to use different css files for the page.
My problem is that all the css I apply to the 'non-mobile' pages, gets overridden by jQuery Mobile (a bunch of css files). As I said I don't actually want to just remove these css files all at once, since I would be left with a raw html page without pagetransitions between subpages etc. - I might even want to keep some of the jQuery css in the long run, like the header for instance.
The main problem I see right now, is that a lot of the elements gets given class attributes like ui-btn, ui-select etc. without me actually declaring that in the html. This means that even thought I have a css file that defines how a button should look, jQuery Mobile somehow adds ui-btn and a bunch of other things to the class attribute at runtime - ultimately overriding my .button class or ending up with some sort of mix.
My question is quite generic, as I have a LOT of code and have no idea what to reference; how do I make sure my elements only gets styled by the classes I specifically assign?
Essentially I want to keep my jQuery Mobile, but have stuff like ui-btn as a standard css class selector (instead of this magical thing that ALL buttons apparently inherit from by default), so I would have to actually declare class="ui-btn" for the element to inherit that styling.
Let me know if this is unanswerable without some code references, I was just hoping for some general and generic tips :)
Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.
When jQuery Mobile starts, it triggers a mobileinit event on the document object.
Try finding out where that happens in your code, and possibly stop it from happening in the case where you're in a desktop browser.
EDIT: It is most likely done in your jquery-mobile.js file, and usually scripts are linked as follows:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Try altering this order, so your custom scripts are loaded after jquery-mobile.
link you css files after JQuery mobile files and use !important on your css to force the browser to use them like:
color: red !important;
With as all being very careful about resources within web development I am looking for a tool that you can pass a url and it show what CSS is actually used on that page but more importantly have the ability to download or extract that CSS Selectors and the actual css to create a single css of only the css needed to render that page, I have tried DustMe and various plugins. I realized I am not using 89% of bootstrap for example but picking it apart is almost impossible on pre built sites.
thanks
There is a online tool which provides that service, its not free though, unused-css.com
I'd recommend using uncss (requires node).
It can be added to your grunt build scripts to remove the css your are not using and is easy to configure
uncss.io works pretty well. Just enter your page URL and it will give you the cleaned CSS. It works for me on some pages, but not other pages.
REF: unused-css - (Paid Service)
or CSS Trashman
EDIT:
Use uncss git which requires node.js. It can be added to your built-in scripts to remove the unused css.
I want to edit a html template to create a simple version for my need. I delete some ; but is there a tool to remove unused classes from CSS or I need to remove the manually?
For example, <div class="something"> is not used in my html; but still I have .something {} in my css file and make my css heavy. Currently, I delete unused classes from CSS one by one manually. I wonder if there is a way to delete any class in CSS which is not referenced in html!
Check out something like http://unused-css.com/. If you pay for it, you get to have it crawl your site and create a clean version for the entire site.
If you want a browser-based solution, try the Firefox plugin CSS Usage. You can open up Firebug, click on the CSS Usage tab, click on "Autoscan", then navigate your website a few times (be sure to hit every page). It will keep track of which classes are used and you can export a "cleaned" version. This requires more manual work and may be subject to broken styles, but if you are careful, it should work fine.
The answer is not really, due to the fact a CSS file can be used across a magnitude of HTML pages.
I'm sure some people might have made a tool that parses all their own specific HTML pages and creates a list of 'unused' css classes, but it'd be likely to be very bespoke to their needs (also if the HTML pages render out different things due to a user's choices, how'd you know that the CSS class is or isn't used?)
Is there a way to add a Javascript segment to each page in my website via CSS?
I am looking to add some Javascript tracking code (for my own benefit (using Google Analytics)) before the closing </head> tag on every page.
The simple question is: is there a way to add code to the HTML on every page of my website between the <head> and </head> tags using CSS to dynamically insert it (as opposed to going through and updating every page manually)?
Thank you,
Mick
No, CSS is a collection of styles to apply to elements (which can handle alternating states of controls, such as :hover), but isn't functional in the way you desire.
However, it seems to me that, if you can reference a CSS file globally, then you could simply place your Javascript in a separate file and reference that in each of your pages with a <script> tag (similar to how you would do with CSS files.)
Furthermore, if you're using a framework such as ASP.NET, then you can use master pages as templates from which relevant pages derive, reducing redundancy of this sort of thing.
Is there a way to add a Javascript segment to each page in my website via CSS?
No. Use a template language (e.g. TT) or include system (e.g. SSI) if you want common HTML across pages.
Nope, you can't add javascript through css. These are different techniques, one for changing the look of your website (css) and one for adding functionality to it (javascript). There is no way to add javascript through css-code.
As all the other answers stated: No, in general not.
Only MS IE offers such a solution, using the behavior-property.
I currently use this for an hover-anything-script for IE6 (included inside a conditional comment), which allows to add the CSS-:hover-selector to any HTML-element:
body {
behavior: url(/js/csshover.htc); }
The csshover.htc is from Peter Nederlof (LGPL).
See also: MSDN HTC Reference
Others have already noted that it's impossible. It seems that your site is static html only. Then you could write a little script that would prepend a link to javascript file before
I have a suite of custom tags in my application that abstract some of the common system tasks.
I am using TinyMCE as my HTML editor, and want to be able to render my custom tag as an image in the editor when in the WYSIWYG view. Similar to TinyMCE's built-in behaviour for SWF files.
Is there an easy way to do this in TinyMCE?
UPDATE:
It seems that custom tags barely work in TinyMCE at all.
Some of the problem seems to be that face that my tags are namespaced:
<o:some_tag />
Which is causing all sorts of issues.
Is there a editor that supports this kind of functionality better?
I found a method that meets my needs and turned out to be a little easier than constructing a plugin.
Full details here: How-To: Custom tags with TinyMCE.
Unfortunately there is no easy way. Tinymce supports "extended_valid_elements" property . However as you want to render this custom tag as an image, all you can do is to create a custom plugin for your task
Try same code like media plugin (it is not build-in behaviour, it is a plugin). Or yoy can check page break plugin.