I'm loading content from one page into another via the jquery .load event. Im currently doing it like this:
$('#someDiv').load('/directory/file.html #someDiv');
However, It would be better if I didnt have to specify the name of the div every time. Since they are the same on both pages, is there a way to say, "find a div on page1 and load its content into the matching div on page2? The idea is to not have to update the script every time there is new content added.
Thanks in advance.
After about a week of working at it... I figured it out. The script is below:
// Run this function on divs with the class of include
$("div.include").each(function(){
// load shared content file
var pathname = "shared-content.html";
//get the id value of each div on current page with class of include
var contentID = ("#" + $(this).attr("id"));
//find div with same id value in shared content file, then load its content
$(contentID).load(pathname + " " + contentID);
});
Steps to use:
Load this script on document.ready or in script tags after content on your page.
In shared content file, add some html and place it in a div with a unique ID.
Load shared content on any page (where the script is loaded) by adding the same unique ID you used in the shared content file.
Related
When I try this line of code:
$("#topleft").load(location.href + " #topleft");
it removes the topleft div instead of reloading it.
I am executing the code above in a typescript file (specification.ts) but the HTML that contains topleft (view.html) is connected to a different typescript file (view.ts). Is this the reason why my div does not get reloaded?
Since the div you are trying to reload is in a different location, you will need to use the location that you are trying to reload from (in this case view.html) so the load function will look like this
$("#topleft").load("view.html #topleft");
location.href refers to the page executing the script, so this effectively will do nothing (since reloading the div from the same page will result in the same content).
I wanted to take an image from one HTML file and when the user clicks a button, that image moves to a standard cell of a different HTML file.
To move an element between pages, if both pages are on the same domain, you can get the HTML of the element, put it in localStorage, then delete the element. On the other page, poll the localStorage for changes, the parse the element and use it in the DOM.
I wrote a set of functions to do that. On the sending page use this code. Call the function moveElement with the element you want to move to the other page.
const page="Your Page Name";
function moveElement(element){
const prefix="_elementmover_"+page+"_";
localStorage.setItem(prefix+"htmlToMove",element.outerHTML);
localStorage.setItem(prefix+"changedHtmlToMove",localStorage.getItem(prefix+"changedHtmlToMove")*1+1);
image.remove()
}
On the receiving page, use this code. The function receivedElement will be called wth the element.
const page="Your Page Name";
function receivedElement(element){
// Do whatever you want with the element here.
}
(()=>{
const prefix="_elementmover_"+page+"_";
let getChangeNum=()=>localStorage.getItem(prefix+"changedHtmlToMove")*1;
let oldChangeNum=getChangeNum();
let checkForChanges=()=>{
let newChangeNum=getChangeNum();
if(oldChangeNum!=newChangeNum){
let element=new DOMParser().parseFromString(localStorage.getItem(prefix+"htmlToMove"),"text/html").querySelector("html>body>*");
receivedElement(element)
}
oldChangeNum=newChangeNum
setTimeout(checkForChanges,100);
}
checkForChanges();
})();
Please note that the page variable should be unique on each set of pages it is on, but both pages must have the same value for it to work properly.
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!
How to resize an external site to fit into an iframe in my website?
Please any one help me?
)
You cant interact with an external iframe if it is in a different domain. If it is in the same domain, you can resize its contents as follows:
/**
* this function allows you to retrieve the window object of an iframe given by its ID
*
* #param {string} id - iframe id
*/
var getIframe = function (id) {
if ($.browser.mozilla) return document.getElementById(id).contentWindow;
return window.frames[id];
};
then, from the external file (the one which contains the iframe), you can call something like this when the iframe is loaded:
var resizeIframeContent = function(iframeID, sizeX, sizeY){
var iframe = getIframe(iframeID);
iframe.updateSize(sizeX, sizeY);
}
With this code, you are calling the function updateSize in the inner document of the iframe, so you should add this function in the nested document attached to the window object (global namespace). Something like this:
var updateSize= function(sizeX, sizeY){
//do you resizing stuff here, which depends on your html structure, it could be something like this:
$("#content").width(sizeX).height(sizeY);
}
However, I think that you question is wrong, and you are actually trying to ask how can you modify the size of your iframe (not the iframe content) to fit its inner content. If so, you cant do it in a crossdomain situation, but if both pages are in teh same domain you can do it in a similar way, something like this:
On your inner document, when the document is ready, send its size to the parent container:
$(function(){
var content = $("#content"); //change this to point your container, or obtain the document height or anything else
parent.onIframeDimensionsRetrieved( content.width(), content.width() );
});
and in your outter document (the one with the iframe) retrieve the new size and update the iframe dimensions:
var onIframeDimensionsRetrieved = function(width ,height){
$("#youriframe").width(width).height(height);
}
That is all :-) All my sample code was using jQuery to make it readable, you can do it with pure JS too if you want to.
Good luck! i hope it helps :-)
In my application I use a javascript function to set the src tag of an Iframe:
function loadDocument(id, doc) {
$("#DocumentContent").show();
$("#ButtonBox").show();
// Clear dynamic menu items
$("#DynamicMenuContent").html("");
$("#PageContent").html("");
// Load document in frame
$("#iframeDocument").attr("src", 'ViewDoc.aspx?id=' + id + '&doc=' + doc + '');
// Load menu items
$("#DynamicMenuContent").load("ShowButtons.aspx");
// Set document title
$("#documentTitle").load("GetDocumentInfo.aspx?p=title");
}
When I open Fiddler and debug this page, I notice that the 'ViewDoc.aspx' page is called twice.
When I put an alert() in the loadDocument function, I get only one alert message. In my viewdoc.aspx page there are no refresh or redirect statements or other statements that refreshes the page.
Is it possible this has something to do with browser? Is this default browser behavior?
the issue is pretty old, but....
do you have two elements with id=DynamicMenuContent ?
if there's one in the source page and one in the iframe, they may both be selected by $("#DynamicMenuContent").load...
if this is true and one is a div and the other a span, you could change it to $("div#DynamicMenuContent").load()...
hth