Use zen theme with ajax or similar technologie

Using Themes
1

Hello !!

I’m creating a music site where I use the Zen theme.

I managed to include jplayer in the sidebar, however when changing the page, the whole page reloads with the sidebar including jplayer, which stops the music.

So I’m looking for a way to reload only the index.html list.html and single.html pages without reloading the header sidebar and footer .

Can we put Ajax code in Hugo, to solve this problem?? Another solution may be to use the github turbo-main but with my low level of webmaster I find it difficult to use this last tool.

Thank you in advance for any advanced leads!!

jerome

##Original Text

Bonjour !!

Je suis sur la création d’un site musical où j’utilise le theme zen.

J ai réussi à inclure jplayer dans le sidebar, cependant au changement de page, toute la page se recharge avec le sidebar incluant jplayer, ce qui arrete la musique.

Je cherche donc un moyen de recharger seulement les pages index.html list.html et single.html sans recharger le header sidebar et footer .

Peut on mettre du code Ajax dans Hugo, pour regler ce problème ?? Une autre solution serai peut être d’utiliser le github turbo-main mais avec mon faible niveau de webmaster j’ai du mal à utilisé ce dernier outils.

Je vous remercie d’avance pour toute pistes avancées !!

Jérome

2

If the site is small I would test building it as a single page site. Then when you “navigate” you are only moving up and down a single page, no page reloads.

Another simple option is to open the audio player in a new tab. Then it can play while you navigate the site it its tab.

P.S. If you are not a web developer I think the Zen theme might not be right for you. I developed it as a base theme, it looks very plain and boring as is.

3

thank you so much for your reply!!

I just made the site available on gitbub . This will allow me to better define my needs. For the realization I learned the notions of html and css in order to personalize the zen theme.

For your single page solution: can we easily implement it with the Zen theme??
Do you have any resource documents that I can use to do this??

Maybe I have to use another theme that allows the inclusion of jplayer??

4

I would wrap my website in an iframe upon load. I would load the player as a sibbling (same level in hierarchy, both children of the parent frame). If you click on a website link you only reload the website iframe. Finding the child iframe in the search engine is no issue, as you immediately wrap it in a parent with the player as its sibbling.

I think it should use somthing similar to this code:

if(self==top) {
  document.body.innerHTML = "<iframe src='"+document.location.href+"'> + player";
}

Here is a demo:

Right click and open the white FRAME in a new tab.

5

Thank Jhvandershee for your script !!

Unfortunately I’m not too comfortable with js and I’m thinking of abandoning the player track visible on my sidebar.

I rather work on the player in a popup window. I exploit this code github.com/mkdynamic/jquery-popupwindow .

So I created a customize button in the side bar displaying an external window of the player’s page.

however I encounter a problem: this page must not contain the header, the sidebar and the footer. I must have a neutral page with only the player.

How to create a template excluding the layout/baseof.html code which does not load the header sidebar and footer??

Maybe I should open another topic?

friendly!!

1 Like
6

Yes, that would be a different topic.

7

Ok !! I try to closed this topic, and i suppress my site on github !!

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.