jQuery ScrollTo mutliple div using next/previous buttons - javascript

HTML structure
<div class="main">
<div class="boxes">Content here</div>
<div class="boxes">Content here</div>
<div class="boxes">Content here</div>
<div class="boxes">Content here</div>
<div class="boxes">Content here</div>
<div class="nav">
</div>
</div>
I want the next and previous button to scroll through the boxes when click.
Found this on fiddle -> http://jsfiddle.net/FWXc5/
but I need to have next & prev buttons only instead of corresponding items/buttons for each box.
Any help would be greatly appreciated,
Cheers

By using jQuery next() and prev() methods you can achieve this.
Try with the below code
HTML
<div id="home-block">
<div class="current">Content Goes here</div>
<div>A box of content</div>
<div>Content</div>
<div>More content...</div>
</div>
<div id="nav-right">
<input type="button" value="Prev" id="prev" />
<input type="button" value="Next" id="Next" />
</div>
CSS
#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}
.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}
#nav-right{
position: fixed;
right: 15px;
top: 35%;
}
.current {
color: red;
}
jQuery Code
$('#nav-right input[type=button]').click(function(e) {
if($(this).attr('id') == 'prev') {
$(".current").prev().addClass("current");
$(".current").eq(1).removeClass("current");
$('html, body').animate({
scrollTop: $(".current").offset().top
}, 250);
}else if($(this).attr('id') == 'Next') {
$(".current").next().addClass("current");
$(".current").eq(0).removeClass("current");
$('html, body').animate({
scrollTop: $(".current").offset().top
}, 250);
}
});
Demo: http://jsfiddle.net/31bb118w/

You can use the nextSibling and previousSibling properties.

Related

Mouseover on document for find a classes

