(first post on stack overflow!)
Computer Engineer, but I'm fairly new to web development and I'm trying to learn all the best practices.
I typically add my styling class to a div when adding an image. (not so sure this is the best way anymore)
So for example, right now I'm adding a div with a border and a max width/height of 100% then letting the image inside the div expand to either but not outside of the div.
This however isn't working in IE9. Its expanding the to image full size creating major layout issues.
This has probably been gone over but I couldn't seem to get the search terms right to find the answer.
So is there a standard way to fix this? Even though it won't really be too difficult to add max-width and max-height to the tag I don't really wan't to do that..I'm sure there will be some issues with doing that. This site I've been working on is getting fairly large and VERY complex.
I think internet explorer might be a tiny bit retarded. How did it ever become a major browser!? Go Chrome!
Thanks!
Related
In my project I'm using swiper.js as a slideshow, each slide either contains and image or a html5 video with webvtt captions / subtitles.
On debugging, we noticed that the subtitle position is wrong (too low, cuts off screen) on webkit browsers.
After much debugging it turned out that this css3 rule on the parent div (the swiper-wrapper) makes the vtt position wrongly:
transform: translate3d(-1024px, 0px, 0px)
When you put the video in the first slide, all goes well, since there's no css translate yet.
This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.
The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:
WEBVTT
00:00:02.160 --> 00:00:06.440 line:90%
hello world
00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles
Any sentence without the "line: 90%" part is rendered partly offscreen. It seems this setting forces the webvtt parser / renderer to set itself to the correct position.
QUESTION: did anyone encounter this issue yet and is there any other (easier) workaround for this bug? Adding the "line:" part to all subtitles would be a hell of a job.. unless there's a good editor that can do that stuff in batch.
QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?
Test setup here: http://orgonemedia.nl/webvtt-bug/
I'm currently debugging some WebVTT files for English captions and other languages too. I'm experiencing a similar problem, although I can't say what is exactly causing it. I'm going to try the line:90% fix you've suggested here.
ANSWER TO YOUR QUESTION 1: Regarding the job of adding it to all the subtitles, you'll be happy to know that's actually pretty easy with the right tool. I use Sublime Text Editor. The way I would do it is use "Find all" to find all the occurrences of -->, then simultaneously edit each of those lines, using the arrow key to navigate across to the right place on the line (since each subtitle out-time is the same number of characters, 12), then type in line:90%
UPDATE:
So I implemented your suggestion, using the method I outlined, and it successfully repositioned my captions.
More details: I was only experiencing the problem of captions being half off the bottom of the video when viewing on an iPad. Oddly enough, viewing the same page on an iPhone, they were positioned correctly without any change. The 90% change still adjusted it up though.
Intriguingly the line:90% code does nothing to adjust caption position when viewing the page on Chrome.
I'm having trouble getting much at all to display on Safari desktop. I think there's something invalid about my file format, but I'm darned if I can find it.
When editing the captions through my video hosting service's caption editor (I'm using JWPlayer), the timecodes show up as being invalid:
Image showing caption editor with invalid warning
Having a bit of a conundrum with cross-browser compatibility and could use some help.
Our live version linked to below, seems to work perfectly fine on most browsers, including IE9+, but the controls appear hidden in a non-emulated stock out-of-the-box version of IE8:
http://dig-houston.com/portfolio/inspiron
Here's a screenshot of what it looks like in IE8:
At one point, I was still able to slightly see the controls sticking up from the bottom (and click) which lead me to believe something had gone awry in absolute positioning or the rejection of newer CSS techniques. But as my fine tuning progressed and heights were adjusted, I believe the controls were hidden further out of view outside the box.
That being said, I think this is just a CSS issue, but haven't targeted the right styles being applied yet. To anyone else out there using Video.js
Currently, I have an RSS Feed Reader in a UITableView within a Navigation Control. I would like to click on the links and Open up a formatted page (containing all of the information from the website formatted for the iOS screen). I'm not sure if I should do this using the RSS data and a UITextView? I'm currently attempting to use UITextView in hopes that I can separate the information (title, author, body) without anything looking promising. I want to be able to move around the data and format it to my liking in the actual application itself. I read around and noted that you can include HTML and custom CSS. Would this be the way to go? I'm not quite sure how to tackle this. I want the page that opens up to be entirely scrollable (Like the IGN application or Slashgear application). Many apps for websites utilize this (and I am a bit new to this). How do they go about this? I also want to note, at some point I will like to cache the data so it may load what is already loaded without being connected to the internet. Does anyone have any ideas?
Edit:
Ok, I believe I found the correct path to go down from playing around and a lot of googling (nothing directly says what a decent way of doing this is). My particular way as of now is the route of a UIScrollView in general. Now the part I don't understand is how to divide up the long text into 'pages' for scrolling (and I am using the paging feature. This situation has led me into this question: How To Separate Strings For UIScrollView/UITextView based on the size of the frame
Ok, I believe I found the correct path to go down from playing around and a lot of googling (nothing directly says what a decent way of doing this is). My particular way as of now is the route of a UIScrollView in general. Now the part I don't understand is how to divide up the long text into 'pages' for scrolling (and I am using the paging feature. This situation has led me into this question: How To Separate Strings For UIScrollView/UITextView based on the size of the frame
Can anybody identify the carousel used on this site? It seems to work seamlessly with responsive sites and would with little css changes suit my design perfectly. The source shows something called anchorScroll.js but a search comes up with nothing.
It's a custom solution and not a plugin. Look for Application_NewsSpinner in http://cdn12.grohe.com/application/resources/javascript/scripts/common.js at line :1072
But don't steal code! It's fine to get inspired but you should find your own solution or take an official plugin! Take a look at http://finnrudolph.de/ImageFlow or http://www.jcoverflip.com/demo
I've been programming for a while, but just recently decided to start developing for Mac OS X. I feel like I've come to grips with the basics of Objective-C and Cocoa development over the past week. I'm planning on making graphics apps, and as such am currently in the process of learning how to control Quartz compositions through a Cocoa app. I went through the tutorial that apple offers (with the Mac Engravings composition), and was able to create that just fine. In order to make sure that I truly understood what I learned, I decided to create my own composition and link it to a slightly more complicated Cocoa application.
Essentially, I have a composition that loads a movie or image through a Movie Loader patch, at which point it applies various filters to the frames before outputting it. In my Cocoa app, I've written code (or rather copied and pasted from other apple examples) that lets a user pick a file using an NSOpenPanel object. The filepath of the file they pick gets placed in a text-box that I placed in the app's window using Interface Builder. I binded the value of said text-box to the "Movie_Location" key in my composition, which is a published input in the Movie Loader patch that I'm using. However, no matter what I do, movies and images aren't loaded into this composition no matter what I try. The only thing that gets displayed is the default image that I have saved in that input from Quartz Composer (or nothing if I leave it blank before publishing).
I've added a Clear Color patch to the composition and binded that to a colorwell in my UI, and that successfully changes the color in my display, so I know that the composition and my Cocoa app are communicating. I've spent numerous hours at this point trying to figure out what's going on, and I've just about given up. Does the Movie Loader have any weird behaviors that I'm not aware of, or is there something obvious that I seem to be missing? I'd really appreciate any help or advice from anybody.
Thanks for reading through this...
Best,
Sami
There are two things I can think of as reasons why it is doing this:
The file path isn't formatted incorrectly. Try checking backslashes, colons, etc.
The box isn't updating the value. Try literally clicking in the text field and hitting enter.
That's all I can think of without seeing your quartz composition and/or code.
EDIT:
Check the other continuous box, in the general properties.
I figured this out yesterday. spudwaffle's second idea is what was going on. If I were to type a filepath in and hit enter, it would work just fine. I got this to work properly by just removing the bind and instead using the setValue:keyInPath: function that a patch controller offers. That said, is there some way to force a text-box to update? I remember seeing a "continuously update" or something like that button within the bind sub-menu in the inspector, but my code didn't work with that checked either.
Thanks to those of you that tried to help me! I really appreciate it.
Best,
Sami