HTML/CSS/JavaScript how to add hyperlink to content? - javascript

I am currently making a squarespace website for an art gallery and I have a page that displays the current exhibitions. I added a code injection to change the message that is displayed when there is no exhibition currently on display:
<style>
.eventlist-empty:before {
content: "We are currently between exhibitions, please see the future page to see what's coming up soon.";
}
</style>
However I would like to add a hyperlink around "future page" that links to /future. Could someone tell me how best to do this please?
Thanks!

You can't use the CSS property content in this way.
Your best solution is to use CSS to show/hide a link if necessary;
<style>
.eventlist .empty-link {
display: none;
}
.eventlist-empty .empty-link {
display: block;
}
</style>
<div class="eventlist eventlist-empty">
We are currently between exhibitions, please see the future page to see what's coming up soon.
</div>

I not sure that's possible. You can use JavaScript so when you click in the p class=eventlist-empty redirect you to the feature page.
var el = document.getElementsByClassName('eventlist-empty')[0];
el.addEventListener("click", function(e) {
window.location.replace("stackoverflow.com");
}, false);

I believe previous answers are missing one or more of the following considerations:
As you said, you do not have access to the underlying HTML (such is Squarespace when not using developer mode).
You must hide the existing text (which is added via Squarespace's default CSS for that template) either by setting content: "" or display:none or both.
You must remove the code you've added via code injection.
You must use footer code injection, not header.
Therefore, use the following code (via footer code injection) in place of what you had:
<style>
.eventlist-empty:before {
content: "";
display: none;
}
</style>
<script>
(function() {
var emptyList = document.getElementsByClassName("eventlist-empty")[0];
if (emptyList) {
emptyList.innerHTML = "We are currently between exhibitions, please see the <a href='/future/'>future page</a> to see what's coming up soon.";
}
})();
</script>

Add this to your Site Footer Injection
<script>
var emptyList = document.querySelector('.eventlist-empty');
if (emptyList) {
var anchorEl = document.createElement('a');
anchorEl.href = "/future";
emptyList.parentNode.insertBefore(anchorEl, emptyList);
anchorEl.appendChild(emptyList);
}
</script>
It'll simply wrap an anchor tag around this element for you

Related

Change CSS class on an element using JavaScript without FOUC

I found a HTML5 way of changing a class of an element using JavaScript.
HTML:
<div id="bootstrap-container" class="container-fluid fill-height">
<!-- Content -->
</div>
JavaScript:
var mql = window.matchMedia('(min-width: 1200px)');
if (mql.matches) {
var containerElement = document.querySelector('#bootstrap-container');
if (containerElement.classList.contains('container-fluid')) {
containerElement.classList.remove('container-fluid');
containerElement.classList.add('container');
}
}
This works fine except there is a noticeable FOUC when loading/refreshing the page.
How can I make the FOUC go away?
When the browser parses your HTML-File, he will execute your JavaScript (either inline or by reference <script src="script.js">) exactly where he found it. Therefore you have 2 possibilities to avoid the mentioned FOUC.
You execute the JavaScript earlier (e.g. as inline javascript right below the element you manipulate the class). It might be a good idea to set only 1 "media query class" (e.g. on the body-tag) and place your corresponding script right below
You hide the content until your JavaScript has been executed. E.g. you could do something like this
HTML
<body class="loading">
...
</body>
CSS
body.loading {
visibility: hidden;
}
JS
var mql = window.matchMedia('(min-width: 1200px)');
if (mql.matches) {
var containerElement = document.querySelector('#bootstrap-container');
if (containerElement.classList.contains('container-fluid')) {
containerElement.classList.remove('container-fluid');
containerElement.classList.add('container');
}
}
document.body.classList.remove("loading")
I solved it by creating a partial view and using bootstraps responsive utility classes hidden-xs, hidden-sm and so on.

Fixed navbar hides web content and JS is not working

This is what happen when I press the button "Contacto"
and should be like this
and now I'm using this javascript code
$(function(){
$('a#boton-contacto').on('click',function(e){
e.preventDefault();
var strAncla = $(this).attr('href');
$('body,html').stop(true ,true).animate({
scrollTop: $(strAncla).offset().top - $('nav').height()
}, 500);
});
});
but it made the button stop working, I want to know why, what is wrong?
you can go to my site and try it http://genebi.net I hope you can help me, thanks.
This code from you jQuery:
var strAncla = $(this).attr('href'); is setting strAncla to be "http://genebi.net/#contacto"
And since "http://genebi.net/#contacto" is not a valid selector, there is a javascript error that prevents the code from running.
To solve this, either:
Change your url for the element from:
<a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>
to <a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>
or:
2: You could use a data attribute in your link:
<a id="boton-contacto" href="http://genebi.net/#contacto" data-element="#contacto">CONTACTO</a>
and alter your jQuery as follows:
var strAncla = $(this).attr('data-element');
And it will work as you desire.
position: fixed; removes it from the normal flow of the document, and means that it doesn't occupy space. You can fix this without Javascript (and it'll be much less janky). It's a little awkward to work around this, but you can do it by having a blank div underneath it to fill up the space. Let's call it "header-spacer".
<div class="header">
...
</div>
<div class="header-spacer"></div>
And some CSS:
.header-spacer {
height: 70px;
}