I have a code like this, with 2 different divs:
function mouseoverCheck(text) {
$(document).on('mousemove', function(e) {
$('#tooltip').show().html(text)
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
}
function hover() {
$(document).on('mouseover', function(event) {
var $target = $(event.target);
if ($target.closest(".container1").length) {
mouseoverCheck('Container1 found!')
event.stopPropagation();
} else {
mouseoverCheck('None')
event.stopPropagation();
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
I need to show mi tooltip with text if i pass the mouse over my div , but when i pass over my .container1, it doesn't works good, because it show me 'Container1 found!', alternate by 'None'.
Have you got any other solution?
Thank you!
Try this code .. Is this what you want??
$('.tooltip_show').on('mousemove' , function(e) {
$('#tooltip').html($(this).find('h1').text());
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
$('div :not(.tooltip_show)').on('mouseover' , function(e) {
$('#tooltip').hide().html('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="tooltip_show container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
Add tooltip_show class to the container you want to show tooltip

Displaying div when selecting certain area, then hiding div when clicking body jQuery

In my navigation I have a div. Selecting this div allows another div to appear with options. I would like for the user to be able to select outside of the div and that would close the div, as well as selecting the div that opened it, and the user can obviously re-open this. Think of it as the Facebook navigation dropdown. Just trying to replicate that behavior.
HTML
<div class="headRight">
<ul>
<li><a id="settings"><div id="here">Account Settings</div></a></li>
</ul>
</div>
<div class="navi">
<ul>
<li><a><span>Signout</span></a>
</li>
</ul>
</div>
CSS
#here{
background-image: url(image.png);background-repeat: no-repeat;background-size: 10px;background-position: 4px 5px;opacity: 1;display: inline-block;height: 15px;overflow: hidden;text-indent: 534px;white-space: nowrap;width: 20px;top: 2px;left: 12px;margin-left: -9px;position: relative;
}
#here.active{
background-image: url(someimeage.png);background-repeat: no-repeat;background-size: 10px;background-position: 4px 5px;opacity: 1;display: inline-block;height: 15px;overflow: hidden;text-indent: 534px;white-space: nowrap;width: 20px;top: 2px;left: 12px;margin-left: -9px;position: relative;
}
.navi{
background: white;width: 200px;box-shadow:0px 1px 8px 0px rgba(0, 0, 0, .3);height: 122px;float: right;left: 759px;top: 45px;position: absolute; display:none;
}
JS
$j("#settings").click(function(e){
if($j("#here").hasClass("active")){
$j("#here").removeClass("active")
$j(".navi").hide();
}
else{
$j("#here").addClass("active")
$j(".navi").show();
}
});
$j(document).click(function(e) {
if (e.target.className !== "navi" && !$j(".navi").find(e.target).length && $j('.navi').css('display') == 'block') {
$j(".navi").hide();
}
})
A simple way is to add click listeners to the said div and the body
$("#first").click(function (e) {
e.stopPropagation();
$("#second").show();
});
$("body").click(function (e) {
$("#second").hide();
})
html, body {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" style="width: 200px; height: 300px; border: 3px solid black">
</div>
<div id="second" style="width: 200px; height: 300px; border: 3px solid black; display: none">
</div>
However, this one uses event.stopPropagation. If for some reason you don't want to stop propagation because it's nested inside another element that you want to receive events then you can check where the event was called instead and check if it was body or something else.
$("#first").click(function (e) {
$("#second").show();
});
$("body").click(function (e) {
console.log(event.target.nodeName);
if (event.target.nodeName != "BODY")
return
$("#second").hide();
})
html, body {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" style="width: 200px; height: 300px; border: 3px solid black">
</div>
<div id="second" style="width: 200px; height: 300px; border: 3px solid black; display: none">
</div>

How to make slideToggle dynamic in JQuery

I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});
Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});
Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});
Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>

Issue getting fadeIn element to raise

I have four boxes that are displayed in a single row (in a larger viewport). The boxes then fadeIn will going up the page. My issue is I cannot figure out how to get these boxes to go up the page without affecting the parent div and the sections of code below it (#contact-social). I want the other to divs to stay in their finished place that they are supposed to be in (after the boxes have went up the page).
How can I only change the positioning of the boxes as they go up the page without affecting anything else?
The position I have in my
function contactBox() {
$('.contact-connect-box').delay(600).animate({
'opacity' : 1,
'margin' : "0px 20px"
}, 800);
};
contactBox();
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
}
#contact-social {
width: 100%;
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>
To prevent other elements move - making a margin top smaller, you should also increase the bottom margin respectively...
Or, instead of animating the margin, add a CSS class that will transition your styles :
function contactBox() {
$('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
transition:2s; -webkit-transition:2s; /* ADD THIS */
}
.contact-connect-box.fadeShow{ /* AND ALL OF THIS */
opacity:1;
transform:translateY(-30px); -webkit-transform:translateY(-30px);
}
#contact-social {
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>

Rendering two div in a div horizantally

I have a parent div having two child divs which are in horizantal ,Now I want to add other div such that the pagination should come.
Here is the code.
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Here, If i add other div to 'parent',It will append at last,but should not be shown and pagination should come.
Using floats, I am making the div's horizantal.I have to show only two div's,After that pagination should come.
This is just a DEMO:
HTML:
<div id="parent">
<div id="wrapper">
<div id="left">window 1</div>
<div id="right">window 2</div>
</div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>
CSS:
#parent {
width: 850px;
overflow: hidden;
padding: 10px;
height: 320px;
border: 1px solid #f00
}
#wrapper div {
width: 400px;
border: 1px solid #ccc;
height: 300px;
display:inline-block;
margin: 10px
}
#paginator {
margin: 10px;
display: block
}
#paginator span {
width: 30px;
padding: 5px;
margin: 10px;
background: #1f1f1f;
color: #fff;
}
JQUERY:
$(function() {
$('#next').click(function() {
$('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
$('#wrapper').animate({
marginLeft: '-=860px'
},
500, 'linear');
});
$('#prev').click(function() {
$('#wrapper').animate({
marginLeft: '+=860px'
},
500, 'linear');
});
});
Not sure I understand your question, but I'll give it a shot...
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
<div style="clear:both"></div>
<div id="pagination"></div>
... is this what you mean to do?

Categories