Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.
Related
Github repo (https://github.com/teke85/Luxury_living/tree/add-home-page)
In my bootstrap project I successfully managed to retrieve data dynamically from a javascript object. I noticed that the last row is not aligned correctly. how do i fix this or what could have caused the misalignment? Please note, The issue wasn't there before I fetched the data dynamically using Javascript.
If you are using the newest version, you can do something like this:
<div class="container">
<div class="row">
<div class="col">
Content for column 1
</div>
<div class="col">
Content for column 2
</div>
</div>
</div>
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I have copied a menu from a responsive HTML template, I pasted it to another template which is also responsive, but when the device is changed to mobile, the menu is not properly aligned.
I don't know how to extract the bootstrap of the menu only from its original template.
Here is the code:
<section id="food-menu" class="content-area bg-home-food-menu">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="section-title text-center">
<h2>Discover our menu</h2>
<div class="clear">
You are missing the responsive styles for your code. Try adding the media queries for your Mobile view.That will fix the issue you are facing.
I am creating a site with the fullPage.js plugin. I got it to work on the desktop browser but it's not working as expected in mobile.
this is my HTML
<div id="fullpage">
<section id="red" class="section"></section>
<section id="blue" class="section"></section>
<section id="green" class="section"></section>
</div>
and this is my jquery
$(document).ready(function(){
$('#fullpage').fullpage({
navigation: true,
});
});
while navigation:true I can skip (i wouldn't say scroll) to different sections by touching the navigation dots. I can swipe to scroll up from there as seen in this video. it works in the chrome device emulator though
video of scroll in the works
P.S. I don't think scrollOverflow:true would serve my purpose as there is not much content to scroll in the site.
I figured out the problem. it was not with fullPage.js. In my HTML, I included jquery.slim.min.js instead of regular jquery.min.js
Apparently, fullPage.js only works with jquery.min.js
make it your code like this and try with that jquery
<div id="fullpage">
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
I'd like to implement a fade-in/fade-out text only carousel like on the header of this website.
I looked at the code and it seems that it was done with bootstrap.
Since I don't really want to implement the whole bootstrap thing only for this, is there a way to do something similar with a few lines of CSS and Javascript (Im a total newbie in JS)?
Many thanks for your help
HTML of the website I took as example:
<div id="carousel_fade_intro" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<h1>Multi-purpose template</h1>
</div>
<div class="item">
<h1>designed for portfolio, agency</h1>
</div>
<div class="item">
<h1>or landing page.</h1>
</div>
<div class="item">
<h1>It's easy to customize</h1>
</div>
<div class="item">
<h1>to fit any brand.</h1>
</div>
</div>
</div>
Look at jQuery's fadeIn and fadeOut methods.
http://api.jquery.com/fadein/
The example you linked toggles classes on each item in a loop and uses css transitions to control the fades.