I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});
Related
I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
Explore More
</div>
</div>
<div id="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-right p-0 ">
<div class="right-block">
<div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....
<section>
<div class="container">
<div clss="row">
<!-- Carousel from GetBootstrap.com Version 5 -->
</div>
</div>
</section>
I'm trying to create an automatic text change (testimonials like ont click and scroll down please to see changing testimonials
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 1</p>
</div>
<div class="author">Pete</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 2</p>
</div>
<div class="author">Fiona</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 3</p>
</div>
<div class="author">Helen</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 4</p>
</div>
<div class="author">Laura</div>
</a>
</div>
I need each testimonial to show for few seconds and then change to another one so only one is shown at time. I'm not a good programmer and was trying to find this on google but I didn't. Thank you for help.
Try this
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 1</p>
</div>
<div class="author">Pete</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 2</p>
</div>
<div class="author">Fiona</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 3</p>
</div>
<div class="author">Helen</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 4</p>
</div>
<div class="author">Laura</div>
</a>
</div>
and jquery:
var divs = $('div[class^="testimonial"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
>> working example <<
I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.
Here is the fiddle I am working on right now
http://codepen.io/trippygif/pen/KVWYdV
Here is the HTML
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Basically I am having trouble with the Bootstrap alignment that occurs in the "about" div. I cannot seem to get the paragraph on the left side of the page and the list on the right side of the page. I assume something might be wrong with my CSS. Any suggestions would be much appreciated :)
If your problem is that the "About Me" heading and the list doesn't start in the same vertical height, then you have to do something with your .to-fit CSS rule where you set a padding-top : 80px;.
Just give a properly sized top padding or margin to your right block:
<div class="col-md-6" style="margin-top:120px;">
<p>My Proficiencies</p>
...
or
<div class="col-md-6" style="padding-top:120px;">
<p>My Proficiencies</p>
...
Of course you can/should place this rule to a CSS rule with a selector of your choice.
change class container tocontainer-fluid
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
html want to show items based on the location in .offer_miliage
<div class="offer_list clearfix">
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_01.jpg" alt=""/>
</div>
<div class="offer_aside">
<h2>Project 1</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">32.690</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_02.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 2</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">56.300</div> <span class="offer_miliage">Choolaimedu</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_03.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 3</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">47.000</div> <span class="offer_miliage">T Nangar</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_04.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 4</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">26.750</div> <span class="offer_miliage">Pallavaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_05.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 5</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">33.300</div> <span class="offer_miliage">Tambaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_06.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 6</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">44.300</div> <span class="offer_miliage">fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_07.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 7</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">48.500</div> <span class="offer_miliage">Fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_08.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 8</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">63.300</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
</div>
<div class="widget-container widget_adv_filter">
<h3 class="widget-title">ADJUST SEARCH RESULTS</h3>
<form action="#" method="get" class="side_form">
<div class="row field_select" style="z-index:8">
<label class="label_title">Location:</label>
<select class="select_styled white_select" name="car_year" id='select'>
<option value="1">Pallavaram</option>
<option value="2">T Nagar</option>
<option value="3">Nungambakkam</option>
<option value="4">Choolaimedu</option>
<option value="5">Fort</option>
</select>
</div>
<div class="row rowSubmit"> <span class="btn btn_search"><input type="submit" value="SEARCH" onClick="go_button();"></span>
</div>
how to show items which are having same location when click in searched button. I have started java script but couldn't advance.
here is java script
<script type="text/javascript">
function go_button(){
var loc=document.getElementByClassName('offer_miliage')[0].innerText;
if(document.getElementById('select').value==1){
//what to write to update .offer_list with .offer_item that
//have .offer_miliage text pallavaram
}
};
</script>
friend can u please tell me whats wrong with this script
function go_button(){
if(document.getElementById('select').value==1){
$(function() {
$(".offer_item").search(function(a) {
// Find the location name from element
var priceAText = $(a).find(".offer_miliage").text();
// Return the result
if(priceAText=="Pallavaram"){return true;}
}).each(function() {
// Add all the elements back into the parent, in order
$(this).appendTo(".offer_list");
});
});
}
};
Your working example with jQuery: http://jsfiddle.net/9VQRt/ (highlight found data with red background).
$('body').on('click', '.search_button', function() {
var offerCollection = $('.offer_miliage');
$.each(offerCollection, function(ind, val) {
if($("#select option:selected").text() == val.innerHTML) {
$(this).addClass('red_bg');
}
});
});