Navigate through various child divs - javascript

Basically I am working on website similar to http://keepearthquakesweird.com/.
I am not good in jQuery except the basic stuff but have created the layout in html5 and css3. The problem I am having is if you see on the website after clicking the enter link it takes you to a grid.I have created exact grid and able to pull up various div content when user clicks on various links by the following approach (you can see my code below) using css3 + jquery. So the question is that is there a better approach for pulling up the divs when user click on the link. the main question is I need the next previous button as in the website mentioned when you click any alphabet, so you can navigate through the description divs.
Looking for some honest advice and solution :)
$('a#alpha').click(function(e) {
e.preventDefault();
var id = $(this).attr('data-id');
$("#container > div").each(function() {
if ($(this).attr('data-id') == id) {
$(this).toggleClass('show-content');
}
});
});
$("a#cls").click(function() {
$("#container > div").each(function() {
if ($(this).hasClass('show-content')) {
$(this).removeClass('show-content');
}
})
})
#container div {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
transform: translateY(100%);
-webkit-transform: -webkit-translateY(100%);
-moz-transform: -moz-translateY(100%);
-o-transform: -o-translateY(100%);
transition: .4s ease-in all;
-webkit-transition: .4s ease-in all;
-moz-transition: .4s ease-in all;
z-index: 6;
opacity: 1;
}
.closeBtn {
position: fixed;
top: 20px;
right: 20px;
font-size: 30px;
color: #fff;
}
#content-1 {
background: #333;
}
#content-2 {
background: #ff0;
}
#content-3 {
background: #f00;
}
.show-content {
opacity: 1 !important;
z-index: 5 !important;
transform: translateY(0%) !important;
-webkit-transform: -webkit-translateY(0%) !important;
-moz-transform: -moz-translateY(0%) !important;
-o-transform: -o-translateY(0%) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Link to pull div
</li>
<li>
Link to pull div
</li>
<li>
Link to pull div
</li>
</ul>
<div id="container">
<div id="content-1" data-id="01">
X
<h1>TITLE</h1>
</div>
<div id="content-2" data-id="02">
X
<h1>TITLE</h1>
</div>
<div id="content-3" data-id="03">
X
<h1>TITLE</h1>
</div>
</div>

Related

Prevent from Downloading same file multiple times

I'm using below script to show loading gif while the file is ready to download and then Once it is done , it hides after couple of seconds.
But I Only want to dowanload the file once, but when I click the link it download the same file twice. I found the code somewhere in forums, so I really don't know how to prevent it from running the url twice.
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
setTimeout(function() {
clickedLink.html(originalHtml);
window.location = destination;
},2500);
$('<iframe>').hide().appendTo('body').load(function() {
window.location =sagar;
}).attr('sagar', sagar);
});
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: darkblue;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
#-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
#keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; ">
<ol class="tree">
<li>
<label for="folder1">First Semester</label> <input type="checkbox" id="folder1" />
<ol>
<li>
<label for="subfolder11">Classical Mechanics </label> <input type="checkbox" id="subfolder11" />
<ol>
<li class="file">Solutions_to_Problems_in_Goldstein)</li>
<li class="file">Goldstein Solution Chapter 8 Soln</li>
<li class="file">Goldstein Chapter 9 Soln</li>
<li class="file">Numericals Jacobi Angle ( Hints )</li>
<li class="file">Angle Jacobi Numericals ( Complete Solution)</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
Any help would be really appreciated.
It seems you are calling window.location = destination; (which is triggering the browser to download the file) twice, inside that setTimeout function and after a hidden iframe is loaded, which I think is the correct place.
Just stop calling setTimeout like below:
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
$('<iframe>').hide().appendTo('body').load(function() {
window.location = destination;
clickedLink.html(originalHtml);
}).attr('src', destination);
});

Making a pop up modal using dynamically created buttons / divs

