Module JoomTut Floating Documentation https://www.joomtut.com/images/extensions/module-joomtut-floating/module-joomtut-floating.png
Joomtut Logo
Details

Module JoomTut Floating

The Module JoomTut Floating can display your images or modules in fixed positions with floating effect on both sides of your website, even when you scroll your browser window. This module is suitable for displaying Ads, Banners, Menu, Socials Button, Contact Form, Login Form, Email Form, Module with custom code,...

The module JoomTut Floating is a combined version of module JT Fixed Display and module BuaXua Floating with more features. Please try the module JT Fixed Display or module BuaXua Floating before get this module.

Module JoomTut Floating - Display any images or modules on fixed position with floating effect

Module JoomTut Floating Features

  • Settings Width and Height
  • Display your module on Top
  • Display your module on other position
  • Your module snap to website edge
  • Your module snap to windows edge
  • Display with Start Point
  • Adjust Vertical Offset
  • Adjust Horizontal Offset
  • Show/Hide at Start Point
  • Floating Effect
  • Floating Speed
  • Display your image link directly without creating module
  • Display your module by ID
  • Display your module by Position Name
  • Show/Hide Close Button
  • Module Class
  • Custom CSS
  • Auto Show/Hide on small screen device
  • Display first time only
  • Support the most common browser with latest version
  • Compatible with Joomla! 4.x, 5.x and 5.x with Behaviour - Backward Compatibility

This module not work on Joomla! 3 and earlier version.

Module JoomTut Floating - Published

Module JoomTut Floating - Menu Asignment

Module JoomTut Floating - Options

Module JoomTut Floating - Left Side Settings

Module JoomTut Floating - Right Side Settings

Download Module JoomTut Floating

Download Module JoomTut Floating

Video Clip

Coming Soon

Module JoomTut Floating Documentation

This module not work on Joomla! 3 and earlier version.

1. Install the module JoomTut Floating via Joomla! System -> Install -> Extensions

2. Go to System -> Manage -> Site Modules and open the module JoomTut Floating then select Show Title to Hide and Published the module JoomTut Floating on any available position of your template. We recommend you publish the module JoomTut Floating on the position named Debug because it is located at the bottom of your web page.

There are some templates that do not enable Debug position, please try to publish the module JoomTut Floating on any other positions. Such as Footer, Bottom, Top,...

3. Go to Menu Assignment tab and select All Pages to display the module JoomTut Floating on all pages of your website.

4. Go to Options tab and make sure Load jQuery Library is Yes

5. Go to Left Side Settings tab and make sure Display Left Side is Yes

6. Go to Right Side Settings tab and make sure Display Right Side is Yes

7. Keep all default settings and click Save button.

8. Clear your Joomla! cache and your Browser cache.

9. Go to your site then refresh your browser.

Live Demo: JoomTut Floating - Display images with default settings

If you see two demo banners display on your website, this module works well on your site. Now, you can back to the module to change the settings as you want. If not, please view Troubleshooting below.

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Left Side Settings tab to settings for the left side.

3. Change Width and Height to fit your image.

4. Select Horizontal Position and Vertical Position to display your image on the left side.

5. Select Image link in Floating Type

6. Select your image to display on left side.

7. Enter your Link URL for the address to go to when clicking on the image.

8. Do the same for Right Side Settings.

9. Click Save & Close.

10. Clear your Joomla! cache and your Browser cache.

11. Go to your site then refresh your browser.

Live Demo: JoomTut Floating - display images on fixed position

1. Go to System -> Manage -> Site Modules then looking for the ID number of your module.

2. Open the module JoomTut Floating and go to Left Side Settings tab to settings for the left side.

3. Change Width and Height to fit your module.

4. Select Horizontal Position and Vertical Position to display your module on the left side.

5. Select Module ID in Display Type drop-down list.

6. Enter your module ID to Module ID field.

7. Do the same way for Right Side Settings.

8. Click Save & Close.

Live Demo: JoomTut Floating - display module by ID

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Left Side Settings tab to settings for the left side.

3. Change Width and Height to fit your module.

5. Select Module Position in Display Type drop-down list

6. Remember the name of module position in Module Position field. By default, this name is jtft-left but you can change it to whatever you want.

7. Do the same way for Right Side Settings. By default, the position of right side is jtft-right but you can change it to whatever you want.

8. Click Save & Close the module JoomTut Floating.

