Change the CSS Based On the Language - javascript

I am using a Google Translate in my website, to show the content in 2 different languages German, and Spanish other than the original content(English). Now as soon as select other language there are some miss-placements in the contents and text due to the change in length of the words and also i need to change few images and logo which is written in English.
my question is
How to change CSS based on the Language?
Some information about the site: It is a simple website developed using plain HTML, CSS, Javascript and jQuery.

If you are using simple html or any framework, use of automatic translators is not appreciated some time it does not translate correctly, Try making different css files for each langage and make ur site in different language. if you are using some cms etc you can achieve this easily. So when you click on spanish flag it should go to index-sp and it will load style-sp.css.
Hope it will help.

I came here looking for a solution to switch from 2 different css files based on rtl(ar) and ltr(en/pt) and there's a really easy and quick solution that worked for me:
<environment include="Development">
#if (System.Threading.Thread.CurrentThread.CurrentCulture.TextInfo.IsRightToLeft)
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.rtl.min.css" />
}
else
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.min.css" />
}
</environment>

Related

HTML attribute ordering

This may be a subjective question (I hope it isn't)... I develop web designs and applications using Visual Studio and usually Bootstrap. When I drag/drop a CSS file into a HTML document, Visual Studio generates the following code
<link href="styles.css" rel="stylehseet" />
The Bootstrap template also uses this attribute ordering.
Personally I prefer to order my attribute to keep fixed width ones at the front because everything looks tidier; take for example my ordering vs Visual Studio & Bootstrap's ordering:
Mine
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="mystyles.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="foobar.js"></script>
Theirs
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="mystyles.css" rel="stylesheet" />
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="foobar.js" type="text/javascript"></script>
See how the attributes in my link and script tags line up? I think this looks far neater when maintaining documents, and also makes block editing possible.
So what I want to know is; is this just personal preference or is there a justifiable reason for putting rel and type after href and src?
From the HTML 4.01 specification:
Elements may have associated properties, called attributes, which may have values (by default, or set by authors or scripts). Attribute/value pairs appear before the final ">" of an element's start tag. Any number of (legal) attribute value pairs, separated by spaces, may appear in an element's start tag. They may appear in any order.
I can't find anything in the HTML 5 spec which spells out it so clearly, but that rule has not changed.
It is just personal preference.
For html parsers, the order of attributes does not matter. So it your prefrences.
But always they sort and show attributes in alphabetic order.
Even you arrange them in youre source code you would see the browser shows them in alphabetic arrange in developer view.
The HTML5 standard says the order doesn't matter as per the above answers. But if that's the case there will be no need to indent the code as well as a programming language like Java doesn't care about indentation.
The best thing is to follow the conventions already being used in the repository. If you are starting new, the coding standard below provides an order for elements that is being followed by a lot of people.
Attribute order
HTML attributes should come in this particular order for easier reading of code.
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.
Source: https://codeguide.co/#html-attribute-order

Which css and js links should I use?

I am confused as to why there is a difference in both of these CDN links when used to modify my simple website. What is the difference?
Method 1: These links allows my code to resize perfectly as the window goes from widest possible width to minimum width using chrome, IE11, and Firefox. The problem is 2-fold: 1) I lose the <span class="input-group-addon">$</span> as a neat looking symbol and instead get a plain ol' dollar sign. 2) I am a beginner, so I don't know if using these seemingly outdated links will make me have to backktrack in the future. See example here.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Method 2: These links have a hiccup when resizing. As you pass mid-width the AddMoney element jumps to the full width of the textarea above it. I want it to resize similar to the above. Fortunately, these links are directly from the current bootstrap page so I assume they are the most recent. Using the same link above simply paste over the js and css links using the below.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Because in your first example, you are including Bootstrap 2 and in the second you are including Bootstrap 3. These two versions of Bootstrap are vastly different in the way the HTML needs to be structured as well as what features they offer. I would suggest that you use the latest version of Bootstrap 3, so go take a look at the docs to figure out how the HTML should be formatted for that version and adjust your code accordingly.

