Is this even possible with jquery only with no bulky plugins?
I know there are lots of plugins and alternatives, i'm searching for the shortest, robustest & most cleanest (preferably relying on jquery)
Here basic jsfiddle to tryout your thoughts:
http://jsfiddle.net/3vPJd/
I have to go with "This is not possible" due to the fact that the parent page cannot get the height of the 3rd party page since it is from a different domain than the parent page.
Edit: It is possible to do this if you have some control of the 3rd party page.
I personally would just use the method they already have implemented, it doesn't require jQuery, you just have to include the frame.js.
At that point, all you need is a method on the parent page that listens for when the hash changes and resizes the iframe accordingly, which is also already written by the site you linked. it is a very clean solution already, no real need to modify it. It can be found here.
This little library will do what you want. It uses postMessage to talk between the iFrame and the parent, so works cross domain. It also uses MutationObserver and EventListeners to detect changes to the content and keep the iFrame correctly sized.
https://github.com/davidjbradshaw/iframe-resizer
Related
It's been a long time since I last had to do any html, but one of the features that will apparently still work, but is not good practice, was to divide a page into frames and the you could use some sort of nav bar with all the page links to populate a targeted frame. eg.
clicky
I tried using the <iframe> tag, and although it's almost exactly what I want, I found it to be very frustrating to get it to autosize to the correct height depending on the content being loaded into it.
Obviously, I could just make an almost identical page but change the content on the new one and link from one to the other, but I have a rather nice css slideshow as my background for the site and I don't want it to reload every time a link is clicked!
Now, I'm loving stylesheets and divs, so is there any way to do the above without resorting to HTML 4? I'll take a javascript answer if there really is no way to do this in CSS and HTML 5.
Thanks in advance, you lovely people!
So, you just want to update the actual content, that differs? You could do it with iFrames, but this is not recommended at all.
The "new" way to use is called "AJAX"
It is a technique to download data from the server, without reloading the current page. This is done via JavaScript (and serverside PHP). That way you can update the page content only.
There are many tutorials on the web, also many common questions are answered on stackoverflow alreay. Feel free to check them out :)
I know able to lazy load 'image' using some third party jquery library. Is there anyway to lazy load just about anything like <div> element container for example when user scroll to that <div> container
To expand on kinsho's (correct) answer:
For security and maintainability reasons, you should be wary of injecting raw HTML directly into documents. Doing so can break event listeners, break the DOM parser, and potentially open up security vulnerabilities.
Usually, the best way to lazy load stuff is to send encoded data (such as JSON or XML) to the client, and process the result accordingly. For basic HTML, a templating solution could be used. Even an iframe can be better than pasting <div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div>* into an element's innerHTML.
Also, before you implement lazy loading for your site, take some time to consider if it's really worth it. An additional HTTP request is noticeably more expensive than just downloading data all at once, and any HTML injected via Javascript will not be seen by web search crawlers. So, if you're only injecting a small amount of static information, it really isn't worth the trouble.
*can you find the parse error? Now imagine doing that for a standard-sized HTML document.
Why rely on some third-party library to help you lazy-load? You can do just fine using native JavaScript.
In fact, as long as you accept the principle that all lazy-loading is triggered by some user action, set up a listener on a specific object (be it the scroll bar, some section header, etc). Set up a corresponding handler that relies on AJAX (you can use jQuery here) to fetch data (preferably HTML) that you can load directly into whatever container you want using the innerHTML property of the container element.
Here is what you really wanted to begin with. It is a new jQuery plugin that I made myself. You can "Lazy Load" anything you want based on any element (jQuery selector) you wish.
https://github.com/shrimpwagon/jquery-lazyloadanything
As I know that in JQuery Mobile, every page changing is equivalent to create new "page" div, Can we just change a portion in the "content" of the page, something like subpage?
jQuery Mobile doesn't require you to manage pages by creating additional div element in the same HTML file - you can do it perfectly fine in a different HTML file and make a transition to it (perhaps with data-prefetch attribute set) using <a>.
Nothing prevents you from writing a jQuery plug-in, jQuery UI plug-in or (scary though, I know) pure JavaScript that will alter the contents of the DOM element dynamically and manage pages loading according to data received from server - with necessary calls to things of the listview('refresh') ilk - to ensure proper styling.
With that said you have to ask yourself two things:
Why do you need to do it? Can't you manage by pre-creating the page using jQuery Mobile paradigm and just retrieving and inserting the data into the new page?
What will the performance implication (if any) will be, if I have to perform DOM manipulations on every 'page transition'?
As a side note - jQuery Mobile provides you with methods that allow for page manipulation:
$.mobile.changePage and $.mobile.loadPage that you can use (look at pageContainer option).
See API docs here
I am trying to use right now a jQueryMobile plugin for subpages: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
I didn't make it work yet but i think it should work :).
I have a quick question. I want to create a small Scheduler widget to put on my clients websites. So if I need to make a global change to the form, I would just have to do it once.
The form will have to be unique to the website because I need to know which e-mail address to send the form to once it is submitted.
I was thinking of an iFrame I could use like this:
<iframe src="http://www.domain.com/scheduler/shop-name/"></iframe>
But I don't think that would be the best method, and I wouldn't want someone directly going to that URL.
Another option is something like this:
<script type="text/javascript">
shop_id = '114000300';
</script>
<script src="http://www.domain.com/js.widget" type="text/javascript"></script>
I'm not too sure how to execute that option yet, I'm not that experienced with Javascript but what do you guys think? What are the pros and cons of the iFrame vs Javascript?
Just wondering what the best option is, and if anyone has some tips on how to get started and any security issues I need to look out for.
Thanks!
An <iframe>
Cannot communicate its size to the parent window without additional work, which limits resizing.
Provides better isolation, as you cannot access anything on the parent page. This may be a plus from your customer's perspective.
Could be written in pure HTML, no Javascript experience necessarily required.
Has its own independent CSS styles.
Works for users who have scripting disabled.
A script
Allows you full access to the parent page
Will slow page load, as the browser will load your script before rendering the rest of the page. (At least as you have shown there, there are ways around this.)
Obviously requires some experience with Javascript.
Must share styles with the parent page. This could cause compatibility problems if your client's page uses broad-scoped style rules, such as rules for * or div.
Few more points in addition to #Dark Falcon's answer,
You have more control on the design in case of an iframe. In case of javascript widget, the client's styling might conflict with the widget's styling.
iframe is better in terms of security (cookies stored are different).
Making a JavaScript widget needs more care and expertise as you need to ensure that the other JavaScript doesn't conflict yours'. (global vars etc...)
You can use a JavaScript that writes an iframe dynamically if you want to avoid someone from going directly to the URL.
So, I've written a little javascript widget. All a user has to do is paste a script tag into the page, and right below it I insert a div with all of the content the user has requested.
Many sites do similar things, such as Twitter, Delicious and even StackOverflow.
What I'm curious about is how to test this widget to make sure that it will work properly on everyone's webpage. I'm not using an iframe, so I really want to make sure that this code will work when inserted most places. I know it looks the same in all browsers.
Suggestions? Or should I just build one hundred web pages and insert my script tag and see if it works? I would hope there is an easier way than that.
Once you have confirmed that your javascript works cross-browser in a controlled environment, here are some things that might cause problems when used on an actual website:
CSS
You're using a CSS class that is already being used (for a different purpose) by the target website
You're using positioning that might interfere with the site's CSS
The elements you are using are being styled by the website's CSS (you might want to use some sort of "reset" CSS that applies only to your widget)
HTML
You're creating elements with the same id attribute as an element that already exists on the website
You're specifying a name attribute that is already being used (while name can be used for multiple elements, you may not be expecting that)
Javascript
What is the expected behaviour without Javascript enabled? If your script creates everything, is it acceptable for nothing to be present without JS?
At very basic you should make sure your widget works for following test-cases. I am sure then it will work on all web-pages -
http/https: There should not be any warning for HTTPS pages for unencrypted content.
<script> / <no-script>: What if JavaScript is disabled? Is your widget still visible?
What happens when third-party cookies are disabled? Does your widget still work?
Layout-box restrictions: When parent div element's size is less than your widget. Does your widget overflow the given size and destroys owners page?
By keeping all your Javascripts under a namespace (global object) with a very unique name, you should be pretty much OK. Also, you can simply use an anonymous function if you just want to print out something.
Similar question: How to avoid name clashes in JavaScript widgets