Disabling browser status bar text

Background
Modern browsers do away with the classic status bar and instead draw a small tooltip at the bottom of their windows that displays the link target on hover/focus.
An example of this (undesirable, in my case) behavior is illustrated in the following screenshot:
Questions
Is there a portable way to disable these tooltips?
Am I missing any obvious drawbacks to doing this in my particular situation?
Is my attempt (see below) a reasonable way of accomplishing this?
Reasoning
I am working on an intranet web application and would like to disable this behavior for some application-specific actions because quite frankly, https://server/# everywhere looks like an eye-sore and is obtrusive since in some instances my application draws its own status bar in that location.
My Attempt
I'm not a web-developer by trade, so my knowledge is still rather limited in this domain.
Anyway, here's my attempt with jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Target Tooltip Test</title>
<style>
a, span.a {
color: #F00;
cursor: pointer;
text-decoration: none;
}
a:hover, span.a:hover {
color: #00F;
}
a:focus, span.a:focus {
color: #00F;
outline: 1px dotted;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
patch();
});
function patch() {
$('a').each(function() {
var $this = $(this).prop('tabindex', 0);
if($this.prop('href').indexOf('#') == -1 || $this.prop('rel').toLowerCase() == 'external') {
return;
}
var $span = $('<span class="a" tabindex="0"></span>');
$span.prop('data-href', $this.prop('href'));
$span.text($this.text());
$this.replaceWith($span);
});
$('a[rel="external"]').click(function() {
window.open($(this).prop('data-href'));
return false;
});
$('span.a').click(function() {
location.href = $(this).prop('data-href');
}).keypress(function(event) {
if(event.keyCode == 13) {
location.href = $(event.target).prop('data-href');
}
}).focus(function() {
window.status = ''; // IE9 fix.
});
}
</script>
</head>
<body>
<ol>
<li>External Link</li>
<li>Action Foo</li>
<li>Action Bar</li>
<li>Action Baz</li>
<li>Email Support</li>
</ol>
</body>
</html>
patch() replaces all links containing # (i.e., application-specific actions in my case) with a span element, makes all "external" links open in a new tab/window and doesn't seem to break custom protocol handling.
Is there a portable way to disable these tooltips?
Nope, other than workarounds like your example above.
Am I missing any obvious drawbacks to doing this in my particular situation?
You seem to be missing the fact that the whole situation is awkward. Why have links at all if you're going to make them look like buttons? Just use buttons. For that matter, why bother with links if you end up switching them out with spans anyway? Just use spans.
Is my attempt (see below) a reasonable way of accomplishing this?
It's not really reasonable as a general approach, because you're removing those anchor elements from the document, so any attached event listeners, expandos, etc. will be lost. It may work for your specific situation, but a more sane approach would be to not use links in the first place (see above).
If you're still determined to do something like this, at least don't replace the a element. Just get rid of its href attribute and set up an event listener as you did in your example. Now it's no longer a link, so it won't show up in the status bar (but it's still the same element, at least).
<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>
Note that this treats ctrl-clicks as ordinary clicks and disables right-clicking. I don't know about middle clicks.
You could also use "a" and merely replace the href with the onclick as in the code above, but when I tried that my "a:hover" styling stopped working. Apparently an "a" without an href is considered unhoverable, at least in Firefox. So I switched to "button" and "button:hover" styling and all was well.
I understand this solution will be considered bad practice, but in some situations, eg the site I'm making made up mainly of full screen photos, aesthetics trumps principles.
The tooltip provides an indication to the user where a link will take them if clicked. It's part of the standard browser user experience and will be expected by users of your site. Changing this expectation because you don't think it looks nice will probably lead to a poor user experience. Any content shown in that area will be visible as soon as the user stops hovering over a link tag.
I know that any link that doesn't tell me where it is going looks pretty suspicious to me.
try this
$(this).removeAttr("href");
$(this).click(function(){}).mouseover(function(){.........}).etc
This is what I do with jQuery:
//remove status bar notification...
$('a[href]').each(function(){
u = $(this).attr('href');
$(this).removeAttr('href').data('href',u).click(function(){
self.location.href=$(this).data('href');
});
});

Trying to remove ads in Gmail with Chrome Extension

I'm experimenting with a Chrome extension that will remove the ads displayed in the right-hand pane in Gmail and instead put the information I want there. (I haven't decided exactly what to put there yet; vacillating between several ideas, including external content and/or attachments.)
The ads are (usually) contained in a <div class="oM"></div> element. But I can't seem to select that either in my extension or in the console.
I've tested my manifest.json settings by writing an extension that added a superfluous div to the top of the page, and that worked fine -- I just created a new element and
document.body.parentElement.insertBefore(new_el, document.body);
However, what I'm trying to do now is just rip out the ads and put in some dummy text, or just put the text above the ads. This is the main function called in my content_script.js file.
function modifyPage(txt) {
var container = document.getElementsByClassName('oM')[0];
container.innerHTML = txt;
}
function modifyPage(txt) {
var insert = document.createElement('div');
insert.innerText = txt;
var container = document.getElementsByClassName('oM')[0];
document.body.parentElement.insertBefore(insert, container);
}
I've even tried to jQuery:
function modifyPage(txt) {
$('.oM').html(txt);
}
Also, trying to retrieve the <div class="oM"> using the Chrome console returns nothing -- even though I can see it right there in the source.
Set a delay on the execution of your jquery selector. The Google Tubes are a bit more complicated than using static div classes on page load.
Rather than remove the ads with JS, just hide them with CSS:
.oM {
display: none;
}
I'm using AdBlock + Chrome add-in(or extension).
It works very well it's a donation-ware, I'm guessing the author use jquery {display:none } to hide or remove the ads with a custom filter lists.

