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.
Related
I am new to HTML/CSS and in this project intend to create a simple web page in such a way that each page links to three other HTML pages.
<div id="mySidenav" class="sidenav">
Home Page
about
Projects
Contact
</div>
My questions:
Is it possible to link to other pages other than the page itself via
programming (to write if page_name == link.html then exclude it from
the links)? e.g., I want to tell my HTML that if I am in the "about"
page, don't add the link to this page.
If that is possible, how I can fill the self-link button without using JS.
Yes, it possible. First, you have to know about PHP. Then get the current page url by $_SERVER['REQUEST_URI'].
IF the current page url is matched with your link like about.html then ignore the link for the same current page.
Otherwise, you can create a separate page with ignoring link. Like when you at about page ignore that link.
The short answer is no. HTML isn't a programming language and has no flow control or logic capabilities. You could achieve this via server-side rendering (express or php or whatever) or via static site generation (gatsby, etc.).
Otherwise you could (of course) modify the nav on each page accordingly, but I understand and agree that that's less than ideal.
This is a bit of a stretch, but you could link to homePage.html#homePage and use the CSS :target pseudo-selector to hide the current item or give it special css treatment, but this is sort of a brittle hack and it will break down if the fragment (#homePage, #projects, etc.) isn't present in the browser's url.
I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)
I'm working on a company site that's hosted on a separate server from the main site. So, for example, I'm working on guest.company.com, and the main company website is www.company.com, and the two sites are hosted on different servers (and different development solutions).
The project I'm working on has a copy of the css from the main site, and has a shared layout with html copied from the main site. This shared layout is used for the top and bottom (header and footer) of the site I'm working on. However, I don't want to use a copy of that layout and html -- I want to actually pull in the layout & css from www.company.com so that when a change is made to that content on www.company.com, it's reflected on guest.company.com.
So, for example, the bottom "footer" area of www.company.com is contained in a footer html tag, and I want to display that content on guest.company.com.
How can this be done in MVC4 EF?
There is no quick fool-proof way to do this.
The quick way to get the HTML is making a webrequest call from your code and get the html and take what you need from it (i.e. header and footer). Have a look at this msdn link for an example of how to perform this. With that, you don't need "the other side" to do anything.
Having said that, it's potentially more complicated than that. As mentioned in the comments, css path should be made absolute. But there could be images (both within html and css). Also, if header and footer run any javascript, they need to be included in the page as well. You could of course include every single JS file that is referenced in the www.company.com page but there are sometimes JS run on the page. Your webrequest call wouldn't run the JS. In order to make sure all the javascript is run and the FINAL HTML is produced, you can use PhantomJS.
As you have probably noted, it could turn into a lot of work depending on what's on the header/footer. In my experience, a potential solution would be to have an FTP location that www.company.com copies the header/footer and their assets in. You can pull it from there every 24 hours or something.
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
I know the backend detail,that it works using long polling.
I am more interested in knowing how the sidebar is persistent through different pages.
The sidebar is not being loaded again,when a new link is created.How could this be implemented.
You can handle the link clicks with Javascript. Once you get a click, you would only change the main content (whatever the main div or block is) and keep the sidebar intact. So, it's kind of like "pseudo-links." I don't think you actually go to another page, but the content of the current page is changed.
Handling URL change with Javascript.
How to change the URL in the browser. (Facebook changes the address bar URL without actually loading the page.)