I'm currently redesigning an old web application that relies heavily on frames. I'd like to get rid of the frames because the painful javascript gyrations they require, but would still like the user to have a movable border between two parts of the screen (view and attributes).
What html element, or html element + javascript, can I use to replace frames?
I don't think there are any solutions that won't involve JavaScript. If you're OK with that, you could replace them with <div> elements and use JavaScript to make them resizeable.
I see no other solution than a div. But you would have to use JS again to allow the dragging of the border. Use of JQuery would be fine here as there is maybe a plugin for that, check the database.
Related
I'm using requirejs together with the Require-CSS loader plugin by Guy Bedford. Both libraries work fine, but one nuisance I noticed is that the page gets rendered without the css being present yet which looks quite ugly (in particular together with Bootstrap which shows a toggle button in the far left). While this isn't a problem of either of these two libraries, I'd like to avoid it.
Can this be achieved by expediting the css loading (some parameter in requirejs or require-css?) or the rendering be suppressed until at least the css files have been retrieved?
One other solution would be to include the css files as normal references in the html markup, but I really would like to avoid this and stick with the requirejs methods.
A simple solution to this would be to set <body style="display:none;"> and use Javascript to set the body visible after the CSS has loaded. This technique is also used for some Angular applications.
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;
I'm trying to make a page that shows how to enable JavaScript in various browsers.
The users that view the page will not have JavaScript enabled, so I can't use JavaScript to detect the browser.
How can I detect the browser without using JavaScript, PHP or ASP.NET?
The idea I have in my head is that the page will show the appropriate instructions to enable JavaScript in the user's browsers with pictures and text.
Sorry for the bad english.
Thanks!
EDIT: Is it a bad idea to use conditional comments? Why not?
You can't. You need something on the back end to read the user agent.
AFAIK, there's no way, except asking the user:
If you're using Internet Explorer (nice image of the IE logo): click here;
If you're using Firefox (nice image of the Firefox logo): click here;
Your question doesn't leave much room for providing an answer, but I'll give it a shot:
You can use a <noscript> block to provide page content which will only be visible when JavaScript is disabled.
Alternately, you can also use a JavaScript onLoad method to remove an ordinary <div> or similar element from the page when JavaScript is enabled.
The <noscript> element is generally preferred, as it will simply not appear on the page if JavaScript is already enabled.
As far as detecting which browser they're using, you need some technology on the back-end which is capable of parsing the request headers that the browser sends. This can technically be done by the web server itself using server-side include and some clever rewrite rules, but it is actually harder that way than to just learn to use a server-side scripting language.
If you're doing this for a reason (i.e., you're using an embedded webserver with little to no free space), your best option if you only want to provide a static page (in other words, just an HTML file) is to have the page content include a <noscript> block at the top, and an invisible block at the bottom (<div> with hidden), then enable the hidden div on page load via JavaScript.
Include two or three blocks with <a> anchor tags which explain how to enable JavaScript in EACH browser, and have the user click the logo that looks more familiar (all inside your <noscript> block).
That being said, server-side scripting is easy to use, easy to set up, and completely worth learning. It's quite a bit easier and more predictable than doing everything with JavaScript.
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 am making a website that is styled using CSS, in two DIVs. One 'Header' DIV which is always the same, and a 'Content' DIV that changes.
In my CSS file, is it possible to write the HTML with all the links that stay in the header, so I just need to call (or similar) on every page, instead of having to write out my header content every time? Would also help in editing only one source, as I often leave out pages by mistake.
I don't want to use frames, so looking for an alternative.
Thanks,
Brett
Depending on the server and server side languages supported, this can be done.
Some servers will let you use Server Side Includes, for example. With others you could specify "block" of HTML for a header (for instance) that will be part of a site wide template.
What is not possible it to achieve this with purely CSS and HTML.
This is why you usually have some server side code running, which will insert the common header e.g. php include, SSI or other templating framework. If that's not an option, you could write JavaScript which writes out your header each time to a specific DIV. Although I don't think that's great from an SEO perspective.
The usual options for doing this client-side are an iframe, or some javascript that does DOM to add content (perhaps loaded from an external file). Or some javascript that creates an iframe. Or an iframe that creates some javascript. Some permutation of those odious techniques.
CSS does have the content property, but i think it's limited to plain text. I don't know if you can use it to pull in HTML, either using a string or URI.
As others have mentioned, the most common approach is to do it server-side. You can do this bottom-up with includes, or top-down with things like Tiles and SiteMesh.
CSS can't help you to do this.
You can make ajax loading of content. You can make one index.html and lot of 'content' files (about.html, contacts.html, etc). And in index.html you can load another .html in content-div (for example with jQuery method .load())
Another way - you can make little templating engine in php (or another server-side language)
It isn't possible to achieve that using CSS, because CSS can't handle any events, it's simply a "refrence" for the browser to know how to style your web-page, it's done, however, using AJAX.
I suggest you to take a look on jQuery lib, it'll speed up the process tremendously, however - the main disadvantage is that the search crawlers won't be able to index your page correctly, so it'll be bad by an SEO perspective.
It's possible, if you have the time, to make an index-able version and an AJAX one, that's what we did for a mobile project here.
jQuery AJAX API