Using framesets with Google appengine - html

I was wondering if anyone could show me an example for using html framesets with google appengine for python 2.7. What i want to do is have two frames, one static frame containing a sidebar with buttons and then another frame to the right of it that shows different pages depending on which button is selected.

As others have commented, this is something that can be solved client-side and you shouldn't be using frames.
Zurb foundation offers navigation similar to what you are requesting.
http://foundation.zurb.com/docs/navigation.php
Similarly, Twitter bootstrap also offers navigation that would enable you to build the functionality you are requesting.
http://twitter.github.com/bootstrap/components.html#navbar
A plugin that will help you keep a sticky side menu can be found here: http://mojotech.github.com/stickymojo/
In response to your comment:
To dynamically load content into the 'frame' alongside the menu bar, you can use jQuery load function.
http://api.jquery.com/load/
It allows you to fetch a page from the server and replace an elements content with the fetched content.

Related

TYPO3 Ke_Search: How do I have multiple search forms on one page without them interfering each other?

I have a search form in my header rendered as a cObject from a content element which is a ke_search searchbox and it leads to a /search page when submitting.
I also have subpages that are supposed to only look through seperately indexed pages like news and other pages.
For that I have folders in the typo-backend which contain indexer configs.
My problem is that when I set up that search box in the header the other searches are using the indexer config from the header (probably because it's the first searchbox on that page).
How do I make sure that every searchbox uses it's correct index?
As mentioned: Everythings seems to be split up nicely in the backend.
I can only imagine that somethings going wrong because the searchboxes are rendered with the same id but how can I make sure they render with diffrent ID's?
I managed to get an answer from the team behind Ke_Search.
When implementing a global searchbox that is used across every page, you should implement the searchbox as plain html and not as a content element in Typo3. You can only have one searchform as a content element per page.
Here's the documentation on how to implement the html version:
https://docs.typo3.org/p/tpwd/ke_search/main/en-us/Templating/Searchbox.html#include-searchbox-with-plain-html
Just leaving this here for anyone running into the same issue.

How to create a css navbar?

I'm using Django to handle my templates. From the picture I am trying to explain what I want in the web page. For convenience I have given the number for the blocks in the picture. I have created blocks 3,4 5,6, and 7 in one .html file.
I actually want navbar1 and navbar2 to display in every page of my project, and that's why I have to create one separate .html file for each. The problem is that I'm not able to apply two navbars in one html file. I also tried with the sidebar (for navbar2), but have faced some issues.
Dropdown button doesn't work on the sidebar and,
When I reload the page, the menu of the side bar will display first and then the sidebar will overwrite the menu and then visualize properly.
Please suggest to me how I can design the page for navbar1 and navbar2 in one html file.
Creating a base.html template that all other templates inherit/extend from should do the trick. Here's a website post going in depth upon how to accomplish this: https://tutorial.djangogirls.org/en/template_extending/

HTML How to Transition Between Pages

I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.

Site navigation : setting a ribbon/header constant

I believe this is a HTML/CSS question - how you set a header or ribbon constant. As in, just have the body change. For example the facebook website. When you click on Profile, the body of the page changes, but that bar stays the same. Same when you click Home.
Thanks !
I didn't look at the FB code but in essence, to answer your generic question, they are two different pages with the same code for the toolbar.
On one side you have the web page page layout and design, on the other you code it: say PHP, ASP, etc with using a template engine.
This way you can place the code for toolbar, content, footer, etc and later merge it on you way, producing "similar" paging reusing the same parts.
The PHP, ASP, etc code is responsible to "decide" which menu, option, ... must be highlighted to indicate the section you are.
Other way is the AJAX way, like google gmail, where the content of the page changes dinamically requesting new content via AJAX and not reloading the page.

Creating tabs using HTML and loading different content, for click of each tab

I need to create tabs on the webpage using html, and on click of each tab, need to load different content on the same page. Do let me know how to go about this, or any useful links that might help me.
Thanks,
Geetha
This can be done with jQuery and jQuery UI.
Here you can find some information about it. http://www.stilbuero.de/jquery/tabs_3/
Dojo (javascript framework) has a TabContainer. It's easy to implement, but depends on the content and how do you want to present it to the user.
You can start by looking here: Dojo TabContainer info
There's an example on that site which lets you see the html and javascript required to build a tabbed container.