I am building an application where there would be 3 preview buttons (Desktop, Mobile, Tablet). Users will be able to create their own design (such as card view/accordions) which would inherit bootstrap classes for responsiveness. Once they click on the preview buttons for eg Mobile/Desktop/Tablet, their created components would behave as per the viewport.
The necessary CSS is in place. The scenario can be achieved if we are using an iframe to load the component. When we are using the iframe that time the viewport behaves as a separate element, helping the CSS to render as it's getting the desired width for the breakpoint. But without the iframe it's not able to bring the outer shell, hence the CSS is waiting for the entire browser to resize, and then only it can show the changes.
But I would want to remove the iframe dependency from the project. The project is being built using angular js 11.
For better understanding, it's the same thing that we experience when we do inspect elements and switch on the mobile emulator in chrome.
Any kind of help or another solution way around is highly appreciated.
Related
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
I need to develop a widget IIFE library loaded through a <script src="..."></script> tag delivering some features through some UI components.
Since I have no control over the page layout and #media queries relate to the window, not to the container, I really fail to understand how to make responsive components that will adapt and look great in every situation.
Using iframes allows to overcome this issue as #media will then relate to the iframe wrapping the web-component, but iframe come with a lot of downsides.
Hence, how are Web Components made responsive without iframes ?
Unless you have a load of time and make an UI for every possibility, and the technical ability to do that, I suggest you to simply fix limit on the integration of your component. For instance by just documenting them.
This component is made to be integrated with mobile and desktop. The UI components are made to be integrated in a 480-600px width block in HD screen, and in mobile they're made to be integrated in a 240-300px width block.
Background of the problem - I am creating a simple HTML landing page using create react app node package manager.
I started having problem when I tried to make the website mobile friendly.
Specific problem -
When I check the create react app public folder, I do not see anything wrong with the viewport meta tag and it is as is should be.Here is another screenshot.
When I open the website on the mobile its zoomed in and the background color is out of proportion. I am guessing it is happening because of viewport meta data not getting rendered correctly.
Anyone with a react and CSS skill combined will be able to figure out what is making this happen. I am attaching a gif of the problem below.
link two
I need help with fixing the viewport meta data for a landing page created using Reacts scaffolded 'Create react application'.
I am trying to make the site mobile friendly however am facing the following issue. Kindly load the following link on a mobile device or mobile simulation mode in the browser.
http://sagarmunjal.github.io/learnreactjs
Also, when the page resizes. I would want to learn how to make the text resize/ adjust according to the window being resized.
The code is available at master branch. https://github.com/sagarmunjal/learnreactjs.git
Any solutions are highly appreciated.
Your .Hero-h1 has a font size of 3.5em which is making the title stretch outside of the page making it bigger than it should be. This might be a problem with more of your layout.
I suggest you look into media queries if you want to make a responsive website. Here is a good article on the subject: https://css-tricks.com/css-media-queries/
I'm building a CMS based on Zurb Foundation, and one thing I'd really like to do is allow the user to switch between large/medium/small layouts via a button so that they can both preview how the page looks at this size, but also so they can set up columns etc. for different breakpoints.
Media queries are predicated on the window width, and I've been so far able to build something that my users find quite intuitive, and I feel that asking them to resize their browser window to change the mode seems a bit iffy.
An immediate way that I can think of would be to use an iframe for the main edit view, but the problem is that the page interactions I have are quite complex, drag & drop, drag to resize etc. - I have all of these working at present with both mouse and touch, and in order to drag & drop between the parent and an iframe I'd have to rewrite a significant amount of code. So I'd rather avoid this if at all possible.
I'm looking for suggestions/advice on how I could make this work - workarounds and hacks are fine.
This is how it looks at the moment, to give you an idea of the kind of interface I currently have - no live link that I can share atm, sorry:
OK - this is the solution I've come up with so far - the whole page, not just the editor area goes in an iframe.
https://gist.github.com/nrkn/00e1fb7cc4c7b43329a3
https://cdn.rawgit.com/nrkn/00e1fb7cc4c7b43329a3/raw/69a85b12dda7cece2b7ed602503c45d16f898d15/iframe-rawgit.html
Cordova 3.3.0, jquery, html, javascript, css
I am creating a mobile application using cordova 3.3.0.
On the second page I need to render a new page (html or url) in the middle of screen with respective to device width.
I need header & footer in fixed position at top & bottom respectively.
Middle part there should be one div or frame in that html or url page should render.
I have tried using iFrame, Cordova's InAppBrowser API both are not working. iframe is not scrollable & its contents are not squeezed. InAPpBrowser opens a new html covering total screen.
Please suggest me any working solution.
Thanks in advance
Use jQueryMobile. http://jquerymobile.com/
It renders pages and has ready-to-work transitions from one page to others. The page definition offers the possibility to have fixed headers and footers. jQueryMobile also offers a wide variety of controls and events suitable for mobile phones.
Be aware that depending on the user group of your software, despite of jQueryMobile you may still encounter the fact that many phones don't behave as expected, especially older phones.
Android phones used to be terrible in rendering transitions, so people came to shut them off or to replace them by simpler ones. Some very old phones had problems because the fixed footer at the bottom appeared suddenly in the middle of the screen or was not put down again after the keyboard disappeared. There will always be such details.
Yet still, jQuerymobile is probably your best option because of the work that has already done for you. Good luck :-)