I made an Interactive Workflow using SVG. Made this out of Adobe XD and transformed it to a working workflow where each button opens a pop-up modal and showing a video (like a lightbox).
The problem I encounter is that the buttons don't work using Safari. Using Google Chrome or Firefox does work. What can I do to make this work for Safari as well?
You can see an example of the interactive workflow via Fiddle.
To reproduce the problem you should open the link in Safari. If you want to see how it should work you should use Chrome or Firefox
-- EDIT 25-03-19 --
Thanks for the help but the answers did not work. Xlink:herf is kinda old and doesn't work for Safari. Maybe it does for regular links but i couldn't make my modal pop-up work.
I found a working example for the problem i was facing at http://jsbin.com/lajilacajumu/1/edit?html,css,output
Also made a preview with the information i saw in the example.
.hoverable-rect {
cursor:pointer
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Bug Report</title>
<!-- Bootstrap's CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- the different buttons comes here -->
<div class="container">
<svg viewBox="0 0 1920 1080">
<g class="hoverable-rect" data-toggle="modal" data-target="#modal1" id="g3223" id="prime-ppd" transform="translate(175.776 781.062)">
<g id="prime-elements">
<rect id="prime-bg" width="50" height="50" x="0" y="0" fill="#0094db"/>
<text id="PRIME" transform="translate(4.65 26.098)" fill="#fff" font-size="11" font-family="HelveticaNeue-Medium, Helvetica Neue" font-weight="500" letter-spacing="-0.002em"><tspan x="0" y="0">PRIME</tspan></text>
</g>
</g>
</svg>
<!-- all different modals comes here -->
<div class="modal fade overlay" id="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<iframe src="https://player.vimeo.com/video/303329059?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery and Bootstrap's JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
</html>
Instead of
<a href="whatever">
try
<a xlink:href="whatever">
SVG <a> elements are not the same as HTML <a> elements. In the SVG version you link using xlink:href.
This requirement for the xlink: prefix has been dropped in SVG 2. But not all browsers have implemented that yet.
Related
Can't figure out how to set this animated canvas as the website background of my portfolio page.
any help would be appreciated. or how do I place the div with text over the canvas?
so it sits nice and flush....................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>
<nav>
<!-- De checkbox -->
<input type="checkbox" id="check">
<label for="check" id="checkbox">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<!-- logo en de Buttons in de nav bar -->
<img src="image/logo.png" alt="logo">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
</head>
<body>
<div id="particles-js">
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded ...');
});
</script>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey, I'm makkerheineken.</div>
<div class="text-2">Front-End & Back-end Develeper.</div>
</div>
</div>
</section>
</div>
</body>
</html>
You could give the canvas the same size as the screen, add a div with the same size but positioned absolutely, and then put the rest of your elements inside this div.
I'm trying to figure out why on earth I can load my component through router-view but not by calling the component itself.
In my blade file when I write '<router-view />', It loads my CategoryDropdown component normally but when I write CategoryDropdown It disappears and I get this console error:
'app.js:7307 [Vue warn]: Failed to resolve component: categorydropdown
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <App>'
Here is the code for my app.js:
require("./bootstrap");
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();
import { createApp } from "vue";
import router from "./router";
import CategoryDropdown from "./components/categories/CategoryDropdown";
import vClickOutside from "click-outside-vue3";
createApp({
components: {
CategoryDropdown,
},
})
.use(router, vClickOutside)
.mount("#app");
Here is the blade file noting that if i simply replaced this with it will work:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<header class="max-w-xl mx-auto mt-10 text-center">
<h1 class="text-4xl">
<span class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 px-2 py-1 rounded-xl text-white">
Hands On Tech</span>
blog
</h1>
<h2 class="inline-flex mt-2 items-center">
By Mostafa Said
<img class="wavingHand" src="/images/wavinghand.png" width="35px" alt="Waving Hand" />
</h2>
<p class="text-sm mt-5">
Come'on in and check out my latest blog posts. I'm sharing whatever on
my mind and my mind is full of useful stuff for you'all.
</p>
<div class="space-y-2 lg:space-y-0 lg:space-x-4 mt-8">
<!-- Category -->
<div class="override relative lg:inline-flex items-center bg-blue-100 rounded-xl">
<CategoryDropdown />
<!-- This works -->
<!-- <router-view /> -->
</div>
<!-- Search -->
<div class="override flex lg:inline-flex items-center bg-blue-50 rounded-xl px-3 py-2">
<form method="GET" action="#">
<input type="text" name="search" placeholder="Looking for something?" class="shadow-none focus:shadow-none bg-transparent placeholder-black text-sm border-none outline-hidden" />
</form>
</div>
</div>
</header>
This is the layout:
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="High quality Web Development articles" />
<meta property="og:title" content="Hands On Tech Blog" />
<meta property="og:description" content="High quality Web Development articles" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://" />
<meta property="og:url" content="https://" />
<title>Hands On Tech Blog</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}" />
<link rel="stylesheet" href="/override.css" />
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
</html>
I want to be able to see my component when I call it in blade like this '' instead of using ''
A newly installed visual studio 2010. Then i tried to add bootstrap for better design but its not working
Here is my code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="mySample.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="contents/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="contents/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="navbar navbar-fixed-top navbar-default" role="navigation" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Job Order System</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Closed Request</li>
</ul>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/script/jquery-2.1.0.min.js") %>"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/script/bootstrap.min.js") %>"></script>
</body>
</html>
It only display a normal list
Please help me solving this kind of problem. Thank you so much
I see 2 potential problems:
You're using a relative URI in the <link /> elements, this won't be a problem if every page is in the root of your website, but it's good practice to make these Application-root-relative URIs. Add runat="server" to the element and begin the href with ~/ and ASP.NET will automatically give it a correct URI
You've put the <link /> inside <asp:ContentPlaceHolder elements, which means they're the "default content" of the placeholders. If any of your pages set content for that placeholder then the default content (i.e. your bootstrap links) will be removed.
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.
I doing one simple task in jQuery alpha 4. It run in browser but when I run in WP7 emulator, it shows only white screen? can any one suggest me how to run in WP7?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alpha 4 test</title>
<!-- alpha 4 for jQuery mobile -->
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
function callpage2()
{
$.mobile.changePage("#detailpage","slide",false,false);
}
</script>
</head>
<body id="callweb">
<!-- /Page Starts -->
<div data-role="page" id="searchpage">
<!-- /header Starts-->
<div data-role="header" data-backbtn="false">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
First page
Using ID
<button onclick="callpage2()"> Using button (mobile changepage)</button>
<ul data-role="listview" data-inset="true" data-theme="e">
<li><img src="script/images/11.jpg" class="ui-li-thumb" /> <a style="margin-left:1em;">one</a></li>
<li> <img src="script/images/globe.jpg" class="ui-li-thumb" /><a style="margin-left:1em;">two</a></li>
</ul>
</div>
</center>
<!--Content Ends-->
</div>
<!-- Page End-->
<!-- Detail Page Starts -->
<div data-role="page" id="detailpage">
<!-- /header Starts-->
<div data-role="header">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
Back
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
second page
</div>
</center>
<!--Content Ends-->
</div>
<!--Detail Page End-->
</body>
</html>
The debug capabilities on the mobile browser are not very advanced.
The best way to debug this is to try using the desktop browser instead. Does this example run on IE7 (or IE9 running in compatible mode)? Get it working there first, then move it across to the mobile UI.
I would suggest to used the CDN instead your local files for invoking jQuery and jQMobile just to start.
change this
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
into this
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
I have run into this same issue before.
For me it was an issue with my html syntax and I think is could be a similar issue here (It seems JQM under WP7 is very picky about its HTML)
I'd start with the centre tags around the content divs, either get rid of them or move them inside. Maybe even the font tags and use CSS classes.