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" />
Related
This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
I'm an amateur web designer with HTML experience mostly. I'm building my own website for a hobby, and ran into this snag. I've only recently noticed it though, so I'm wondering if it has anything to do with the recent iOS update?
Like the title says, when I go to my website, everything is fine. Then I click on one of the links to the "Contact" page, let's say (or any of the links that take you to another page), and then hit the browser's back button to go back to the previous page, the button's image I had just clicked on ("Contact" button) has disappeared and I'm just left with the button's name I named it. This repeats for every button I click and then hit back in the browser. This only happens on mobile devices though (I've only had the opportunity to check on an Apple phone and iPad). It doesn't happen on my laptop. I've tried searching for answers to this, but can't find any. I've only just noticed this happening though, which leads me to believe it might be a software update issue? Although it's entirely possible I just never noticed before.
Here is my website so that anyone interested in helping can take a look and let me know what you think might be the problem/solution. Thank you very much for any help you may be able to provide.
https://www.atomicorchard.com/
It's okay on my end. Try optimizing your images and check your JavaScript. The problem may be occurred once that script is being executed. And try adding media queries.
Today I have launched a WordPress blog it took me much time to develop the theme for. Now it was the first time I could request the site via iPhone I was just shocked. I thought it would be a simple task to realize a touch menu by writing simple HTML and styling it taking advantage of the :hover-state to display or not display it's content.
If you switch your Browser to a mobile user agent and load this site (make the window about 640px wide before), you will see my light blue widget bar. Hovering over the icons on it will toggle the inner containers with the main widget contents — works like a charm.
Unfortunately, when I call the site on my iPhone, that bar with the icons will appear but will not be touchable at all. Damn! What's wrong with my code? I hope you can help me. Thanks in advance
Here is what I found with hover in iOS. http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php. It may be the fix to your problem. Or others down the road.
"With the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) in place iOS won't hover unless you add display:none/display:block or display:table/display:block. Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link. So if you find the iOS device won't (or correctly) hover for whatever reason here is your probable fix."
Now I figured out I never could get it working the way I wanted when posting this question (I'm sorry the link doesn't show it anymore). Explanation: My markup was like:
<li class="widget-container">
<p class="widget-title">Categories</p>
<div class="widget-content">
<ul>...</ul>
</div>
</li>
The style was like:
.widget-content {display:none}
.widget-container:hover .widget-content {display:block}
I'd love to code as simple as this but it won't work for a good reason: On touch devices, the touch-action is always targeting the uppermost object in z-index which in this example would be the .widget-title. Thatfor, the wrapping .widget-container can never be touched and thus its :hover-state will never be triggered.
This exercise made me recognize a touch-screen-optimized site has to incorporate JavaScript to work well. So I came up with a jQuery accordion solution now.
The client doesn't want the photo to be downloaded if it is right clicked on. I explained if someone wants the photo they can get it off the site but he wants to make it a bit more difficult for a novice user to download the image. Hence if you right click you will get the blank 'photo' instead of the actual photo underneath.
Use logic:
Put the image you want to protect as a background image in a <div> or other block level element
Put an <img> that is transparent over that image in the <div>. Make sure it covers the entire image/div
A quick google has thrown this up for me, hope it can help you.
4) Prevent Downloads Using Tables: 'Right clicking' images is a fast shortcut to find, copy, and/or download images. For those that have their own website it is possible to prevent this action by placing images as a background to tables. The code is fairly simple in CSS, using the "background-image:url" style:
<table style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
Another method might be,
5) Javascript Right Click Disable: Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.
I took the info above from this site --- http://www.naturefocused.com/articles/image-protection.html ---
People can just printscreen the image and put it in paint if they really wanted it though im afraid :(
Thanks,
Jack.
I have a piece of Flash on an HTML page that when you hover over it, it expands out to reveal more information.
There are text links that it expands over, however in everything but IE, when it's not expanded those links are still covered by the Flash making them unclickable.
I have the Flash piece in a separate DIV wmode set to transparent.
I know this is possible to make work but for the life of me, I can only get it to work in IE.
Does anyone have any idea of what I'm missing?
Thanks.
I'm a little confused by what you're looking for, so I'll give you a couple of areas to look into. With luck, one of these will get you going, but otherwise, feel free to ask more questions. I'm a little slow on the uptake sometimes....
First off, by default, most browsers place flash files in the uppermost layer. So, the links that you cannot click are stuck in behind your flash presentation - basically, in the eyes of the browser, you are actually clicking on the flash presentation!
This article has some good information on this:
http://kb2.adobe.com/cps/155/tn_15523.html
But basically, you can use a parameter called WMODE in both the object and embed tags. For example, you could implement it like this:
and then add wmode="transparent" into your embed tag.
However, to make it smooth across all browsers (and to make the code a little easier to read/follow), you should also add some z-index values to your stylesheet.
I hope this helps a bit. If not, remember, I'm slow on the uptake....:-)