Replace a <div> with another html page with .innerHTML? - javascript

I am currently working on a project which allows for different webpages to be loaded into a <div> in my page when certain links leading to them are clicked , I have read up on the thread below but I do not have any idea on how to do jquery and I was wondering if the pages can be loaded with .innerHTML ? Are there ways to do it with only css and javascript and html?
Replace <div> with another HTML page
Basically what I want is something like w3.includeHTML() in which the entire page loads and show itself not within a frame but as part of the page
Here is a link to my project file and the main html page being used is index.html and the html page to linked to is greatwallofchina.html:
https://drive.google.com/file/d/1yAWZIIhBKHjwkiwwNhXUsQEVVQdjTxrM/view?usp=sharing

If you want to show another html inside another use the object element and you can use innerHTML to achieve this. Below are 2 functions for each link one will load one page and the other will load the second. The other option requires you to post your stylesheet
Hope it helps. The update to this Solution is to remove the extra scrollbar.
<script type="text/javascript">
function nextpage(){
document.getElementById('pageContent').innerHTML = "<object style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\" data=\"http://localhost/test/page1.php\"></object>" ;
}
function nextpageb(){
document.getElementById('pageContent').innerHTML = "<object style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\" data=\"http://localhost/test/page2.php\"></object>" ;
}
</script>
</head>
<body style="float:left; overflow:hidden; width: 100%; height: 101%">
<nav>
<h2 class="hidden">Our navigation</h2>
<ul>
<li><a onclick="nextpage();">Home</a></li>
<li><a onclick="nextpageb();">Contact</a></li>
</ul>
</nav>
<div id="pageContent">Hello motto </div>

