1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Buying Simple JavaScript Work - $15

Discussion in 'Programming' started by Borduhh, Apr 27, 2015.

  1. #1
    Hi All,

    I need a quick thing done in JavaScript. It should not take long at all. I need these two edited for correct syntax/proper code use and combined together.

    This is a combination of JQuery and JavaScript (as you might be able to tell I suck at it):

    window.onload =  function(){
    
        var body = document.body,
            mask = document.createElement("div"),
            wrapper = document.querySelector( ".wrapper" )
        ;
        mask.className = "mask";
    
        jQuery("button.menu-toggle").click( function(){
            classie.add( body, activeID );
            classie.add( body, "masked" );
            wrapper.appendChild(mask);
        } );
    
        mask.addEventListener( "click", function(){
            classie.remove( body, activeID );
            classie.remove( body, "masked" );
            activeID = "";
            wrapper.removeChild(mask);
        } );
    };
    Code (JavaScript):
    As well I am looking to combine this into that code as well:
    jQuery(document).ready(function($){
       
        var maskWhite =  ("<div class='mask mask-white js-modal-close'></div>"),
        modalBox;
       
          $('a[data-popup-id]').click(function(e) {
            e.preventDefault();
            $(".wrapper").append(maskWhite);
            $("body").addClass("masked");
            $(".mask").fadeTo(500, 1);
            //$(".js-modalbox").fadeIn(500);
            modalBox = $(this).attr('data-popup-id');
            $('#'+modalBox).fadeIn($(this).data());
          }); 
         
         
        $(".js-modal-close ").click(function(e) {
            $(".modal-box, .modal-overlay").fadeOut(500, function() {
                $(".modal-overlay").remove();
            });
            $("body").addClass("popup-open");
        });
        
        $(window).resize(function() {
          $(".modal-box").css({
            top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
            left: ($(window).width() - $(".modal-box").outerWidth()) / 2
          });
        });
        
        $(window).resize();
    });
    Code (JavaScript):
    The first script is a mobile-menu that slides in from the left and the second is supposed to be a simple modal box that pops up as needed for different events (hence the [data-popup-id]). The problem I am having is that when I open the mask from the second block of code and click on it, it for some reason does not close.

    The first person that can correctly reply to this thread with the correct syntax, combined code in one language (I am assuming Javascript would be easiest) that will allow both to work will be given the $15 via paypal. I will be checking each entry in order.

    Best Wishes.
     
    Borduhh, Apr 27, 2015 IP
  2. CodeBeast

    CodeBeast Well-Known Member

    Messages:
    463
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    155
    As Seller:
    100% - 0
    As Buyer:
    50.0% - 1
    #2
    Maybe it's not just a matter of script. If you PM me your HTML/CSS I will be able to fix the issue in about 15 minutes.
     
    CodeBeast, Apr 27, 2015 IP
  3. Dangy

    Dangy Well-Known Member

    Messages:
    841
    Likes Received:
    25
    Best Answers:
    2
    Trophy Points:
    155
    As Seller:
    100% - 1
    As Buyer:
    100% - 0
    #3
    $(".js-modal-close ").click(function(e) {
            $(".modal-box, .modal-overlay").fadeOut(500, function() {
                $(".modal-overlay").remove();
            });
            $("body").addClass("popup-open");
        });
    Code (markup):
    your missing a remove here.

    this should solve your problem.
    $(".js-modal-close ").click(function(e) {
            $(".mask-white").remove();
            $(".modal-box, .modal-overlay").fadeOut(500, function() {
                $(".modal-overlay").remove();
            });
            $("body").addClass("popup-open");
        });
    Code (markup):
     
    Dangy, Apr 28, 2015 IP
  4. Borduhh

    Borduhh Well-Known Member

    Messages:
    767
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    150
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    So I updated the code to this:

    jQuery(document).ready(function($){
       
        var maskWhite =  ("<div class='mask mask-white js-modal-close'></div>"),
        modalBox;
       
          $('a[data-popup-id]').click(function(e) {
            e.preventDefault();
            $(".wrapper").append(maskWhite);
            $("body").addClass("popup-open");
            $(".mask").fadeTo(500, 1);
            //$(".js-modalbox").fadeIn(500);
            modalBox = $(this).attr('data-popup-id');
            $('#'+modalBox).fadeIn($(this).data());
          }); 
         
         
        $(".js-modal-close, .mask").click(function(e) {
            $(".modal-box, .mask").fadeOut(500, function() {
                $(".mask").remove();
            });
            $("body").removeClass("popup-open");
        });
        
        $(window).resize(function() {
          $(".modal-box").css({
            top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
            left: ($(window).width() - $(".modal-box").outerWidth()) / 2
          });
        });
        
        $(window).resize();
    });
    Code (JavaScript):
    Still nothing. It opens just fine. Just never closes.
     
    Borduhh, Apr 28, 2015 IP