After visiting links, Firefox selectively skips state change or a:visited styling

After clicking a link with a common href (local page or web-site)
and the href is successfully loaded, both FF2 and IE7 will display
the link with a:visited styling.
For links with href="javascript:anyfunc()", IE7 works as above
while FF2 does not display a:visited styling. No change with any
DOCTYPE.
Q: Is either behaviour with JS links and :visited considered correct?
Q: Does FF2 leave anchor state unchanged after clicking a JS link?
Q: Without having to attach an onClick handler or modify classes/style
with JS, is there a concise way to tell FF2 to use :visted
styling independent of whether href is another page or a JS link?
Example follows:
<html>
<head>
<style>
div.links { font-size: 18px; }
div.links a { color: black; text-decoration: none; }
div.links a:visited { background-color: purple; color: yellow; }
div.links a:hover { background-color: yellow; color: black; }
</style>
<script>
function tfunc(info) { alert("tfunc: info = " + info) }
</script>
</head>
<body>
<div class="links">
JS Link 1<br>
JS Link 2<br>
Common href, google
</div>
</body>
</html>
It would be difficult to style these sorts of links... whilst they may have the same href, they could potentially do anything through JS (which may make it seem that visiting it would not).
Is there a way to link to something such as a HTML page and attach event handlers to the link (and return false to stop the link clicking through)? And if the links are in fact JS hooks, I would use an element such as a <button> and style it accordingly... remember to add cursor: pointer so the end user knows it is clickable.
Using inline javascript:function(something) in a href is bad practice. Try unobtrusive event handlers.
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!
Here's my take:
Q: Is either behaviour with JS links and :visited considered correct?
The purpose of a link is to retrieve a resource. If your link doesn't go anywhere, what are you "visiting"? The behavior is correct from this perspective in my opinion.
Q: Does FF2 leave anchor state unchanged after clicking a JS link?
It seems as though it doesn't change the state of the link to :visited unless it points to an element in the page (which means the link points to the current page which is implicitly visited) or to another resource which as already been accessed.
Q: Without having to attach an onClick handler or modify classes/style with JS, is there a concise way to tell FF2 to use :visted styling independent of whether href is another page or a JS link?
I don't think so. You can probably get the visited effect if you point the href of the link to "#" and use the onclick handler for your JavaScript needs.
I have encountered the issue I believe this question is asking. Consider this simple example:
style sheet:
#homebox { display: none;}
#contactbox { display: none; }
html:
<a id="#home"></a>
Show Home
<div id="homebox">Your home</div>
<a id="#contact onclick="return showHideDiv(this);"></a>
<div id="contactbox">Contact Info</div>
script:
function showHideDiv(elem) {
if( elem.style.display && elem.style.display == "none"; ) elem.style.display = "block";
else if( elem.style.display && elem.style.display == "block"; ) elem.style.display = "none";
return true;
}
Although not the most beautiful code, it points out some issues which can develop when using javascript onlick within a href. The reason you might want to do something like this, is to create dynamic content changes without reload which show a visited style. The a links would be handier than buttons, so the visited status of the links is maintained, even though internal. However, I have noticed some issues with browsers triggering visited status on internal links, let alone internal links with javascript onclick event handlers. A button would require coding a function to control visited styles.
I agree with Alex, a link should be a link to something, not a JS trigger - a button would much more effective here.
If you do want to attach some JS function to a link, you should definitely use some unobtrusive JS to attach that function to the click event.
EG using jQuery:
$("#myLinkID").click(function () {
//function stuff
});

Categories