EDIT: I found out the solution. See my post at the bottom of the page.
I've created a template for joomla with materializecss. Everything works fine except the slider (which displays as a gray rectangle) and carousel which just shows images one after another as obsolete divs.
The carousel:
The slider:
I've imported the jquery script before materializecss. I've also called the carousel.carousel(). The code for slider and carousel I used is same as on the Materializecss website in examples. Can anyone help?
Updating materializecss files solved the problem. I also found out that a part of materialize.css was missing.
enter this script
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
)}
If you are using NOT default classes for carousel items - you need to change them classes in carousel.js file
Related
Hi I've a wordpress site and i need to modify the highlighted code to "display=flex" insted of "display=none".
But i am not able to to this because is element.style..please help me.
https://imgur.com/93zuJyU
.fep-message-content .fep-message-content-5 .fep-message-
content-own .fep-message-content-admin .fep-hide-if-js{
display:flex !important;
}
this is an accordion of front-end-pm plugin for wordpress and it is displayed none when closed and displayed block when opened. i would have it permaopened.
Is possible to change the highligthed code?
Thank you for helping. :)
My guess is that there's a javascript hiding that element after the page is loaded. So no matter what you tell the page to load, it gets altered after. I would search the theme or plugin javascripts for "fep-hide-if-js".
I'm developing a website and i'm trying to add a carousel from Ngb.
I followed the tutorial to add it but it is not working: my three images are placed one after the other and the text is superimposed at the bottom of the third page.
I check my package.json and the line "#ng-bootstrap/ng-bootstrap": "^2.2.0" is present. I also add import { NgbModule } from '#ng-bootstrap/ng-bootstrap' and NgbModule.forRoot() in my app.modules.ts and copied pasted the example from the Ngb bootstrap website but the problem is present.
For information, my IDE (WebStorm) is telling me that the ngb-carousel tag is unknown and that the attribute ngbSlide is not allowed but i have no error during the compilation.
I hope you're gonna be able to help me and i'm ready to add some come here if you need.
Thanks !
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
So I finally got the tabs and first carousel working but when I try to pull up a second carousel in another tab - nothing. I can either get the container or the images but can't get both to work. I have done a bit of research and not sure what the answer is here. Found this as a fix:
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
Modified it to this:
.ui-tabs-vertical .ui-tabs-panel {
position: absolute;
left: -10000px;
}
and all of the content disappears - even the first carousel. I tried creating unique CSS and function names but I can't get the second carousel to display properly or work.
Seems like there should be an easier way to pull up a second or third carousel in a tab? Am I really going to need a unique .js for each carousel? Any suggestions?
OK - it's really only working if the carousel is in the first tab. none of the others work
possibly here is your answer:
jQuery multiple carousels in jQuery UI tabs do not work properly in Internet Explorer and Chrome
"This problem is because you are trying to create the carousel after you have created the tabbed interface. So probably jcarousel is trying to render the carousel inside a container whose display property is set to null (a non-active tab) . Since position and many other properties of this container can not be reliably determined, this will fail in most browsers. Please try rendering the carousel before, once the carousel is rendered, then create the tabs."
It worked for me ;)
Ive seen sites where things like a login box will apprear, and the rest of the page will fade, buit the box stays the same.
How is this done?
Can someone please give me an example?
Thanks!
Check link text
And add following code on head section for faded background
<script language="Javascript">
$(document).ready(function() {
$.facebox.settings.opacity = 0.2
});
</script>
You can use any of the jquery lightbox /modal scripts to achieve the effect. There's lot of scripts that do what you are trying to achieve. My personal recommendations would be SimpleModal (if you need something just for a login window) or ColorBox (if you need multiple overlays and require a lot of customization)