Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

Hello everyone! My name is Mauro Cordeiro, and I come from Brazil. I am just diving into the world of coding and have been following various tutorials. Stack Overflow has been an invaluable resource for me in my learning journey!

Aside from coding, I am also a musician and character animator. Currently, I am working on finalizing my band's official website called LeatherJacks. However, delving into the world of coding has sparked a newfound passion in me!

One question that I have pertains to media queries and loading content on responsive websites.

While building my responsive website, I have included several "Link Rel" codes in the HTML for different resolutions. However, when I resize my browser to 816px width, it only loads the CSS style without loading the corresponding HTML file tailored for mobile resolution.

I have tried using a jQuery If/Else conditional with "Location", but unfortunately, it did not yield the desired results.

My goal is to have a page that seamlessly transitions both CSS and HTML elements when resized to 816px or lower.

The other resolutions (1920px, 1368px, and 1000px) work perfectly, thanks to utilizing percentage values!

Thank you all for any assistance you can provide as I aim to complete and publish my page!

Let's rock on!

Mauro.

javascriptjqueryhtmlcss

Answer №1

Consider trying the following example:

Example: 

<link rel="stylesheet" media='screen and (min-width: 816px) and (max-width: 1000px)' href="04_Responsive_MOBILE.css"/>
<link rel="stylesheet" media='screen and (min-width: 1001px) and (max-width: 1368x)' href="03_Responsive_1000px.css"/>


Another option is to consolidate all media queries into a single file:

Example:

https://i.stack.imgur.com/Sxmgy.png


It's highly recommended to maintain folder structure without using spaces.

Avoid using spaces in URLs as they can be altered or removed during transcription, typesetting, or word processing.

Additionally, employing relative paths is advisable:


Relative Paths
(source: Quick Reminder About File Paths)

  • Is the image in the same directory as the referencing file?
  • Is the image in a directory below?
  • Is the image in a directory above?

The use of relative file paths allows navigation in both directions. Refer to this example for a better understanding: https://css-tricks.com/wp-content/uploads/2008/03/file-path-example1.jpg

Here are some key facts about relative file paths:

  • Starting with "/" returns to the root directory before proceeding
  • Starting with "../" moves one directory backwards before starting
  • Starting with "../../" moves two directories backwards before starting (and so on...)
  • To move forward, begin with the first subdirectory and continue moving ahead


Embedding HTML within another HTML

Using pure Javascript:

HTML

<div w3-include-html="content.html"></div>

Javascript

<script>
w3.includeHTML();
</script>


With jQuery:

HTML

<div id="includedContent"></div>

Javascript

<script> 
$(function(){
  $("#includedContent").load("content.html"); 
});
</script>

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

Ensure that all asynchronous code within the class constructor finishes executing before any class methods are invoked

Looking to create a class that takes a filename as a parameter in the constructor, loads the file using XmlHttpRequest, and stores the result in a class variable. The problem arises with the asynchronous nature of request.onreadystatechange, causing the ge ...

javascriptasynchronouscallbackxmlhttprequestes6-class

Unexpected results: jQuery getJSON function failing to deliver a response