Do this:
not sure of the format of these "links" if you have access to them then you can use one of a couple of ways
use the HTML and any variant of the following Javascripts (JS)
HTML
<iframe id="myFrameID" src="" width="0px" height="0px" style="display:hidden;visibility: hidden"></iframe>
<div id="myPageViewerDIV"></div>
JS with selectors
$('a[href="formatoflinkhere"]').click(function () {
$("#myFrameID").attr("src", $("a:focus").attr("href"));
$("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
return false;
});
JS with any links
$('a').click(function () {
$("#myFrameID").attr("src", $("a:focus").attr("href"));
$("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
return false;
});
JS with any links but ids (the hash symbol)
$('a[href!=#]').click(function () {
$("#myFrameID").attr("src", $("a:focus").attr("href"));
$("#myFrameID").bind('load', function() { $("#myPageViewerDIV").html($("#myFrameID").contentDocument); });
return false;
});
you or other users can add on to this ^^/'
what this does:
Creates a hidden invisible IFrame
Binds All Links (or variant type) with the onclick event handler
(returns false so no browsing to the link
load the link into the source
binds to the onloaded event of the iframe
copys the iframe's root document to the dive of your choices...
TL;DR
Not tested, should work in theory.

You can try loading the page in your div as given below
USING JAVASCRIPT::
<div id="result">
</div>
<script type="text/javascript">
function myFunction() {
document.getElementById("result").innerHTML = '<object type="text/html" data="/path/of/htmlpage.html" ></object>';
}
<script>
USING JQUERY ::
$(document).ready( function() {
$("#yourLinkId").on("click", function() {
$("#YourDiv").load("../pages/PageYouWantToShow.html");
});
});

$(document).ready( function() {
$("#yourLinkId").on("click", function() {
$("#YourDiv").load("../pages/PageYouWantToShow.html");
});
});

functionyouFunc(){
document.getElementById("element").innerHTML='<object type="text/html" data="/statics/health.html"</object>'
}

Its simple - Just call a javascript function on clicking the link and load your html as follows
$("#divid").load('path of file')

Related

Perform Function After Element Is Revealed

I'm working on a website where a div tag reveals itself after enough products are selected. What I'm trying to do is add an ID to this div tag after it's revealed using javascript.
This is the tag that's revealed:
<div class="discount-summary"></div>
This is the javascript I've created:
$(".discount-summary").load($(this),function(){
addDiscount();
});
function addDiscount() {
$('.discount-summary').attr('id','discountbox');
}
Unfortunately, this does not appear to be working.
Updated
Try:
<div class="discount-summary">Just a test</div>
$( document ).ready(function() {
setInterval(addDiscount, 1000)
});
function addDiscount() {
$('.discount-summary').attr('id','discountbox');
}
CodePen

Changing text inside an iframe with JS

I have an HTML page which loads some content in an iframe with the help of remote JS. I want to replace the text "premium content" with something else.
What I am trying is:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://gaand.comli.com/no.js"></script>
<img src="psss" onerror="myFunction()"></img>
<script>
function myFunction() {
var x = document.getElementById("overlay_iframe");
var y = x.contentDocument;
y.document.body.innerHTML = y.document.body.innerHTML.replace('premium',
'newtext');
}
</script>
</body>
</html>
Is there any way to change it as soon as the page is loaded completely?
You can use jquery to have event when page loads, and then replace html content.
$( document ).ready(function() {
$( "#overlay_iframe" ).html( $( "#overlay_iframe" ).html().replace("premium","newtext"));
});
Unless the iFrame is on your server you cannot change it. I would suggest using PHP
file_get_contents()
and replacing it within the string.
You can try using the jQuery .contents() to return an object of the iframes contents and than manipulate that. jQuery .contents()
Edit, updated
Try
$.getScript("http://gaand.comli.com/no.js")
.done(function(script) {
s = setInterval(function() {
$("iframe").contents()
.find("body").text(function(_, o) {
return o.replace("premium", "newText");
}) && clearInterval(s);
}, 10);
});
jsfiddle http://jsfiddle.net/guest271314/whjqqtco/

How can I get url from java script ad line?

I have one div when I click that div I want to open a child browser.I have the code for child browser but when I click the div it executes the javascript line and I didn't get any url from there.
Please check my code
Div code
<div class="box_padding " onClick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes);return false;" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
when I tried this nothing happening.
So I have tried one more way to solve this issue
function openwindow(){
w=open("myurl",'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
HTML:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
This is also not working.
If you have jquery available you can use this instead of this.href:
$('script').attr('src');
function openwindow(){
w=open($(this).find('script').attr('src'),'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
This seems to work in a preliminary test, native javascript. This would be trivial w/ jquery as a previous poster has shown.
Use the URL as a parameter in the div tag "srcVal".
<div class="box_padding " srcVal="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" onClick="openwindow()" id="column-c-box-1">click me</div>
or this way:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" id="scriptTag"></script>
</div>
Your function slightly modified:
function openwindow(){
var id = document.getElementById("column-c-box-1").getAttribute("srcVal");
//or
// var scr = document.getElementsByTagName('script');
//var id = scr[0].src; // use scr[scr - 1].src if have multiple scripts
var w=open(id,'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
I used "with" because that is in your original code, but I'd caution against it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FStatements%2Fwith

Clever work-around for my current script?

I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.
In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.
See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).
Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:
Javascript that calls the video:
function playVideo(cap, file, streamer, alertmsg) {
var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
so.addParam('displaywidth', '586');
so.addParam('displayheight', '330');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('skin', 'player/skins/glow.zip');
so.addVariable('controlbar', 'over');
so.addVariable('plugins', 'captions-1');
so.addVariable('captions.file', cap);
so.addVariable('dock', 'true');
so.addVariable('image', 'landing_img/video.jpg');
so.addVariable('file', file);
so.addVariable('streamer', streamer);
so.addVariable('autostart', 'false');
so.write('player1');
window.alert(alertmsg);
}
The thumbnail for the video:
<div class="mini_player1"> <a href="#" class="vidpic" title="">
<!-- thumbnail-->
<img src="images/1_panda.jpg" alt="Video 1" class="vidpic" />
<span class="play-button"><img src="images/yt.png" alt="Play"></span>
</a>
</div>
<div class="content_mini_player1 cmp">
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
</div>
The script that 'replaces' the content in bigplayer with the new selected video:
jQuery(function ($) {
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
});
Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.
Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.
Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")
Wow! That is...wow.
Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
Lastly, when you call a function in a script tag like you are doing:
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
//Add event handler
$(this).on('click',function() {
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
});
});
Your inline JavaScript function playVideo is going to be called when the page loads. You will want to remove it from there and do something like this:
<div onclick="playVideo()" class = "mini_player1">

jQuery tools: open an Overlay manually with a function call?

I have several "a"-tags on my page that trigger an overlay:
Now I want to open one of these overlays with a function-call.
I tried several things and finally came to this solution:
function openOverlay(id){
$("a[id=" + id + "]").overlay().load();
}
This works but it seems that with the load() - function all the javascript code on my page is executed again and that causes the destruction of my user interface.
I use this function to create my overlays:
$(function() {
$("a[rel]").overlay({
api : true,
mask : '#DCDBDB',
effect : 'apple',
onBeforeLoad : function() {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
Any suggestions?
Updated Code:
<script type="text/javascript">
$(document).ready(function(){
$("a#lvl1").overlay({
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
<!-- HTML Link-->
<a href="prelevel.htm" rel="#overlay" id="lvl1" style="text-decoration:none">
<button type="button">Show external page in overlay</button>
</a>
<!-- Overlay Container-->
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>

Categories