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

sending a POST request with fetch

When it comes to making AJAX requests, I used to rely on jQuery in the past. However, with the rise of React, there is no longer a need to include the entire jQuery library for this purpose. Instead, it is recommended to use JavaScript's built-in fetc ...

javascriptajaxfetchaxios

How can you store previously calculated values in a costly recursive function in a React application?

Consider a scenario where there is a recursive callback function like the one shown below: const weightedFactorial = useCallback(n => { if (n === 0) { return 1; } return weight * n * weightedFactorial(n - 1); }, [weight]); Is it possible to ...

javascriptreactjsrecursionreact-hooks

Launching the JQuery Dialog with an ASP.NET Button?

On one of my web pages, there is a form with two textboxes (username and password) and a submit button. If a user's membership is set to expire within the next 30 days and they click the button, I want a JQuery dialog to appear. Inside this dialog, th ...

asp.netjqueryjquery-ui

Not receiving a response from the server despite making a Cross-Domain GET request

I am currently working on implementing a cross domain GET request for an inline subscription widget. The idea is that users can enter their email address into a text box and subscribe to a mailing list without being redirected to a different page. The URL ...

jqueryajaxcross-domainget-request

Count the number of times an iteration occurs in AngularJS/JavaScript

I need assistance with my code snippet below, as I am trying to determine the count of all instances where $scope.rm is equal to "failed" or when $scope.percentage is less than 50. angular.forEach(result1, function (value, key) { $scope.percentage ...

javascriptarraysangularjsobjectiteration

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

htmlcss

The map markers are nowhere to be found on the map when using Internet Explorer

Take a look at this code I wrote... var styles = [ { "featureType": "landscape", "stylers": [ {"weight": 0.1}, {"color": "#E7EDEF"} ] }, ... { "featureType": "poi.park", "elementType": "labels", "stylers": [ ...

javascriptgoogle-mapsinternet-explorergoogle-maps-api-3

Scraping the web with Python: Selenium HTML elements may differ from what is shown in the inspect tool

In my current academic project, I am facing an issue with scraping news articles from websites. The problem arises when parsing HTML code in Python because the code obtained from the page source is different from what is shown in the Inspect Element tool. ...

pythonhtmlseleniumwebweb-scraping

How to download a file using AJAX in Laravel?

Is there a way to download a CSV file within an ajax call? I have an ajax request in my Laravel controller that successfully retrieves the file contents in the response. However, I am facing issues with actually downloading the file. Laravel controller c ...

javascriptphpjqueryajaxlaravel

Is selectpicker acting up?

Currently, I am troubleshooting a filter feature on a website that utilizes jQuery with JSON data. Everything was functioning properly until recently when an error started appearing: The selectpicker function is not recognized I would greatly appreciat ...

javascriptjqueryjsonbootstrap-4bootstrap-selectpicker

The layout designed with CSS Grid features two static sidebars, but unfortunately, the main content is not aligning

After deciding to experiment with CSS-grid, I encountered a frustrating roadblock. My goal was to create two fixed navigation bars on the left and right sides, with the main content in the center that would be scrollable. <div class="grid"> < ...

csscss-grid

customizable items or grouped items in a magento store

I am currently working with Magento, focusing on one product in particular - the Tshirt. This Tshirt comes in three sizes: "Large", "Medium", and "Small", each of which has 2 or 1 color options. For the "large" and "medium" sizes, customers can choose be ...

phpjquerymagento

Preview of Hoverbox Caption

I'm working on a website using the Hoverbox image gallery (http://host.sonspring.com/hoverbox/) and I'm trying to include captions for each image preview that appears when hovering over the enlarged image. However, I am facing difficulty as I hav ...

htmlcsshoverpreviewcaption

How can I utilize the JQuery GetJSON function to retrieve HTML content from an external webpage?

Imagine you're attempting a jQuery ajax request like this: $.ajax({ ... url: http://other-website.com ... }) You probably know that due to the same-origin policy, this request will fail because the URL is for an external domain. But the ...

javascriptjqueryajaxjsonhttp

Auto-Complete not retrieving the correct AJAX value when selecting a car option, instead showing the typed letter "c" in the input field

var rkey = document.getElementById("tags").value; alert(rkey); $("#tags").autocomplete(); I am attempting to obtain the ajax value of what I clicked on, but it is displaying what I typed in the input field. <form> <label for="tags"&g ...

jqueryajaxautocomplete

Using jQuery to initialize a slider with data obtained from a JSON request, which is retrieved from a PHP script

Currently, I am facing a challenge where I need to set up a jQuery Slider using data obtained from a PHP-SQL query that has been encoded into JSON format. The PHP side is functioning properly, but I am encountering difficulties in parsing the value (as th ...

phpjqueryjsonjquery-ui-slider

What is the right time to use parentheses when calling functions - and when should you leave them

Currently, I am following along with a tutorial at this link and I've come across some syntax that is confusing to me. The goal is to have "hello" logged to the console every time I scroll. function moveCamera() { console.log("hello"); } document. ...

javascriptthree.js

Targeting multiple frames in HTML

Have you ever tried clicking on a link and opening three different pages that target three different frames simultaneously? I've managed to open two separate pages targeting two distinct frames using href combined with the onclick function and locatio ...

htmlframetarget

Creating a jQuery navbar with transparent background for the initial landing page

I have implemented a jQuery script that changes the color of my navbar from transparent to a solid color, and I am wondering if there is a way to apply this effect only on the first page. Additionally, I would like to mention that I am using the same head ...

jquery

What is the procedure for making the menu background color transparent?

I need help changing the background color to transparent on my menu in desktop view. ul.dropdown-menu li { background-color: transparent !important; } <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="menu" class="menu"> ...

htmlcsswordpress