(First time doing this, so I hope I'm doing it right)
As a part of a bigger project, I'm interested in being able to show an iframe with the contents of another site as it would look if viewed on a mobile device. I understand that I might run into some issues later on with mobile-specific looks and such but with my current tests I'm using a simple site with no special mobile design.
So I started out with visiting the site on my mobile phone (Galaxy S3). Here's a picture I took as reference of what it looks like on it: http://i.imgur.com/n9rRKIx.png
The important thing to notice is where the text wraps. The first row is "Turtles are reptiles of the order Chelonii[2]"
Now, if I were to visit it on my computer, the first row would be longer: "Turtles are reptiles of the order Chelonii[2] or Testudines characterised by a special bony or "
If I were to just resize the iframe, it wont automatically resize the paragraphs and such, making them wrap earlier.
I decided to google it and see if I could find a site doing the same thing. However, each one I tried displayed it wrong. All of them have the longer version as the first row. Here's some of the ones I tried:
iPhone tester
Mobile Phone Emulator
Responsivepx
Screenfly
Here's an album showing the results: http://imgur.com/a/cRaAs
As you can see, most of them look almost the same, but none of them looks or wraps like my mobile phone. This is despite me telling these sites to use a Galaxy S3 preset if available.
To clarify, I am not interested in finding another site that does this (except as a proof of concept). I want to know how to detect things like where the text wraps and the font size so that I can replicate it in an iframe.
If I've left out any vital information, tell me and I'll add it.
Related
I have a VB forum that uses the CK editor which is amazing, but there are many features on the editor that simply confuse my members, most specifically in the image upload/attachment popup. I would like to simplify the popup by hiding some of the elements and changing some text descriptions. I asked for help on the VBulletin website, but because this is a plugin for their software, they don't really have much advice to help me accomplish what I would like to do. So, I thought I would go to the source.
This is what the pop-up looks like currently:
enter image description here
I made a mock-up image of what I would like the image pop-up to contain. I would want my forum logo to display instead of the VB logo or just have no logo there at all if it is too complicated.
enter image description here
I looked at the JavaScript for the popup and it was way too complex for a novice like me to begin to edit without detailed instruction. So, I thought maybe I could hide the unwanted elements using CSS. It looked good but still has a big footprint. Here is what I came up with:
enter image description here
The way I accomplished this was with the following CSS code:
enter image description here
This CSS edit works great on the desktop site, but the fields return if I visit the site on my mobile device. I put my browser into developer mode and chose the different phone and tablet settings and the hidden elements re-appear. I inspected the containers that I hid and the numbers are the same. For some reason, they show even though they are hidden by CSS. When I go back to the desktop browser, the elements are correctly hidden again. I thought maybe it was a browser cache issue at first, but it happens in both Firefox and Chrome as well as the internet browser on my phone and chrome there as well. I was able to get it to work like I described using the Firefox browser, but when I switch to Chrome browser, all the hidden elements reappear. :(
Anyway, I'm out of ideas on how to solve this issue on my own. So, my question(s):
Is there a way that I can edit the CK editor plugin to accomplish the simple pop-up I want for my site?
If so, can someone supply the correct code and the JavaScript file name I need to edit?
I would be most appreciative for any guidance. Thank you, sincerely.
Kether
I know a small amount of web development but not enough to make it a career. I am working for an organization that is restricted to using internet explorer and one of the main sites that we use is constantly undergoing changes and always has bugs.
I'd like to see if I can try to see some of the code behind the bugs sometimes. When I use developer tools on the site, I can see that there are about 20 or more JavaScript files downloaded. Each file is a few hundred to a few thousand lines long. Is there any type of tool that I can use in Internet Explorer browser tools that can show me what JavaScript is being executed when actions happen on the webpage?
e.g.: I click a button and a form appears. I then click a button on that form and a snackbar appears, but it always appears in random places. Is there any way I can see the JavaScript that was executed to display the snackbar, rather than search line by line in the JavaScript?
Well the answer is yes, but for more complicated sites it will be a painful experience. Without concrete knowledge of the javascript framework/library used it will often be near impossible.
Having the sourcecode for the website would help greatly. When the website has minified javascript it's pretty much a must.
Sometimes an element like a button will have an onclick attribute which makes a function call. Other time some function is attached to an element from javascript by addressing it by it's id etc.
Searching through the scripts using the F12 tools in Internet Explorer is very limited.
You can of course download some of the javascript files so you can browse them in a text/code editor. They may improve you ability to search etc.
If you can find some entry point you could use breakpoints with the debugger and step through to see what happens and what gets called.
So the situation is that I have a media PC (Ubuntu, kodi, mythtv, chrome) and I have a chrome launcher for things like netflix to open up. However, this creates an issue when trying to browse with the remote (using an xbox 360 media remote).
I think the easiest way to get around this would be somehow be able to use the arrow and OK keys to navigate around different elements on the site (so in the main screen the different shows/movies, and in them the different episodes etc). There are 2 ways I see to approach this:
1) A generic solution. This means it would work for all websites, and may be a page with javascript that loads the required webpage into a frame or something similar, or it may be a chrome extension.
2) A site specific option. So code written just to be run on the netflix page and could be run from something like CJS (https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en).
I think one of the hardest things would be to work out where elements are on the page to be able to go left/right as well as up/down.
Any ideas?
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
So we have a program that the user can use by copying text from a webpage they visit, alt+tabbing to the program, then pasting it as input. It would be more convenient for users to be able to do it directly in the site.
We were thinking of a panel that would be small and expandable, following them to each site they visit. Is this possible? Either a snippet of code that is auto pasted, or a JavaScript command called that would dynamically paste the code (is Scratchpad any help here, at least in FireFox).
We've never made a FF add-on, but it seems like if the dynamic panel idea falls through, an add-on would be the next best thing.
Basically, users should ideally be able to copy text, either enter a key combo or click a button, see the interface and paste in the text. Would either of these methods work?
A browser add-on or a userscript could certainly do this.
You can also write a userscript and use a user script compiler (such as this one) to convert it to a "true" Addon.
Alternatively your application could act as a HTTP proxy and inject it dynamically, but I'd guess that this would probably be more complicated than the other two approaches.
This site Polyvore used to do something similar, although in the 2 mins hunting around I could not find it, but I have used it and I think the technique was used by Google and Digg for a while. From what I recal it involved iframes and a bookmark in your browser.
Basically you could download a small piece of code that would sit in your bookmarks bar and this would allow you to navigate to a fashion website click on the bookmark copy a picture and insert it back into Polyvore.