I'm trying to make a custom cursor setter. You can customize cursors in CSS, so I went there first.
html {
cursor: url(MY URL GOES HERE), auto !important;
}
It works at this point. However, I want the average user to be able to enter an image URL and see the cursor change to that. I decided to use JavaScript to do that.
function customCursor() {
var v1 = prompt("Enter the image URL you want to be your mouse cursor.");
var style = document.createElement('style');
style.innerHTML = `html {cursor:url(` + v1 + `); } `;
document.head.appendChild(style);
}
However, it doesn't work. I checked the current page HTML with Firebug, and the tag is added. And when I use JavaScript to add it manually, it works. So why would it not work?
I also made sure to keep the images I chose below 128x128.
After massive changes to the code, it still is not working. However, I now understand a reason why (by using devtools to read what was actually being added):
Instead of dynamically using my variable, it was treating the variable name as the URL itself. This makes this question mostly irrelevant.
Related
I would like to move the href assignment to CSS.
Something like <a style="href: url('Home.htm');">Home</a> instead of Home.
Is it possible to do this in CSS?
I have a button at several places in my site whose corresponding URL value, might change in the future. I want to change the target address only in one place, i.e. my CSS file, instead of having to manually change them for every instance of that button.
This behaviour isn't really supported, as explained in other answers. But if you really need this on a page, it's possible to add it using some JavaScript. Used-defined custom variables/properties in CSS need to start with --, and I'll use the name --href-override.
We'll listen for all mousedown and touchstart events on links in the document. These events are useful because they'll always occur before the click is registered. Each time we handle one of these events, we check if the associated link has a --href-override property/variable defined in CSS. If so, we replace the HTML href with the CSS --href-override value, and the browser will automatically use that new value when handling the click event.
function overrideEventTargetHref(event) {
// if it's the beginning of a click on a link...
if (event.target.tagName === 'A') {
var link = event.target;
var override = getComputedStyle(link).getPropertyValue('--href-override').trim();
// if the link has an CSS href-override and it's different than the HTML href...
if (override && override != link.href) {
// replace the HTML href with the CSS href-override
link.href = override;
}
}
}
window.addEventListener('mousedown', overrideEventTargetHref, false);
window.addEventListener('touchstart', overrideEventTargetHref, false);
.override {
--href-override: https://stacksnippets.net/;
}
actually example.com
secretly stacksnippets.net
This also work properly for things like middle-clicking to open in a new tab.
This is quite a hack and you usually wouldn't want to do it. But if your situation requires it, you can.
CSS is a styling sheet, so the short answer is no. Also not entirely sure as to what your reason for wanting to is, but if it's due to changing data, use JavaScript or PHP to do this instead. Much easier, logical, and possible.
The href property stands for hypertext reference. It is not an entity that lends itself to styling; see this resource. If you wish to style how that location's text value appears on a page, you could write code that styles the a tag and if you want to get fancier you could add on a pair of span tags, as follows:
CSS:
a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}
a:hover {
border: 3px solid #009;
}
span {
color: #f0f;
}
<span>Home</span>
As for changing the values of the buttons, if you run Linux, it provides various helpful utilities, such grep; see this discussion. Also, see this article.
I'm making a page that has 4 in-page tabs on it. To link to those tabs, the URL is
URL/#tab-1-tab; URL/#tab-2-tab etc
Now, in one of the tabs I want to have buttons that link to specific points on a page inside another tab, but not sure if it's actually possible to link to.
I've made the anchors on that page with
<a name="1"></a>
But I can't figure out how to link to them. I tried
URL/#tab-4-tab/#1 and URL/#tab-4-tab#1
Not sure what else to try. The links do work if I go to the tab with the anchors, then erase the tab url bit and just put in the anchor link, so instead of
URL/#tab-4-tab, I type in URL/#1
Then it jumps to the right point.
But that doesn't work if I'm on any other tab or page.
Is it possible to do this somehow?
If your using tabs to switch div CSS properties like display:none / display:block then you will need some jQuery / JavaScript to switch them based of URL no differently then your jQuery that listens for the tabs "onclick" event then shows that relative div.
First step would be to obtain a JavaScript URL reader that listens for variables or hashtag-bookmarks. Here is an example of a variable reader I have used before.
http://jsfiddle.net/googabeast/hhkuj/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
//usage
var myVar = getUrlVars()["tab"];
That would make the URL format slightly different then your above posting, something more like "index.php?tab=2" / "index.php?tab=3" etc...
Next phase would be generate a switch based off the incoming URL variables to properly show the requested div.
I want users to know what page they are currently on by highlighting the hyperlink.
I'm not using a list of buttons if that matters (<li>), I'm just using links.
I don't want to have to give each link a class on each page to tell if it's active or not.
Is there anyway of doing this without giving each active link a class?
I've looked into this issue and from what I see jQuery can be a possibility but I'd prefer to use it as I'm not clued up on jQuery. If anyone does know of any jQuery solutions I'll be happy to look at them!
Any automatic active link detectors about? :)
I think this may work but I haven't tested it.
It's using jQuery and it's pretty readable.
You should however process the path name to have just the part needed for the match in the hrefHasPath function.
var links = $("#links a"); // gets all links within something with an id of "links"
var pathname = window.location.pathname; // current url
//for each link see if the href has something in the path, and if it does add a css class
$.each(links, function(){
if(hrefHasPath($(this).attr("href"))){
$(this).addClass("highlight");
}
});
function hrefHasPath(href){
return (href.indexOf("pathname ") != -1);
}
Off the top of my head, I would approach this by grabbing all <a> elements (or ones in a certain grouping, or in a class, like navigation) and checking if the CURRENT URL == a.href
Something like so:
var a = document.getElementsByTagName('a');
for (var idx= 0; idx < a.length; ++idx){
if(a[idx].href == document.URL){
// some styles here to the link background
a[idx].style.backgroundColor = 'red';
}
}
If you add in jQuery it will make your selector easier for styling and the like.
i am trying to put context path for an image in HTML.<img src="/MyWeb/images/pageSetup.gif">
Here /MyWeb is the ContextPath which is hardcoded. How can i get dynamically.
i am using as <img src=contextPath+"/images/pageSetup.gif">but image is not displaying. Is there any option.
First of all, "Context path" is a term which is typically used in JSP/Servlet web applications, but you didn't mention anything about it. Your question history however confirms that you're using JSP/Servlet. In the future, you should be telling and tagging what server side language you're using, because "plain HTML" doesn't have a concept of "variables" and "dynamic generation" at all. It are server side languages like JSP which have the capability of maintaining and accessing variables and dyamically generating HTML. JavaScript can be used, but it has its limitations as it runs in webbrowser, not in webserver.
The question as you initially have will only confuse answerers and yield completly unexpected answers. With question tags you reach a specific target group. If you use alone the [html] tag, you will get answers which assume that you're using pure/plain HTML without any server side language.
Back to your question: you can use ${pageContext.request.contextPath} for this.
<img src="${pageContext.request.contextPath}/images/pageSetup.gif">
See also:
How to use relative paths without including the context root name?
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
You can't write JavaScript in the src attribute. To do what you want, try some code like this:
var img = new Image();
img.src = contextPath + "/images/pageSetup.gif";
document.getElementById('display').appendChild(img);
Here the target; the place where you want to display the image, is a div or span, with the id display.
Demo
With HTML, you'll have to take some extra traffic of producing an error, so you can replace the image, or you can send some traffic Google's way. Please do not use this:
<img src='notAnImage' onerror='this.src= contextPath + "/images/pageSetup.gif" '>
Demo
Do not use this.
You must use JavaScript for this.
First, have all images point to some dummy empty image on your domain while putting the real path as custom attribute:
<img src="empty.gif" real_src="/images/pageSetup.gif" />
Now have such JavaScript code in place to iterate over all the images and change their source to use the context path:
var contextPath = "/MyRealWeb";
window.onload = function() {
var images = document.getElementByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var realSource = image.getAttribute("real_src") || "";
if (realSource.length > 0)
image.src = contextPath + realSource;
}
};
The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?
I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.
Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.
Here's how from the open source Timeline project:
// Use document for the doc param
function includeCssFile(doc, url) {
if (doc.body == null) {
try {
doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
return;
} catch (e) {
// fall through
}
}
var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
getHead(doc).appendChild(link);
};
function getHead(doc) {
return doc.getElementsByTagName("head")[0];
};
Put your datatable in a specific div with an id
Or: Via the css selector : #yourdivid .yui-dt-data