so first i have to say that i'm realy new to Typo3, so i dont rly know much about the cms.
Actually i have a Problem with my Page.
I want to integrade a Image Slider in my Page with the Nivo Slider Plugin.
The Problem is, that the Slider is not shown.
The page gives the error
TypeError: jQuery(...).nivoSlider is not a function
so i think, there is some problem with the jQuery.
For that i installed t3jquery but its still not working.
i nearly tried every configuration for t3jquery and also analysed the other extensions on my Page with the plugin, but nothing works.
Some of you have advice what i can do?
The page is hxxp://www.eventbringer.de/skireisen/opening-slider/ (so you can see the error in the JS Console)
TYPO3 has a very versatile way of getting content of code to the front-end.
One way is to use typoscript.
read : https://docs.typo3.org/typo3cms/TyposcriptReference/
You can see typoscript as a huge configuration 'array' that can declare all sorts of settings.
One of the settings is about how the 'page' itself needs to have.
If you need, for example, some javascript in your page, you could use
page.includeJs
https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#setup-page-includejs-array
if you need yous JS at the footer, and its an external lib, you could use
includeJSLibs.twitter = http://twitter.com/javascripts/blogger.js
includeJSLibs.twitter.external = 1
Related
I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.
This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!
I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.
We're am building a SharePoint 2013 site (not sure if SharePoint is affecting it or not) with which I am using jQuery, jQuery-ui, requireJS and angular.
We've got require and angular to play nicely together, loading in the required js files/controllers as and when they are needed.
However, we are having issues with jQuery-ui.. Ever so often (1 in 10 approximately), it fails to load properly. The page has fully loaded, and the jquery and jquery UI files are listed under sources, yet no UI functions work.
For example, my calendar controls error when loading, with "undefined is not a function".
I can type " $('#datepicker').datepicker" in the console window, and I get "undefined" back. When jQuery UI does successfully load, I get the expected result in the console window..
I have tried loading the jQuery and jQuery UI files directly at the top of the page, and not via require, but this fails to work to resolve the issue..
Can anyone suggest what may be going wrong here please?
Thanks
Danny
Issue fixed: I was loading jQuery a second time in require, which was causing the issues. I've taken jQuery out of require now, and loading directly on page, as pretty much every page in the site uses it anyway. –
I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});