Currenly I'm trying to animate the component module for a website for a school project. The animation contains a fadeIn/fadeOut and a change of the content without loading a whole new website. After the animation it adds a hashtag to the URL (like #about-me). In Joomla there appears only my 404 Errorpage and the animation doesn't take effect. It works perfectly on the HTML-Only Version and in Typo3 but not in Joomla. Google shows no result to this question, only to special plugins and modules but not for the general modules. How can I use it the right way? You can watch the side under:HTML: http://www.aks-schulinfo.de/gtm3_big/24h/essmannExample of errored jQuery: http://www.aks-schulinfo.de/gtm3_big/24h/essmann/js/dynamicpage.jsThanks for your help.
Okay, you'd like to change the page's content without reloading the page. One of the easiest ways to do this is to load all of the content on the page, and then hide everything that's unrelated. So, setgup your index.php page (or which ever is your main) with all of the content separated into their own divs.
<div id="contentHome"> .... </div>
<div id="contentAnmeldung"> .... </div>
<div id="contentRegelwerk"> .... </div>
<div id="contentSitempa"> .... </div>
Use javascript to find the current hash tag with location.hash, then switch the possibilities and show related content while hiding the other three. If you're really gung-ho, you can do the same with php as the page is being created so that people can link to specific "pages" still.
NOTE: This works well with limited content like the site currently has. Don't even try it if you have a lot of content because page load times will be horrendous.
The contentchange without reloading is now working fluently, thank you! The other half (the fades) are still not working. Why does the fadeeffect apply at the html-only view but not in at the Joomla site?
Links:
HTML-Only: www.aks-schulinfo.de/gtm3_big/24h/essmann/htmlonly
Joomla-version: www.aks-schulinfo.de/gtm3_big/24h/essmann/
Related
I need help in determining why my page using a Lazy Loading jQuery library isn't working correctly. One element or calendar renders correctly, but the other doesn't. I'm enclosing my div content within the <div class='lazyload'> class as specified:
...
<div class='main regularslider owac'>
<div class='lazyload'>
<script type='text/lazyload'>
...
</script>
</div>
...
Note that the JavaScript wasn't produced by me.
I'm using this plugin as inspiration (most of the PHP and all of the JavaScript is identical to what I have): https://wordpress.org/plugins/availability-calendar/
Here is my sample web page: https://applicable-owl.jurassic.ninja/apartments/
I expect to see both calendars with clickable buttons on both sides of the calendar, but one calendar always seems to output the entire collection of divs in a linear succession without having any associated JavaScript with it to render the buttons.
Please also note this is a WordPress site and using two shortcodes to render the calendar content, with one shortcode followed by another.
So I have this with the shortcodes:
[availabilitycalendar apartment="2" language="EN"]
[availabilitycalendar apartment="2" language="EN"]
I'm attempting to increase the speed of the page because without lazy loading, the page has to wait for all the divs to be created.
A link to the relevant PHP responsible for this: https://plugins.trac.wordpress.org/browser/availability-calendar/trunk/public/includes/frontend.php#L104
And for the JavaScript (it appears to be using Slick as inspiration) : https://plugins.trac.wordpress.org/browser/availability-calendar/trunk/public/js/owac.js
I have just started this small project for a website and I thought i should use only one menu bar for the whole site, since it's kinda tedious to have to change all the links for all the pages in the menu bar.
I have found the following code for loading my menu bar:
<div id="nav-placeholder"></div>
<script type="text/javascript">
$(function(){
$("#nav-placeholder").load("navbar.html");
});
</script>
It works fine and I do get my menu, however I find that the links basically work the same as if I just had the menu on the page instead of loading it.
So for example if I am on the root directory everything loads fine, but as soon as I move up one directory the links wont work anymore.
I know this can be fixed by simply changing them, but then I would have to make more than a couple of navbars for the whole site?
Any fix around this?, hope you guys get my idea, would appreciate any help.
If you're using anything that can dynamically create pages on the fly like ASP or PHP then you could make a separate page with just the menu in and include it in each page that needs it. For example:
ASP:
<!-- #Include virtual="menu.aspx" -->
PHP:
<?php include 'menu.php';?>
-Test link for the problematic webpage-
This webpage is a landing page to a parent website. There are several javascripts that are required to run. Unfortunately, not all work simultaneously. I have tried various combinations but cannot find a way to make the webpage work.
The functions taking place in the webpage are:
Revolutionary Slider
Multiplication calculator
tabs toggler
smooth scroll-to-section menu
back-to-top button
Fancybox (lightbox)
Please help . Thankyou
Errors generated by your page
indicate that jQuery library is not the first script you are loading.
Looking into source show that you are loading jQuery in line 75.
Move this line to very top of your page.
I think this is your primary problem. Your scripts may not necessarily require different jQuery versions.
I want to make a one page layout for my webpage.
And I want to make that so, when i click a button in my navigation bar, it to display a div i've created for my content, but normally is hidden. Also, when i click on the logo of the page, the page goes to it's original state (without the content div showing).
I have no idea how to do this.
I guess your using Javascript and / or PHP for this?
Can you guys give me an example how to do this?
Example: http://www.basjansenmedia.nl/
When you go to themeforest, there's a separate category called One Page themes. Do have a look at it. Or, why not you Google it for yourself? Anyways, a few tutorials would be:
One Page
15 Useful HTML5 Tutorials and Examples For Beginners
Coding a CSS3 & HTML5 One-Page Website Template
Single Page Apps with AngularJS Routing and Templating
Assuming you use jquery
$('#myButton').click(function() {
$('#myNewDiv').show();
$('#myOldDiv').hide();
}
($'#logo').click(function() {
$('#myOldDiv').show();
$('#myNewDiv').hide();
}
I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.