Making a document for the designers that displays the desktop and mobile examples of each visual component in a style library. Client wants to see the examples of each on the page at the same time.
Currently doing this by putting it in an iframe, similar to here. Unfortunately the iframe solution is causing odd complications and side-effects.
I was wondering if theres a better/simpler way I can tell the container of the mobile example to use the mobile breakpoint media queries?
Related
I would like to create a client-side screen capture of the actual webpage without a browser extension. Some bug reporting sites solved this problem so it seems to be possible. Browser compatibility is not an issue. It is ok if it works only on modern browsers.
I have tried html2canvas, but want a more accurate representation. So try to use WebRTC getDisplayMedia. I have tried the WebRTC example.
It works, but the screen selector dialog has too much information. Screens, apps, tabs. Besides this, it doesn't reflect the actual site design.
In my case, I want always the actual browser screen where the user clicked the capture button.
Is there a way to preselect the current tab and eliminate the screen selector dialog?
Or maybe some other solution/technology?
When you open a website in LinkedIn's app (iOS), html5 background videos set to autoplay do not play, and animations do not fire unless you stop scrolling. So, it often looks like there is a bunch of empty space when you use fade and slide animations.
Here are a few examples (you must view within LinkedIn's app to see the issue)...
Background video
https://jobs.netflix.com/
https://thelovinggroup.com/ (also has animation issues)
Animations
https://voidwatches.com/
http://www.clearmotion.com/
Any thoughts on how to tackle this issue until LinkedIn builds a better browser?
I've looked into browser detection as a possible solution. Thinking maybe I could do an if/else statement to check if it's a common browser (Chrome, Safari, Firefox, etc.), else do something else with those videos and animations.
But everything I've read for browser detection strongly recommends against using it unless you absolutely have to (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent).
Any thoughts would be very much appreciated!
UPDATE
Ok, so I've implemented the code from this Github project to detect UIWebView: https://github.com/simpleweb/UIWebView-Detect
And it works well! However, I really need to differentiate between LinkedIn and other apps with WebView because LinkedIn is the only one with these issues.
I used Udger's parser (based on what I found in another Stack Overflow post): https://udger.com/resources/online-parser
And I can see that Facebook has its own browser, but LinkedIn seems to be using some version of Safari.
I feel like I'm starting to get closer, but I'm still not sure I've come up with a solid solution.
I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?
Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.
What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.
Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors
I am using the magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) but I don't need to use this one. I have just used it before and it worked well.
My questions is how to actually trigger different lightboxes from inside a SWF?
We have one SWF that has images and animation located at six different sections of the screen. It's sort of a launch page and each section has an image with some animation and when the users clicks on a section another web page will load.
This application will be hosted on a computer with a touch screen and we were using a kiosk app to run the app and it had a small navigation bar built in but now we are using a different operating system that works better with the touch screen hardware (OSX to Windows 8) but does not work with the same kiosk app. I also can't seem to find any kiosk apps that do the same thing for Windows 8.
Instead of using a Kiosk app I would like to just use Chrome in Kiosk/Fullscreen mode and have each section open in a new lightbox window instead of using a navigation bar. However, I can't seem to trigger the lightbox event from within the SWF itself.
Any help greatly appreciated.
In as2 something like this getURL("javascript: lightbox(maybe-attributes);"); or using flash.external.ExternalInterface class. I don't know in as3 if there's another class/method
Christian find perfect match with this jquery/flash.external.ExternalInterface
http://grasshopperpebbles.com/jquery/actionscript-using-lightbox-with-flash/
So I'm trying to build a mobile and desktop version of a website simultaneously (using a MediaWiki engine, if anybody is interested). Since I don't have much experience with mobile device building, I was looking around for some good mobile development practices. In the end, I feel media queries are good for what I need to do, mostly because double-publishing on separate domains (like m.foo.com vs foo.com) is not possible for this task.
The shortcoming to CSS media queries, it seems, is the apparent inability for phone users to view the site in desktop format whenever they want to (Google or YouTube is a good example of this when accessed using a phone).
Is there any way for me to freely toggle between desktop and mobile stylesheets developed with media queries? Would using javascript be too bulky for a mobile device to download?
I appreciate any suggestions. Thanks!
EDIT: For clarification, yes, I want to click a link or button on the mobile style to switch to a desktop style.
I'm 90% sure that it is not possible with CSS alone but can easily be accomplished with PHP or Javascript. It shouldn't be too bulky to use javascript.
Some examples
PHP Style Switcher.
Javascript Style Switcher
Jquery Style Switcher