Is it possible to hide include part in view source of html

I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.

How to change color and background of whole web site

I need to change the colors and backgrounds of an existing shopping cart web site so that all backgrounds are blue and all texts are black.
When the mouse is over an anchor element, its background should change to gray.
This site is designed using jquery, jquery plugins, jquery-ui,
ASP.NET / Mono MVC3, Razor views. . jquery ui default theme is used but in may places colors and backgrounds are specified in non-jquery ui css files.
There are number of css files so changing all of them is lot of work.
How to implement this ? Is it possible to add some jquery or other plugin javascript code to page which makes such adjustment or other idea ?
It should be changed to use blue and black colors.
How to implement this ?
Update
Most css files are included in Razon Site.cshtml file which is master page for all files.
css files are static and appear in start of every page:
<link rel="stylesheet" href="/comp/themes/base/jquery.ui.all.css"
type="text/css" title="ui-theme" />
<link href="/comp/Content/Css/jquery.ui.menubar.css" rel="stylesheet"
type="text/css" />
<link href="/comp/Scripts/jBreadCrumb/Styles/BreadCrumb.css" rel="stylesheet"
type="text/css" media="screen" />
<link href="/comp/Scripts/Pikachoose/jquery.fancybox.css" rel="stylesheet"
type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/comp/Scripts/jcarousel-0.2/skins/tango/skin.css" />
<link href="/comp/Content/Css/Site.css" rel="stylesheet" type="text/css" />
jquery-ui menubar, breadcrumb, fancybox, pikachoose jcarousel plugins are used.
First off, you wouldn't use JavaScript for this because it would create extra load time, wouldn't work for users with JavaScript disabled, and is entirely unnecessary.
To change the background colour of a page you'd find the body tag and add or change its background (or background-color) property:
body {
background:#F00; /* #F00 being the hex representation of "red" */
}
Your website may have multiple CSS files, but it should have one global CSS file for styles which are already applied to all pages. If this isn't the case, you should really consider combining any commonly used styles into one file and including that on all of your pages.
If changing your body styling doesn't change anything, you'll need to find out where the site is currently getting its background from. If there are two files with body { background:...; } declared, the latter included CSS file will override the former. That said, you can easily find which colour is being pulled through by consulting your browser's Element Inspector to find the body's "computed style".
Edit: based on your latest edit, going by the file names "/comp/Content/Css/Site.css" is the file you'd want to change.
Changing background-color for page can be achieved by applying style to body tag, but there are good chances that your page will have wired fonts because of existing css, thus asking you to push in more time finding individual fix then creating new one,
There is no shortcut to do this kind of work without good chances of failing and ending up spending more time in fixing.
Better would be:-
Create copy of css files and make you changes there, now change path to point to this new css.
If by any chance you are using themes create a new theme, if not consider having themes.
KISS principle:
Put this in a .js file and refer to it in the head or put it in the head tag as a script.
JavaScript:
function colorset(x,y)
{
document.body.style.background = x;
document.getElementById('ElementID').style.color = y;
}
HTML:
white on black

jQuery Mobile file usage

Something was pointed out to me that I never heard of before and came as quite of surprise to me: the files to include when using jQuery Mobile and a custom theme.
As their site states, if you just want to use the bare-bones version of jQuery Mobile, all you need to include is jquerymobile.css, jquery.js, and jquerymobile.js. But what was pointed out to me is that if you want to use a custom theme, you do not have to include jquerymobile.css in your header. Just theme.css and mobilestructure.css.
Is this true or just some confusion on my part? It seems like a simple question but I couldn't find a definitive answer out there.
Yes this is true, I just looked at my code that works using jquerymobile and a theme I made using the theme roller and the only two css files I have are .
<link rel="stylesheet" href="/stylesheets/themes/cyan1.css" />
<link rel="stylesheet" href="/stylesheets/jquery.mobile.structure-1.3.1.min.css" />

Categories