Trouble with sketching a line in a code

I want to insert a horizontal line to separate the photo section from the text section on my website.

Check out my website:

Here's the jsfiddle where I've got it working:

http://jsfiddle.net/GCxh9/

 <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>

I placed that in the head. This is the html code:

<!-- CONTENT____________________________________________-->

<div class="content_wrapper">

<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

    <canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>
<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; ETC...
    </p>
    </div>

</div>

The spacing between elements shows that something is happening. Any suggestions?

Appreciate your help!

Answer №1

When I try to access the canvas element using <code>var c=document.getElementById("myCanvas");
, it is giving me an Undefined object error.

Here is a screen shot for reference:

To resolve this issue, make sure to include this code snippet after the line where you define the canvas element:

<canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>

It's recommended to place the above script before closing body tag </body> of your webpage.

Answer №2

Here are some key points to consider:

  1. When you set the height to 100, it creates unnecessary extra space.

  2. If you are using Chrome, additional styles may be applied. For example, the 'home_text' div may have a <p> with specific Chrome styles.

    p { -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }

Consider implementing reset.css or similar tools on your website for better styling consistency.

Using canvas to create a divider may not always be the most efficient method. Instead, try utilizing a <div> element and styling its width, height, and background-color properties.

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

What is the process for transferring npm package files to my local project?

Despite my efforts to find the answer, I couldn't locate it and so here I am asking again. What I'm looking for: I need to move a file from node_modules to my project in order to work on it. First attempt: I moved the file I wanted to edit An ...

What is the best way to choose all the checkboxes in a checkbox list, such as a ToDo List?

I am currently working on developing a to-do list where each item includes a checkbox. My goal is to be able to select these checkboxes individually by clicking on them. Furthermore, I would like the checkboxes to toggle between being checked and unchecked ...

Is it possible to transfer state to the getServerSideProps function in any way?

As a newcomer to next.js, I have a question about passing page state to getServerSideProps - is it achievable? const Discover = (props) => { const [page, setPage] = useState(1); const [discoverResults, setDiscoverResults] = useState(props.data. ...

What is the best way to retrieve state within a property of a React class component?

I have encountered an issue with a React Class Component where I am trying to separate a part of the rendered JSX but unable to access the Component's state within the separated JSX as a property of the class. The scenario is quite similar to the fol ...

Dynamic data binding in AngularJS with dynamically generated views

The scenario: Currently, I am constructing a wizard in AngularJS that contains tabbed content with each tab representing a step in the wizard. These steps are fetched from the database through a Laravel controller and displayed using ng-repeat. Each tab c ...

How can I place an icon on a specific location in a Highcharts map?

I am currently utilizing Highcharts to showcase maps within my application. I am aiming to achieve two specific functionalities: 1) Upon clicking on any area, I want that area to be highlighted in red {completed} 2) Upon clicking on any area, I intend f ...

Ways to simultaneously apply fade in and fade out effects using CSS

body { background-image: url("background.jpg"); background-attachment: fixed; font-family: 'Roboto', sans-serif; color: #333333; } #container { height: 1000px; } /* HEADER WITH NAVIGATION BAR AND LOGIN OPTION */ #head { position: abso ...

Is integrating Vuetify with a project template created using vue-cli 3 causing issues when adding script tags to App.vue?

As a Vue beginner, I'm trying to wrap my head around a basic concept. In vue-cli 3, the "App.vue" file serves as the root component with <script> and <style> tags like any other component. However, after adding Vuetify to a project, the Ap ...

What is the syntax for accessing a dictionary item within a <span> tag using JavaScript?

I'm working on a new functionality for a website that involves using a dictionary to store information about clubs, events, and times. var clubName = {}; var event = {}; var time = {}; var dict = new Map(); dict.set(clubName, "G ...

Tips for managing the 'completed' button in an Android keyboard application using AngularJS/Ionic

Currently, I am working on developing a hybrid mobile application using AngularJS, Cordova, and the Ionic framework. Check out this Android 5.0 keyboard with a distinct blue button located at the bottom-right corner. https://i.stack.imgur.com/Tfija.png ...

Utilizing pushState following a seamless ajax retrieval operation

I'm facing some challenges while trying to implement the pushState method. Despite triggering the history.pushState line, I'm unable to achieve the desired change in the browser window URL. Strangely, there are no error messages displayed in the ...

Using jQuery to refresh a div element

I am struggling with updating the "right" div in my jsp page using the script below. Despite being contained in a single file, the update does not seem to work. Any assistance is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

subscriptions to behavior subjects may not function properly across all components

When setting up my global service, I instantiate a BehaviorSubject variable dataWorkflowService: export class CallWorkflowService { url = 'http://localhost:3000/'; selectedNode : BehaviorSubject<Node> = new BehaviorSubject(new Node(&a ...

`Generating and refreshing data on a uniquely structured grid using JQuery and AJAX`

I have an unusual grid structure with columns of varying heights. Column 1 may contain 4 squares to fill, column 2 may have 5, and column 3 may have 2. For the purpose of this inquiry, let's assume these values are static as follows: Col | Height ...

Having trouble toggling the dropdown submenu feature in a Vuejs application?

.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial ...

javascript is failing to display the appropriate message at the correct moment

Wrote a code to handle the type of message I should get, looping over all the rows in the table to find matching conditions. These are my conditions: - If all rows have data-mode="success" and data-pure="yes", it's correct and successful. - If any row ...

"Exploring the Power of Primefaces Dialog Framework: Unleashing the dialogReturn Event

I'm working with a primefaces p:datatable in Table.xhtml and have a p:commandbutton on the same page that triggers a dialog using the dialog framework. The dialog content is in Dialog.xhtml. Both the Table.xhtml and Dialog.xhtml are using a single bac ...

Running queries in a loop is not functional within node-firebird

When running multiple select queries in a loop, I encountered an issue that puzzled me. For simplicity, let's take a look at the code snippet below: var Firebird = require('node-firebird'); Firebird.attach({database: 'TEST'}, (e ...

JQuery for Seamless Zoom Functionality

I am working with some divs that have images as backgrounds, and I have added a zooming effect on hover. However, the zoom effect is not smooth. Is there a way to modify the script to make the zoom effect smoother? Here is an example of my HTML structure: ...

Read from input file using JavaScript and upload using XMLHttpRequest

Apologies for any language barriers. I am trying to upload my (.exe) file selected using an input file: <input type="file" id="myfile"> Here is how it should be read in Javascript: var myfile=''; var input = document.getElementById(&apos ...