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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Senior Member
    Join Date
    Nov 2012
    Posts
    107
    Member #
    33949
    Liked
    2 times

    Javascript code part will not show my responsive menu to work

    Hi, I cannot get my responsive menu to work. only the css and html shows it, but button also is not showing.
    I have put the javascript in an external file and linked to it with my index file which has my html in.
    I have this in the head section of my index file: <link rel="text/javascript" src="./hamburger.js" /></script>
    Here is the javascript in the hamburger.js file. I have tried it also without the <script> tag.


    </script>
    function hamburgerMenu() {
    // Toggle the side menu
    Let hamburgerMenu = document.querySelector(".hamburger-menu' );


    let menuStyle = getComputedStyle(hamburgerMenu);


    if (menuStyle.display == "none") {
    document.getElementById('ham-menu').style.display = 'flex';
    } else {
    document.getElementById("ham-menu').style,display = 'none';
    }


    // Exchange hamburger icon and close icon
    let hamburgerIcon = document.querySelector("#ham-icon");
    if (hamburgerIcon.classList.contains("fa-bars")) {
    hamburgerIcon.classList.replace("fa-bars", "fa-times-circle");
    return;
    } else {
    hamburgerIcon.classList.replace("fa-times-circle", "fa-bars");
    return;
    }
    }


    </script>

    The html:


    <!DOCTYPE html>
    <html lange="en">
    <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="./style.css" />
    <link rel="text/javascript' src='./hamburger.js"/></script>

    <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display =swap"
    rel="stylesheet"
    />
    <!-- Fontawesome -->
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />


    <title>Responsive navigation menu example</title>


    </head>
    <body>
    <div id="ham-button" class="hamburger-button" onclick="hamburgerMenu()">
    <i id="ham-icon" class="fas fa-bars"></i>
    </div>


    <div id="ham-menu" class="hamburger-menu">
    <ul>
    <li>
    <a href="#navigation"><div onclick="hamburgerMenu()">Home</div></a>
    </li>
    <li>
    <a href="#about"><div onclick="hamburgerMenu()">About</div></a>
    </li>
    <li>
    <a href="#projects"><div onclick="hamburgerMenu()">Projects</div></a>
    </li>
    <li>
    <a href="#blog"><div onclick="hamburgerMenu()">Blogs</div></a>
    </li>
    <li>
    <a href="#footer"><div onclick="hamburgerMenu()">Contact</div></a>
    </li>
    </ul>
    </div>
    <!-- Navigation bar -->
    <section id="navigation">
    <div class="container-dark">
    <nav class="navigation-bar">
    <ul>
    <li><a href="#navigation">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#blog">Blogs</a></li>
    <li><a href="#footer">Contact</a></li>
    </ul>
    </nav>
    </div>
    </section>
    <!-- Home -->
    <section id="home">
    <div class="container-dark">
    <div class="container-home">Home</div>
    </div>
    </section>
    <!-- About -->
    <section id="about">
    <div class="container-light">
    <div class="container-about">About</div>
    </div>
    </section>


    <!-- Projects -->
    <section id="projects">
    <div class="container-dark">
    <div class="container-projects">Projects</div>
    </div>
    </section>


    <!-- Skills -->
    <section id="skills">
    <div class="container-light">
    <div class="container-skills">Skills</div>
    </div>
    </section>


    <!-- Timeline -->
    <section id="timeline">
    <div class="container-dark">
    <div class="container-timeline">Timeline</div>
    </div>
    </section>


    <!-- Blog -->
    <section id="blog">
    <div class="container-light">
    <div class="container-blog">Blog</div>
    </div>
    </section>


    <!-- Footer -->
    <section id="footer">
    <footer>
    <div class="container-dark">
    <div class="container-footer">
    <div class="footer-icon-list">
    <i class="fab fa-twitter footer-icon"></i>
    <i class="fab fa-linkedin footer-icon"></i>
    <i class="fab fa-github footer-icon"></i>
    <i class="fab fa-dev footer-icon"></i>
    <i class="fab fa-instagram footer-icon"></i>
    </div>
    </div>
    </div>
    </footer>
    </section>


    </body>
    </html>


    The css:


    <style>
    html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    }


    body {
    font-family: "Open Sans", sans-serif;
    margin: 0px;
    background-color: rgb(51, 44, 56);
    box-sizing: border-box;
    overflow-x: hidden;
    }


    h1 {
    padding: 0;
    margin: 0;
    }


    h2 {
    margin: 0;
    padding: 0;
    }


    p {
    margin: 0;
    padding: 0;
    }


    .container-dark {
    display: flex;
    width: 100%;
    justify-content: center;
    }


    .container-light {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: whitesmoke;
    }


    /* Hamburger button */


    .hamburger-button {
    display: none;
    }


    .hamburger-menu {
    display: none;
    }


    /* Navigation bar */


    .navigation-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 10vh;
    }


    .navigation-bar > ul {
    display: flex;
    width: 100%;
    list-style-type: none;
    justify-content: space-between;
    flex-direction: row;
    padding: 0;
    }


    .navigation-bar > ul > li {
    width: fit-content;
    }


    .navigation-bar > ul > li > a {
    text-decoration: none;
    color: whitesmoke;
    font-weight: 700;
    letter-spacing: 0.2rem;
    }


    .navigation-bar > ul > li > a:hover {
    color: green;
    transition: 0.75s;
    cursor: pointer;
    }


    /* Home section */


    .container-home {
    display: flex;
    width: 75%;
    height: 90vh;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    /* About section */


    .container-about {
    display: flex;
    width: 75%;
    height: 20rem;
    background-color: whitesmoke;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    /* Projects */


    .container-projects {
    display: flex;
    width: 75%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    /* Skills */


    .container-skills {
    display: flex;
    width: 75%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    /* Timeline */


    .container-timeline {
    display: flex;
    width: 75%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    /* Blog */


    .container-blog {
    display: flex;
    width: 75%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    /* Footer */


    .container-footer {
    display: flex;
    width: 75%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: green;
    }


    .footer-icon-list {
    font-size: 1.5rem;
    color: whitesmoke;
    margin-top: 2rem;
    margin-bottom: 2rem;
    letter-spacing: 1rem;
    }


    .footer-icon:hover {
    color: green;
    cursor: pointer;
    transition: 0.75s;
    }


    /* Responsive */


    /* For mobile large */


    @media only screen and (max-width: 600px) {
    .navigation-bar {
    visibility: hidden;
    }


    li a.icon {
    visibility: visible;
    }


    /* Home */


    .container-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
    }


    /* About section */


    .container-about {
    display: flex;
    height: auto;
    width: 75%;
    height: 20rem;
    background-color: whitesmoke;
    }


    /* Projects */


    .container-projects {
    width: 100%;
    }


    /* Skills */


    .container-skills {
    width: 100%;
    }


    /* Timeline */


    .container-timeline {
    width: 60%;
    }


    /* Blog */


    .container-blog {
    width: 100%;
    }


    /* Footer */


    .container-footer {
    width: 100%;
    }


    /* Hamburger button */
    .hamburger-button {
    display: block;
    font-size: 2rem;
    color: green;
    background-color: transparent;
    border: none;
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 30;
    }


    .hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    background-color: rgb(51, 44, 56);
    }


    .hamburger-menu > ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    }


    .hamburger-menu > ul > li {
    width: fit-content;
    margin: 1.5rem;
    }


    .hamburger-menu > ul > li > a {
    text-decoration: none;
    font-size: 2rem;
    color: whitesmoke;
    font-weight: 700;
    letter-spacing: 0.2rem;
    }


    .hamburger-menu > ul > li > a:hover {
    color: green;
    transition: 0.75s;
    cursor: pointer;
    }
    }
    Last edited by spencer; Sep 12th, 2021 at 12:00 PM.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,963
    Member #
    5580
    Liked
    756 times
    Is this for a wordpress site again, or is this a stand-alone page (website) you're making (not wordpress)?


  4. #3
    Senior Member
    Join Date
    Nov 2012
    Posts
    107
    Member #
    33949
    Liked
    2 times
    Mlsiem, its a normal site in my text editor notepad++.
    I have sort have given up, trying to get programming to work in wordpress.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,963
    Member #
    5580
    Liked
    756 times
    Wordpress is the worst framework to use if you want to customize the scripting.

    The whole purpose of wordpress is to offer the user the ability to change content.
    It was never intended to add, alter, or create your own PHP or javascripting.

    The best you can do is find a wordpress plugin that does what you want.
    Or you create your own plugin which is very advanced scripting.

    Sorry I don't have a better answer, but that's the way it is. Wordpress is not the best framework for all websites. Often wordpress is overkill and bloated with tons of unnecessary code.


  6. #5
    Senior Member
    Join Date
    Nov 2012
    Posts
    107
    Member #
    33949
    Liked
    2 times
    Oh, my word, I have been putting so much effort and time trying to learn this framework.
    May I ask, what framework do you recommend, and do you have to be a full on developer to develope websites in wordpress, if ones objective is to design sites for people. When people want a wordpress site, are people that are doing these sites for a living actual javascript and or php developers, or do they just use plugins all the time to do these sites.
    I thought in order to do websites for a living, you have to be very sufficient in programming with javascript and or php.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,963
    Member #
    5580
    Liked
    756 times
    Yes, you should be proficient at PHP, javascripting (which would include JQuery, AJAX) and SQL (databases).

    WordPress sites are often requested by clients, but they decide on what the theme should be (which one to buy) and the plug-ins needed. Then, the programmer does some customizing based on the theme settings, etc. Not much more custom scripting can be done unless the programmer is really advanced at modifying wordpress themes.

    In the early days, programmers would do it all ... there were no frameworks like bootstrap or wordpress. Those frameworks were developed so "non-programmers" could put together their own websites. Buy a premade template or theme, download, and add some plug-ins.

    Now, businesses actually don't really need web pages unless they are selling products online (I mention "pages" VS "websites" as I will discuss later). The other aspect would be the cloud portion where PHP/SQL scripting is done to process data, information, inventory, etc. I do that type of scripting the most. I help clients set-up hardware (microcontrollers) that collect or control physical equipment and use their website (shared webhost) as the online method to store data, output data, and allow other people to access the data using an API (Application Programming Interface). An example is a Medical Marijuana plant that monitors greenhouse temperatures, humidity, lighting, watering, inventory, user movements, doors, etc. All physical data is collected 24/7 and continually uploaded to their "cloud" for data collection, monitoring, alarming, and developing environmental reports.

    Service companies really only need a one-page site that gives the contact information. Or just a listing on Google or business directories. Some businesses just use social media like FaceBook.

    Then you have square.com sites that are "click to build" and the client has a site automatically made with credit card processing. They don't even need a programmer.

    If I were to go into the business of webpage design I would think more about specializing in one aspect and joining an existing web design company. Freelancing is tough ... too many freelancers and middle eastern coders that will build websites for pennies. No way to compete other than offer better service and speak English as a native language

    Finally, the internet is no longer about desktops and laptops. Most people now using smartphones. The melding of apps (native apps) and online apps sort of washes-out the web page thing. Websites are not the same as web pages. Everyone can use a website, but not everyone needs web pages. You might want to look more at the aspect of website (back-end database and API development) and not pay so much attention to wordpress and web pages.


  8. #7
    Senior Member
    Join Date
    Nov 2012
    Posts
    107
    Member #
    33949
    Liked
    2 times
    Thanks a lot for this information. I saw on fiverr that there are a lot of people from Pakistan doing websites for cheap, as you mentioned (middle eastern countries doing it for pennies.)
    I do not have a job, as everything here is affirmative action, you have to have your own business here so I was hoping to learn as much as I can and maybe try start my own business in webdesign.

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,963
    Member #
    5580
    Liked
    756 times
    Where do you live?


  10. #9
    Senior Member
    Join Date
    Nov 2012
    Posts
    107
    Member #
    33949
    Liked
    2 times
    South Africa. They are taking away all the properties soon as well, its called land expropriation, so I will loose everything, so that is why I am trying so hard, because with webdesign, if you do not have accomodation and are on the streets, you could still probably go to an internet cafe, and do websites for international people.

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,963
    Member #
    5580
    Liked
    756 times
    How old are you and what skills do you have (other than computer/website stuff)?



Page 1 of 2 1 2 LastLast

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 06:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com