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">
Post a Project
</div>
<div class="caption sfb icon" data-x="640" data-y="360" data-speed="500" data-start="1800" data-easing="easeOutExpo">Hire a Developer</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.
Not sure what the actual bug is, but judging from these factors:
I tried device mode in Chrome and it worked, but it's not working on
my actual iPhone 6 Plus.
There doesn't appear to be a JavaScript
warning related to this issue.
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").
I'm building a landing page and I encounter a problem. I have an image of a project that when is clicked will zoom in a gallery mode and on top of that image it is a link towards the Behance page of the project. But what ever I do when I click the project link is opening still the image gallery. This is my code:
<div class="row masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<a href="images/portfolio/gallery/LiveStreaming.png" class="thumb-link" title="Live" data-size="1617x1440">
<img src="images/portfolio/LiveStream500x625.jpg" srcset="images/portfolio/LiveStream500x625.jpg 1x, images/portfolio/LiveStream1000x1250.jpg 2x" alt=""></a>
</div>
<a href="https://www.behance.net/gallery/77261419/Live-Streaming-Landing-Page-Design" class="item-folio__project-link" title="Project link">
Project Link
</a>
<div class="item-folio__text">
<h3 class="item-folio__title">
Live Streaming Landing Page
</h3>
<p class="item-folio__cat">
UI Design
</p>
</div>
<div class="item-folio__caption">
<p>A modern touch to a simple service. UI design made in Sketch for a Live Streaming Landing Page.</p>
</div>
</div>
<!-- end item-folio -->
</div>
<!-- end masonry__brick -->
</div>
<!-- end masonry -->
</div>
<!-- end masonry-wrap -->
What do I do wrong?
I'm looking to display a thumbnail of an image and then onclick show a different image, can't seem to get this to work but I am sure there is probably an easy solution. Currently it shows the full image then enlarges on click. I just want to show a thumbnail and then on click show this full image.
My site is http://www.creativewilderness.co.uk and code is below...
<!DOCTYPE html>
<html>
<title>Creative Wilderness: Branding & Graphic Design for Independent Businesses. Stockport.</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Graphic Design & Brand Identity for Independent Businesses. We create strong brand identities for businesses providing web design, logo design, branding, social media design, marketing campaigns and more. Based in Stockport.">
<meta name="keywords" content="Graphic Design, Branding, Brand Identity, Logo Design, Stockport, Small business design, web design, independent design, ethical design, cheshire, indie design">
<meta name="author" content="Creative Wilderness LTD, Stockport">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Analytics creative wilderness.co.uk -->
<!--
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-', 'auto');
ga('send', 'pageview');
</script>
-->
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Abel", sans-serif}
h3 { letter-spacing: 5px;
font-size: large;
}
h2 {
letter-spacing: 5px;
}
body, html {
height: 100%;
color: #black;
line-height: 1.8;
max-width:;
}
xw {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
x
footer {
background-image: url('images/graphic-design-stockport.jpg');
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('images/graphic-design-stockport.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url('images/ethical-branding-design.jpg');
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("images/stockport-business-design-branding.jpg");
min-height: 400px;
}
/* Fourth image (Contact) */
.bgimg-4 {
background-image: url("images/design-small-business.jpg");
min-height: 400px;
}
.w3-wide {letter-spacing: 10px; padding: 50px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>
<body>
<!-- Navbar on small screens -->
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container" id="home">
<!-- Navbar (sit on top) -->
<div class="w3-center">
HOME
ABOUT
OUR WORK
PRICES
CONTACT
</a>
</div>
<div class=style="white-space:nowrap;">
<span class="w3-padding-large w3-xlarge w3-wide w3-animate-opacity"><img src="images/creative-wilderness-design.png" alt="branding graphic design stockport" class="w3-display-middle" width="25%" w3-padding-large w3-animate-opacity")</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-#FFFDF1 w3-container w3-padding-64" id="about">
<h3 class="w3-center">INDEPENDENT DESIGN & BRANDING <br>FOR FREE THINKING BUSINESSES</h3>
<p class="w3-center">We are an indie design company who love working with free thinking businesses. We like to go a little wild with our initial ideas and concepts and delighting our clients with off-the-wall suggestions that get customers talking.
We can take hold of all your design and brand strategy from email marketing to print work. We can re-design your website to ensure it is responsive and hits all those user experience recommendations. We can tutor you on social media marketing and formulate a brand personality that works really hard to bring in new customers and make your business pop!
<br><br>
Being a small indie business means we have no constraints, no red tape, no unnecessary management jargon and the freedom to work with companies we believe in.
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container ">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand">CLEVER DESIGN</span></h2>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<p class="w3-center">Here is a selection of our latest branding, logo design and identity projects for independent businesses.<br> Click on the images to make them bigger.</p><br>
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="w3-row-padding w3-center">
<div class="w3-col m3">
<img src="images/soul.jpg" class="portfolio" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Soul Cafe is an independent cafe in Congleton who wanted a new style to match their move into a larger premise. We created bespoke 60s inspired patterns and applied them to signage, menus and posters. We also created a clever poster and social campaign using soul song lyrics talking about the great food and drink the soul cafe serves.">
</div>
<div class="w3-col m3">
<img src="images/midnight.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Midnight Alchemy is a concept created for a Masquerade Ball at Tatton Park for THG. We art directed a bespoke photo shoot using employees from THG and created posters, emails, drinks menus and mood boards to inspire the theme of the event.">
</div>
<div class="w3-col m3">
<img src="images/fika.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Fika is a pop-up cafe based on a business park in Stockport. They wanted a scandi influenced design so we drew inspiration from our favourite Northern Quarter haunts and created a minimal menu and logo. We added breaks to to the font to tie in with the idea of taking a break and carried this through to bespoke eco friendly coffee cups">
</div>
<div class="w3-col m3">
<img src="images/ginspiration.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Ginspiration is a one-off gin tasting event celebrating local Gins around Cheshire. Using the natural Juniper berries found in Gin we produced a bespoke bottle box, menu, logo and social media assets">
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-white" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- <div class="w3-row-padding w3-center w3-section">
<div class="w3-col m3">
<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist">
</div>
<div class="w3-col m3">
<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">
</div>
<div class="w3-col m3">
<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">
</div>
<div class="w3-col m3">
<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing">
</div>
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>
</div>
-->
</div>
<!-- Modal for full size images on click-->
</div>
<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 w3-display-container">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand w3-center">STRONG & BRAVE BRANDING</span></h2>
</div>
</div>
<!-- Pricing Section -->
<div class="w3-padding-64 w3-center" id="prices">
<h3 class="w3-large"><b>OUR DESIGN PACKAGES</b></h3>
<p>We keep it simple with two starter packages for you to choose from. We also offer bespoke design services too so get in touch if you'd like a quote for this.</p>
</div>
<div class="w3-row-padding w3-center">
<div class="w3-quarter w3-section w3-center">
<ul class="w3-ul w3-card w3-center" >
<li class="w3-#FFFDF1 w3-large w3-padding-32">THE FOX</li>
<li class="w3-padding-16">Defining your brand ethos</li>
<li class="w3-padding-16">Logo Design</li>
<li class="w3-padding-16">Mood Board</li>
<li class="w3-padding-16">Brand Colours & Fonts</li>
<li class="w3-padding-16">2 marketing assets (flyer, email, poster, business card etc)</li>
<li class="w3-padding-16">
<h3 class="w3-opacity">£650</h3>
</li>
<li class="w3-light-grey w3-padding-24">
<a href="mailto:enquiry2018#creativewilderness.co.uk?Subject=I'm interested in THE FOX package" target="_top">
<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"></i> BOOK NOW</button></a>
</li>
</ul>
</div>
<div class="w3-quarter w3-padding w3-section w3-center" >
<ul class="w3-ul w3-card">
<li class="w3-white w3-large w3-padding-32">THE BEAR</li>
<li class="w3-padding-16"><b>Full brand exploration</li>
<li class="w3-padding-16"><b>Mood Board</li>
<li class="w3-padding-16"><b>Logo Design</li>
<li class="w3-padding-16"><b>Copywriting & Tone of Voice</li>
<li class="w3-padding-16"><b>Social Media Assets</li>
<li class="w3-padding-16"><b>Poster Campaign</li>
<li class="w3-padding-16"><b>Business Stationary</li>
<li class="w3-padding-16"><b>Website</li>
<li class="w3-padding-16">
<h3 class="w3-opacity">£1,500</h3>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"> BOOK NOW</button>
</li>
</ul>
</div>
</div>
<br>
</div></b>
<!-- Fourth Image with Portfolio Text -->
<div class="bgimg-4 w3-display-container">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand">LETS TALK DESIGN</span></h2>
</div>
</div>
<!-- Footer -->
<!-- Contact Topic -->
<div class="w3-container" id="contact">
<p class="w3-center" padding="15px" >Please get in touch to get the ball rolling on your surveying projects TODAY!<br><br>Ask us for advice or more information, book an online demonstration, or join our surveyors mailing list for ongoing information.</p>
<div class="w3-row-padding" xstyle="margin-top:64px">
<div class="w3-half w3-padding">
<h3>SEND MESSAGE</h3>
<!-- Form Start -->
<form name=contactform method="POST" action="/php/general-enquiry.php">
<input name="redirect" value="http://www.creativewilderness.co.uk/thanks.htm" type=hidden>
<input name="subject" value="Web Site Enquiry" type=hidden>
<input name="user" value="enquiries" type=hidden>
<input name="usercc" value="" type=hidden>
<input name="response" value="yes" type=hidden>
<p><input class="w3-input w3-border" type="text" placeholder="Name" required name="realname"></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email" required name="email"></p>
<textarea class="w3-input w3-border" type="text" placeholder="Enquiry Details" required name="comments"></textarea>
<p><button class="w3-button w3-hover-opacity w3-black" type="submit"><i class="fa fa-paper-plane"></i> Make Enquiry</button>
</p>
</form>
</div>
</div>
</div>
</div>
<!-- Form End -->
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-center">
<i class="fa fa-arrow-up w3-margin-right"></i>To the top
<div class="w3-xlarge w3-section w3-text-sand " >
</i>  
<i class="fa fa-twitter w3-hover-opacity"></i> 
</i>  
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
</div>
<p class="w3-text-sand">Creative Wilderness: Creating strong brand identities for independent businesses</p>
</footer>
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(41.878114, -87.629798);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://protect-eu.mimecast.com/s/zKR6BI0YwRAtW?domain=w3schools.com
-->
</body>
</html>
Add the path to the alternative image you want as a data attribute:
<img src="images/soul.jpg" data-modal-image="images/modal-image.jpg" class="portfolio" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="">
And change this javascript line:
document.getElementById("img01").src = element.src;
to:
document.getElementById("img01").src = element.dataset.modal-image;
I wanna know why the logo is not showing on mobile devices, I tried resetting my network on phone, and reset web browser.I also try making the logo little smaller from 100px to 80px but still it's not showing. Here is the code below. Please Help Thanks is advance. Here is the working jsfiddle https://jsfiddle.net/light22/60xrbkhf/#&togetherjs=fHfHVyawIa
<header id="header" class="transparent-header" data-sticky-class="not-dark">
<div id="header-wrap" style="height:180px;">
<!-- Primary Navigation "
============================================= -->
<nav id="primary-menu" class="style-2 center">
<!--<div class="container clearfix"></div>-->
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<div style="text-align:center">
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" >
<li><div style="border-bottom:1px solid #000">Home</div></li>
<li><div>WHO WE ARE</div></li>
<li><div>WHAT WE TRADE</div></li>
<li><div>SERVICES</div></li>
<li><div>LOGISTICS</div></li>
<li><div>CONTACT</div></li>
</ul>
</div>
</nav><!-- #primary-menu end -->
<!-- Logo
============================================= -->
<div id="logo" class="divcenter">
<img class="divcenter" src="images/logo.png" alt="Canvas Logo">
<img class="divcenter" src="images/logo#2x.png" alt="Canvas Logo">
</div><!-- #logo end -->
<br>
</div>
</header><!-- #header end -->
Rename image in your images folder
1logo#2x.png to logo#2x.png
When I try to add
<a>..</a>
around the img tags to make the whole image a link, it works but stops being responsive so mobile view gets distorted.
Any ideas how to fix this?
Thanks!
div class="slider-wrap">
<div class="fullwidthbanner-container" >
<div class="fullwidthbanner-3" style="padding-top: 0px;">
<ul>
<!-- SLIDE 1-->
<li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/about2.png" data-saveperformance="off" data-title="HOP"></a>
<img src="img/aboutslide1.png" alt="bg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
</li>
<li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/about3.png" data-saveperformance="off" data-title="SKIP">
<!-- MAIN IMAGE -->
<img src="img/about2.jpg" alt="bg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
</li>
<li data-transition="slideright" data-slotamount="7" data-masterspeed="300" data-thumb="img/aboutslide1.png" data-saveperformance="off" data-title="JUMP">
<!-- MAIN IMAGE -->
<img src="img/about3.jpg" alt="bg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
</li>
</div>