I am a technical writer and in the process of importing our content (HTM) into a new platform (Still HTM format). During this process I also want to use Prettyphoto to give users the ability to click on screenshots to vew a bigger version.
I have this now in my html code:
<a rel="prettyPhoto" href="images/xxxxxxx"><img src="images/23456.png" class="screenshot" alt="some alt text" />
There are thousands of files and each file could have many such images in them. where the name of the image changes but the href="images/xxxxxxx is the same
I need the xxxxxxx for each instance to be replaced by the png filename 23456.png or whatever that may be.
Is there an easy way to do this and how?
Thanking all in advance
You could use jQuery for that. The function loops all items with the class screenshot. Read the src property and puts that in the parent href.
<script type="text/javascript">
$(document).ready(function () {
$('.screenshot').each(function () {
$(this).parent().prop('href', $(this).prop('src'));
});
});
</script>
However this is no SEO friendly. If you want the href to be available in the source you are gonna need a server side solution with some programming.
Related
I have a requirement to display rtf file in my HTML. I am using object tag to embed my file into html.
When I use below code showing the plugin is not supported. Is there any way I can display rtf type document in my HTML
<object data="assets/display.rtf" type="application/rtf"></object>
Note: I am able to display PDF file with the same approach
After trying a lot found something.
First i downloaded the rtf.js from this link. rtf.js . Then went through this link. getting started with rtf.js. (download entire dist folder and place it into your html folder. dist folder doesn't contain jquery min js plz download it. and include all the script files in your html). Below is the code i modified. (Entire rtf will be converted into objects). Along with the following code please include the default code given by rtf.js.(Please make sure your rtf file is in proper way.)
const rtf =
`{\\rtf1\\ansi\\ansicpg1252\\deff0\\deflang1033{\\fonttbl{\\f0\\fnil\\fcharset0 Calibri;}}
{\\*\\generator Msftedit 5.41.21.2510;}\\viewkind4\\uc1\\pard\\sa200\\sl276\\slmult1\\lang9\\f0\\fs22 This \\fs44 is \\fs22 a \\b simple \\ul one \\i paragraph \\ulnone\\b0 document\\i0 .\\par
{\\colortbl;\\red0\\green0\\blue0;\\red255\\green0\\blue0;}
This line is the default color\\line
\\cf2
This line is red\\line
\\cf1
This line is the default color
}
}`;
<div id="display">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
doc.render().then(function(htmlElements) {
//console.log(meta);
//console.log(htmlElements);
console.log(htmlElements);
var display = document.getElementById("display");
for(var i=0;i<htmlElements.length;i++){
//console.log(htmlElements[i][0].innerHTML);
display.innerHTML+=htmlElements[i][0].innerHTML; //RENDERING ALL DIVS INTO display DIV
}
}).catch(error => console.error(error))
</script>
I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?
My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:
|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc
|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta
When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.
I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.
You don't have to update the index.html file.
You can create dynamic content.
You can use PHP:
You can learn it here:
https://www.w3schools.com/php/default.asp
And here is how to read a file
http://php.net/manual/en/function.fread.php
Or if you cant use PHP you can use Javascript:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
$.ajax({
url:'your-config-file.xt',
success: function (data){
console.log(data); //this is the config file. just for loop it and modify the dom
}
});
});
</script>
But your config file must contains the string how the links should be shown.
For example:
|catergory one
yt: https://www.youtube.com
I have many different directories which are named SOMECITY-STATE.
Each of these directories has one and the same index.html, with only one difference, the header image is different in every one of them.
Now I have a separate header-image folder in which the images are named all the same like SOMECITY-STATE.JPG
What I want to do is, to put some code in html file to make it automatically read the directory name e.g. NEW-YORK-NY and make the page display the ../banners/new-york-ny.jpg as it's header image.
<div class="header-image"> <img src="banners/new-york-ny.jpg"> </div>
Where mydomain.com/directory1 should display the image ../banners/directory1.jpg and mydomain.com/directory2 should display the image ../banners/directory2.jpg
Is this possible?
It is indeed.
Just before the ending </body> tag inside each index.html file, include this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
$('.header-image img').attr('src', '../banners/' + dir + '.jpg');
</script>
What's happening?
The first line adds the jQuery library to your webpage, which makes what you're trying to do much easier.
Next, I put some code inside <script> tags, so the browser knows it's going to be Javascript.
The first line inside the <script> grabs the folder that your index.html file is in, but it looks like "/new-york-ny/" right now.
The next line takes "/new-york-ny/" and takes off the last slash, so it's just "/new-york-ny".
The last line of code selects the image within the div with the header-image class, and sets its src attribute to "/new-york-ny", but also adds "../banners" and ".jpg" to it at the same time, making it "../banners/new-york-ny.jpg", which is hopefully what you want.
(credit to Ryan Kinal on this question for some of the code)
I hope it helps!
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
We'd like to show a "Loading..." image when the page is still being transferred. Pages can get quite large in our application. I tried with a separate page that displays the image and then loads the intended page, but the animated GIF just stops.
Can something be done on the page itself?
Or is there a better way?
Thanks for your comments, as always!
UPDATE
Here's the general idea of my small switching page:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:div
style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000"
id="AjaxLoader">
<xp:image url="/loading.gif" id="image1">
</xp:image>
</xp:div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Loading a "loading" page prior than the one you want to load is not an option.
You can create to DIVs in your HTML: one for the loading icon (e.g. with id="loadingIcon"), second one for the content (id="contentWrapper"). The second one is hidden (CSS style="display:none").
Define a Javascript function like this:
function pageLoaded(){
document.getElementById("loadingIcon").style.display = "none";
document.getElementById("contentWrapper").style.display = "";
}
The script is called in the BODY's onLoad event like this:
<body onload="pageLoaded()">
...
</body>
It is not a question of the web-server environment, but how you organize your code :-)
Take your approach and modify it slightly. Instead of location.href = href - which just triggers a reload, use an ajax call and replace your loading div. Something like this:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
$.ajax({
url: "test.html",
context: $("#{id:AjaxLoader}");
}).done(function(result) {
$( this ).replace(result);
});
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
(contains typos, adjust as needed)
To answer my own question: No, it's not possible, but there is a nice way around this, in my case anyway.
The trick is to open a new browser window, write something in it and then allow the new page to load.
var w= window.open();
w.document.write("<div style='position: fixed; top: 48%; left:40%'>Loading...</div>");
w.location.href= url;
If necessary the text can be replaced by an image and the new url can be set after a timeout.