9. Open your module that you want to display on the left side (images, Banners, Custom HTML,...). Go to the Position field and enter jtft-left (type by your keyboard then press enter).

You can select a module position from the drop-down list of predefined positions or enter your own module position by typing in the name then press Enter

10. Click Save & Close your module.

Do the same way to display other module on the right side.

Live Demo: JoomTut Floating - display module by position

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Options tab.

3. Enter the screen width to Auto Hide Screen Width. If you enter 768, your images or modules will not display on all devices with a screen width equal or smaller than 768px.

4. Click Save & Close the module JoomTut Floating.

Live Demo: JoomTut Floating auto hide on small screen devices

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Left Side Settings tab to settings for the left side.

3. Enter the value in Start Point field. If you enter 200, your images or modules starts showing up in place, when you scroll down your website 200px your images or modules start displaying on fixed position.

4. Set Display Start Point to Yes. Your images or modules starts with hidden, when you scroll down your website 200px your images or modules will display.

5. Click Save & Close the module JoomTut Floating.

Live Demo: JoomTut Floating - display images on scroll down and hide them on scroll up

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Left Side Settings tab to settings for the left side.

3. Set Close Button to Show.

4. Select Button Position.

5. Do the same way for Right Side Settings.

6. Click Save & Close the module JoomTut Floating.

Live Demo: JoomTut Floating - display Close button on images or modules

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Options tab.

3. Set Display First Time Only to Yes.

4. Click Save & Close the module JoomTut Floating.

Live Demo: JoomTut Floating - display your images or modules first time only

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Left Side Settings tab to settings for the left side.

3. Enter your Template CSS or Bootstrap CSS Class in Module Class field.

4. Enter your CSS Code in CSS Override.

5. Do the same way for Right Side Settings.

6. Click Save & Close the module JoomTut Floating.

Live Demo: JoomTut Floating apply class and css to your images or modules

You can copy or duplicate this module then publish them with different settings on different pages.

Please note that only one module works on the same page.

Module JoomTut Floating Troubleshooting

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Check to make sure the Status is Published and the Position has one of the positions has been selected.

3. Go to Menu Assignment tab, All Pages has been selected in Module Assignment

4. Go to Options tab. This module require jQuery Library to work. Joomla! load jQuery Library by default. But if not, please set Load jQuery Library to Yes

5. Go to Left Side Settings tab and select Display Left Side to Yes. Do the same in Right Side Settings tab.

6. Click Save & Close the module JoomTut Floating.

7. Clear your Joomla! cache and your Browser cache.

8. Go to your site then refresh your browser.

The position named debug is not Enable on your template. You can go to your template option to enable it. Other ways, please try to publish the module JoomTut Floating on other position. There are some templates that do not enable Debug position, please try to publish the module JoomTut Floating on any other positions. Such as Footer, Bottom, Top,...

Read more about How to enable debug position

1. Go to Components -> JCH Optimize

2. Click Options

3. Go to JavaScript tab

4. Set Exclude all internal SCRIPT declarations to Yes.

5. Click Save & Close

p>1. Go to System -> Manage -> Site Modules, open your module then check to make sure the Status is Published and All Pages has been selected in Menu Assignment

2. Check to make sure you have select the correct Module Position.

1. Go to System -> Manage -> Site Modules then open the module JoomTut Floating

2. Go to Options tab.

3. Set Fix Display to Yes.

Other ways, you can try to publish the module JoomTut Floating on other position or create a new position for your template.

The problems caused by compatibility view in Internet Explorer. You can fix it in one of the following ways:

Install the Plugin JoomTut Meta Tags

JoomTut Meta Tags is a simple plugin for Joomla! This plugin will fix website display problems with compatibility view in Internet Explorer by adding X-UA-Compatible Meta Tag Description to your website. The X-UA-Compatible meta tag helps render Web pages in older IE browsers. It also allows you to add your custom tags to head section.

Download Plugin JoomTut Meta Tags

Add yourself by editing your template

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

  • Find:
<head>
  • Affter add:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • Your code looks like this:
<head>
   ...
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <jdoc:include type="head" />
   ...
</head>

3. Click Save & Close

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

  • Find:
</body>
  • Before add:
<jdoc:include type="modules" name="joomtut-floating" />
  • Your code looks like this:
...
<jdoc:include type="modules" name="joomtut-floating" />
</body>
</html>

3. Publish the module JoomTut Floating on the position named joomtut-floating