Trying to load page into div, but div showing too small - javascript

I'm trying to build a page where the admin can do multiple tasks from within.
For example after the admin logs in, he will click on a button to either manage the users or view the reports, but the result the result is extremely small view of the page while I'd like the loaded page to fill the entire bottom of the screen:
here is my code:
I looked for explanation on the web but couldn't find any.
Thanks.

The size of the element you're looking at is probably the default size for an object in that browser.
You're putting your file/data directly into an object with type text/html; to be honest, I'd suggest looking into a bit more background information on how to display data on the web using tables and/or grids without actually dumping pure file-info into the client-window.

I fixed the problem by using iframe. Thanks

Related

How to create multiple Html subpages without writing redundant code?

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)
You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!
This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

How to create a gallery page that can be used for multiple projects?

I will try to keep this short.
What am I making?
I want to create galleries for multiple projects. A gallery is opened as a new page by clicking on a project's thumbnail on the main page. Each gallery should have the same layout, just a different title, text and images.
How do I want to make it?
I could make multiple pages for each gallery, but I ideally want a single page of which the content is adjusted to the corresponding project. This should make it easy to adjust the layout for every gallery and add more galleries in the future.
I was thinking of something like this:
index.html
$project1Title = "Project 1";
$project2Title = "Project 2";
Project1Thumbnail
(Clicking this should: gallery.html>$projectTitle=$project1Title, etc.)
Project2Thumbnail
(Clicking this should: gallery.html>$projectTitle=$project2Title, etc.)
gallery.html
<h1>$projectTitle</h1>
<h2>$projectText</h2>
<ul>$projectImages</ul>
I know I didn't use correct syntaxes, it is just a simple example.
What did I try?
I tried to use php and javascript to pass variables from the main page to the gallery page, but my knowledge with these languages is not very sufficient.
So...
What are your suggestions on how to go about this? Creating multiple pages that take the layout from a single css file, creating a single page that takes the content from variables, or something else?
I hope everything is clear, please let me know if it is not.
Thanks in advance!
the easiest way is to maximize the use of your database by storing gallery details and retrieving it using sql queries and eventually displaying it on your dynamic page (gallery). Generally database can store different kinds of data with different kinds of format such as file path.
instead of passing "$project1Title = "Project 1";" title use a proper variable that can be used by your database such as id.

SEO Problems while using Pagination technique

i created a video photo library / video library, there i have many rows where i places the icons against video or Image, & because of the length of the page i used the jquery pagination technique, Now i have 2 problems (1) SEO Problem, if anyone search any data that i have on the other than the 1st page, it shows in search engine & when user click on that link it land on the 1st page, not on the relevant page, (2) when user click on the next page, the view will stile on the pagination i want it goes on the top of the page or top of the table,
Link of that page "http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=1"
any one can help me in this situation?
Thanks In Advance.
Have a read of Making Ajax Applications Crawlable as written by google.
In brief: Instead of www.example.com/ajax.html#key=value use www.example.com/ajax.html#!key=value as your scheme.
Then respond appropriately to requests in this format: www.example.com/ajax.html?_escaped_fragment_=key=value
To solve your scrolling issue, you'll want to add just one line of code to pager.showPage(). To scroll to the top of the table, add this line:
document.getElementById(tableName).scrollIntoView();
Or, to scroll to the top of the page, add this line:
scrollTo(0, 0);
For the SEO work, follow wombleton's advice.
See that your url container fragement #pg=1 by default when you point to such link it will move your view there. As an workaround you can write window.scroll(0,0); on your page to always be on top. For your SEO problem it seems like a usability problem which has to be resolved using some design changes. Also doesnot your search results give the url as
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=4
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=3
i mean the page numbers.

Google "Sitelinks" for a website with almost only dynamic content?

I have a classifieds website, and the index.html is just going to be a simle form, which uses javascript alot to populate drop lists etc...
I have a menu also, put into a div container, but is this enough?
I mean, I have no content in index.html (almost), but a search form, which submits to a search results page, where all the content is.
So I am worried google might not find suitable sitelinks for my site?
Anybody know if I need to add something to the links in the index.html, which google might use for sitelinks? title tags etc...?
Thanks
Instead of changing your site around you can just create a good sitemap.xml file. That is of course if you're using GET for transferring data to your processing page. I would create a dynamic sitemap.xml page that is based on the form data that your processing page can read.
http://sitemaps.org/
http://www.smart-it-consulting.com/article.htm?node=133&page=37

Ajax entire page - display only one div and retain CSS and other header material?

A client wants a merch shop on their site, and has set one up. I could iFrame in the whole page to the merch page, but frankly the merch site is an eyesore, and their site has a very particular feel to it. So I'm considering using an AJAX GET to grab the whole page, then javascript to display only the div with the merchandise in it. However, there are a lot of javascript includes (etc) on the merch site that I'd need to make sure are still present for the div to work correctly.
Any feeling on if this would work or not? Would the displayed div take its stylesheet and scripts from the AJAX'd page? Can I put the div in an iframe instead?
Opinions?
It sounds like an ugly solution. Isn't it better to do this serverside instead, for example let a PHP script read in the page and to whatever magic it takes to display it?
Using AJAX to load entire pages is ugly for a couple of reasons, including:
It breaks the URLs (can be worked around but requires extra work)
It's hard for search engines to crawl your site
It breaks some GUI elements in the browser, such as loading visualisations
looks like you can use jquery load function http://docs.jquery.com/Ajax/load

Categories