I am facing an issue with the following code snippet: $.getJSON('data.json', function (data) { console.log(data); }); The content of the data.json file is as follows: { "Sameer": { "Phone": "0123456789", }, "Mona": { "Phone": ...

javascriptjqueryjsonajaxasynchronous

Generate an asynchronous boolean promise when calling the isPresent function in Protractor

I'm currently working on a function that checks the presence of an element and returns a boolean value accordingly. However, I am facing an issue where the response includes unnecessary information. the output displays: false How can I adjust my cod ...

javascriptseleniumprotractor

What is the best way to retain selection while clicking on another item using jQuery?

There is a specific issue I am facing with text selection on the page. When I apply this code snippet, the selected text does not get de-selected even after clicking .container: jQuery('.container').on("mousedown", function(){ jQuery('. ...

javascriptjquerycss

Text cannot be aligned

I recently encountered an issue where I center-aligned some text and positioned it using top:20%. Everything was working fine until I added a paragraph under it. At that point, the element moved back to its original position and the top:20% positioning did ...

htmlcssweb

Troublesome tab key function in FireFox causing navigation issues

I'm facing an issue with the tab key focus on links in FireFox. Strangely, it's working fine in Chrome but in FireFox, it keeps looping within one element. For better understanding, I have created a demo showcasing this behavior specifically in ...

htmlcss

Although AJAX $.post functions properly in the View, it seems to encounter issues when relocated to a separate .js file. Interestingly, all other JQuery functions work

I have recently delved into MVC, JQuery, and AJAX, and encountered a perplexing issue. After completing the initial development of a practice website, I dedicated time to enhance the interactivity using JQuery. Everything was functioning smoothly until I ...

javascriptjqueryhtmlajaxasp.net-mvc-5

How to have multiple versions of grunt coexisting on a single machine

I am involved in two different projects that have unique requirements for Grunt versions: Project A specifically needs Grunt v0.3.2 Project B requires Grunt v0.4.1 Both of these projects are managed in separate workspaces. Currently, I have Grunt v0.4. ...

javascriptbuildnpmgruntjs

Discover the process for breaking down JSON data into separate stages using the Express API

My API architecture is causing a problem as I try to insert it into an array called items[]. https://i.stack.imgur.com/qe802.png The setup involves a simple API built on express + mongodb. The challenge lies in figuring out how to store data from the pos ...

javascriptmongodbexpress

Express.js code is experiencing difficulties with autocomplete functionalities

jQuery autocomplete code example [Express JS code for retrieving data][2\ Example of fetching data in Express JS ...

javascriptnode.jsajaxexpressnpm

jQuery mobile collapsed list view is not functioning correctly when used with search feature

I have successfully implemented a listview in jquery with a listdivider that includes a filter function. The search feature works perfectly, however, when collapsing either of the list dividers, the search functionality stops working altogether. <!DOCT ...

javascriptjquerylistviewdomjquery-mobile

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

I am currently working with a simple sankey chart in Highcharts. Everything is functioning correctly with the sample data I have implemented, except for one issue - when I increase the font size of the data labels, not all the data is displayed. The info ...

javascripthtmlhighcharts

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

javascripthtmlnode.jsreactjsjson

The link in the navigation bar is not functioning correctly

Let me break down the issue I'm facing here. The problem arises with the navigation buttons that have sub-lists nested within them (ul>li>ul). When attempting to click on these buttons, the link does not work unless I specifically click on the text it ...

htmlcss

Does the String.replace() function in Javascript have the capability of incorporating line breaks?

Is it possible to use the String.replace() method in JavaScript to replace any character with a line feed symbol? For example: newString = oldString.replace(/x/, "linefeed character (\n)"). ...

javascript

jQuery random generator for creating two-dimensional arrays

Why do all rows always have the same numbers? They should be populated with random numbers. Also, how can I fix this issue? I remember seeing a solution here before but now I can't seem to locate it. var mapSizex = 5; var mapSizey = 6; var mapArray ...

javascriptjqueryarraysrandom

Issue with primeng dropdown not displaying the selected label

When using the editable dropdown with filter feature from PrimeFaces, I've noticed that selecting an option displays the value instead of the label. Here is the code snippet: <div class="col-md-5 col-xs-12"> <p-dropdown [op ...

javascriptangularprimeng

Here is how to verify if the number chosen by the user from the dropdown list is higher than the quantity specified; if it is

In my input field, I display the availability of a product. Additionally, there is a dropdown list that allows users to select the quantity they want. Upon hitting the submit button, both values are saved in the database. I need to ensure that the selecte ...

c#jqueryasp.netajaxasp.net-mvc

What is the term used for the objects that res.render passes?

I constantly find myself struggling with defining objects inside res.render. Is there a way to define them globally or outside of res.render? I hope someone can offer some guidance.. here is a sample code snippet: router.get("/home/blog", function(req,r ...

javascriptnode.jsexpressbody-parser

Animation not functioning properly after Ajax call in event onload

After making an AJAX call to load all the data, I encountered an error in the response data. The code snippet likeObj('#like'+postid).effect("bounce", {times:1,distance:25},400); throws an error stating that likeObj is not a function. I'm s ...

jqueryajaxevents