I am having some issues fully loading an html file into my div. After reading though different questions here I realized that I should use an iframe instead of trying to mess around with divs, ajax, or JS. This has served me well, however, upon loading it returns the page though in a scroll box as so:
how can I solve this issue?
Code snippets below:
This part comes from the index.html:
<div class="blurbs" id="blurbs">
<iframe id = "frame" width="100%" height="100%" frameborder="0" ></iframe>
</div>
the rest comes from the january html file which is a large one that just contains all that information so i am uncertain if y'all need to see it as I doubt it has anything to do with this.
this here is the javascript that is called when January is clicked:
function load_january() {
var ajaxCall = document.getElementById("frame");
ajaxCall.setAttribute("src", "../HTML/months/january.html");
}
I think you are interested in resizing the iframe height to match the height of the source HTML. This way you won't see the scrollbar.
This problem has been solved here:
Adjust width height of iframe to fit with content in it
So i got around this by using a div instead, and calling an ajax function. Iframes are too much of a hassle with my knowledge level of CSS at this time.
$(document).ready(function() {
$("#jan").click(function () {
$.ajax({
url: "../HTML/months/january.html", success: function (result) {
$("#blurb").html(result);
}
});
});
});
Related
I know this question has been asked before a lot but I checked most of those and didn't find solution to my problem so I'm asking here again.
So, question is:
I'm working on a cinema website project.
I added a few pictures as slide show in my home page but for some reason, slideshow is not working properly. It has some glitch in it like sometimes order is not correct and sometimes all pictures try to come up at one time or they change super fast etc.
I guessed maybe it's bcz somehow when I reload the website, the previous onlaod also keeps on working so it's like there are 2 slideshows going on or something like that, so from other solutions I guess I have to put onload=null somewhere maybe but I can't figure it out exactly.
Any help would be really appreciated.
This is my html code for slideshow:
<div class="bg-movies" style="top: 65%;">
<img src='images/slideshow/war.jpg' width='1000' height='300'
onload="setSlide();"/>
</div>
And this is my javascript code:
<script language='javascript'>
<!--
var toprated=new Array('sarkar.jpg','hajwala.jpg','96.jpg','war.jpg');
var pos=0,x;
document.images[1].src='images/slideshow/'+toprated[0];
function setSlide(){
x=setInterval('chgPic()',2000);
}
function chgPic(){
pos=(++pos)%toprated.length;
document.images[1].src="images/slideshow/"+toprated[pos];
}
-->
</script>
Your problem is recursion. You are calling the setSlide() method once your image is loaded. This will set up the interval to call the chgPic(), but when the chgPic() method is called and it updates the image src, the onload event on the img tag will be executed again (because an image has been loaded). Therefore setSlide() will be called again which will set up another interval to call the chgPic() method. And on and on etc. I'm surprised your browser hasn't crashed.
What you should do is set up the interval (i.e. call the setSlide() method) once the page has loaded, or even better yet, use jQuery's document ready if you're using jQuery:
$( document ).ready(function()
{
}
And call your setSlide() method in here.
Although, I wouldn't recommend doing it the way you are. You can use some simple jQuery and CSS to get this to work. Take a look at this link.
I have an html document with an iframe in it. The parent document and the document in the iframe (a wordpress blog) are in the same domain. The iframe auto-adjusts its height on load event to fit its content like this:
<iframe width="100%" height="100%" id="parent-iframe" name="parent-iframe" src="/blog" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
It works fine. But now, the blog which is mostly one page with a facebook feed, has been updated with a "load-more" button to limit the number of posts displayed. Much like an infinite scroll but with a button.
What I want is to be able to resize the parent iframe on the "load-more" button click. Since the facebook feed is provided by a wordpress plugin and it gets updates every now and then, I'd rather not mess with its files directly. Also the javascript code is minified so it looks like jibberish to me.
Fortunately, it also provides a backoffice textbox to include custom code. Since jQuery is already loaded, I tried this:
jQuery(document).ready(function () {
jQuery("load-more").click(function () {
var frame = $('#parent-iframe', window.parent.document);
var height = jQuery('body').height();
frame.height(height);
});
});
It works as expected but with one caveat. Whenever the click event is triggered, the function is executed before the new post gets loaded therefore the body height is always one step behind. I could add a fixed amount of pixels
to compensate but some posts are significantly larger than others.
I don't do this kind of work very often so I need help. I was looking at the jQuery deferred objects but quite honestly I'm a bit lost. Can somebody briefly explain to me how does it work and how to fix it?
Thanks to #jfriend00 suggestion, I think I've found a somehow working solution.
Since the plugins javascript file is minified and I'm not used to javascript debugging, I couldn't find the end of the load-more ajax call.
All I needed then was to wait until all ajax requests were finished. So I found this post jquery.ajaxStop() and tried this:
jQuery(document).ready(function () {
jQuery("load-more").click(function () {
$(document).ajaxStop(function () {
var frame = $('#parent-iframe', window.parent.document);
var height = jQuery('body').height();
frame.height(height);
$(document).unbind("ajaxStop");
});
});
});
Now it works. Please excuse me if I haven't been able to explain myself better. As I said I'm not used to this so I'm lacking in proper terminology and concepts. If you have any suggestions regarding the post title, details or tags in order to make it useful to others I'd be glad to edit it accordingly.
It also works and looks cleaner like this:
<iframe width="100%" height="100%" id="parent-iframe" name="parent-iframe" src="/blog" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight" onresize="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
parent iframe
$(document).ready(function () {
$("#load-more").click(function () {
$(document).one("ajaxStop", function () {
window.parent.$("#parent-iframe").trigger('resize');
});
});
});
child document jquery
I'm sure this sounds a little odd, but here's the background...
We utilize a company that loads their chat program, so we can support our customers, into our page. This is done via javascript and jquery, and creates a structure like this:
<div id="myid" style="...; right: 0px;..."><div><iframe></iframe></div></div>
There's a WHOLE lot more to that, but those are the important parts. Now the tool allows us to put custom scripting, which will be placed in the iframe. My goal is to just remove the "right: 0px", which I have done via the below code, but I don't want to put that code on every page that this tool integrates with. I would like to load it into the tool, and have it run when the iframe and divs are created.
working code on parent:
$(document).ready(function() {
function checkPos() {
$('#myId').each(function() {
var oldstyle = $('#myId').attr('style');
var newstyle = oldstyle.replace(' right: 0px;','');
$('#myId').attr('style', newstyle);
});
setTimeout(checkPos, 100);
};
$(document).ready(function() {
setTimeout(checkPos, 100);
});
});
Once placed in the code include method they provide, I have trouble having it wait until the div tag actually has the "right: 0px;" in its style tag. the only thing I need to run is the three lines in the $('#myId').each(function()
Basically, I need help with having the script in the iframe target the div that the iframe is nested in.
Assuming that whatever tool your using actually lets you pass in a custom script to the content rendered in the iframe (seems fishy to me), a better way of modifying the style in jquery is to use the css function:
$('#myId').css('right', '0px');
Notice I removed the $.each function as well. You are targeting an element with an id, so there isn't any need to iterate.
Edit:
Anyways, back to the problem of delaying execution to when the target, #myId, actually exists. If they are really injecting your javascript into their page (again, seems fishy), then attaching the above code to the $(document).ready() event should do the trick, as long as this listener is attached to their document.
If all else fails, try to use the waitUntilExists plugin, here:
Source:
https://gist.github.com/buu700/4200601
Relevant question:
How to wait until an element exists?
I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?
You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script
If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp
I am trying to call up an "example.js" file containing an image gallery (the bulk of the code for the gallery, seeing as how i will have 3 to choose from) using:
<img src="img.jpg" onClick="thisAction()" />
What I want to do is place all of the contained "example.js" code within a div elsewhere in the page. I have a seperate javascript.js file that references the thisAction() function, but I can't seem to figure out where to go from there, nothing is working.
I have tried a load function, and I've delved into ajax, not really knowing what I'm doing... Please help!
Ok, so just to clarify ^^^above^^^, I am not actually trying to call in any javascript in my "example.js", I was simply instructed to do so, because of some reason I can't recall that had to do with recognizing the formatting.... because what I actually want is some html to be inserted, which includes some divs. What i'd like, if possible, is to insert all the code in "example.html" which may contain something like this:
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
into a div elsewhere on the page in my existing "gallery.html" by calling the function with the
<img src="examplenavpic.jpg" onClick="thisAction() />
tag.
The closest I've been able to come was with this:
function thisAction()
{
$('#divonmygalleryhtml').html('gallery1.html');
}
But this doesn't actually spit out the above mentioned example.html code, it just puts the text "gallery.html" into the div. I've tryed simply copying all the code from example.html and replacing it with
function thisAction()
{
$('#divonmygalleryhtml').html('
<div id="navbuttonleftcontainer"></div>
<div id="image_holder"><img src="examplepic.jpg" /></div>
<div id="navbuttonrightcontainer"></div>
');
}
But that won't do a thing... Ive tried the last 2 suggestions with no luck... Any suggestions would be great.
Not sure if i get you right. With jQuery's AJAX - function and the HTML - function you can reload code from the server and place it in a div on your page:
$(document).ready(function({
function thisAction(){
$.ajax({
url: "/pathToFile/example.js",
cache: false
}).done(function( data ) {
$("#targetDiv").html( data );
});
}
thisAction();
});
To call a external javascript file you would do
function thisAction(){
var divfill = getElementById(targetDiv);
var newscript;
newscript.src ="example.js";
divfill.innerHTML = (newscript);
}
Hope that works :).
Looks like you can use jQuery then you can use the .load() to load the contents of a remote source to an element
function thisAction() {
$('#divonmygalleryhtml').load('example.html');
}