I'm currently building a sort of image selection and would like to make it so when clicking the magnifying glass icon on the images it pops up a modal showing the whole picture, title and description. I have one problem though, all of my info is being pulled in from Google Sheets using Sheetrock.js and has a template with Handlebars.js.
// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1it6QkBRPDsIqYOtr_UbFFmHBEADVkKaKjdghLSX5d3E/edit#gid=0';
// Compile Handlebars template for team RBI leaders.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());
// Load top five team RBI leaders.
$('#image-grid').sheetrock({
url: mySpreadsheet,
rowHandler: RBITemplate
});
I've had my concept sort of working, except when I call {{cells.ImageURL}} it likes to only show the first image(cell) in the pop up. Which doesn't make sense since it just shows all the queries on the load up of the page in the #image-grid container. I want the modal to have an x button in the top right, as well as, clicking on the fullscreen modal will close it.
Here is what I have built to make the modal:
HTML
<div class="modal">
<div class="overlay"></div>
<div class="modal__contents modal--transition">
<a class="modal__close" href="#">X</a>
<img src="{{cells.ImageURL}}">
</div>
</div>
Javascript (jQuery)
$(document).on('click', "a.btn", function() {
$('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function() {
$('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function() {
$('.modal').toggleClass('modal--show');
});
CSS
.overlay {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
visibility: hidden;
}
.modal__contents {
background: white;
width: 32rem;
position: absolute;
left: 50%;
margin-left: -16rem;
top: 6rem;
min-height: 32rem;
}
.modal__contents h1 {
margin: 0;
padding: 0;
line-height: 32rem;
text-align: center;
display: block;
}
.modal__close {
position: absolute;
right: 2rem;
top: 2rem;
text-decoration: none;
display: none;
}
.modal--show {
visibility: visible;
width: 100%;
position: absolute !important;
z-index: 50;
opacity: 1;
height: 100%;
}
.modal--transition {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal--show .modal--transition {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
I think what is throwing this off is since the button to activate this is generated by the handlebar.js template, it is copied and made dynamically and can't seem to single out the one that is being clicked?
Is there a way I can get this to work so it pulls the {{cells.ImageURL}} of the same cell where it was clicked on?
Here is a JSFiddle to show you what I mean.
$(document).on('click', "a.btn", function() {
$('.modal img').prop('src', $(this).data('img'));
$('.modal').toggleClass('modal--show');
});
although that means that every button would need a data-img="" attribute with the corresponding image or if the image is within the a element you could use
$(document).on('click', "a.btn", function() {
$('.modal img').prop('src', $(this).find('img').prop('src'));
$('.modal').toggleClass('modal--show');
});

Triggering an animation on a div by clicking a button using addClass/removeClass with Javascript

So I'm trying to trigger an animation by clicking on a button using addClass and removeClass with Javascript.
I'm not bad at HTML/CSS but I only strating to learn Javascript by editing snipets.
So here's mine can you tell me why my div won't rotate when I click the black button ?
Thanks in advance !
<button class="menu-circle"></button>
<img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />
.menu-circle {
height: 100px;
width: 100px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: .1s;
z-index: 100;
border: none;
}
.menu-circle:hover {
height: 115px;
width: 115px;
}
.menu-circle:active {
height: 100px;
width: 100px;
}
.imgblock {
display: block;
margin: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
$('.menu-circle').on('click', function(){
$('img .imgblock').addClass('rotate');
$('img .imgblock .rotate').removeClass('rotate');
});
WORKING FIDDLE :
http://jsfiddle.net/leokaj/rv5PR/366/
You have several problems with your fiddle:
Wrong class names: in js $('.menucircle') and in html - class="menu-circle"
You don't need space between img and class in jquery selector $('img .imgblock') - space means you're looking for .imgblock class inside the img tag (which is impossible).
.current class is not defined nor in html, nor in css, but appear in js
Here's fiddle where I fixed the problems and which works: DEMO
JS:
$('.menu-circle').on('click', function(){
var $img = $('.crossRotate');
if (!$img.hasClass('rotate')) {
$img.addClass('rotate');
} else {
$img.removeClass('rotate');
}
});
You ve to manage this with 2 different events to animate the image
$('.menu-circle').on('mousedown', function(){
$('.imgblock').addClass('rotate');
});
$('.menu-circle').on('mouseup', function(){
$('.imgblock').removeClass('rotate');
});
fiddle http://jsfiddle.net/3ehcuky5/
if you want to keep the image rotated or not the #alynioke solution is good
As you seem to be trying to make it jiggle a bit in animation and you're using jQuery already then I would say you need to look at the .animate() method of teh jQuery library
https://api.jquery.com/animate/

Smooth Transition On Hovering

I've been working on finding a way to change out this <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" by using a :hover with an image called repair_h.svg. What I initially was doing was placing a :hover on #repair like so #repair :hover and giving repair a background-image:url but this was not working and I think there are a few reasons why.
That was my initial process...Since that did not work I did some research on how to achieve this correctly and found a way to achieve it with JS. Which is way less hackie than some other css and html solutions I was looking into.
Using JS ended up working great for the purpose of what I need done although there's one piece that I'd like to add to this and I'm not quite sure how to do it.
I'd like to add a smooth transition between the image's when hovered on.
LINK TO MY CURRENT BUILD http://kapena.github.io/pp_web/
The icon I am working on here is called Repair Services
HTML
<li>
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
onmouseover="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg'"
onmouseout="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg'" border="0" alt="About Plumbing Repairs in Honolulu Hawaii">
</img>
</a>
</li>
JS
function hover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg');
}
function unhover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg');
Also if any of you have any suggestions on away to perform a this entire task without JS and entirely with HTML and CSS then I'd be open to seeing how you'd do it :)
Thanks
You can do something like this with markup and css only:
HTML:
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0"
alt="About Plumbing Repairs in Honolulu Hawaii" />
</a>
CSS:
a {
background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
width:150px;
margin:0;
padding:0;
float:left;
}
a img {
opacity:1;
transition:opacity .5s;
float:left;
}
a:hover img {
opacity:0;
transition:opacity .5s;
}
Demo
In CSS you cannot transition/animate directly between two images becuase CSS is incapable of interpolating keyframes between two none value-scale values.
That said, there are a few approaches using only CSS.
If you need to keep the same element/id the images are being transitioned on, the only approach would be to replace the image with a non-replaced element so you can use pseudo elements, then do e.g.:
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
display: inline-block;
height: 300px;
width: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
span:before {
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}
span:after {
opacity: 1;
transition: opacity 200ms ease-in;
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}
span:hover:after {
opacity: 0;
}
<span></span>
Alternatively if this isnt a consideration, a common approach is to overlap two images and transition the opacity of the correct image on hover, revealing the image underneath.
div:hover img:last-of-type {
opacity: 1;
transition: opacity 200ms ease-in;
}
div:hover img:last-of-type {
opacity: 0;
}
div img {
position: absolute;
top: 0;
left: 0;
}
<div>
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" />
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg" />
</div>
If you remove the blue background from the image(s) and keep it transparent, you can do this easily with css:
<style type="text/css">
ul {
list-style: none;
}
a {
display: inline-block;
width: 230px;
height: 240px;
background-color: #8bdafc;
/* background-image: url(/path/to/img/with-transparent-bg.svg) */
background-repeat: no-repeat;
-webkit-transition: background-color .3s;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
a:hover {
background-color: #4fc3fb;
}
</style>
<ul>
<li>
</li>
</ul>
Don't set an src attribute on the img
<img src='' width=500 height=500>
img{
background: url("src1");
}
img:hover{
background: url("src2");
}

how to make transition of stacked Divs. in JavaScript

i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?
Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div

Categories

Resources