if you go here site here and check with developer tools you will see this line
<!--Single portfolio item one-->
<section class="single-items center-block parallax m-0" id="home" style="background: url(innovative/img/single-portfolio1.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12 center-col">
<div class="area-heading text-center wow fadeInUp" data-wow-delay="0.8s">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100 ">
Nuestro <strong>loren ipsun</strong>loren ipsun</h3>
<p class="text-white font-weight-300"> loren ipsun</p>
loren ipsun
</div>
</div>
</div>
</div>
</section>
lacks the * animated * class, tried :
manually setting animated css, bootstrap css, and animated js, wow js , did not work....
stripped down all the css and js and just left basic html with animate css and js and wow js, nothing happened
what could be happening ? , this template have bootstrap and animate css in one bundle js css file
wasted between 2, 4 hours debugging console and found not the culprit of this error
What i am trying is:
to enable the wow animate js css effect like this site site here
if you check with developer tools this last site you will see that will be adding animated class to wow fadein class.. however that is not happening in the first one... and do not know why!
what could be causing this?
It seems to me that you forgot to initiate the wow.js as told in the documentation, so you just need to add the initiation code to it. And a quick fix would be to add:
<script type="text/javascript">
new WOW().init();
</script>
Below <!-- custom script --> line in your code (or anywhere before </body> tag).
Related
I want to implement a carousel using the excellent Slick Slider(https://kenwheeler.github.io/slick/) which I have used for images before with no problems. I'm trying to create a 'center mode' slideshow like the example except using several div;
I want to do something like this;
These are the div's I want to use on codepen here - https://codepen.io/grabthereef/pen/mdymmgM
<!-- Single Card -->
<div class="single_slide">
<div class="row">
<div class="col-lg-4">
<div class="top-text">
<h1>DG Aurum</h1>
</div>
<div class="view-button">
<button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
</div>
</div>
<div class="col-lg-8 text-center">
<img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
</div>
</div>
</div>
The problem is when I add the Slick Slider code it messes the layout of the page;
https://codepen.io/grabthereef/pen/gObWBVG
I've tried looking through the other questions on here but I can't find a solution that works for me, I'm fairly new to JS.
If you go ahead and load the slick slider css file, that should pretty much fix the problem for you //cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css. I found this out only after making a very barebones version of the slick slider on my own codepen https://codepen.io/dthenley/pen/PowJbgN and proceeding from there. My slider was doing pretty much the same thing yours was right until I added the css code. I also loaded it with a document ready function
$(document).ready(function(){
$('.your-class').slick();
});
This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I have been struggling for some time on how to use shapes in Semantic UI.
I have been trying an example from their site http://semantic-ui.com/modules/shape.html#/definition but the animations are not working properly for me.
HTML CODE :
<div class="ui cube shape">
<div class="sides">
<div class="active side">
<div class="content">
<div class="center">
1
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
2
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$('#btn').click(function(){
$('.shape').shape('flip up');
});
It's just a JQuery version problem:
This fiddle works.
This one doesn't.
So check the JQuery version you're using, it seems that the version should be upper than 1.8.
Semantic UI and Bootstrap will not play nice together when it comes to Shapes. You will have to manually remove the following CSS in Bootstrap to make it work:
.hidden {
display: none !important;
}
If having a .hidden class is crucial to your operation, rename it instead of removing it. Although I'm not familiar enough with Boostrap's inner workings to know if there are any internal dependencies on that class.
Hi I have this page, built upon Bootstrap, and the thing is that if you click the "See Wikipedia" button, the content will flush the whole page, however the page height does not change and the footer is overwritten in a very funny ugly way. Is it possible to change this? I have tried to set some overflow but it does not help much.
You can do this small changes :
Change
<div id="debate-title" class="container">
By
<div id="debate-title" class="container col-xs-6 ">
Change
<footer class="site-footer">
By
<footer class="site-footer col-xs-12">