CODEWITHSUNDEEP
htmlcssbootstrap-4
Anurag
Anurag

Reputation: 111

hyperlink not working in mobile reponsive css

I have some hyperlinks over background image. These hyperlink working fine normally but in mobile view nothing happens when I am clicking those hyperlinks. Below is the code of hyperlink. You can also refer the site http://coachx.in and see "Post a Project" link is not working in mobile.

 <section id="home" class="offset">
            <div class="fullwidthbanner-container revolution">
                <div class="fullwidthbanner">
                    <ul>
                        <li data-transition="fade">
                            <img src="Images/Land.jpg" class="defaultimg" alt="" />
                            <div class="caption sfl bold bg text-center" data-x="center" data-y="180" data-speed="500" data-start="500" data-easing="easeOutExpo" style="margin-top: 0px; background-color: transparent; white-space: pre !important; text-transform: none !important; overflow-wrap: break-word !important;">Get any IT & BPO Project delivered by Trusted Firms</div>
                            <div class="caption sfb icon bg" data-x="280" data-y="260" data-speed="500" data-start="800" data-easing="easeOutExpo"><span>#Free-Consultations</span></div>
                            <div class="caption sfb icon bg" data-x="490" data-y="260" data-speed="500" data-start="1000" data-easing="easeOutExpo"><span>#Cost-Savings</span></div>
                            <div class="caption sfb icon bg" data-x="650" data-y="260" data-speed="500" data-start="1200" data-easing="easeOutExpo"><span>#Payment-Security</span></div>
                            <div class="caption sfb icon" data-x="340" data-y="360" data-speed="500" data-start="1600" data-easing="easeOutExpo">
                               <a href="Customer/Post_Project.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Post a Project</a>
                            </div>
                            <div class="caption sfb icon" data-x="640" data-y="360" data-speed="500" data-start="1800" data-easing="easeOutExpo"><a href="Customer/Post_Talent.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Hire a Developer</a></div>

                            <%--<div style="width: 50%; float: right; margin-top: 150px; text-align: center;">
                                
                            </div>--%>

                        </li>
                    </ul>
                    <div class="tp-bannertimer tp-bottom"></div>
                </div>
                <!-- /.fullscreen-banner -->
            </div>
            <!-- /.fullscreen-container -->
        </section>

Could someone please guide. How to make these hyperlinks clickable.

Upvotes: 1

Views: 326

Answers (1)

Rajesh kumar R
Rajesh kumar R

Reputation: 214

Not sure what the actual bug is, but judging from these factors:

  1. I tried device mode in Chrome and it worked, but it's not working on my actual iPhone 6 Plus.
  2. There doesn't appear to be a JavaScript warning related to this issue.
  3. The markup is there for the link (if you hold the button down while the slider is open on an iPhone, it brings up the iOS menu at the bottom showing the URL asking if you want to open it in a new tab).

It appears there's something blocking the event on touch. This is a VERY messy method of fixing it, but it should do the trick:

<script type="text/javascript">

jQuery(document).ready(function($) {
  $("#buynwa").on("touchstart", function(event) {
      window.location.href = $(event.target).attr('href');
    });
 });

</script>

Try pasting this immediately before the </body> tag in your footer.php file, under any other scripts. What it will do is look for the touchstart event on that very first anchor tag in the first slide, grab the href attribute, then route to that page. If it works, the $("#buynwa") portion of the code will need to be adapted with the other ids of the other anchor tags, because there doesn't appear to be any common class shared between them. You'd inspect element, and change the jQuery selector to $("#buynwa, #id2, #id3").

Upvotes: 2

Related Questions