IFrame Inside IFrame - javascript

I am developing a retail store website and am using an html page with JavaScript. I want to use iFrames. The main page (Page1) is made up of a banner, a menu on the top and an iFrame below. For clarity I will call this iFrame1. In iFrame1 I have an html page (Page2) that contains another iFrame. I will call this iFrame2.
Page 1 has a top level menu detailing departments for example curtains, cushions, clothes etc. Selecting one of these items brings up another page (Page2) with a 2nd level menu based upon the selection within the first menu and a ListView of relevant sub headings and images pulled from the database. Making a selection from the menu in Page2 will change the “Where~ clause in the Select SQL statement and bring up different items for example types of curtains, colours of cushions, sizes available etc.
What I am looking for is a way to automatically resize both iFrames depending on the number of items that are displayed in the ListView in Page2.

Im not exactly familiar with iframe's (except for all the people telling me not to use them). So might i suggest using ajax instead with div's? (please correct me if im wrong in suggesting this)

You could define a scrollbar to appear instead of trying to automatically resize an iframe. What you're describing sounds messy though, and iframes there are many reasons why not to use iframes (http://blondish.net/iframes-why-not-to-use-them/). Try divs, and dynamically including the content?

Related

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

Multiple modals with galleries vs. a single dynamic one

Lets say we have a long list of posts on a single page. Each of those posts has a hidden div with multiple img tags inside it. When a user clicks on the post, the images inside the hidden div should be showcased in a modal gallery.
Which approach is better SEO-wise - outputting the Bootstrap modal + image gallery markup for each post and unhiding it whenever the user clicks on the post, or having a single hidden modal and clone()'ing images to it?
I'm leaning towards the first solution because it is way easier to implement. The second one requires listening to DOM events as I should only initialize the gallery after the images have been cloned to the gallery div inside the modal and thus is a bit trickier. Also, I'm not so keen about copying DOM nodes here and there.
Which is the better approach?
EDIT: I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
Both methods are equivalent from an SEO perspective for Google, but it may take it a bit more time to index your content for the second method since, it needs to execute Javascript.
However, not all search engines are capable of executing Javascript. Therefore, image tags are all they can eat SEO-wise.

Best approach to showing multiple html without reloading page

I have a "server" that serves up individual html pages for each associated item in the server. I've done a lot of looking around but I'm afraid I just don't know enough to ask the right question. How I'd like it to work is as follows:
Static Sidebar (boostrap simple-sidebar)
Ordered list of links to associated html docs
When the associated link is pressed to display that content in my main container field.
From what I've read some use iframe in the main html container and make the clicked link the active link.
Others use bootstrap modal, but modals no longer support remote content.
Any hints toward how to ask the right question would be great!

Coming back on a page with the same quicktab and fields expanded (items do not remain expanded)

I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.

menus in html pages - separate navigation from content

When creating menus for html pages, there are a lot of libraries, frameworks and plugins (like mentioned here). However, having studied various options it seems to me that
the menu is a series of elements defined on one page which selectively are displayed/hidden
all content activated by menu items is contained on one and the same page - together with all menu definitions
This brings, in my opinion, two problems:
the (single) page tends towards "unmanageable" with growing size
a search on something contained on the "third page" will result in the "first page" to be opened, and for a user it may not be obvious that he/she has to click through the menu to find what he/she was looking for
So I am looking for something where menu and content is more separated, but still makes use of the styling features of a modern framework (jQuery(UI), dojo, whatever), maybe on the basis of a JSON definition that can be loaded into each separate page.
Making an answer as request. :)
The comments on your experience suggest that you ahve come across tab controls more than real navigation. Tab controls are designed to flip between content on the same page, hiding and showing content based on whcih tab is selected. This does have the drawbacks that you suggested of requiring all content to be on the same page (or to use ajax to load it).
Conversely a menu system will usually just be a way of formatting a bunch of links you give it, possibly with a hierarchical structure. Usually a menu system in the raw HTML will be an unordered list containing links and possibly other unordered lists. The exact format may vary depending on the menu system in use. The menu system will tell you to put classes on the top level or to run some javascript over a specific element.
In terms of generating this server side you are probably best off with either an include file or common server side code to generate the menus (to avoid having to maintain them individually in all the pages on your site).
Having said all that I have no specific reccomendations but I did come across http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/ whcih was the top google hit for "jquery navigation menus" and has plenty of options to look at. Additionally the one in the question you linked looks like it is a "proper" menu system.
Unless you have a huge menu option list, a tree structured ul won't be so heavy. You can have that menu on a different container, and the content in other, so it is not so unmanageable.
In the other hand, deploy the menu in a different HTTP call in order to get JSON data, and render it, could be more unmanageable than before. First, you need two HTTP calls, considering that the browser will issue only two HTTP calls to the same domain at the same time, to get the menu you are preventing the browser to get something else, or viceversa. You have to account the HTTP overhead, and that the menu query will be issued after the html and probably JS has been downloaded.
IMHO I think that the best performance is obtained keeping the html menu in the page code, and render it with CSS.
You can try to build it yourself. In the page's ready event, download a json menu data from the server with jQuery, build the html, apply the style you want and add it to the page.

Categories

Resources