I want to add a fadeIn() and a fadeOut() to my scrollToTop but the fadeIn is'nt worked.
If you want ot see, I've created some GIF : First GIF Here
Seconde GIF
As you can see the fadeIn() on the scrollToTop button is
triggered by the scroll of the windows,
This is my code :
$(document).ready(function() {
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
I'm not an expert at jQuery, but it looks to me as though your problem resides in you invoking fadeIn nearly every time the page is scrolled. What I suggest is that you create a boolean, called buttonShowing (or whatever), and set it to false.
Then, change buttonShowing every time the user scrolls, at the end of the appropriate if and else statements. Then, at the beginning of the if/else statements, you can check if the buttonShowing state has changed and only fadeIn/Out if the state has changed since the last scroll event fired. Here is the code:
$(document).ready(function() {
var buttonShowing = false;
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
if(!buttonShowing) $(".scrollToTop").fadeIn(1000);
buttonShowing = true;
} else {
if(buttonShowing) $('.scrollToTop').fadeOut(1000);
buttonShowing = false;
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
This example may help you. :
<html>
<head>
<style>
body {
height: 1200px;
}
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 100%;
position: fixed;
display: none;
}
</style>
</head>
<body>
<div id="cir"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).scroll(function(){
if($(document).scrollTop()>100)
$("#cir").fadeIn(1000);
else
$("#cir").fadeOut(800);
})
</script>
</body>
</html>
Best Solution for you:
$(window).scroll(function() {
var scroll_pos = window.pageYOffset;
var scroll_div = $('.modal-content').offset().top;
if(scroll_pos > scroll_div) {
if ($(this).scrollTop() > 100)
$(".scrollToTop").fadeIn(1000);
else
$('.scrollToTop').fadeOut(1000);
}
});
or Change $('.modal-content').scroll(function() { to $(window).scroll(function() {. See:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
The solution with $(window).scroll(function() doesn't work, certainly beacause this script is used on a modal.
This is an of my HTML code with the modal :
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<!-- My content -->
<h4>Ajouter une recette</h4>
<div class="row">
<div class="input-field col s6 offset-s3">
<input id="libelle" type="text" class="validate">
<label for="libelle">Nom de la recette</label>
</div>
</div>
<form id="form_ingredient">
<div class="row">
<div class="col s4 offset-s1 input-field">
<input id="ingredient" name="ingredient" type="text" class="validate">
<label for="ingredient">Ingredient</label>
</div>
<div class="col s4 offset-s2 input-field">
<input id="poid" name="poid" type="number" class="validate">
<label for="poid">Poid</label>
</div>
</div>
</form>
</div>
<div class="modal-footer" style="text-align: right;">
<!-- My footer -->
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a>
<a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a>
</div>
</div>
<script>
//The script that I try to use
</script>
I resolved my problem with Css, I just add these class to my stylesheet :
.scrollToTop{
opacity:0;
text-decoration: none;
transition:opacity 1s ease-in;
float: left; }
.scrollToTop.visible {
opacity:1; }
And this Js and that works :
$('.modal-content').scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").addClass('visible').css("cursor", "pointer");
} else {
$('.scrollToTop').removeClass('visible').css("cursor", "default");
}
});
Related
I am trying to swap a div's position from top on and when I click another div then top div can be swap.
HTML
<div class="wrap top">
<input type="text" value="div1" class="textbox " />
</div>
<div class="wrap">
<input type="text" value="div2" class="textbox " />
</div>
<div class="wrap">
<input type="text" value="div3" class="textbox " />
</div>
jQuery
(function ($) {
$(".wrap").on("click", function () {
if ($(this).index() == 0) {
} else {
$(this).insertBefore($(this).prev());
}
});
}(jQuery));
The fact is I don't want to remove the div which I click instead want to swap the positions around.
How Can I do this using jQuery itself?
I would suggest using css to position the top div and just swap the class as follows:
(function ($) {
$(".wrap").on("click", function () {
if ($(this).index() == 0) {
} else {
$(".wrap").removeClass("top");
$(this).addClass("top");
}
});
}(jQuery));
this will swap whatever you click with the first element.
$(".wrap").on("click", function () {
var $this = $(this);
if ($this.index() == 0) {
} else {
var first = $this.siblings('.wrap').first();
first.insertBefore($this);
$this.prependTo($this.parent());
}
});
if you just want to move the clicked element to the top, you can simply do
$this.prependTo($this.parent());
To swap the two DOM elements using jQuery, you could use something like this: -
(function($) {
$(".wrap").on("click", function(event) {
var index = $(event.target).index();
var first = $(".wrap").first();
if (index > 0) {
$(first).swapWith(this);
}
});
}(jQuery));
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone(true);
var copy_from = $(this).clone(true);
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
.wrap {
height: 100px;
width: 200px;
margin: 10px 10px 10px 10px;
background-color: #2d8cd0;
}
h2 {
color: white;
text-align: center;
padding-top: 20px;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrap">
<h2>1</h2>
</div>
<div class="wrap">
<h2>2</h2>
</div>
<div class="wrap">
<h2>3</h2>
</div>
<div class="wrap">
<h2>4</h2>
</div>
I am trying to hide sidebars by using toggle() jquery function.
Code:
$('#hide_saved_templates').click(function(){
$('#saved_templates').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else {
jobWrapper.removeClass('col-md-9');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-7');
}
});
$('#hide_job_history').click(function(){
$('#jobs_history').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-7');
}
else if(jobWrapper.hasClass('col-md-9')){
jobWrapper.removeClass('col-md-9');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
});
The toggle is working fine and toggling the sidebars as expected. However, the default easing animation of toggle('slow') is working perfectly for one sidebar $('#saved_templates').toggle('slow') and not working for the other $('#jobs_history').toggle('slow'); . I have used the same code for both sidebars but I didn't able to understand the reason for this inconsistency. I want to apply smooth simple transition to the toggle effect.
HTML Structure:
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-12" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-3 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>
The problem is toggle and changing class occurs same time. Since jobs_history div is in the last position it's toggle event is not affecting others. Following code snippet may help you.
var saved_templates = $('#saved_templates');
var jobs_history = $('#jobs_history');
$('#hide_saved_templates').click(function() {
if (saved_templates.is(':visible')) {
saved_templates.hide('slow', function() {
jobs_history.show();
});
} else {
jobs_history.hide();
saved_templates.show('slow');
}
$(this).toggleClass('glyphicon-backward glyphicon-forward');
});
$('#hide_job_history').click(function() {
if (jobs_history.is(':visible')) {
jobs_history.hide();
saved_templates.show('slow');
} else {
saved_templates.hide('slow', function() {
jobs_history.show();
});
}
$(this).toggleClass('glyphicon-backward glyphicon-forward');
});
#saved_templates, #jobs_history, #job_form_wrapper {
border: 1px solid #000;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-10" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-2 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>
See the result in full page.
I currently work with some jQuery, where i have got some problems.
I got this code
if ($(".accordion").length > 0) {
$(".accordion").each(function() {
var item = $(this).find(".accordion-text");
var height = item.outerHeight() + 20;
item.data("height", height + "px").css("height", "0px");
})
}
$(".accordion").on("click", function(e) {
foldOut($(this));
});
function foldOut(accordien) {
console.log(accordien);
var item = $(accordien).find(".accordion-text");
if ($(accordien).hasClass("accordion-open")) {
$(item).stop().transition({
height: '0px'
}, 500, 'in-out');
$(accordien).find(".accordionArrow").removeClass("accordionBgActive");
console.log($(accordien).find(".accordionArrow"));
} else {
$(accordien).find(".accordionArrow").addClass("accordionBgActive");
$(item).stop().transition({
height: item.data("height")
}, 500, 'in-out');
}
$(accordien).toggleClass("accordion-open");
}
But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div..
How can i get the div not to fold when the click is on an a tag?
HTML Where its "closed"
<div class="row">
<div class="overflow-hide rel">
<div class="accordion rel col-md-12 no-pad">
<div class="accordionHeaderDiv">
<h3>Test</h3>
<div class="accordion-header-teaser">
<p>TestTestTestTestTestTestTestTestTestTest</p>
</div>
</div>
<div class="accordion-text" style="height: 0px;">
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>Test</p>
</div>
<div class="accordionArrow" style=" position: absolute; top: 0; cursor: pointer; right: 43px; height: 30px;"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
Filter it out regarding event target:
$(".accordion").on("click", function(e) {
if(e.target.tagName.toLowerCase() === "a") return;
foldOut($(this));
});
As anchor can contains other contents, a more relevant way would be:
$(".accordion").on("click", function (e) {
if ($(e.target).closest('a').length) return;
foldOut($(this));
});
I have an accordion.
When I click on show details :
the accordion content will expand,
the text will change from show details to hide details
the icon will change from + to x
click on it again should toggle back to its original state.
I couldn't get it to work. When I click on it, it stuck on the HIDE DETAILS state forever.
JS
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
});
Can someone please give me a little push here ?
I've put together a Fiddle - just in case it is needed.
Inspected the aciton and element behavior, find that #sk-p-r will have class in to decide whether its collapsed or not.
$(".show-details-sk-p").click(function () {
var isCollapse = $('#sk-p-r').hasClass('in');
var text = isCollapse ? 'SHOW DETAILS' : 'HIDE DETAILS';
var img = isCollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'
$(".show-details-txt-sk-p-r").text(text);
$(".icon-sk-p-r-toggle").attr("src", img);
});
There's a lot of ways you can do this but your problem is that your 'click' doesn't have any way to set the 'show details' state from the code you have there.
In a really simple solution for this:
$(".show-details-sk-p").click(function () {
$(this).toggleClass('open')
if($(this).hasClass('open') === true){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
}
});
This is one way to do it. I'm adding a class to the element here to track state and then conditionally setting the image and text based on that state to give you a true toggle. There are likely smarter and more efficient ways to do this but this should be a simple enough example to point you into the right direction.
I have added a boolean variable which is toggled whenever the accordion is clicked. Check out this fiddle
var show=false; //indicates whether the accordion is hidden
$(".show-details-sk-p").click(function () {
if(!show){
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
show=true;
}
else{
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
show=false;
}
});
I have used the show variable to determine what text to display on the accordion.
You need to revert text and image when collapsing an accordion
/* JavaScript */
$(".show-details-sk-p").click(function() {
if ($(this).data('shown') === true) {
$(this).data('shown', false);
$(".show-details-txt-sk-p-r").text("SHOW DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
} else {
$(this).data('shown', true);
$(".show-details-txt-sk-p-r").text("HIDE DETAILS");
$(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
}
});
/* CSS */
.sk-p-dash {
padding-left: 25px;
}
.panel {
border-radius: 0px !important;
}
.sk-p {
margin-right: 16px;
margin-left: 16px;
}
.panel-title,
.panel-body {
font-size: 10px;
}
.show-details-txt-sk-p-r {
padding-right: 12px;
}
.show-details-sk-p {
font-size: 9px;
padding-right: 5px;
}
.show-details-sk-p .icon-sk-p-r-toggle {
margin-top: -5px;
}
<!-- HTML -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row sk-p">
<div class="col-md-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE
<span data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="show-details-sk-p pull-right">
<span class="show-details-txt-sk-p-r">SHOW DETAILS</span>
<img width="20px" class="icon-sk-p-r-toggle" src="http://s6.postimg.org/bglqtob0d/plus.png">
</span>
</h4>
</div>
<div id="sk-p-r" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-lg-6">
<span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
<div class="col-lg-6">
<span>GRAPHING INEQUALITIES IN ONE VARIABLE </span>
<br>
<br>
<div class="sk-p-dash">
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
<span>WATCH VIDEO</span>
<br>
<br>
<img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
<span>REVIEW LESSON</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Simply toggle
better store the string values in variables
var txtHide = "HIDE DETAILS";
var txtShow = "SHOW DETAILS";
var rmvImage = "http://s6.postimg.org/e9eydpbct/remove.png";
var plsImage = "http://s6.postimg.org/bglqtob0d/plus.png";
$(".show-details-sk-p").click(function () {
$(".show-details-txt-sk-p-r").text($(".show-details-txt-sk-p-r").text()==txtHide ? txtShow :txtHide );
$(".icon-sk-p-r-toggle").attr("src",$(".icon-sk-p-r-toggle").attr("src")==rmvImage ? plsImage :rmvImage );
});
Check http://jsfiddle.net/ZigmaEmpire/bpaxpuhz/2/
I'm trying to create a multi-page navigation using jQuery, where when we change page the current one would suffer a slideUp() and disappear.
Until now I have this JS:
$(document).ready(function() {
current = "#div1";
$("#btn1").click(function() {
if (current != "#div1") {
$(current).slideUp("slow");
current = "#div1";
}
});
$("#btn2").click(function() {
if (current != "#div2") {
$(current).slideUp("slow");
current = "#div2";
}
});
$("#btn3").click(function() {
if (current != "#div3") {
$(current).slideUp("slow");
current = "#div3";
}
});
});
Running on this: http://jsfiddle.net/93gk3oyg/
I just can't seem to correctly navigate from page 1 to 3, 3 to 2, and so on...
Any help would be appreciated :)
I have refactored your code somewhat. I actually do not make any use of the slide-up functionality, everything is handled using CSS animations, which means you will be able to alter those to something else later. Also notice, that this means you don't really need to mess about with z-index.
HTML:
<div id="menu">
<button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
<button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
<button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
<button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
<center>HOME</center>
</div>
<div id="div2" class="fullscreen">
<center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
<center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
<center>PAGE4</center>
</div>
JS:
$(document).ready(function () {
var current = "div1";
$("[data-rel-page]").bind('click', function (evt) {
var el = $(evt.currentTarget).attr('data-rel-page');
if (el === current) return;
var $el = $("#" + el);
var $cur = $("#" + current);
current = el;
$cur.removeClass('active');
$el.addClass('active');
})
});
CSS:
.fullscreen {
transition: all 0.4s linear;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 0%;
overflow: hidden;
}
.fullscreen.active {
display: block;
height: 100%;
}
Here is the fiddle: http://jsfiddle.net/93gk3oyg/9/