I have used a Slick Slider on my page. Now, everything works fine, but I have to make the particular div triggered on a specific button press. It is like if I have div-2, and I have a button named as button-2 somewhere in the section, on click of it, the slick slider should change it to the div 2, making it active with the right active slick dots.
I have researched about it and got to know that sliderGoTo will do my job. But I don't know why it is not working fine. I have tried my level best, but somehow the button doesn't trigger the right div at all.
What I have tried so far (in pseudo form):
$(document).ready(function() {
$('.box').slick({
dots: true,
arrows: false
});
$('#trigger-button').click(function() {
slideIndex = $(this).index();
$('.slideshow').slickGoTo(parseInt(slideIndex));
)
}
});
/*$('#trigger-button').click(function() {
var slider = $('.box');
slider[1].slickGoTo(parseInt(actIndex));
})*/
//Alternatively used
<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
<div class='div-1'>
Some content
</div>
<div class='div-2'>
Some content
</div>
</div>
I have tried this also, since I want the specific div to be triggered that is div-2, to be triggered when we press the button with the id trigger-button. Can be found as the comment.
But no results. I don't have much experience with usage of SLICK SLIDER, but I have tried. I would be glad to learn more about it. Thanks
EDITS
Thank You guys for helping me out. I have found one solution for me, and that too in an easier way. If you want to go to a specific pos, you have to use this syntax and your work is done :
$('.box').slick('slickGoTo', divNo). Remember divNo = currentPos - 1.
Nowadays, the slickGoTo doesn't work like the previous syntax which is .slickGoTo(parseInt(slideIndex));. It will give you an error which is Undefined slickGoTo method. Proper usage is depicted in my code. Thanks again, and I'm sure this will help people in future references.
Try using $('.box').slick('slickGoTo', parseInt(slideIndex), false); instead.
On a side note: I'm not sure using .index() will always work as intended.
Check https://github.com/kenwheeler/slick for more details.
You have some error in your code.How you can get the index of element is depends upon your elements on HTML
But currently you have to div so you can set index as 1 and increment/reset onclick of button.
Replace
$('#trigger-button').click(function() {
slideIndex = $(this).index();
$('.slideshow').slickGoTo(parseInt(slideIndex));
)
}
To
var indexVal=1; $("#trigger-button").click(function(e){
e.preventDefault();
// slideIndex = $(this).index();
$( '.box' ).slickGoTo(indexVal);
indexVal=indexVal+1;
if(indexVal>2){
indexVal=1;
} });
Here is a working snippet for you:
$(document).ready(function() {
$(".box").slick({
dots: true,
arrows: false
});
});
var indexVal=1;
$("#trigger-button").click(function(e){
e.preventDefault();
// slideIndex = $(this).index();
$( '.box' ).slickGoTo(indexVal);
indexVal=indexVal+1;
if(indexVal>2){
indexVal=1;
}
});
/*$('#trigger-button').click(function() {
var slider = $('.box');
slider[1].slickGoTo(parseInt(actIndex));
})*/
//Alternatively used
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"/></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css"/>
<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
<div class='div-1'>
Some content1
</div>
<div class='div-2'>
Some content2
</div>
</div>
Related
I am using a bit of jquery to hide some content on my webpage until a button is clicked. The jquery is hiding my content just fine but no matter how many times I click the button, it wont show back up again and I cant figure out what I have done wrong! Here is my code:
$(document).ready(function() {
$("#hidden-samples").hide();
$('.access-content').click(function() {
$('#hidden-samples').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-samples">Samples</div>
<a class="access-content">Show Samples</a>
Instead of show() use toggle() method. Please check the code below:
$(document).ready(function() {
$("#hidden-samples").hide();
$('.access-content').click(function() {
$('#hidden-samples').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-samples">Samples</div>
<a class="access-content">Show Samples</a>
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
I've found here, on Stackoverflow, function, which should toggle between multiple divs. I tried it in JSFiddle and it worked. But for me, on website, it doesn't work. I am really not good at javascript / jQuery, so I will be really glad for any help! And one more thing - is it possible to set link, that I just clicked on add class "active", that it would have underline or something, to see which section is selected??
Thanks!
-- FIDDLE HERE: https://jsfiddle.net/vkmw86bp/
Code is below.
HTML:
<div id="sluzby-nabidka" class="section">
<div class="sluz">div 1</div>
<div class="sluz">div 2</div>
<div class="sluz">div 3</div>
<div class="sluz">div 4</div>
<div class="sluz">div 5</div>
</div>
<div id="text-sluzba" class="section">
<div id="slidingDiv" class="slide-div">1</div>
<div id="slidingDiv_2" class="slide-div" style="display:none;">2</div>
<div id="slidingDiv_3" class="slide-div" style="display:none;">3</div>
<div id="slidingDiv_4" class="slide-div" style="display:none;">4</div>
<div id="slidingDiv_5" class="slide-div" style="display:none;">5</div>
</div>
JS:
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide',
slideDiv: '.slide-div'
};
var options = $.extend(defaults, options);
return this.each(function () {
$(this).click(function () {
$(options.slideDiv).hide();
// this var stores which button you've clicked
var toggleClick = $(this),
toggleDiv = $(this).data('slide-id');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).fadeToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
// if(options.changeText==0){
//$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//}
});
});
});
};
$('a').showHide({'slideDiv' : '.slide-div'});
Since I don't have enough reputation yet to add a comment, I'll speak to the issue and then ask for more information, if necessary.
When I loaded your JSFiddle, it didn't work because a JQuery library was not included in the fiddle itself. Once I switched the Frameworks & Extensions selection to any JQuery library, I hit Run and it worked. So this, IMO, means that your JQuery import is either in the wrong place in the HTML DOM, or you're not waiting for the DOM to be ready before hitting the code you provided. Som examples:
<html>
<head>
<title>
</title>
<!-- normally, JQuery script gets added here -->
<script type="javascript" src="path/to/jquery.js"></script>
</head>
<body>
<!-- then, import the above code here, either as a separate JS file or inside some <script></script> tags -->
<script type="javascript" src="path/to/showHide.js"></script>
</body>
</html>
Also, you should wrap the code you provided with:
$(document).ready(function() {
// Your code here
});
This will ensure that the JQuery code doesn't execute until the DOM is loaded. It seems to me that your code is running before the DOM is ready so the lookup isn't finding any anchor tags to attach the showHide functionality to when you make this call:
$('a').showHide({'slideDiv' : '.slide-div'});
Hope you well,
I'm trying to make something like this,
firstly, it'll show this
and after, clicking this "menu" image, It'll show something like this
So, I've made some container using <div> here:
<body>
//this is my menu container..
<div class="menu_pos_jquery">
<a class="btn1" href="#"><img src="logo/menu_logo.png" style="height: 70px; margin-left: 850px; margin-top: 15px;" onmousedown="return false;" alt="Menu" /></a>
</div>
//here is my another container which i would like to open using Jquery after click menu container..
<div class="menu_pos_jquery2">
</div>
</body>
So i did tried using this code:
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeIn();
});
});
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeOut;
});
});
</script>
But it's not working, When i run this program, but it shows full page like what i provide you a second pic .. And i want to show only first menu and after click menu it must suppose to show my another container, how to do it? pls, help.. and sorry for my bad English!! .. hope you understand my question.
You should change your code into this:
$(document).ready(function(){
$(".menu_pos_jquery2").fadeOut();
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeToggle("slow");
});
});
Maybe you want this
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery").fadeOut("normal",function(){
$(".menu_pos_jquery2").fadeIn();
});
});
});
You have registered two click event handlers to the same element, so when ever you click the button, both will be called. But only one should be called at a time.
Adding and removing a class to the .btn element would be a good option, as you can also specify CSS w.r.t the state. Please consider the following
$(document).ready(function(){
$(".btn1").click(function(){
var isMenuOpen = $(this).hasClass("open");
if(isMenuOpen){
//if already open, close it
$(this).removeClass("open");
$(".menu_pos_jquery2").fadeOut();
}else {
//if not open, open it now
$(this).addClass("open");
$(".menu_pos_jquery2").fadeIn();
}
});
});
can anyone help me out, been banging my head against a wall for 2 days! Trying to get iScroll to work with my phonegap/jqtouch app. Have tried all the suggestions I can find on the Internet, but all I get is either no scrolling or rubber banding so I can't view the bottom of the page.
My code in a nutshell is:
HTML header:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" src="myAppCode.js"></script>
<script type="text/javascript">
var myScroll;
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
}
function loaded()
{
myScroll = new iScroll('wrapper');
myScroll.refresh();
}
</script>
HTML (I've added the 'wrapper' and 'scroller' divs):
<!-- Options Page header bar-->
<div id="options_page">
<div class="toolbar">
<h1>Past Paper</h1>
<a class="button flip" href="#reset_page">Reset Stats</a>
</div>
<!-- why won't you scroll??? -->
<div id="wrapper">
<div id="scroller">
<!-- Stats section div - dynamically generated stats by refreshStats() -->
<div id="Stats"></div>
<h2>General</h2>
<ul class="rounded">
<li>Only new questions?<span class="toggle"><input type="checkbox" id="notSeen" /></span></li></ul>
<h2>Categories</h2>
<ul class="rounded">
<li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
<li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
<li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
<li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
</ul>
<div id="optionStartQuiz">
<ul><li class="whiteButton">Start!</li></ul>
</div>
</div>
</div>
</div>
myAppCode.js contains the refreshStats() function to display info in the Stats div above:
$(document).ready(function()
{
// load variables from local storage
loadLocalStorage();
// load the stats div
refreshStats();
// refresh scores everytime the main page is loaded
$('#main_page1').bind('pageAnimationStart', function(){
refreshStats();
});
});
function refreshStats()
{
// an HTML ul
var tempStats = '<h2>Current Stats</h2><ul class="rounded"><li>Questions completed<span style="float: right">' + OVERALL_questionsFirstTime + '/' + OVERALL_numberOfQuestions + '</span></li><li>Percentage correct<span style="float: right">' + percentageScore + '%</span></li></ul>';
// display me
$('#Stats').html(tempStats);
}
So basically I want to be able to scroll the stuff within the wrapper and scroller divs but can't get my head around it! Thanks, Nick
I was having the same problem. The div that was supposed to scroll would exhibit rubberbanding until I changed the orientation on the iphone. I tried the timeout methods from the iscroll doc page but nothing worked.
Using v4.0 beta4 I added
checkDOMChange: true
when creating my scroll wrapper. This works like a charm. Not really sure what the problem was but I am using this in a jQTouch page.
One thing to note, the checkDOMChange: is listed as being experimental...
hth
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
Hope this helps someone.
I was facing the same issue. My element used just to bounce and settle back.
I edited the scroll.js to make checkDOMChanges:true and it started working fine.
This is my solution.
$("a").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
The codes above assume that your iScroll variable is myScroll,
and the code is force your iScroll to refresh as you tap a link.
I'm not sure about iScroll4, but the original iScroll depended on CSS classes to scroll correctly - specifically, the wrapper needed to be positioned, and have overflow set - in the demo for iScroll4 I see they are still setting similar properties on the wrapper and the scroller:
http://www.cubiq.org/dropbox/iscroll4/examples/simple/
I'm not sure if you've already done this (and just didn't include the CSS) - but your code looks fine.
I've had inordinate troubles with iScroll (pre-iScroll4, haven't tested 4 yet) getting it to work with DIVs instead of UL lists. BUT... today I found a post in google groups (see reply by manmade at 9:59) where it is suggested to add a line:
that.refresh();
into the iScroll code around line 81. In the latest iScroll (v3.7.1), this line is added at line 85, within the case for "START_EVENT" just after the line:
that.touchStart(e);
I haven't analyzed exactly why it works, but it works for getting my div to scroll perfectly.