The functionality of Jquery and JS lies in working on DOM elements as opposed to

Just to start off, I want to mention that my knowledge of JavaScript and specifically jQuery is quite limited.

I've encountered an issue with some JavaScript and jQuery loading on my webpage.

1) I have written some code on JSFiddle http://jsfiddle.net/Gilera/mT9pV/1/. The code includes JavaScript for the timezone converter and a jQuery function for sliding the hidden div. When using jsfiddle onDomready, the code runs fine and displays both the time and the sliding functionality. However, when using onLoad, only the hidden div works but not the timezone converter. Any suggestions on how to make both work in onLoad mode on JSFiddle?

2) Additionally, when I compile the code and test the website in a browser, the times load but the hidden divs don't show up when clicked. How can I modify the chan2.js script to run onDomready or maybe add a script above it to locate the jQuery library?

I apologize for the lengthy post with all the code details, as this is new territory for me. Any assistance would be highly appreciated.

Below is the code snippet I am using:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style2.css" rel="stylesheet" type="text/css" />


</head>

<div class="schedule"><div class="event"><ul class="guides"><li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li><li class="time"><span data-utc="9:05"></span></li><li class="game">Team A vs Team B</li></ul></div><div class="place"><ul class="venue"><li class="field">Field A</li></ul></div></div>

<div class="schedule"><div class="event"><ul class="guides"><li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li><li class="time"><span data-utc="9:05"></span></li><li class="game">player A vs Player B</li></ul></div><div class="place"><ul class="venue"><li class="field">Court 3</li></ul></div></div>

<div id='out'></div>  
<script type='text/javascript' src='times2.js'></script>
<script type='text/javascript' src='chans2.js'></script>
<body>
</body>
</html>

CSS style2.css

@charset "utf-8";
.event {
width: 600px;
height: 38px
}
...

Javascript times.js

window.onload = init;

function init(){
DisplayTimes();
}

