I have an external Javascript page located under ../Scripts/CBox/ folder from parent.
There is an image located in the same folder. I want to set background-image for a control using Jquery from there. When I use this code, It sets the background-image path as localhost:7905/ddl_arrow.png where localhost:7905 is my asp.net development server.
function createAutoCBox(boxCtrl) {
$(boxCtrl).css('background-image', 'url("ddl_arrow.png")');
$(boxCtrl).css('background-repeat', 'no-repeat');
$(boxCtrl).css('background-position-x', '99%');
$(boxCtrl).css('background-position-y', '-2px');
$(boxCtrl).mousemove(jqAutoCompleteMouseMove);
$(boxCtrl).keyup(jqAutoCompleteKeyUp);
$(boxCtrl).mousedown(jqAutoCompleteMouseDown);
}
There is no way to "get current script's path on the server", since JS is done on the client-side. So there is no easy way to do what you are thinking of.
There are only ways to work around this, and all of them are based on the same principle: organise your files properly - each resource should be an URL. Think about it: if you cannot reliable tell where ddl_arrow.png is stored, neither can the browser.
I think the best solution is to put all images inside an [img] folder from the server root. This means you can reference images this way: url(/img/ddl_arrow.png). No matter which JS, which CSS or HTML file needs the images, make sure they always reference the images with a preceding slash. Of course, this applies not only for images, but all other assets/resources - fonts, videos, audio, and even the HTML, CSS, JS files themselves. Basically every file that your server serves should be referenced this way.
There are other hacks involving nasty, messy stuff like using server-side scripts to print the location of the JS file that is being fetched right into the JS file, but I'd recommend to stay far away from these methods.
You'd be better off doing this:
CSS
.my-background {
background-image: url("ddl_arrow.png");
background-repeat: no-repeat;
background-position-x: 99%;
background-position-y: -2px;
}
JQuery
$(boxCtrl).addClass('my-background');
CSS will always understand paths from itself to the image folder, so if your structure was:
/images
/css
the background-image path would be:
../images/ddl_arrow.png
Going up one level with the .. then into the sibling directory images to get the file. You can put this anywhere and it will work.
Worth noting that using css for the styles rather than adding them in JQuery is easier to re-use (just add .my-background to the HTML where you need it). It also makes things a bit nicer to maintain as there isn't style info in your functional files - the you of the future (or your team-mates) will thank you for it.
And, background-position-x / background-position-y are not standard and so cannot be relied on everywhere background-position: x-value y-value is better for now.
Try:
$(boxCtrl).css('background-image', 'url("./Scripts/CBox/folder/ddl_arrow.png")');
Related
I need some advice on CSS placements for the sake of website load times
I read that it's best to have 'critical CSS' in the head and the rest can be placed in their respective page's body via the tag.
Is it good practice if I loaded all the CSS or at least the 'Generic' styles that many pages share while I kept page specific styles in a tag in the page's body?
One side question, some of my pages use jQuery, should I only load that at the bottom of those pages or leave it in the template head?
I tried both and the site loads just fine, but I know under the hood results may vary. I'm not sure how to even check. I tried websites that test a website's load performance and I got mixed results. So I'm not sure how to optimize my website's performance.
Usually all CSS files are called in the head, one thing you can do to improve performance is to modularize, let's say that you have the global styles in one file called global.css and it contains your font specs, global components used in all pages such as navbar, footer, layouts, etc... And in another file you can only put the styles regarding your specified page such as contact section that's another page called contact.css and there you can have overrides to global file and specific styles that you only use in this page.
This way you can serve less heavy files regarding the page that user's requiring.
Regarding you jQuery question I suggest that don't load jQuery library if you're not using it, it's useless. Only load it in the pages that you're using the library. Hope it helps!
I'm interested in using WebPack for my SPA (I haven't used it before), which will have several pages, each with their own bundle of JS, CSS and HTML.
Firstly, is there a way to remove stylesheets that aren't being used using webpack? From a look at the documentation, it seems that there isn't. For example, say I have a #wrapper div that needs to have a width: auto for most pages, but a width: 100% for a certain page that needs to be full screen. If my modules just require() their stylesheets, then they will all keep being added to the HTML, and the last one to be loaded will have control over the width, whereas I want just the current page's stylesheet to be loaded. Is there any way to remove stylesheets using webpack? Or is there a better solution to this problem?
In addition, does webpack have a callback for stylesheets? If I need to run some code only when the css has loaded (I mean the onload callback has fired, not just when the tag is added to the html), is there a proper way of doing it?
How to extract the header and the footer from this page to insert it in another page?
I'm a bit confused because when I copy and paste the header div it never has the same structure and graphics in the new page? Am I missing something here?
Typically when you copy/paste the div you're getting the HTML, but not the CSS styling (unless the styling is in-line).
There is a Chrome extension called "CSS + HTML" that allows you to, in the developer console, generate a version of the div that has all CSS turned into in-line CSS, so that you can copy/paste a pretty accurate version.
(Caveats: I've had some issues with the extension, so I don't enable it except when I need it, and the HTML produced is a) awful, because it has lots of unnecessary inline CSS, and b) not always a precise match. But it's pretty good.)
Yes, you are missing something. The CSS, images, and links... They are using relative links. You would need to be sure to replace those links.
The images are linked relatively so unless you copy them local you will not have access to them.
You would also need the Style Sheets as they are linked relatively in the head.
Not that the links in some cases are to .php files. Unless you know the php running in the background you are going to lose that functionality too.
I went ahead and downloaded http://platform.twitter.com/widgets.js
And the http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
Two files the embedded timeline widget uses.
All I'm trying to do is customize the css of the widget, and since twitter only gives you a few design options like link color and a dark/light theme, I thought it would be easier to download the files and modify them myself.
Only problem is, I'm having some difficulty trying to point the css file location inside the widgets.js to the copy on my webapp
A line inside widget.js, locating the css file on twitters servers, its tied up with some variables that combine a prefixed platform.twitter.com/ value or something
provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",
I don't how much editing has to be done to widget.js but my guess its only a couple lines?
If anybody proficient in javascript wouldn't mind taking a look and telling me "Not worth the effort", or "It's simple, just change __ to __", let me know.
widgets.js is the first hyperlink above
(See my edit below for a better solution) This seemed to work for me and doesn't take much time to implement:
In widgets.js, find
function Z(a,b,c)
Change this in function Z:
d.href=twttr.widgets.config.assetUrl()+"/"+b
to something like this:
d.href=b
The assetUrl just gets the base URL of the file (eg. a CSS file), which is at a domain Twitter owns. b will be the paths you specify throughout the JS (such as embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ). Upload all the CSS (like timeline.xyz.default.css) to where you want it, then you can customize those files and keep them on your own server. You can't modify the CSS by simply adding rules to a CSS file on your server, since the Twitter feed is in an iframe from a different domain. Modifying CSS in iframes with this type of source (ie. not from your own domain) is not allowed, to prevent hijacking-type problems, but if the iframe refers to a CSS on your own server then you can modify things.
There may be some other things you might want to check out to make sure you have all the required files. You should also get sprite.png which is referred to in the Twitter CSS file. I was able to customize the CSS this way and it worked fine.
Edit:
I had problems with the above solution in IE7/6 and Chrome in Jelly Bean so found a better solution that lets you inject your own custom CSS file into the iframe while sticking with all of Twitter's CSS at their own domain. From a fresh widgets.js I went and added the following:
;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);
immediately after
c.getElementsByTagName("head")[0].appendChild(d)
on the line in widgets.js starting with
provide("tfw/widget/timeline"
(again in function Z) This seems to work much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js.
It looks like if I download wigdet.js and custom.css then widget does not pick up
data-chrome="transparent"
I downloaded
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
renamed it timeline.custom.css
Changed in wigdet.js link to my css
function b(e,t,n){
var r;
n=n||document;
if(n.getElementById(e))return;
r=n.createElement("link"),
r.id=e,r.rel="stylesheet",
r.type="text/css",
r.href= "../css/timeline.custom.css",
n.getElementsByTagName("head")[0].appendChild(r)
}
Is link to css correct? Or twitter uses the newest version of css?
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
How to make widget to pickup the data-chrome="transparent"
I used widget script
<a class="twitter-timeline"
data-dnt="true"
href="https://twitter.com/search?q=%23My_hush"
data-tweet-limit="1"
data-theme="dark"
data-screen-name="some_name"
data-chrome="noscrollbar noheader transparent noborders nofooter"
data-widget-id="My_id">
Tweets about "#My_hush"</a>
I am trying to change the background of the input button when clicked by using jquery but for the life of me, can't figure out the relative path to make it work.
js file is in root/js folder
css file is in root/css folder
My code looks like this:
jQuery($button).css('background',"url(../images/updating_button.gif)");
But this just doesn't work...it can't find the image with that path. if I use absolute path it works obviously but i really need it to be relative.
I have tried all combination that I know like:
/images/updating_button.gif
..images/updating_button.gif
images/updating_button.gif
updating_button.gif
If the URL is static, you could declare a class with the background and maintain your relative path.
In your CSS:
.updating { background: url(../images/updating_button.gif); }
In your JS:
jQuery($button).addClass('updating');
You are aware that paths in any inline styles (whether set with JS or not) will be relative to the current HTML document (the URL on the browser's URL bar), not any other file, right?
And why are you avoiding absolute (or domain-relative) URLs?
I wish I could test this for you, but I've had some issues with the url property in the past; adding single quotes inside the url() has proved to be the most reliable with relative paths.
jQuery($button).css('background',"url('../images/updating_button.gif')");
Also, what does your file structure look like?
The following code might be useful for you:
jquery("button").css("background-image","url(menubar/ajax-loader.gif)");