I have a html located at www.domain/folderOne. My images path's at www.domain/images.
I found out that the file mywebpage.html located at www.domain/folderOne can get the images displayed with either
<img src="../images/7.jpg" alt="Text" style="width: 800px; height:400px; " id="text">
and
<img src="images/texts/6/7.jpg" alt="Text" style="width: 800px; height:400px; " id="text">
I don't know why both work. Could anyone provide an answer? As an extra information, I am making the html file change the location displayed in address bar after it is loaded with:
<script type="text/javascript">
history.pushState(null, null, '../SuperWeb');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, '../SuperWeb');
});
</script>
You likely either have a symbolic link in the directory tree that stores your web assets on the server, or a web server mapping (e.g., a rewrite rule) that maps calls from one URI to the other. Hard to know without knowing more about your server setup, but it's not an intrinsic feature of HTML. I will point out that it's a good practice to use site-relative links (e.g., /path/img.jpg) rather than document relative (as you specify above), as it makes it hard to migrate content to different directories.
Related
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.
I want to build a website for a local football (soccer) team but I'm not sure how I can display the league table standings on the site which are available at http://wnl.org.uk/tables.htm.
I can create an iframe but it pulls in the entire page and I only need one of the tables. I would also like to make it responsive and apply my own styles to be consistent with my theme.
It's only an amateur league so it's not available via opta or something similar so I'm unsure what's the best approach.
Can any one help - This question is more of a how can I do something rather than this is what I've got. I'm not sure how I can achieve it.
If the page you want to fetch the data from is inside your server you can use the jQuery .load() function like this: (this method is without the iframe)
<div id="target-div">
</div>
And than use this code:
$('#target-div').load('./tables.htm #main');
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of target-id, and the rest of the retrieved document is discarded.
.load() jQuery Documentation
But this can only be done if this site is inside your server, because it gets the contents using AJAX.
Hope this helps.
Another Way
If you want to do this with iframe you can use some css-tricks to display only the part of the page you want.
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
<iframe scrolling="no" src="http://wnl.org.uk/tables.htm" style="border: 0px none; margin-left: -36px; height: 812px; margin-top: -486px; width: 650px;">
</iframe>
</div>
Source: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
The downside of this is that you will need to test different values for the margins of the iframe and the width of the div manually until you get the result you want.
Shortest way using PHP
1) Create a file "tables.htm" and leave it empty.
2) Create a file "test.php" (Make sure those are in the same folder).
3) Add there this lines of code:
<?php
$contents = file_get_contents("http://wnl.org.uk/tables.htm");
$file = fopen("tables.htm", "w") or die ("Unable to open file");
fwrite($file, $contents);
fclose($file);
echo "Successful";
?>
4) Run this file in your browser. This will write the contents of the file in that website to the file "tables.htm" in your Server.
5) Now that the file is written access its data using the .load() function I mentioned above.
<div id="target-div">
</div>
<script>
$('#target-div').load('tables.htm #main');
</script>
6) If you have option "Cron Jobs" in your host, use that to make the script "test.php" run in a specific time without you needing to run it in your browser manually.
This is the best way you can do it, and the best part is that you can change the style of the elements as well.
<div id="container" style="width:100%; height:50px; border:5px solid black;">
<div id="progress-bar" style="width:67%;
background-color:orange;
height:50px;">
</div>
</div>
Where it says "style="width:67%" I want to have the 67% read from a local text file, for a script in progress. How do I go about this?
Short answer - you can't read/write local text file on client's computer:
JavaScript and the DOM provide the potential for malicious authors to deliver scripts to run on a client computer via the Web. Browser authors contain this risk using two restrictions. First, scripts run in a sandbox in which they can only perform Web-related actions, not general-purpose programming tasks like creating (or reading) files.
https://en.wikipedia.org/wiki/JavaScript#Security
What we are doing:
I suggest converting the text file's contents to JSON
Use Jquery.getJSON() function to parse the object
Use the width node to set the style tags width value
All together now:
Example data in file:
[{"date": "2016/01/05", "time": "18:46:00", "title": "ReadMe", "width": "67"}
jQuery.getJSON('textfiletoread.txt',function(data){
// data is an array of objects
$.each(data, function(){
console.log(this.width); // log the width
$('#progress-bar').css('width', this.width); //use the text files width
});
});
I am attempting to make a photo gallery asp.net MVC website, and part of that involves the setting of the src to a local folder that contains images.
#model MyProj.Models.PhotoIndexViewModel
<div class="row" id="tableSearch">
#foreach (MyProj.Models.VideoModel photo in Model.PImgList)
{
<div class="col-sm-3 thumbnail">
#Html.DisplayFor(model => photo.Title)
<a href=#Url.Action("View", new { id = photo.Id })>
<img class="img-responsive"src="#Url.Content(photo.ThumbNailPrev)" alt=#photo.Id /></a>
#Html.HiddenFor(m => m.searchTerm)
#Html.Partial("_Tags", photo)
</div>
}
</div>
The ThumbNailPrev is "~/Pics/.jpg", which relates to a folder in the main part of the project. The issue is that the image does not appear. When I check the image using inspector is says it isn't found at /Pics/(photoid)/jpg. I don't understand why it is doing this, as my pics and the image itself are present at that location. I have also made sure to include the folder in my project, but it still doesn't seem to find the image.
UPDATE:
I just tried something and confirmed it is something to do with the way I'm calling the path from the database. As if I hard code the EXACT same string as the one in the database it works. The question now is why does that work?
For want of a letter..
I finally determined the problem, and it was a pretty dumb one. In code I am saving a jpEg image, but calling it via jpg. After changing the .jpg to .jpeg in the view everything works... If you are having a similar problem, check and make certain the file extension is correct.
I am working on a personal site, and the site uses an <iframe> to display most of its contents. You navigate the site by changing the target of the <iframe> to a specific .html.
Here's an example of how the navigation works:
<ul>
<li><a>onclick="document.getElementById('iframe1').src='home.html'>Home</a></li>
<li><a>onclick="document.getElementById('iframe1').src='prjcts.html'>Projects</a></li>
</ul>
<iframe src="home.html" id="iframe1"></iframe>
The problem that I've encountered is that since most things are is inside of the <iframe> that I can't link directly to any specific content.
If I wanted to show someone the Projects page, I can only link "www.example.com/" and tell them to navigate there themselves, and not simply link "www.example.com/projects".
My theory is that you can do it with something like:
"www.example.com#projects" using ID's or something, but since I'm pretty new to HTML5, I might be completely wrong. I have no idea how to make it work, and I can't seem to find anyone explaining it.
Is there any way to use the URL to specify an <iframe> target, and if so, how?
You would want to check the url and then set the src of your iframe using the url:
This is just an example of how you could do it, you should use maybe an array of URLs. There are a bunch of ways to accomplish this.
HTML:
<div id="wrapper">
<iframe id="myIframe" src="http://example.com/"></iframe>
</div>
JavaScript (using jQuery here):
$(document).ready(function () {
var myPath = window.location.pathname; // returns something like /projects.html
if (myPath == "/projects.html") {
$('#myIframe').src = "http://www.example.com/projects.html"; // sets the src of your iframe
}
});
Refer to this post's answer: dynamically set iframe src