Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by L.Adlon

  1. Hi. I could use some help with something I'm trying to get compatible on all devices. So far, I got it working on everything except SOME iPhones and my parents iPad. I have two pages that both have an animation block done with an SVG tag containing a number of image tags, each containing a png image. Those all have a unique class defined, and are then animated via GSAP (Greensock, a Javascript-based animation system). I also have a still image png of that animation to serve as a fallback for devices that don't support SVG and/or Javascript. I have the page set up so it uses the fallback still by default, unless it detects support for the required items. If it passes that test, the fallback still is removed (display:none), and in its place, the SVG canvas is brought in. So, all that works great, except that on a few devices, it still isn't working. What I suspect, is that everything is fine except for the actual test for support. I think what is happening is that on some devices, it 'passes' the test, yet fails to display the SVG... resulting in a blank area where the still/animation would be. I've used a number of methods to test for SVG compatibility (all taken from online articles, as it's beyond me to think up code to do that sort of thing), but I suspect most/all of them are testing for support for the SVG tag itself, whereas I think I need to test for support of the IMAGE tag within an SVG canvas (between the opening and closing SVG tag). So, I'm hoping someone here might be able to outline a contemporary, well-supported bit of code to test for that specific requirement, as opposed to just the SVG tag itself. The basic structure of the animation/still block is: <div class="graphic"> <img src="img/fallbackstill.png" class="fallback" /> <svg height="300" width="300" class="anim"> <image x="0" y="0" href="img/head.png" class="head"/> <image x="0" y="0" href="img/body.png" class="body"/> ....and so on.... </svg> </div> Again, the fallback image is removed via display:none if the device does support SVG and Javascript. An example of one of the support tests I have tried using is: <script> var svgSupport = !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect; if ( svgSupport ) { let animblock = document.querySelector(".anim"); document.querySelector(".fallback").style.display = "none"; animblock.style.display = "inline"; animblock.style.maxWidth = 300; animblock.style.maxHeight = 300; } </script> So, if the test is passed, I remove the fallback image, and change the animation item's display value from it's default (set in CSS) value of none to inline, to put it where the fallback image used to be. So, only one of these two items will ever be present... The animation block is 'none' by default, and the fallback image is 'inline' by default.... If the tests pass, the values of those two are reversed. That's the theory, at least. Seems to work on most devices, but I do have a few troublemakers... namely (so far) SOME iPhones (it does work on some), and my parent's iPad (...which may only be because it is old, and has never had an O/S update.... I DID get it working on my ancient iTouch, despite the fact that it wasn't working on it previously). So, again, my theory is everything is working, but that the test is not actually testing for the very thing that ISN'T being supported... namely the image tag within the SVG canvas.... seeing as that's the only thing I have inside the SVG canvas. I'm open to any theories. I've managed to improve matters (...got it working on the ancient iTouch), but am a bit out of my realm when it comes to modifying the support test to check for image support (within an SVG canvas) specifically... assuming that's the issue. On the devices that support it, the SVG animation displays perfectly. On my iTouch, it properly displays the fallback still image.... but a few devices just leave a large blank area in place of either of those... which I suspect is because it is passing the test, removing the fallback image, and TRYING to display the SVG canvas and failing (...which, since the SVG tag has been tested for, theoretically leaves only the image tags to be potentially unsupported). Any help on this would be greatly appreciated. I'm sure this will be child's play to someone here... either in realizing what could be wrong, or in modifying the code so it will be more specific in what it is testing support for. Hope you can help! Thanks!
  2. Yep, I can't say I've ever seen this kind of thing before... Normally, it just would open up the new window, and that would be on top of the old one. I thought maybe it was some weird cache/buffer reaction, but I don't know.
  3. Normally, I'd jump on that, as I am always learning new things...as I'm a one-man-band over here. But, I have way too many other things I'm currently learning/doing.
  4. Hi. I'm really hoping I can get some feedback/help. Sorry if this is in the wrong area. I see that someone else was asking about PayPal here. I sell a handful of digital download files online, using a third-party e-commerce service, but have recently been looking for alternatives. It's been a very frustrating battle, researching the various options, finding/trying them, only to find many are confusing, lack proper documentation, lack needed features, or assume knowledge regarding requirements/setup is 'common sense'. I've looked at things like OpenCart, AbanteCart, etc... but didn't get far with them. I seem to have the 'paying' part of the process currently covered... using PayPal single purchase buttons (and having defined the button/product details and the tax rates in PayPal). So, that's all good. Where I'm still battling is the actual distribution of the files. With my current intended setup (as an alternate to the one I've been using up to now), I would receive the PayPal notification email, and then send each customer a direct link to the ordered files, hosted on my own webspace. That's one of the more simple solutions, but involves a lot of manual work, and requires me to be at the computer all the time, (so to speak). I'm also not sure of the security and efficiency of it. Any pre-made e-commerce solution I've tried so far (ex. OpenCart) has far too many bells and whistles (wishlists, newletter subscriptions, slideshows, etc) for what I need, and it seems removing them often requires modification of several files. AbanteCart seems to allow you to easily select what is and isn't on a page, but completely lacks any kind of documentation on how to set things up (and only seems to explain what all the buttons do... not what to DO with them). OpenCart has a huge number of premade templates(?), but searching through them, and knowing exactly what they do (and what their requirements are) is very frustrating (and again, seems to assume the knowledge of many things is common sense/knowledge). I need the transactions to be done outside of my (non-SSL) webspace, on a secure system (...like Standard PayPal transactions do). Again, I currently have set up an alternate product page (currently offline, waiting to replace my current one, which uses the third party e-commerce service), set up with standard PayPal buttons... So, the payment/tax part seems covered. I'm just trying to sort out a SIMPLE method of automatically providing customers with a time/attempt/IP limited link to the product (ideally). Obviously, I'm concerned about link sharing, and hacking into my webspace.... but I'm not familiar enough with the methods used, nor the available solutions. Any research I have been doing towards this in the last few weeks has been really confusing, as I don't know the overall requirements and assumptions. With many cart solutions, I'm unclear if they assume a secure SSL site... or if other elements are required, etc. 1) Can anyone point me to an idiot proof file distribution system (or simple cart solution that caters to controlled digital download links), that utilizes a standard (not on my site) PayPal business account transaction? 2) If I end up going the manual route, simply sending direct links to customers to the product files on my webspace, what methods can I use to make the distribution system a bit more secure? I'm applying password protection on the folders, unique for each customer, and will have the user/password access time-limited. But, what else can/should I do? I was looking into using tinyurl to hide the true path of the download link, but am unfamiliar with it, and am not sure if it's a good idea or not. I'm also not sure if investing in things like SSL are relevant in my case, or worth the trouble/money. Sorry, it's a huge, complicated subject... but that's half the problem, is learning it all, and understanding what is all required. I have no idea where to look, as all videos I've found have either been way too simplified (the traditional cartoon sequence telling the story of 'joe who wanted to sell things online...'), or too specific (covers a very specific task in a specific software), or shows setup, but assumes certain things that aren't mentioned (ex. site has SSL, other plugins/elements installed, etc). At this point, I can either go full manual (...PayPal buttons on my site, but I manualy send direct links to the locally hosted files on my webspace).... or set up some sort of cart (that uses the PayPal standard business account I've set up).... assuming I can ever figure it out, and be sure that what is set up is secure and functioning properly....which, so far, doesn't seem likely.
  5. I don't even know what e4x is referring to!
  6. Yikes, that's way out of my league... I know next to nothing about PHP scripting. Thing is, the link would be in an email, not a webpage... so not much control can be had. I can't just email the files themselves, as they are well over 10 megs. This is basically a fully manual process, where I get notified by PayPal when someone deposits money (makes an order), and I then prepare the folder and file, and email a direct link to that file. There's obviously better (and fully automated) ways to do it, but creating that is well beyond me (and I've had a seriously frustrating time trying to research 3rd party providers for that sort of thing). Thanks for the suggestion, though... Just way over me, unfortunately.
  7. [ Shrugs ] Don't know... I still have to check the Flash file itself, and see if the canvas itself isn't white. I'm assuming it is, since I'm sure I'm not using a white rectangle as the background. But, I do have the check that to be sure. Ya, maybe the Flash plugin itself has a grey background.
  8. Ha! Once again, my tradition of figuring out the answer right after posting the question still continues... Okay, so one (good) solution is to simply upload it as normal, as a .mov file... and then rather than have the customer click the link in the email, have them right click on it, and select Save As.... So, the only question, though, is whether this function is available on all devices/browswers? (I guess we'd be talking about email programs, since they would be right clicking on the link in their email program, unless they are using web-based mail). Just want to be sure it'll work for everyone (and I don't have all existing devices/browsers to fully check them all). Any comments?
  9. Sorry if this is not an appropriate location for this question, but I'm hoping someone can help out here. It's more a browser thing than HTML, technically... If I give a link (in an email) to an online .mov file, I find that browsers like Firefox will autoplay the file, and will not allow the user to save the file. I'm trying to find a method to link the file, and allow the person to download the file to their computer. (I'm delivering digital download products) I could simply rename the extension, so it won't be recognized as a movie file, and instruct the customer to rename it back to .mov... but that could be a bit tricky (for non-computer savvy customers) who don't have extensions visible on their system (...and I don't know how things would work on mobile devices and other systems I'm not as familiar with). I could upload the files as a .zip... and opening it would be easy on Win7, where .zips are supported natively (right click on it and Extract)... but on XP, you'd need to download a zip program, and I have no idea what the deal would be on mobiles and Macs. I'm just trying to think of the easiest means to provide a direct link for customers (specifically, ones who are not as computer savvy, or don't have the ideal setup for whatever method I end up using). Any suggestions? (Such a ridiculously easy thing, made complicated by an otherwise well-meaning feature!) (I see someone else asked a similar question, with regards to an mp3 link... but in my case, I'm not putting the link on a webpage, but sending it in an email.)
  10. It's strange... The blank browser window is (by default) white (...I assume a full white)... my HTML page is also full white (and therefore, it should be seamless). However, when my page loads, there's a brief moment where the page goes to a light grey, and in doing that, the small white embedded Flash movie block (that is set as white as well, to make it invisible against the white HTML background) is briefly revealed. I wonder what that brief moment of grey is? I can't seem to control that. Everything (that I'm aware of) is set to white.
  11. Ya, but the weird thing is, on my browser, the behavior seemed random. Sometimes, the newly opened window remained on top (new browser window was on top of the first one). On other (seemingly random) occassions, the new browser window would open, the content displayed, but then the first window would suddenly go on top of it again (within a second or so). I've never seen that kind of behavior before, as the new window (previously) always displayed on top, and never switched back to the first one again. Maybe I'm using the term 'focus' the wrong way, as I think that applies more to which ELEMENT on the screen currently is 'highlighted'/active. Whatever the case, my main concern is that (seemingly randomly) the first browser window suddenly 'goes on top of' the newly opened second browser window. If it IS in fact a browser setting, why would it only do it sometimes?
  12. Another odd little thing... I have an animated GIF logo, set as a hyperlink to enter a site. All works just swell, but I noticed that SOMETIMES, when you click on the GIF, it will disappear (replaced with a white outline) before the next page loads... almost as if there was a missing rollover graphic. Most times, it works fine. It's only occassionally that it does this. Weird that the image would disappear when it's loading the next page. Any theories and/or suggestions on how to 'fix' that? (My appologies to anyone who violently convulsed when I mentioned 'animated GIF' and 'rollover graphic'....)
  13. If I have a hyperlink to another page, and have it set with target="_blank", does the newly opened page always get focus (...or, maybe I'm using that term wrong... will it always open up and be displayed on top of the previous page)? I always assumed it did, and it always seemed to. But, as I've been working on one of my sites today, and tested one of the links, I think it opened the new page, but kept focus/display on the previous page. So, I'm wondering if this is ever possible, and if so, what can be done to assure the new page is always displayed. This was on Win7, BTW. [Additional note] Ya, it just happened again. Seems random. I have a link to a YouTube page (set to target="_blank"). I clicked on it. It opens a new browser page (YouTube page), plays the video, but then the tab for the previous window suddenly gets 'focus' (sorry if that's the wrong term), and the page I came from is displayed, rather than the newly opened YouTube one. I tried it again, and it worked fine (new page stayed on top). What's the deal there?!
  14. Yep, sounds like it'll do the job just fine. Pretty much all of the websites I've done have had a common header, nav buttons, footer, etc. I've been thinking of finally utilizing something like the php include to make it easier to do global changes. Thanks!
  15. Ya, I get the whole concept of preloading... I'm just wondering if the concept of the code I showed there only serves to load images (and not display them)... and if that's the case, I just wanted to verify that unless you are loading images that will appear 'later' (on another page, or images that are currently hidden or next in line to be showed in a slideshow or whatever), the method will be redundant and pointless. If the images are on the first page, preloading them would serve no purpose, and would be the same effect as simply having them on the page, as far as load+display order and speed. Just trying to verify my understanding of how it works and what affects it has.
  16. For the reason that the preloader is more for images that will appear on other pages (and downloads while you are viewing the first)?
  17. Interesting... Thanks. Ya, I'm not sure if that's the thing I saw years ago, but it certainly does what I'm after. What's the compatibility status on that? I can't seem to find a support chart for that on my usual support chart page. Is this something that people generally use (for common nav buttons, headers, footers, etc)... or do they still just write the code in each page?
  18. Hi. I seem to remember reading about this method (or something along the lines of it) long ago, and I'm wondering if someone could refresh my memory (or correct me) by outlining how it might be done. If you have a block of HTML code (...for example, a common interface that appears on multiple pages), I seem to remember there being a method of having that part as a separate HTML file, and then merging that into each of the other pages, rather than copying and pasting it into each one (and having to change all of them individually if something gets modified in that block). Is that correct, and if so, how is that done? Also, what is the compatibility of that these days? Are there any issues or considerations still remaining?
  19. One thing I'm curious about... I've found one suggested 'preload' method on the Net: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px ...but, what I'm wondering is this... If the images loaded using this method are all present on the first page, is this method doing anything, or is it redundant? Does it actually serve to do something different than just having the images on the page? Does it cause the images to load before the page is displayed? I can see something like this working to load images needed for OTHER pages (without displaying them) while the visitor is viewing the first page... but if all the images are on the first page, does this kind of method serve a purpose? (I'm not saying I argue the logic of the method, as I'm not entirely sure how it works and what affect it has as a result... I'm assuming it just loads the image, but displays it 'offscreen'. I'm just curious...)
  20. The only thing I've tried is putting it in a single cell table (again, with the assumption that it wouldn't be displayed until fully loaded, due to it being in a table)... and I tried some preloader coding I found. The onload event thing sounds interesting. I'm not familiar with it, though. Is that javascript? I'm trying to avoid (or at least minimize) the javascript use... partially out of fear of compatibility (people having it disabled)... and partially because I'll probably not know how it works, so it'll be a nightmare if something needs to be altered or something goes wrong. So far, though, the graphic seems to pop in pretty fast... maybe even instantly, in most cases. (Or, perhaps the 'display when it's loaded' theory is working, and it is actually being held off until it loads... Either way, it's working nicely... The rest of the screen doesn't tend to display without the graphic, so it's either loading nice and fast, or it's holding off on displaying ALL of the screen until it's all loaded.) The image is by no means huge, but it's certainly not your usual 10 frame postage stamp sized thing. It's a full size header (900x100 or so), and probably about 120 frames! It's about 1.4mb. I may experiment with a video version of it. As long as it's equal or smaller in file size, and is fully compatible and doesn't require too many hoops to be jumped through, I may replace the animated GIF with that. But, the GIF is working very well.
  21. And hello again.... Could someone outline for me a pretty airtight (but simple) method to have an embedded video, but ensure that it falls back to a still image if it fails? For my purposes, it's not so important that the video plays on ALL platforms, as long as it falls back on the still image. This is for a splash page... which, ideally, I want to have animating (loop)... but not at the cost of lots of code and multiple formats and such... As long as it works on 'most current browsers/systems', and gracefully falls back to a still image, that would be great. I'm thinking maybe using the <video> tag . But, that means I have to do the page as HTML5, which MAY exclude some people.... although I was surprised to see how many of the browsers my friends have (who I have testing things out for me) are seemingly HTML5 compatible already.
  22. For those following along, I finally found one that actually worked for me: #container{ position: absolute; top: 50%; margin-top: -200px;/* half of #content height*/ left: 0; width: 100%;}#content { width: 624px; margin-left: auto; margin-right: auto; height: 395px;}<body><div id="container"> <div id="content"> <h1>Centered div</h1> </div></div></body>
  23. I tried this code, suggested elsewhere on the web: #floater {float:left; height:50%; margin-bottom:-120px;}#content {clear:both; height:240px; position:relative;} <div id="floater"><div id="content"> Content</div></div> But that didn't work at all for me in Firefox, for some reason.
  24. Ya, the jquery stuff (and scripting in general) is a bit out of my element. Trying to keep it simple (...and understandable to myself). I would normally be teaching myself jquery and scripting overall, but I just have a million other things to do (...as I teach myself just about every other thing!). The theory is fairly sound though, don't you think? Table elements have to load first before being displayed?
  25. Sorry. I'm sure you guys get this question all the time. I did a search of the forum, but couldn't seem to find it. I found TONS of solutions on the web in general, but it seems everyone has a different method. Seeing as I trust the w3schools methodology, I figured I'd ask what the current, best, easiest way to center a fixed-size <div> currently is. I'm not terribly concerned about older browsers... This is just for my splash page, and having it sit at the top of the screen is a small price to pay for simplicity and compatibility with current browsers. I have three items... a single row of text, under that, and image, and under that, a short paragraph.... all to be horizontally centered (text alignment, too), and vertically centered (...doesn't have to be exact... I just want it generally in the center, vertically). The negative margin method seems to be popular, but I'm getting discrepencies as far as some of the attributes.
  • Create New...