I have multiple Buttons (12 at the moment), all have the same id with following letter.
each btn fire up a same function but different ID container.
here is the HTML:
<!----the btnS-->
<div id="projectA"></div>
<div id="projectB"></div>
<div id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p class="text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p class="text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p class="text">close</p>
</div>
</div>
I have a code that working but it contains more than 500 lines...
here is the JS:
$(document).ready(function () {
$("#projectA").on("click", function () {
$(".content_projectA").slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("#closeA").on("click", function () {
$(".content_projectA").hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
//---- B -------//
$(document).ready(function () {
$("#projectB").on("click", function () {
$(".content_projectB").slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("#closeB").on("click", function () {
$(".content_projectB").hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
//---- C -------//
$(document).ready(function () {
$("#projectC").on("click", function () {
$(".content_projectC").slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("#closeC").on("click", function () {
$(".content_projectC").hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
I am looking for a way to short it up.
here is the code on fiddle- http://jsfiddle.net/mirifarr/6j060L2k/
Many thanks
please have a look here:
http://jsfiddle.net/6j060L2k/4/
<!----the btnS-->
<div class="project" id="projectA"></div>
<div class="project" id="projectB"></div>
<div class="project" id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p id="A" class="close text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p id="B" class="close text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p id="C" class=" close text">close</p>
</div>
</div>
JS:
$(document).ready(function () {
$(".project").on("click", function () {
$(".content_"+$(this).attr('id')).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$(".close").on("click", function () {
//$(".content_projectA").hide();
$(".content_project"+$(this).attr('id')).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
Use following Jquery selector
Selector On Starts With
And Update your JS code like:
$(document).ready(function () {
//// Project
$("[id^='project']").click(function () {
var char = $(this).attr('id').substring(7);
$(".content_project" + char).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
///// Close Div
$("[id^='close']").click(function () {
var char = $(this).attr('id').substring(5);
$(".content_project" + char).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
Check Updated Fiddle
Use jQuery starts with selector ^. Retrieve the last character of the clicked div and use to scroll to target div.
$("[id^=project]").on("click", function () {
var id = this.id,
letter = id.substr(id.length - 1);
});
Use the letter to target div with class content_project. Do the same for close button/div.
The fiddle looks better than code snippet below.
$(document).ready(function () {
$("[id^=project]").on("click", function () {
var id = this.id,
letter = id.substr(id.length - 1);
$(".content_project" + letter).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("[id^=close]").on("click", function () {
var id = this.id,
letter = id.substr(id.length - 1);
$(".content_project" + letter).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
#projectA {
width: 200px;
height: 200px;
background-color: #0f36ca;
cursor: pointer;
}
#projectB {
width: 200px;
height: 200px;
background-color: #0ff5ca;
cursor: pointer;
}
#projectC {
width: 200px;
height: 200px;
background-color: #6f36ca;
cursor: pointer;
}
.content_projectA {
width: 100%;
height: 100%;
position: absolute;
background-color: #0f36ca;
display: none;
}
.content_projectB {
width: 100%;
height: 100%;
position: absolute;
background-color: #0ff5ca;
display: none;
}
.content_projectC {
width: 100%;
height: 100%;
position: absolute;
background-color: #6f36ca;
display: none;
}
.text {
color: #fff;
margin: auto;
}
#closeA {
width: 100px;
height: 100px;
position: absolute;
background-color: #000;
cursor: pointer;
}
#closeB {
width: 100px;
height: 100px;
background-color: #000;
cursor: pointer;
}
#closeC {
width: 100px;
height: 100px;
background-color: #000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!----the btnS-->
<div id="projectA"></div>
<div id="projectB"></div>
<div id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p class="text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p class="text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p class="text">close</p>
</div>
</div>
Well, I didn't change the CSS, so i won't post it again.
js:
function openContents(classChar) {
//this don't need to be inside an onclick event because this event is already triggered when accessing this function
$(".content_project"+classChar).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
//this one continues to bind the event to the close div
$("#close"+classChar).on("click", function () {
$(".content_project"+classChar).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
}
//on document ready, execute init()
function init() {
/*
* What I did here was bind a click event to all three divs, using a class to identify them, instead of picking one by one.
* Then store id value of clicked div in a variable and sending the last char as parameter to openContents function.
*/
$(".projects").on("click",function() {
var idValue = $(this).attr('id');
openContents(idValue.substr(idValue.length-1));
});
}
$(document).ready(init);
html (just added classes):
<!----the btnS-->
<div id="projectA" class="projects"></div>
<div id="projectB" class="projects"></div>
<div id="projectC" class="projects"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p class="text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p class="text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p class="text">close</p>
</div>
</div>
http://jsfiddle.net/6j060L2k/9/
Related
I'm trying to simulate scroll using jquery and I technically can, It just feels really rough and awkward.
JS:
$(document).ready(function(){
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta / 120 > 0) {
movePage();
}
});
var page1top = 0;
function movePage() {
page1top = page1top - 1;
// page1 is the page that i want to move up when people scroll down.
$('#page1').css('top': page1top + '%');
}
});
HTML:
<div id='container'>
<div id='page1'></div>
</div>
CSS:
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -100;
}
#page1 {
width: 100%;
height: 500%;
z-index: 0;
}
I'm just wondering how I would make this smooth. No plugins please, thanks.
You're looking for jquery animate. Check fiddle for demonstration.
$('.to-target').click(function(){
$('html, body').animate({
scrollTop: $("#target").offset().top
});
});
.box {
width: 100vw;
height: 100vh;
}
.long {
background-color: aqua;
}
.short {
background-color: beige;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="long box">
<button class="to-target">Go to Target</button>
</div>
<div id="target" class="short box">
</div>
</div>
Replace .css() with .animate() and scroll to the selector you want smoothly:
$target = $('#someEl');
$('html, body').animate({
scrollTop: $target.offset().top
}, 200);
Basically I have 4 images and when I click on one, information about that image should pop up with info about it.
How could I achieve that with jquery? Do I use jQuery for it?
Could someone direct me with some examples I could follow?
Thanks all
What you want is a popup when clicking ? See how to use JQuery with the click event, that's it. Something like
$( "#IdPicture" ).click(function() {
alert( "Here are the different information about the picture" );
});
You can also add an onClick event to the picture using JS.
You can also use CSS using #IdPicture:active
You choose
Seems like you're looking for something like fancybox. Its quite easy to use. Just browse through the link I provided, in my opinion the examples are quite straight forward. There is also a release based on jQuery.
I've created a JSFiddle
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Please have a look, this will help you.
You can do it on hover too
$(document).ready(function() {
$('#box1').hover(function() {
$('#info1').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info1').stop().animate({
opacity: 0
}, 300);
});
$('#box2').hover(function() {
$('#info2').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info2').stop().animate({
opacity: 0
}, 300);
});
$('#box3').hover(function() {
$('#info3').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info3').stop().animate({
opacity: 0
}, 300);
});
$('#box4').hover(function() {
$('#info4').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info4').stop().animate({
opacity: 0
}, 300);
});
});
#box1 {
width: 150px;
height: 150px;
background: blue;
}
#box2 {
width: 150px;
height: 150px;
background: red;
}
#box3 {
width: 150px;
height: 150px;
background: green;
}
#box4 {
width: 150px;
height: 150px;
background: orange;
}
#info1 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info2 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info3 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info4 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="box1">
<div id="info1">
<p>
<ul>
<li>cool info</li>
<li>even cooler info</li>
<li>too cool for school info</li>
</ul>
</p>
</div>
</div>
<div id="box2">
<div id="info2">
<p>
<ul>
<li>balblabala</li>
<li>this is interesting</li>
<li>of course it is</li>
</ul>
</p>
</div>
</div>
<div id="box3">
<div id="info3">
<p>
<ul>
<li>hello world</li>
<li>I came to rule the planet</li>
<li>just kidding</li>
</ul>
</p>
</div>
</div>
<div id="box4">
<div id="info4">
<p>
<ul>
<li>no one will read this anyway</li>
<li>this is not fun anymore</li>
<li>finally</li>
</ul>
</p>
</div>
</div>
</body>
And of couse with help of css you can position and format the info containers the way you want.
I have items that are created from the backend, I do not have an exact value, the pagination of the items have to be created starting quantity of item.
If have 16 itens the paginations is: 1 - 2 - 3 - 4
The other problem is the scroll, need to go up or down depending on which page number you are.
jsfiddle
$('.pagination .page1').on('click', function(e){
event.preventDefault();
$('.container').animate({
scrollTop: '-=185'
});
});
$('.pagination .page2').on('click', function(e){
event.preventDefault();
$('.container').animate({
scrollTop: '+=185'
});
});
I create a more general pager:
$('.pagination li').on('click', function (e) {
event.preventDefault();
var container = $(this).parent().prev();
var pagerNum = parseInt($(this).text()) > 1 ? parseInt($(this).text()) : 0;
var scrollTo = $('.item').eq((pagerNum * pagerNum));
$(this).parent().prev().animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
});
.container {
background: red;
width: 300px;
height: 185px;
overflow: hidden;
}
.item {
width: 100%;
background: blue;
height: 40px;
margin: 5px 0;
}
ul {
padding: 0;
margin: 0;
width: 300px;
text-align: center;
}
ul li {
display: inline-block;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
<div class="item">item11</div>
<div class="item">item12</div>
</div>
<ul class="pagination">
<li>1
</li>
<li>2
</li>
<li>3
</li>
</ul>
I want to create scroll to section like nexus5 website https://www.google.com/nexus/5/
i.e. one button doing all. Click on one button it takes you down to different sections and when it reaches last ID it scrolls all the way up back.
JS
if(window.location.hash !=""){
var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+"";
var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+window.location.hash+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".previous").attr("data-target",scrollIdPrev);
$(".next").attr("data-target",scrollIdNext);
});
}
$('.next').click(function(){
var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+scrollId+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".previous").attr("data-target",scrollId);
$(".next").attr("data-target",window.location.hash);
});
});
$('.previous').click(function(){
var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+scrollId+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".next").attr("data-target",scrollId);
$(".previous").attr("data-target",window.location.hash);
});
});
HTML
<div class="move">
<div class="previous" data-target="#one">UP</div>
<div class="next" data-target="#one">DOWN</div>
</div>
<section class="slide" id="one">First</section>
<section class="slide" id="two">Second</section>
<section class="slide" id="three">Third</section>
<section class="slide" id="four">Fourth</section>
CSS
section{
height: 400px;
border: 1px solid black;
}
.move{
position: fixed;
bottom: 0;
right: 0;
}
.previous, .next
{
background: red;
height: 20px;
width: 70px;
margin-bottom: 5px;
cursor: pointer;
}
Fiddle
I have achieved some functionality but not all.
Just use the scrollIntoView() function everytime you want to scroll to the next element.
Just have an array of elements you want to go to and just save the pointer in a global variable.
window.scroll=0;
window.navigationpoints=['id1','id2','id3'];
$('.next').click(function(){
if(window.scroll<window.navigationpoints.length){
document.getElementById(window.navigationpoints[window.scroll]).scrollIntoView();
window.scroll++;
}else {
document.getElementById(window.navigationpoints[0]).scrollIntoView();
window.scroll=1;
}
});
I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks
See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}
The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});