Evolve JS

Developer
Alyssa
Size
3,408 Kb
Views
10,120
  1. Evolve JS Previews
  2. Evolve JS HTML Codes
  3. Evolve JS CSS Codes
  4. Evolve JS JS Codes

How do I make an evolve js?

I did not write most of the JS for EvolveGame.com. So to give props, I've created this as a separate pen. . What is a evolve js? How do you make a evolve js? This script and codes were developed by Alyssa on 24 December 2022, Saturday.

Evolve JS Previews
IQ Test

Evolve JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Evolve JS</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Evolve JS - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";

Evolve JS - Script Codes JS Codes

$(function() { // NAVIGATION $('#primary-nav span, #primary-nav a, .subnav span, .subnav a').click(function(e){ e.preventDefault(); $(this).parent().siblings().removeClass('current') $('#preorder-btn').removeClass('current') $(this).parent().addClass('current') }); $('#preorder-btn').click(function(e){ e.preventDefault(); if ( $(this).hasClass('current') ) { $(this).removeClass('current') } else { $('#primary-nav > li').removeClass('current') $('.subnav > li').removeClass('current') $(this).addClass('current') } }); // dropdowns //default behavior: mouseover unless data-behavior="click" $.fn.dropdown = function(obj, name) { var name; var dropTimer; var trigger = $(this); // original trigger element var wrapper = $(this).parent();
//
// add .open to PARENT, not just .dropdown
// trigger.on('click',function(e){ if(trigger.data('behavior') == 'click') { e.preventDefault(); e.stopPropagation(); if(!wrapper.hasClass('disabled')) { //for preorder page if(!wrapper.hasClass('open')){ //toggle dropdown $('*[data-behavior="click"]').each(function(){ $(this).parents(".open:first").removeClass('open'); }).ready(function(){ wrapper.addClass('open'); }); //close all dropdowns then open } else { wrapper.removeClass('open'); //remove all dropdowns } } } }); wrapper.hover(function(e){ //on hover on var t = e.target; if(trigger.data('behavior') != 'click') { clearTimeout(dropTimer); if( wrapper.not('.open') ){ // It seems like element .ready() has been overwritten and does not work here on the community page. // The following lines of code are working. /* do not close persistent nav is using dropdowns from other navs */ if($(t).parents('ul').find('.stickydropdown').length < 1){ $("*[data-toggle]").parents(".open:not('.stickydropdown')").removeClass('open'); }else{ $("*[data-toggle]").parents('.open').removeClass('open'); } wrapper.addClass('open'); } } }, function(e){ //on hover off var that = e.target; if(trigger.data('behavior') != 'click') { dropTimer = setTimeout(function(){ wrapper.removeClass('open'); //if there is a stickydropdown element, show that if nothing else is open if(!$(that).hasClass('stickydropdown') && !$(that).parents('ul').children('li').hasClass('open')) { $(that).parents('ul').find('.stickydropdown').addClass('open'); } },600); } }); }; // end dropdown $('*[data-toggle="dropdown"]').each(function(){ $(this).dropdown(); }); // MEDIA window.Carousel = new Swipe(document.getElementById('Main-carousel'), { //startSlide: 0, speed: 400, continuous: false, disableScroll: false, stopPropagation: false, callback: function(pos) { //console.log(pos); if(pos == 0) { // console.log('disable prev'); $('.swipe-container .prev').addClass('disabled') $('.swipe-container .next').removeClass('disabled') } else if (pos == Carousel.getNumSlides() - 1 ) { // console.log('disable next'); $('.swipe-container .next').addClass('disabled') $('.swipe-container .prev').removeClass('disabled') } else { // console.log('enable next/prev'); $('.swipe-container .prev, .swipe-container .next').removeClass('disabled') } Thumbnails.slide(Math.floor(pos / 4)); $( "#Thumb-carousel .thumb").removeClass('current'); //one-liner $('.thumb[data-count='+pos+']').addClass('current') } }); //.prev, .next $('.swipe-container .next').click(function(e){ Carousel.next() }) $('.swipe-container .prev').click(function(e){ Carousel.prev() }) $('.swipe-container').on('mouseenter', function(){ if($('.slide').length > 1) { //only show navigation arrows if we have more than one slide $('.swipe-container nav').fadeIn(); } }); $('.swipe-container').on('mouseleave', function(){ $('.swipe-container nav').fadeOut(); }); window.Thumbnails = new Swipe(document.getElementById('Thumb-carousel'), { //startSlide: 0, speed: 400, continuous: false, disableScroll: false, stopPropagation: false, callback: function(pos) { // console.log(pos); if(pos == 0) { // console.log('disable prev'); $('#Thumb-carousel .prev').addClass('disabled') $('#Thumb-carousel .next').removeClass('disabled') } else if (pos == Thumbnails.getNumSlides() - 1 ) { // console.log('disable next'); $('#Thumb-carousel .next').addClass('disabled') $('#Thumb-carousel .prev').removeClass('disabled') } else { console.log('enable next/prev'); //$('#Thumb-carousel .prev, .swipe-container .next').removeClass('disabled') } $('.dots li').removeClass('current'); $('.dots li').eq(pos).addClass('current'); } }); $('.thumb').click(function(e){ e.preventDefault(); console.log($(this).data('count')) Carousel.slide($(this).data('count')) }); //.prev, .next $('#Thumb-carousel .next').click(function(e){ Thumbnails.next() }) $('#Thumb-carousel .prev').click(function(e){ Thumbnails.prev() }) $('.dots li').click(function(){ Thumbnails.slide($(this).index()) }); // end MEDIA -----------------------------------------------------------------
})
Evolve JS - Script Codes
Evolve JS - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded December 24, 2022
Rating 3
Size 3,408 Kb
Views 10,120
Do you need developer help for Evolve JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Name
Huddle Grid-Detail View
Evolve Error Pages
Huddle Subway Map
Wire up a Backend
Strava JS API
CSS Patterns
360 Image Slider
Sass Photoshop to CSS letter-spacing function
Evolve Game
Shadow Dom with Polymer
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!