HTML & CSS - Shortcut URL - html

I wonder how to make shortcut URL in html and css (if it is possible)
I mean this:
HTML URL1
CSS #URL1 { URL('nextpage.html');}
Is this somehow possible?
Thank you for your answers.
So it can't work like this?
var url1 = "http://www.google.com";
Google
Is there any option how to do it?

To give you the short answer, no, you can't achieve this only by using CSS and HTML.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. (...read more)
Also, here is an introduction to what CSS is and how to use it.
I recommend you also take a look at HTML Links.
To not be all negative, I will give you some solutions, you could use .attr and do it like this :
SCRIPT
$('#firstlink').attr("href", "http://google.com")
HTML
This will take you to google
...or you could do it like this:
SCRIPT
var url = document.getElementById("firstlink")
url.setAttribute("href", "http://google.com")
HTML
This will take you to google

It can't be possible. As css is for only styling the html.
Yes you can target particular url to style it.
Check out this page for further detail.

Or you can do it with php.
<?php
$url = 'example.com' ;
?>
<a href="<?php echo $url; ?>" >
click here
</a>

Related

DOMPDF: how to force dompdf to ignore some html page content (i.e. links, <a> tags)

when I create the pdf of my page with DOMPDF, I would like to exclude something not really important or needed into the pdf file, for example the links.
Is there a way to ignore the tags?
thanks!
You can use a sanitizer like DOMPurify and configure it to disallow a tags.
// leave all safe HTML as it is and add <a> elements to block-list
var clean = DOMPurify.sanitize(dirty, {FORBID_TAGS: ['a']});
You can make them disappear by using css properties
a { display:none; }
...

Importing an element from another URL into an HTML file

Let's say I have a element in foo.html. How can I import and embed it in another HTML file?
Have you tried using jQuery .load ?
So in another.html you would have:
<div id="place-to-embed-element"></div>
<script>
$( "#place-to-embed-element" ).load( "foo.html #imported-id" );
</script>
Hope this helps!
Okay ... that sounds odd. What do you mean by "importing"? HTML is a mark-up language, not a "real" programming language like PHP etc., so this functionality is, of course, not given by default. You could start to write PHP or juse JavaScript ... or just explain your question more detailed ;)
(Or just copy your html segment into the other file ]:-> )
maybe use php...
rename your file from 'file.html' to 'file.php' and copy this into it:
<?php
include("foo.html");
?>

Regular expression for getting HREF from footer

