javascript - partial page update with navigation -

-

first of all, apologize because first time trying code website (or anything), might stupid question. have web page update single div when link in navigation bar clicked.

<body>     <div id="wrapper">         <header id="header">         </header>         <section id="section1">             <div>             </div>             <nav id="mainnav">                 <ul>                     <li>                         <a href="1.html"><b>1</b></a>                     </li>                     <li>                         <a href="2.html"><b>2</b></a>                     </li>                     <li>                         <a href="3.html"><b>3</b></a>                     </li>                 </ul>             </nav>         </section>         <section id="section2">             <div id="mainwrap">                 <div id="main">                 </div>             </div>         </section>     </div> </body>  </html>

i know, it's lot of useless stuff, point. i'm trying click on 1, 2, 3, etc., content of div "mainwrap" changes, url (so page not refresh, url changes www.website/1.html website/2.html, etc. , content of 1 div changes). have different html files 1, 2, , 3, each different "main" divs, ideally inserted "mainwrap."

i've tried following along tutorials https://css-tricks.com/rethinking-dynamic-page-replacing-content/ , other stackoverflow posts how partial page update jquery. second 1 seems want do, when try implement it, still doesn't work. there simple fix missing because don't know coding? (also, i'm using dreamweaver. don't know if makes difference.)

thanks!

you right how partial page update jquery need. assume new jquery stuff here complete markup http://jsfiddle.net/yrbvnayy/ job done! 

<html>     <head>         <meta http-equiv="content-type" content="text/html; charset=utf-8" />         <meta http-equiv="edit-type" edit="text/html; charset=utf-8" />              <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>          </head>     <body>     <div id="wrapper"> <header id="header"> </header> <section id="section1">   <div>   </div>   <nav id="mainnav">     <ul>       <li>         <a href="1.html"><b>1</b></a>       </li>       <li>         <a href="2.html"><b>2</b></a>       </li>       <li>         <a href="3.html"><b>3</b></a>       </li>     </ul>   </nav> </section> <section id="section2">   <div id="mainwrap">     <div id="main">     </div>   </div> </section> </div>           <script type="text/javascript">         $("#mainnav li a").click(function(e) {     // prevent going page     e.preventdefault();      // href     var href = $(this).attr("href");     $("#main").load(href, function() {         // after content has been loaded     }); });         </script>      </body> </html>

Comments

Post a Comment

Popular posts from this blog

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f
Read more

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; }
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(
Read more