Adjust webpage display with JavaScript

Utilizing the mobile-first approach of Zurb Foundation, I successfully created a responsive design. However, my client now requires a direct link labeled "View desktop version" in the footer for when the website is accessed on mobile devices or tablets.

There appear to be two potential solutions:

  • Abandon Zurb Foundation and develop new CSS files (potentially by extracting specific rules from the foundation core CSS for the grid); creating separate files for desktop and mobile. These files could then be loaded based on cookie values or URL queries. (Lengthy method)

  • Adjust the screen size parameters (such as max-width, min-width, etc.) using JavaScript to trick the media query into loading incorrect information that ultimately displays the desired results. (Creative solution)

Is the second option technically feasible? Are there other (simpler) methods available to accomplish this task?

javascriptcssmedia-querieszurb-foundation

Answer №1

A project I worked on required me to customize the meta tag, and I was able to accomplish this using a script/plugin that I have shared on Github: https://github.com/Trolleymusic/minWidth. I recently updated it with some demos for your reference.

It is important to note that Modernizr must be included for this to function properly.

To use the script, simply run it like this:

minWidth(x);

In the above code, replace x with the minimum width you desire.

If you view the demo files on your phone, you can see the difference between the two versions:

vs

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 specific operation of this function?

Could someone clarify how this function operates? I have a grasp on the ternary operator, which checks if the flag is true and if not, then it uses the second value. However, I am unsure why flag is initially a Boolean and how it toggles between true and ...

javascriptjquery

Two elements occupy the rest of the vertical space

In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...

htmlcssflexbox

Issue with page refreshing not functioning on localhost in Rails and AngularJS collaboration

I recently encountered a strange issue while working on my Rails 4.2 + AngularJS 1.5 project. Whenever I attempt to refresh (F5) the main web-page, there's about a 9 out of 10 chance that the refresh doesn't happen correctly. In these cases, all ...

javascriptruby-on-railsangularjsheroku

Is there a way to only retrieve the exception message once within the jQuery each function?

Utilizing the "Tempus Dominus Bootstrap 4" for time manipulation has been a crucial part of my workflow. Recently, I encountered a bug while implementing a function to clear all input values upon clicking a specific button. Unfortunately, the clear funct ...

javascriptjquerybootstrap-4

How can I change the color of a designated column in a Google stacked bar chart by clicking a button?

I am in the process of creating a website that compares incoming students at my university across different academic years. We have successfully implemented a pie chart to display data for the selected year. Now, we aim to include a stacked bar chart next ...

javascripthtmlchartsgoogle-visualization

Changing the event handler of a jQueryUI accordion dynamically from "click" to "mouseover" as needed

I am facing a scenario where I need to drag an item from a list and drop it into a target within an accordion. The challenge is that the target may be in a panel that is not currently open. To address this issue, I am looking to dynamically switch the acc ...

javascriptjqueryjquery-uiaccordionjavascript-framework

Encountering issues with setting up the <title> and <meta> tags in a Next.js

I recently developed a dynamic web page. It works perfectly fine when I test it on localhost; the title and meta tags are visible without any issues. However, after building the project, I noticed that the view page source does not display the title and me ...

javascriptreactjsnext.js

Failure to execute the success function

My current issue involves making an AJAX call to retrieve a record from the database. Despite console logs showing that the record is successfully returned, the success function fails to execute. function ajaxForParent() { var search = document.getEle ...

javascriptjqueryajax

Sending a PDF document and JSON data via an AJAX POST request

I'm attempting to send a PDF document along with some JSON data in string format using an AJAX method in jQuery to an ASP.NET WEB API (2). Below are my attempts that are not working: JAVASCRIPT: // Obtaining the authorization token works fine var hea ...

javascriptjqueryasp.netajaxpost

Make sure to save the HTML content after we make an AJAX call to retrieve it

Is there a way to call an HTML file using Ajax and then save the response as an HTML file in a specific location? I have been trying to make an Ajax call using jQuery, like shown below: $.ajax({ type: "POST", url: "../../../project/html/T ...

javascriptjqueryhtmlajaxjsp

inputting a pair of parameters into a function

While creating an action for react-redux, I encountered a problem when trying to pass two variables into the function - dispatch and hosts. Strangely, the variable host is being logged as a function instead of its actual value. This is my code: export fu ...

javascriptreactjsreact-redux

Error encountered: Cannot load Bootstrap date time picker in MVC due to ReferenceError: $ is not defined

My issue arises when trying to incorporate the bootstrap date time picker - the calendar fails to load upon clicking on the "glyphicon glyphicon-calendar" icon. Despite adding all necessary files, an error persists: Uncaught ReferenceError: $ is not de ...

javascriptjqueryasp.net-mvcasp.net-mvc-4bootstrap-datetimepicker

Utilize Sequelize to enclose a column with double quotation marks in a where clause

I am working with a JSONB column in my database. My goal is to make a query to the database where I can check if a specific value in this JSON is true or false: SELECT * FROM table WHERE ("json_column"->'data'->>'data2')::boo ...

javascriptnode.jspostgresqlormsequelize.js

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

I encountered an issue while trying to implement react-fancybox and received an error. https://i.sstatic.net/vgFha.png To resolve the error, I executed the following commands: npm install --save-dev @babel/preset-react, npm install --save-dev @babel/plugi ...

javascriptreactjsnpmbabeljs

Guide to expanding the sidebar width

As I delve into the world of CSS, I find myself puzzled by the issue of expanding the sidebar to ensure that the "Gestion des utilisateurs" section appears on a single line. https://i.stack.imgur.com/xzFEA.png To provide context, I have included an illus ...

css

In JavaScript, the event.defaultPrevented property will never be set to true

I've been experimenting with events in my script, but I'm struggling to understand the functionality of event.preventDefault()/event.defaultPrevented: var e = new Event('test'); e.defaultPrevented; > false e.preventDefault(); e.d ...

javascriptdom-events

Tips for incorporating dynamic URLs in Next.js

In my current project using nextjs, I am dealing with fetching images via an API. Right now, I am receiving the "Full image path" (for example, "https://myurl.com/image/imagename.jpg") without any issue. However, I need to figure out how to fetch the image ...

javascriptnode.jsreactjsnext.js

How to remove a specific type from a generic type in Typescript without using Exclude<>?

I am looking for a solution to prevent my function from working with Moment objects when storing values in local storage. Currently, the function dynamically stringifies and stores values, but I want to exclude Moment objects from being processed. Here is ...

javascripttypescripttypes

Creating CSS wrappers around div elements of varying sizes

I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below: <div id = "div1"></div> <div id = "div2"></div> <div id = ...

csshtmlcss-float

Creating a dynamic background color that pulses with animation

I recently created a script to animate the menu li element when hovering over the corresponding a element. Everything is functioning as expected, but now I'm looking to enhance the effect by having it continue as long as the mouse remains over the a e ...

javascriptjqueryhtmlcssjquery-animate