How to show content of section and display it when click menu - javascript

I write 4 sections pages in index html page and i want link the sections page with the menu.
How can I show the content of section when click at each menu?
I use ready website from bootstrap and edit it and I use atom program.
What i should to write at page html or at javascript?
Below is my code:

I concur with NewtoJS you should post a code snippet instead of an image, and you are asking at least 3 questions any way I will try to help
1.- I want link the sections page with the menu?
you can do so using The HTML < a> tag that defines a hyperlink, which is used to link from one page to another.
2.- how to show content of section when click at each menu?
this can have many different aproaches but since you tagged the question with html I will try to answer acordingly. Each section should have its own html file, or and "ID" if they are in the same page when you click on a < a> tag refering to that page or "ID" it will lead to that section.
3.- what i should to write at page html or at javascript ?
of course a web site can be done without using Javascript it is easy but you need to use CSS as well for styling purposes. Generally you can't choose just one, you have to use both and depending on your needs could be more from one than the other. please refer to this site for a complete documentation on HTML
and you can read about javascript here, if you want to learn CSS please refer to this page.
a side comment:
for a complete documentation on how to use html < a> tags please refer to this >site
I will suget not to use POOPSTRAP, and you should try to work with wordpress or something like that if you dont know how to code, and if you want to learn to code starting in stackoverflow is a bad aproach, you should first take a free course on udemy.

Related

Edit existing items in a Wordpress theme

I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize

How do I best reuse html code for menus

I'm making a larger website using HTML, css, JSP and Java-servlet.
I've made a menu using < nav> < ul> < li> (navigation). When i hover, sub-menus drop-down. It looks like this:
I want to reuse this menu on all my pages. It will change a lot so I need Single Source of Truth - No duplication of code. I've been looking in to php/js but haven't been able to get it to work.
I imaging that it will work like this:
File only containing the HTML-code (like my menu) that are reused on all pages.
File that make the magic work.
Few lines of code that gets added to each page, at the place the menu should be. (maybe a line to tell what script it runs)
Notes:
I'd like this to work for most (if not all) web-browsers.
The drop-down menu should go over text below.
use the include feature given by jsp:
<%# include file="menu.html" %>
You can also try using the Tiles framework . Look here for more info

How to read xml in anchor tags of html page

How can I read XML file on html page.
i want my XML link value to go in anchor
tags href attribute and Name of the website
between the anchor tags
I just know very basic Javascript.
I am trying to change value in footer of my website using XML because i have more than 100 pages and every time I change something in footer I have to change all 100 pages manually that's why i want to change the footer links through XML.
Please explain by showing code page should look like this
<div>
<a href "this value should be read by xml">and this value should also be read by xml</a>
</div>
Thanks guys for your answers but after a lot of search i found exactly what i wanted. I wanted to change multiple pages footer section using single file without changing my pages name (from .html pages to other like .aspx,.php,.asp) I thought using xml would be a good way but i am really novice in this field and xml didnt work for me (or say i am unable to use it in proper way) therefore i found out an alternative to change to content of multiple html pages using single file. All i needed to do was use SSI aka server side includes. The only thing you need to do is check if your server supports SSI or not and then make an individual html footer page that you want to include on every page. In order to include that external footer page just type.
<!--#include file="footer.html" -->
in the area,div,table wherever you want your footer to load and its done .
For detailed article pls go to following link http://httpd.apache.org/docs/2.2/howto/ssi.html

jquery .html doesn't process certain tags and functions

At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div

How to use same div tag with different content in HTML?

I want to use same div tag for different page displaying using html. how to use it
Ex:<div id ="name"> if{page1}else{page2}</div> is there any possible using if in html or give different solution plz.
when user clicks different tab the different page need to appear i used different div but click different tab it shows some empty space with the page2 i think that is page1 space.
Given that a page might have ids #page1 and #page2 and the <div> has an id of #brian
you could use jquery:
$('#page1 #brian').html(some_html_here);
$('#page2 #brian').html(some_html_here);
This example may aid you - http://jsfiddle.net/wQCDR/
Alex
If you don't want to use PHP in your HTML code you can use SSI (server-side include). Basically, you can include html files within other html files. Here's a link to read more:
http://httpd.apache.org/docs/1.3/howto/ssi.html
Cheers
you can don this usign javascript
get url first and according to that write content to particular div using
document.getElementById('one').innerHTML = "Content";

Categories