I'm not sure if this is possible but I am helping out with a rather large website that was compiled with .aspx
We are wanting to change a link on the website but there is no actual place to edit the text for the link. I can however use CSS or possibly Javascript to edit the site.
<li>
Other Pages
</li>
<li>
Blue Page
</li>
I want to change the link and text that says Blue Page to something such as Red Page.
example:
<li>
Red Page
</li>
Is it possible to search and replace the text for that hyperlink using CSS?
I have already tried creating an overlay that covers the original text and link but it doesn't position properly on
the page depending on the browser the user uses.
example:
<div id="cover"></div>
#cover {
background: url('../images/cover.png') no-repeat;
top: 80%;
margin-left: 0px;
height: 30px;
width: 203px;
position: relative;
}
Anyone have any other ideas on how I can possibly replace text with CSS or Javascript?
Try something like this with JavaScript,
var bluePage = document.querySelectorAll("a[href='bluepage.aspx']");
if (bluePage[0]) {
bluePage[0].setAttribute("href", "redpage.aspx");
bluePage[0].innerHTML="Red Page";
}
CSS would only change the appearance of the link. The href URI would remain the same underneath, and if a user clicked the link, they'd be taken to the old link location. Hence, you need to use Javascript for this.
As per this answer, you can do search and replace with Javascript like so:
<script type="text/javascript">
function replaceScript() {
var toReplace = 'http://google.com';
var replaceWith ='http://yahoo.com';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
</script>
And you can initialize this function on page load like so:
<body onload="replaceScript();">
That should replace the strings throughout the page. However, the major drawback here is that it only replaces the links on page load. The pages saved on your server will still have the old links, which means there will be a small delay (tens to hundreds of milliseconds, probably) when the user loads any page, because the script needs to do its work, which takes a little bit of time. Also, it won't work if the user has JavaScript disabled in their browser, or if it's visited by a non-browser agent (like bot, crawler or web service), which is less than perfect.
Related
I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.
Im trying to create a facebook share button for my page that is accessibe by tab-indexing and pressing enter (for accessibility). A lot of the solutions I had created were using javascript and wouldn't load my script until after tabbing out of the share button.
So far I have created this button.
<a tabindex="0" class="fb-share-button" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)" data-layout="button_count">
<img src="/sites/all/themes/saralee/images/icon-facebook.png" alt="facebook icon">
</a>
This almost gives the desired outcome except I need it to open in either a new tab or an iframe. Which I haven't been able to do with keeping a valid url. (since the above button parses the current url). using target="_blank" doesnt work.
Quick Note - The best option would be to build the URL on the server and serve it as part of the HTML, use the JavaScript option below if you are unable to do that for any reason.
All other points other than the URL below are important to make your share 'button' accessible.
Instead of using an inline function on the button, build the URL in a separate JavaScript function and then apply it on document load.
JS
var URL = "http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)";
var elements = document.getElementsByClassName("fb-share-button");
elements[0].setAttribute("href", URL); //using [0] to get first element, would be better to use an ID or simply **build the URL on the server before loading the page** and serve it as part of the HTML.
HTML
<a target="_blank" class="fb-share-button" href="fallback URL In Case Of JS Failure" data-layout="button_count">
<img src="/sites/all/themes/saralee/images/icon-facebook.png" alt=""/>
<span class="visually-hidden">Share This Page on Facebook (opens in new window)</span>
</a>
CSS
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
Because you are no longer setting window.location using target="_blank" will work as expected (window.location was overriding the functionality of the link).
Also notice that I removed the tabindex as links are focusable by default (so it isn't needed).
I also changed the alt description to "" and added a 'visually hidden' <span> containing the purpose of the link.
I have included the CSS to make something 'visually-hidden' by applying that class to an item, as it is a useful tool to have in your accessibility toolkit!
Note how I indicated the link 'opens in a new window' within brackets to let screen readers know the behaviour of this link.
An empty alt tag is used to mark an image as decorative (make sure it is empty and not null, i.e. alt="" NOT alt).
Visually Hidden text is still accessible to screen readers but will not show visually.
I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,
http://layout.jquery-dev.com/
And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.
I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.
There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.
You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).
It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.
Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/
$("#popout").click(function() {
$(".bottom").hide(); // You could also use jquery to remove the div from the DOM
$(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});
html,
body {
height: 100%;
}
.top {
border-bottom: 1px solid #000;
}
.top, .bottom {
height: 49%;
}
.fillpage {
height: 100%;
}
.bottom {
color: #FFF;
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<h1>Top part</h1>
<button id="popout">Open popup</button>
</div>
<div class="bottom">
<h1>Bottom part</h1>
</div>
In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".
If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.
Consider this page: http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting.
The element in question is "Do they make things easy to understand? Are they interesting?" in the light gray box on the top right. When the page loads, it starts off high up, and then it moves 30px down. The same thing happens when you click "Information" in the navbar.
This is the element: <div id="question_sub" class="well"></div>.
Why does this happen, and how can I fix it?
Answer to Why does it Happen
If you try loading your page without javascript the page looks like
Problem
Your page is very heavily dependent on js for dom elements modification and for styling also.
Solution To avoid this style your page in css as maximum as possible, JS should be used for interaction or making web page attractive.
Probable Problem
If you are loading lots of external script which are not related to page content like discus inside head element
Solution
Move all the external js from head to end of body if you are not doing it, or you can load them asynchronously. Refer Mozilla Synch and Async
Another Way
If you want content to be loaded from server only when some portion of it has changed then use application cache technique with this the pages will be loaded from client machine so only initial page load will take time for the first load and then it will be quite fast
Check Using Application Cache
Other Ways
Compress Javascript and CSS
Use gzip compression
there are lot of more stuff, search it you will find ocean of knowledge, reference
If you want to keep the 50px margin between the elements then change the navbar class to also be 50px
.navbar {
margin-bottom: 50px;
}
Currently it is set at 20px;
Remove this code :-
comments powered by <span class="logo-disqus">Disqus</span>
This is a problem about fusion-margin
Remove this:
#college_pages_css .questions {
margin-top: 30px;
And try this, it will work fine:
#college_pages_css .questions {
margin-top: 0;
If you want a margin, put the margin on div#normal ;)
It looks like you're having a CSS issue due to the floating elements.
try floating the nav on the left:
#normal > nav {
float: left;
}
.disqus { float: right }
and wrap the following elements in a div that is floated to the right, for exemple:
<div class="disqus">
<div id="question_sub" class="well">Do they make things easy to understand? Are they interesting?</div>
<p class="stratify" style="display: block;">tip: talk about the best/worst/average cases</p>
<div id="disqus_thread">
</div>
By default, when you print a web page, the page title and and URL are printed at the top of the page, and likewise the date and time are printed at the bottom.
It is possible to remove this additional as you are printing through the PAGE SETUP menu (under FILE in Internet Exp)
Does anyone know of a way of doing this via CSS or javascript?
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Print headers/footers and print margins
When printing Web documents, margins are set in the browser's Page Setup (or Print Setup) dialog box. These margin settings, although set within the browser, are controlled at the operating system/printer driver level and are not controllable at the HTML/CSS/DOM level. (For CSS-controlled printed page headers and footers see Printing Headers .)
The settings must be big enough to encompass the printer's physical non-printing areas. Further, they must be big enough to encompass the header and footer that the browser is usually configured to print (typically the page title, page number, URL and date). Note that these headers and footers, although specified by the browser and usually configurable through user preferences, are not part of the Web page itself and therefore are not controllable by CSS. In CSS terms, they fall outside the Page Box CSS2.1 Section 13.2.
... i.e. setting a margin of 0 hides the page title because the title is printed in the margin.
Credit to Vigneswaran S for this tip.
Its simple. Just use css.
<style>
#page { size: auto; margin: 0mm; }
</style>
A possible workaround for the page title:
Provide a print button,
catch the onclick event,
use javascript to change the page title,
then execute the print command via javascript as well.
document.title = "Print page title"; window.print();
This should work in every browser.
You can add this in your stylesheet: #page{size:auto; margin:5mm;}
But this discards the page number too
completing Kai Noack's answer, I would do this:
var originalTitle = document.title;
document.title = "Print page title";
window.print();
document.title = originalTitle;
this way once you print page, This will return to have its original title.
Nothing works for me except the following solution from #Md. Hasibul Huq. You can use it without styles for body:
#media print {
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
This is not a programming solution (I absolutely know that)
The person who asked this question was seeking an answer with CSS, I am aware of that, and this answer will not help him at all, but it could help others (like me) which brought me to here in the first place.
but It can save your life especially if your client calls you on Weekend to fix it :) (like what happened to me)
quickly she (your client) can expand the "More Settings" and uncheck the "Headers and footers" from Chrome page, as shown in the image below,
Again the programming solution for this problem is as in the accepted answer, I will not repeat it, but if you do not want to deploy your application on Weekend, then this is the way to go
Try this;
#media print{
#page {
margin-top: 30px;
margin-bottom: 30px;
}
}
To add custom page title in the place of about:blank when printing via window.print(): Add the following lines:
document.write('<head>' +
'<title>' +
'My Title' +
'</title>'+ ...)
There's a facility to have a separate style sheet for print, using
<link type="text/css" rel="stylesheet" media="print" href="print.css">
I don't know if it does what you want though.