function DisplayTimes(){
//legal formats: 1/10-13:00 for date and time
//             : 13:00 for time - presumes utc date is same as local date
var dd = new Date();
...

Jquery chans2.js

$(".event").click(function(){
   //hide all rrshow
   $(".place").hide();

   //show only required rrshow
   $(this).parent().find(".place").show();
});

Thank you

EDIT: Apologies for posting the wrong code initially, I have now updated chan2.js with what I'm currently using.

javascriptjqueryhtmlcss

Answer №1

Within the file times.js,
rather than this chunk of code

window.onload = init;
function init(){
    DisplayTimes();
}

implement this instead

$(function(){
     DisplayTimes();
}

Answer №2

Your CSS encountered some issues, and your HTML body elements were mistakenly placed outside the tags. I have modified everything to load within a single function passed to $(document).ready(). The following implementation successfully worked in my browser:

HTML:

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>onLoad</title>
    <link href="style2.css" rel="stylesheet" type="text/css"/>


</head>

<body>
<div class="schedule">
    <div class="event">
        <ul class="guides">
            <li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li>
            <li class="time"><span data-utc="9:05"></span></li>
            <li class="game">Team A vs Team B</li>
        </ul>
    </div>
    <div class="place">
        <ul class="venue">
            <li class="field">Field A</li>
        </ul>
    </div>
</div>
<div class="schedule">
    <div class="event">
        <ul class="guides">
            <li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li>
            <li class="time"><span data-utc="9:05"></span></li>
            <li class="game">player A vs Player B</li>
        </ul>
    </div>
    <div class="place">
        <ul class="venue">
            <li class="field">Court 3</li>
        </ul>
    </div>
</div>
<div id='out'></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type='text/javascript' src='onLoad.js'></script>
</body>
</html>

JavaScript:

$(document).ready(function () {
    $(".event").click(function () {
        //hide all rrshow
        $(".place").hide();

        //show only required rrshow
        $(this).parent().find(".place").show();
    });

    function DisplayTimes() {
        //legal formats: 1/10-13:00 for date and time
        //             : 13:00 for time - presumes utc date is same as local date
        var dd = new Date();
        var list = document.getElementsByTagName('span');
        var mon, date, hr, min;
        for (var i = 0; i < list.length; i++) {
            if (list[i].hasAttribute('data-utc')) {
                var str = list[i].getAttribute('data-utc');
                if (str.indexOf('/') < 0) {
                    mon = dd.getMonth() + 1;
                    date = dd.getDate();
                    hr = str.substring(0, str.indexOf(':'));
                } else {
                    mon = str.substring(0, str.indexOf('/'));
                    date = str.substring(str.indexOf('/') + 1, str.indexOf('-'));
                    hr = str.substring(str.indexOf('-') + 1, str.indexOf(':'));
                }

                min = str.substring(str.indexOf(':') + 1);

                dd.setUTCDate(mon); //date of month
                dd.setUTCHours(hr); //24hour hour
                dd.setUTCMinutes(+min); //minutes
                dd.setUTCSeconds(0); //seconds

                var h = leadzero(dd.getHours());
                var m = leadzero(dd.getMinutes());
                var s = leadzero(dd.getSeconds());

                list[i].innerHTML += ' ' + h + ':' + m;
            }
        }
    }

    function leadzero(n) {
        var str1 = n.toString();
        if (str1.length < 2) {
            str1 = '0' + str1;
        }
        return str1;
    }

    DisplayTimes();
});

CSS:

@charset "utf-8";
.event {
    width: 600px;
    height: 38px
}

.place{
    display: none;
    width: 590px;
    height: 38px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #EB1D2D;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

ul.guides {
    width: 570px;
    height: 34px;
    list-style: none;
    display: block;
    background-color: #D1E5FD;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-spacing: 5px;
    padding-top:1px;
    border-radius:5px
}
ul.guides a, ul.guides a:visited, ul.guides a:link {
    display: block;
    text-decoration: none;
    background-color: #8090AB;
    color: black;
}
ul.guides a:hover, ul.guides a:active, ul.guides a:focus {
    background-color: #FFFFFF;
}

li.icon {

    display: inline-block;
    width: 24px;
    height: 24px;
    padding-left: 10px;

}
img.icon{
    display:inline-block;
    padding-top:3px;
}
li.time{
    display:inline-block;
    text-align:center;
    font-size: 12px;
    width: 70px;
    padding-left: 5px;
    color: #0000FF;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;


}
li.game{
    display: inline-block;
    text-align:center;
    font-size: 12px;
    padding-left: 10px;
    background-color: #D1E5FD;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
}
ul.guides a, ul.nav a:visited{
    display: block;
    text-decoration: none;
    background-color: #8090AB;
    color: #000;
}

ul.guides a:hover, ul.guides a:active, ul.guides a:focus{
    background-color: #6F7D94;
    color: #000;
}

ul.venue {
    width: 550px;
    height: 34px;
    list-style: none;
    display: block;
    background-color: #D1E5FD;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-spacing: 5px;
    padding-top:1px;
    border-radius:5px
}

li.field{
    width: 150px;
    display: inline-block;
    text-align:center;
    font-size: 12px;
    padding-left: 10px;
    background-color: #D1E5FD;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
}

CHECK OUT THE FIDDLE FOR DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggle the Material UI checkbox based on the value received from an object input

I am facing an issue with an unchecked checkbox in my project. I am attempting to update its value based on data retrieved from an object. The object contains boolean values from an SQL query, either 'T' for true or 'F' for false. My in ...

javascriptreactjsmaterial-uiuse-state

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Is there a way to align all items in a navbar except for one to the left, with a fixed combined minimum and maximum width of 300px-400px, while sending the last item to the right margin? I want the final result to resemble this: https://i.stack.imgur.com ...

htmlcss

<h1> </h1> Using attributes in a JavaScript function

Hello, I am trying to figure out how to inherit the h1 style CSS inside a JavaScript function called myFunction. Currently, when the button is clicked, it just displays the default h1 style. Any help would be appreciated. Thank you! <html> <st ...

javascriptcss

Guide on how to refresh the background image using the identical URL within a directive

I am looking to refresh the background image of a div using the same URL within a directive. Upon loading my view, I utilized this directive to display the image as a background for the div. app.directive('backImg', function () { var dir ...

cssangularjsangularjs-directive

Taking steps when a number is enclosed within a span

Testing a simple code with similar action to what I want. Apologies for any language errors, hoping to be understood :-) The HTML code snippet: <div class="pagination"> <a href="#" class=""><span>1</span></a> <a href=" ...

javascriptjqueryhtml

Why would triggering an input event have any effect if it doesn't appear to be utilized anywhere?

We have developed a custom Vuetify 3 component known as FilterPanel. Here is a simplified version: <template> <div> <v-container> <v-row> <v-col cols="3"> <v-select v-model="fiel ...

javascriptvue.jsvuejs3vuetify.jsvuetifyjs3

Nested functions with async-await syntax

I'm attempting to showcase a nested countdown utilizing two nested loops. You can access the complete, functional code on this js.fiddle link. Two key segments are highlighted below: function sleep(ms) { return new Promise(resolve => setTime ...

javascriptasync-awaites6-promisewait

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

I am currently working on an angular 5 project where the homepage consists of several components. One of the components, navbarComponent, includes a dropdown list feature. I want this dropdown list to automatically close when clicked outside of it. Here i ...

javascriptangulartypescript

The issue with EJS Header and Footer not showing up on the

I am currently building a basic todo list application using EJS. However, I am encountering an issue when running it. I would like to run app.js with the header and footer in EJS, but it seems that it is not recognizing the header despite using what I beli ...

javascripthtmlcsslayoutejs

Tips for transferring Json data through Ajax in jquery for an html element?

I am facing an issue while trying to display data from 5 rows of a MySQL database in a table using the success function of a jQuery AJAX call. The data is returned in JSON format. Problem: I am able to retrieve only one row at a time, even though the cons ...

javascriptjqueryajaxjson

Div keydown event not being triggered in Vue

I've been struggling to get my event to fire despite following the instructions in the title. @keydown="keyPressed($event)" Although currently it looks like this, I have also attempted setting the tabIndex and adding it on mount as shown be ...

javascriptvue.js

Clicking on the ActionButton will trigger the sending of an HTTP Request in this Firefox

Seeking guidance: As I develop an addon, my objective is to initiate a HTTP request upon clicking the ActionButton. The data to be sent to the server includes the URL of the tab and the content of the page. Initially, I attempted to create a log message a ...

javascriptajaxfirefoxfirefox-addonfirefox-addon-sdk

Node.js and Express facing challenge with Stripe checkout functionality

I am encountering an issue while attempting to integrate stripe into my checkout process. When I click on the checkout button, instead of being directed to the checkout page, I receive the following message: {"url":"https://checkout.stripe.c ...

javascriptnode.jsexpressstripe-payments

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Navigating the route with quickness

Upon accessing the localhost, I encountered an issue with the code snippet below: When I try to access it, I receive an error message saying "Cannot GET /". var express = require('express'); var router = express.Router(); /* GET home page. */ r ...

javascriptnode.jsexpress

What is the best way to position my image in the center within a blank canvas?

What is the best way to center an image in a white space? I am working with HTML, PHP, and CSS, but I am unsure of how to achieve this. So far, I have tried aligning the image within text on w3schools.com, but my other attempts like: #image { margin- ...

phpcssimagehtml

The Nuxt image keeps disappearing every time I navigate to a new page

Whenever I have an image displayed on my Nuxt page and then navigate away from it, the image breaks and I can't figure out why. This is what my code looks like: <img :src="baseUrl + 'storage/'+ front.featured_image" alt="p ...

javascriptlaravelvue.jsnuxt.js

Is there a way for me to view the contents within the box?

Hey there! I have a question about how to access the content inside this mysterious box "" within the style sheet. For instance, I am curious to find out the link of the image: .facebookicon::before { content: ""; } ...

csscss-content

What is the best way to store HTML code in a SQL Server database to ensure proper rendering?

My website is currently in development and is similar to Stack Overflow. I am using a simple textarea for text input as opposed to a WMD editor like the one used on Stack Overflow. When I enter HTML code as input and store it in my database table under a ...

javahtmlsqlsql-server