CONTEXT:
I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.
PROBLEM:
The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!
My JS:
$(document).ready(function() {
// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});
$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});
$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});
$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});
});
$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,
}
);
My Html:
<div id="fullpage" class="fullpage-wrapper">
<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>
<!-- Start section 2 - why -->
<div class="section" id="section2">
<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Why -->
<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Quality -->
Don't you get any errors in your javascript console?
In the code you posted there's a mistake here:
// move to quality
$( "#q").click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
You forgot to close the string "#q".
Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.
If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.
Related
I used jQuery to make a toggle menu where someone can click on different span titles to toggle between different containers of content (on the website, this toggle menu toggles between different contact forms). The menu works, but I am trying to make it so that if a user clicks an anchor link on a different page, they will be sent to this page and the menu will automatically toggle to the corresponding container of content.
For example, if someone were to click on an anchor link like "mydomain.com/test-page/#third", I would want the content from the third menu item to toggle and show automatically when the page loads. I have been playing around with using "window.location.hash" to trigger a click event like this, but can't figure it out.
Is there a way to trigger a click event when the page url has a certain anchor hash like this at the end of it?
Would really appreciate any help folks can offer!
Here is the fiddle: https://jsfiddle.net/ecv5jwsr/
$(function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#second').toggle(ix === 1);
$('#third').toggle(ix === 2);
$('#four').toggle(ix === 3);
$("a[href='" + window.location.hash + "']").parent("#test").click();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span>TITLE 1</span>
<span>TITLE 2</span>
<span>TITLE 3</span>
<span>TITLE 4</span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left">
<h3>Content 1</h3>
</div>
<div id="second">
<h3>Content 2</h3>
</div>
<div id="third">
<h3>Content 3</h3>
</div>
<div id="four">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To do this you need to set tab id and save it in url as parameter like this:
$(function () {
let url = new URL(window.location);
let tab = (url.searchParams.get("tab") == null ? 'left' : url.searchParams.get("tab"));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
$('#toggle > span').click(function () {
let tab = $(this).attr('for');
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
let href = $(this).find('a').attr('href');
let url = new URL((href == '#' || href == '' ? window.location : href));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
//window.location.href = url;
});
});
.col-12.pt-4 .hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span for="left">TITLE 1</span>
<span for="second">TITLE 2</span>
<span for="third">TITLE 3</span>
<span for="four">TITLE 4</span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left" class="hide">
<h3>Content 1</h3>
</div>
<div id="second" class="hide">
<h3>Content 2</h3>
</div>
<div id="third" class="hide">
<h3>Content 3</h3>
</div>
<div id="four" class="hide">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>
I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});
As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>
Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);
I have a set of div's, What I want to do is when I click the read more button It shows the div "myContent" and hides the button for that particular container not all the divs with the same class name. and when I click the close button it hides the div (and because the button is there it should technically hide the button as well) and show the read more button again.
Whats happening right now is either all are showing or none are showing.
I am a newbie (using Jquery) Any help most appreciated.
The HTML
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
Thanks!
You can try this, Based on my understanding.
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
$(this).closest('.myContent').hide();
});
DEMO
If I understand right here is what you are looking for :)
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
$(this).closest('.myContent').hide();
});