Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    1
    Member #
    51194

    First time using Javascript / Jquery

    I need some help implementing my javascript using jquery for event binding. The boxes I create below appears and is clickable but the "info box" never gets executed it seems.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <title>Test</title>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $('.show-infobox').on('click', function() {
        // Hide all infoboxes to prevent multiple showing at once
        $('.infobox').addClass('hidden');
        
        // Show infobox background
        $('.infobox-container').removeClass('hidden');
        
        // Show infobox matching last part of ID
        $('#' + this.id.replace('show-', '')).removeClass('hidden');
    });
    
    $('.hide-infobox').on('click', function() {
        // Manually hide all infoboxes and background
        $('.infobox-container').addClass('hidden');
        $('.infobox').addClass('hidden');
    }).children().on('click', function() {
        return false; 
    });
    
    </script>
    
    </head>
    <div id="wrapper">
    
    <!--Bakgrundsbild-->
    <center><body bgcolor="#FFFFFF ">
    
    
    
    <div class="container">
    
    <!--Nedan skrivs innehål/text till sidan-->
    <div class="mainBox">
    <center><img src="Bilder/title.png"></center>
    <p>
    </a>
    
    
    <div class="infobox-container hide-infobox hidden">
        <div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
        <div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
    </div>
    
    <span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
    <span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
    
    </div>
    
    </body></center>
    </div>
    </html>
    and my css:
    Code:
    .infobox-container {
        background: rgba(0, 0, 0, .2);
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .infobox {
        background: #fff;
        display: inline-block;
        padding: 2rem;
        border: solid 1px #eee;
    }
    .show-infobox {
        cursor: pointer;
    }
    
    .hidden {
        display: none;
    }

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Your script is executed before dom is loaded. Use jquery ready.


    Code:
    <script>
    $( document ).ready(function() {
        $('.show-infobox').on('click', function() {
        // Hide all infoboxes to prevent multiple showing at once
        $('.infobox').addClass('hidden');
        
        // Show infobox background
        $('.infobox-container').removeClass('hidden');
        
        // Show infobox matching last part of ID
        $('#' + this.id.replace('show'')).removeClass('hidden');
    });
    
    $('.hide-infobox').on('click', function() {
        // Manually hide all infoboxes and background
        $('.infobox-container').addClass('hidden');
        $('.infobox').addClass('hidden');
    }).children().on('click', function() {
        return false; 
    });
    });
    </script>

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Are there any console errors?

    I found one syntax error, there's an extra quote mark in this line after 'show':
    $('#' + this.id.replace('show'')).removeClass('hidden');
    Also, what are you trying to do there? It looks like you're trying to pass a string from the replace method, but you aren't replacing anything. If you're just trying to pass the ID, drop the replace method.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com