I had an old php site using a theme I bought, which uses the cubeportfolio 4.1 image gallery... see plugin: here and here.
I am rebuilding the site as a static site with gatsby, and have had to rebuild the gallery component by:
moving all the static assets (css, js etc) into my /static gatsby folder
hardwiring all the necessary js and css links as into my html.jsx file
fetching my image assets from graphql and rebuilding the gallery with very basic react components
Amazingly it works, and the cubeportfolio image gallery populates and resizes all the images into a perfect grid. Mouseovers etc also work.
problem:
when I navigate away, and come back to the home page (i.e. change routes), the cubeportfolio grid doesn't redraw itself! The image assets are just dumped on the page and nothing kicks in to shuffle them into a grid of appropriately resized elements. So, all i know at this point is that there is a bit of javascript somewhere that should be re-triggered, but isn't.
Googling, I found a snippet and tried adding the following to gatsby-browser.js:
exports.onRouteUpdate = () => {
// force cubeportfolio to redraw
$(window).trigger('resize.cbp');
}
This did not work. Any help appreciated.
OK figured it out. I found the code the old theme was using to set up cubeportfolio. It was in one of the static js files, so I think it was loaded once at startup and then subsequent returns to the page with the gallery didn't necessarily reload the js file.
Fix was to lift that code and move it to gatsby-browser.js:
exports.onRouteUpdate = ({location}) => {
// force cubeportfolio to redraw
if (location.pathname === '/') { // or path to whatever page has cubeportfolio
$('#grid-container').cubeportfolio({...}); // pass needed options
}
}
Related
If there are links to images or even css files in an html page then loaded on IPFS, once the request has been made from the outside using the public DNS (https://ipfs.io/ipfs/) the page itself times out.
Do you have any idea why this happens and how to fix this problem?
This is the test that I published: https://ipfs.io/ipfs/QmPoSRk1TzM3YC2qiCFDjnKtJZ9FR6jRVNrP2nNSu4cJMi
I have multiple html pages with the same navbar. I recently put the navbar in it's own navbar.html file and use ajax via jquery.get() to dynamically load the navbar onto my pages, as opposed to repeating the code across all my pages.
There is currently no stylesheet on the navbar.html, as the style gets applied when the navbar gets loaded back onto the calling page.
Should I be including the .css in the navbar.html, also? They would both be referencing the same 2 stylesheets. I assume that's possible, but haven't yet tested - it will definitely make it easier to make changes to this file in the future. What's the best practice here? I will not be using any server side code.
Please also let me know if there is a more conventional way to do this; I haven't had any luck searching. (I come from a .net web forms background, so would just use a master page there.)
Any relevant links would also be appreciated.
Check the snippet
First you have to make you pages index.php
Then include your navbar.php to index.php using <?php include'navbar.php';?>
Use below method to active the button on each pages
1- Define your page name <?php $page = 'company';?>
2- Define a active class in css file
3- Call the active class to button
<!-- begin snippet: js hide: false console: true babel: false -->
I'm trying the app https://gist.github.com/ebidel/1ba71473d687d0567bd3 to load a screen loader until the app is loaded but all my images not loaded properly or not at all , and some styles are mess "styles of polymer elements"
I think this is because the loading just after the html imports in line https://gist.github.com/ebidel/1ba71473d687d0567bd3#file-app-js-L37 .
if it's true how to work around and if it's some thing else I appreciate your help
I have a simple static site, with HTML pages in different directories and often run the site locally by opening a file in a browser.
The problem I'm having, is the browser doesn't recognize which folder is the ROOT, so any relative url that points back to the root folder (href="/about.html") won't function.
For example.
I open this in the browser: file:///X:/DOCS/MySite/Directory1/page.html
In this "page.html" I have this link: href="/about.html"
I want the link to point to: file:///X:/DOCS/MySite/about.html
But instead, it points to: file:///about.html
My question is: how do I tell the browser which folder is the ROOT?...or...is there another way to better run my site locally?
Note: Until now, I have been using lots of up-directory ("../") in my linking structure as a work around, but this is complicated and causing other issues, so being able to link based on the root ("/") would be far easier.
You can work around it with jQuery/JavaScript.
$("[href^='root:']").each(function() {
var newRoot = "http://google.com/";
$(this).attr("href", newRoot+$(this).attr("href").substr(5))
return false;
});
This changes all links begining with root: so that with the code above, href="root:index.html" would turn into href="http://google.com/index.html"
However, this would not be applied with any links you are adding to the page later on using JavaScript.
http://jsfiddle.net/ptarun/5rztY/1/
I have a main page (main.html) in the assets folder that I am displaying with:
webview.setWebChromeClient(new MyWebChromeClient());
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(new VersionCallbackScript(), "demo");
webview.loadUrl("file:///android_asset/main.html");
and I want to put a link in the document to another html file in assets folder. When I similiarly put in the tag:
Touch here for page 2</font></h4>
and touch it in the client, the screen loads a blank page.
likewise, I want to have a table of contents that isA ListView and uses loadUrl with an html page suffixed with an anchor. I tried and it is not working
String anchor = "subsection1";
webview.loadUrl("file:///android_asset/main.html" + "#" + anchor);
this construct is not working either.
Give a try to the following piece of code
Touch here for page 2
For me it does the job.