This is quite an unusual one, and I had no luck googling this issue.
Short version - I've created a basic webpage for my work, to streamline some tools into one place, which works differently when I open it at work, compared to when I open it at home.
Details - When I've designed it at home, I'm using a lot of hide/unhide content (bootstrap4 collapse buttons), which unveil content with a nice simple sliding animation, as does the carousel at the top with various images sliding across- However when I open the webpage at my place of work, the smooth slide animations are disabled (it literally just makes this appear and disappear, and the carousel just flicks between the images, rather than slides).
Could this be related to work corporation firewalls blocking certain bootstrap sources? Has anyone else ever had something like this, and hopefully solved?
Also - I know I could just do this via JS, but I just wanted to query this all the same as it's a very odd issue.
Related
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />
i have a rather annoying DIV problem, im working on dreamweaver CS5, and i have 2 DIVS inside of another container DIV. But they cant seem to stay next to each other on the design view of Dreamweaver, but when i preview them in a browser they are okay, they are only distorted in the design view, its kind of annoying working with them on top of each other.I have tried decreasing the size of the divs, but they just cant seem to stay side by side.! how do i solve this?
There is no substitute for a browser, or browsers as you need to test your site in all the latest browsers. I would switch off design view and have a browser open on the side or on your second monitor if you have one. You can setup scripts / browser add-ons that continuously refresh your browser so you can see your changes reflected.
Having said that, In Dreamweaver I suggest using live view instead of design view.
See that and other useful tips here: http://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/
I'm developing a mobile site in HTML for use on 2 Blackberry models, one quite old (8700v) and one newer (8520) as specified by the client.
The native browser on the 8520 is rendering my HTML/CSS pages perfectly. The native browser on the old 8700 is far from perfect however as the CSS support is minimal.
As a solution I decided to try installing Opera Mini 4.2 on the 8700. The rendering is great, speed is even improved but there's some rather strange behaviour happening with the hyperlinks on the page.
When I scroll down through my pages links are automatically highlighted and made ready for selection. This is fine until I have a number of links close together, for example in my nav menu. The nav menu is a set of links arranged within a . When I scroll to the menu all the links within the menu highlight at once. Even within the body if 2 links are on 2 separate lines (one stacked on top of another) the same issue appears.
I'm trawling Opera documentation but haven't found anything useful yet. Anyone got any ideas on why this happens and if it can be resolved?
Without seeing the actual HTML/CSS code, it's hard to pinpoint the exact cause of this, but it's most likely one of the following:
The links in question point to the same URL. The browser will highlight them as a group to visualize this.
Some script is adding a click event listener or similar to the group of links.
An <a>-tag has been left open.