I have a requirement where I need to get the last HREF in the HTML code, means getting the HREF in the footer of the page.
Is there any direct regular expression for the same?
No regex, use the :last jQuery selector instead.
demo :
foo
bar
var link = $("a:last");
You could use plain JavaScript for this (if you don't need it to be a jQuery object):
var links = document.links;
var lastLink = links[links.length - 1];
var lastHref = lastLink.href;
alert(lastHref);
JS Fiddle demo.
Disclaimer: the above code only works using JavaScript; as HTML itself has no regex, or DOM manipulation, capacity. If you need to use a different technology please leave a comment or edit your question to include the relevant tags.
It's not a good idea to parse html with regular expressions. Have a look at HtmlParser
to parse html.

How do I add html link to image title

I'm actually needing to include html links in the longdesc attribute. I've altered prettyphoto to use longdesc instead of title for images, but I need to include html links in those descriptions. I know it's possible with code for characters, I just don't remember what those are.
Thanks
This can be done with the longdesc attribute:
<img src="theimage.png" longdesc="thedescription.html" />
And then, in thedescription.html:
Link
One alternative way to do this is by using an OBJECT element, as follows:
<OBJECT data="theimage.png" type="image/png">
Link
</OBJECT>
Also, since you asked for it, here is how to convert html entities automatically in jquery:
$('<div/>').text('Some Link').html();
// the above evaluates to <a href="link.html">Some Link</a>
I'm not sure if this is what you're looking for, but you can use Walter Zorn's wz_tooltip to show a tooltip with any kind of content.
And example of use:
<img src="theimage.png" onmouseover="Tip('<a href=\'http://test.com/\'>Link</a>');" onmouseout="UnTip();">
The longdesc attribute is an URI, not a place to add code. In other words, you'll need to create a page that the longdesc links to. This page is where you'll make a thorough description of what's on the image.
Are you looking for the html entities?
If so, these are what you are looking for:
> = >
< = <
" = "
' = '

Prevent CKEditor from formatting code in source mode

How can you prevent any automatic formatting when in CKEditor when viewing in source mode?
I like to edit HTML source code directly instead of using the WYSIWYG interface, but whenever I write new lines, or layout tags how I would indent them, it all gets formatted when I switch to WYSIWYG mode and then back to source mode again.
I stumbled upon a CKEditor dev ticket, Preserve formatting of ProtectedSource elements, that alluded to a setting which may have existed once upon a time which would be exactly what I'm after. I just want to know how I can completely turn off all automatic formatting when editing in source mode.
I came up with a solution I thought would be foolproof (albeit not a pleasant one).
I learned about the protectedSource setting, so I thought, well maybe I can just use that and create an HTML comment tag before all my HTML and another after it and then push a regular expression finding the comment tags into the protectedSource array, but even that (believe it or not) doesn't work.
I've tried my expression straight up in the browser outside of CKEditor and it is working, but CKEditor doesn't protect the code as expected (which I suspect is a bug involving comment tags, since I can get it to work with other strings). In case you are wondering, this is what I had hoped would work as a work-around, but doesn't:
config.protectedSource.push( /<!-- src -->[\s\S]*<!-- end src-->/gi );
and what I planned on doing (for what appears to be the lack of a setting to disable formatting in source mode) was to nest all my HTML within the commented tags like this:
<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->
I'd love to hear if anyone has any suggestions for this scenario, or knows of a setting which I have described, or even if someone can just fill me in as to why I can't get protectedSource to work properly with two comment tags.
I really think it's gotta be a bug because I can get so many other expressions to work fine, and I can even protect HTML within the area of a single comment tag, but I simply cannot get HTML within two different comment tags to stay untouched.
My solution to this was to use comments in my system, but before feeding the page content to CKEditor, convert them to custom HTML tags. Then, upon save, convert them back to my comment tags.
For your syntax that would be something like this in PHP. Before printing the page content to the textarea:
$content = str_replace(array('<!-- src -->','<!-- end src -->'),array('<protected>','</protected>'),$content);
Before saving the resulting content:
$content = str_replace(array('<protected>','</protected>'),array('<!-- src -->','<!-- end src -->'),$content);
In the CKEditor configuration:
protectedSource:[/<protected>[\s\S]*<\/protected>/g]
Hope that helps!
I wanted to preserve newlines in my source, and the protectedSource feature works well for that. I added this to my config.js:
config.protectedSource = [/\r|\n/g];
config.allowedContent=true; will do the trick
Here is the full HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="http://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.config.allowedContent=true;
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
I solved this problem by simply surrounding the back-end output of edit form page with a conditional on a $_GET variable - when you click on "Expert Mode" it loads a plain textarea instead of the ckeditor system. Your invocation of the ckeditor object will vary depending on your setup. ( I have a custom class that calls/builds the editor object )
<div id="postdivrich" class="postarea">
<?php
if( isset( $_GET['expert'] ) )
{
print "<div style=\"text-align:right;\">Editor mode</div>\n";
print "<textarea name=\"content\" style=\"height:400px;width:{$nEwidth}px;\">{$aDoc['content']}</textarea>\n";
}
else
{
print "<div style=\"text-align:right;\">Expert mode</div>\n";
require_once( 'admin/editor.class.php' );
$aDoc['content'] = str_replace( "\r", '', str_replace( "\n", '', nl2br( $aDoc['content'] ) ) );
$oEditor = new setEditor( $aDoc['content'], $nEwidth, "400", 'content' );
$oEditor->ShowEditor();
}
?>
</div>
Does this answer help? Basically you can turn off the options adding a javascript, it looks like.