On a website that I am maintaining, I have many code lines like the following one:
<strong>doi</strong>
reference
where "website" is an actual website address and "reference" is a number which depends on each entry of this type (while the website address is always the same). In html/ccs; is it possible to create a command, let's call it doi such that instead of always writing the two lines above, I would equivalently write
<doi>reference</doi>
No it's not possible using just html/css, but it is possible using javascript/jquery or a javascript framework, like angularjs.
Here's an example using jquery:
https://jsfiddle.net/partypete25/31dzyjgL/
<!-- HTML -->
<doi>121</doi>
<!-- JavaScript -->
$("doi").each(function(){
var ref = $(this).text();
$(this).replaceWith( "<strong>doi</strong><a href='http://website/"+ref+"/' target='_blank'>reference</a>" );
});
So the script will look for all of your custom "doi" tags, and replace them with the fleshed out label+link with the dynamic reference.
Related
I am trying to figure out how to write jQuery code to insert meta data in to an element, specifically this: data-section-name="home"
I want to insert this in a div with an ID of home-section and the output would be like this:
<div id="home-section" data-section-name="home">
(some code here...)
</div>
I am using a divi builder in Wordpress
If you need the data attribute to appear in the HTML source use attr():
$('#home-section').attr('data-section-name', 'home');
If the data attribute is going to be read by a jQuery library then you can use the data() method instead, which is more performant:
$('#home-section').data('section-name', 'home');
The caveat in both cases is to ensure that you execute this line of code before whatever library depends on that data attribute being present.
This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 3 years ago.
I want to insert a navigation div inside all of my HTML documents. Is there a way to do so without putting the entire div inside of every document? I figured the solution would be similar to a CSS stylesheet.
I don't know of anyway of doing this without Javascript or jQuery, which I want to avoid using if possible.
<html>
<body>
<div>
//CONTENT//
<div>
</body>
</html>
I want to put the div inside of a separate document and put in a link of some sort to substitute that in every document that contains the div.
Edit: I Haven't notice that you also don't want to use JS.
I'll leave this answer as a partial solution for you problem.
The Solution:
If you don't want to use ANY Library like JQuery or frameworks like Angular/React/Vue then you have the option to use Web components (I've added the description from the link below).
Notice: Don't forget to check for Browser support.
With that you can choose HTML templates or Custom elements.
Let's take an example of HTML template:
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis:
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var tbody = document.querySelector("tbody");
var clone = document.importNode(template.content, true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
What is web components (From the developer.mozilla.org docs)?
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
I have a set of tabbed tables. tabs are added during runtime, and each tab has 4 tables with data associated with the tab.
I also have a requirement that each table scrolls data but the header remains visible and consistent with the scroll.
I have seen examples of this and implemented it just fine, well for the first tab.
Since the ids need to be unique, I use the Angular Js ng-attr-id to generate unique ids.
My problem now is how to reference the unique ids when creating the onscroll function.
With a single tab, I can use this code:
<table id="Orders" onscroll="$('#Orders > *').width($('#Orders').width() + $('#Orders').scrollLeft());">
This works absolutely fantastic, now using Angular's ng-attr-d, I don't know how to set the function since it needs to be dynamically created using the dynamic id:
<table ng-attr-id="Orders{{GroupDetails.length}}" onscroll="$('#Orders{{GroupDetails.length}} > *').width($('#Orders{{GroupDetails.length}}').width() + $('#Orders{{GroupDetails.length}}').scrollLeft());">
This above does not work. Inspection shows that the {{}} parts are rendered as string.
Is there an Angular JS way to 'inject' event functions?
Issue with syntax, you can add a variable to string and assign it to ng-attr-id.
Try this:
<div ng-attr-id="{{ 'orders-' + GroupDetails.length }}"></div>
I need to get the date from the server in mm/dd/yyyy without any javascript or asp code. I would prefer to do this as either a link that flows in the current document frame and that also injects the mm/dd/yyyy into the current html web page as css or other non code based solution. I don't want to use any extraneous querying languages like xslt, xquery, or plinq either.
example:
<h3>Date:<date format="mm/dd/yyyy" src="currentdate.asp" /></h3>
output:
Date:06/26/2012
No, this is an impossible task.
HTML is a static language. It is impossible to use a static language without any dynamic element (javascript, php, ssi, etc.) and have it change the page.
You will need to find a way to loosen the constrains for your project as it is currently not only impossible but illogical.
EDIT:
I thought of one potential way but it wouldn't be pretty.
You could use an <iframe src="date.asp"> and if the date.asp only returned the date then it would work. This is the only way possible.
as he others say you cannot achieve this without at least a bit of javascript. what you could do is use jquery to select all your date tags and then post an ajax to get the current date in your preferred format.
like so:
<script type="text/javascript">
$(document).ready(function(){
$("date").each(function(index, element) {
var d = $(this);
$.post("ullu.asp", {
ajax: true,
act: "currentdate",
format: d.attr("format")
}, function(data) {
d.after("<span>" + data + "</span>");
});
});
});
</script>
<h3>Date:<date format="%m/%d/%Y" /></h3>
then on ullu.asp:
<%
if request("ajax") = "true" then
dim d : d = DateTime.FormatDate(request("format"), now)
response.write d
end if
%>
DateTime is here a class of mine for formatting dates you could use your own implementation... Furthermore you could add another attribute to your tag like "src" to send your ajax there.
i know you wanted to do this without "using code" but that is not possible. with this solution you only have to add a bit of javascript which handles all your tags...
You can always make it an img, then use an on the fly img generator which generates text as an image from the server. You can use something like csImageFile for generating text in an image on the fly.
http://www.chestysoft.com/imagefile/default.asp
Your image would look like this:
<img src="date.asp" />
Then your date.asp file would be generating a new image (using response.contenttype="image/jpeg" with the current date on each call.
But your date would be displayed as an image, not text.
Or you can use an iFrame like the secretformula's answer, or Ajax/jQuery for this. But if you're not gathering the data from the server, then your date will from the client.
I use a frame from a HTML page to load some data from the server without having to leave the original web page. I simply reassign the src of the frame and the shown data gets updated.
Now I need to programatically create a div, but the width and height have to be retrieved from the server. May I use a frame to get those values, without leaving the web page, or is there a more simple and efficiente way ?
I would prefer not to use ajax, and keep my code as simple as possible, thanks
One easiest way is to call page property like this:
<script type="text/javascript">
var width = <%=this.Width %>
</script>
and declare this property in cs file like this
public int Width
{
get;
set;
}
Is it what you expected? or if you have some calculations after pages loaded, you can simply achieve it by using jquery ajax and one httphanlder.
Use jQuery. It's really simple.
A simple example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$('#result').load('otherfile.php');
</script>
<div id="result"> </div>
Loads otherfile.php inside the div id'ed "result". No page reload.
Thanks for the jquery example, I may use it in the future. For now I found a very simple and efficient way to solve it using a frame (I know, I know...) that really surprised me for its simplicity:
I create a form (a javascript class that manages several divs), then a little frame inside it, and the frame change the form properties and remove itself.
The key was to access the javascript variable defined in the parent from the child:
echo "<script>";
echo "parent.window.oDlg.SetSize( ".$row[ "WIDTH" ].", ".$row[ "HEIGHT" ]." );";
echo "parent.window.oDlg.SetTitle( '".trim( $row[ "TITLE" ] )."' );";
echo "</script>";