Preventing HTML canvas object selection - javascript

I'm customising my homepage with an interactive animation, but having trouble making it feel more seemelss in the page. Please see http://geotheory.co.uk/. I want to stop the canvas object from being selected when the user clicks on the page. The animation is a Processing script that is then translated to javascript. The index.html reads:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>geotheory.co.uk</title>
</head>
<body id="home" bgcolor="#202020">
<script src="processing-1.4.1.min.js"></script>
<div id="canvasContainer">
<canvas padding: 0 data-processing-sources="rectangles.pde"></canvas>
</div>
</body>
Grateful for assistance.


It is the :focus pseduo class that is causing it. This should fix it:
canvas:focus{
outline:none;
}

Related

How to include the CSS for a div you are loading from another page

I am attempting to load content from a div on one page of my site to another page on my site on page-load.
The following (example) code seems to achieve that effectively.
However... how would I also include all of the CSS associated with the content?
Any help would be greatly appreciated.
SOURCE PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="exampleStylesheet.css">
</head>
<body>
<div>SOURCE CONTENT HERE</div>
</body>
</html>
LANDING PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="loadedContent"></div>
<script>
$('#loadedContent').load("contentToLoad.html"); <!-- loads other page's content -->
</script>
</body>
</html>
EXAMPLE CSS
body {
margin: 0;
background-color: blue;
}

Website href links not working, how to fix it?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</html>
I have been trying to figure out why my href links are not working no matter what i do. The pages i am trying to connect them to are named like in the code so i am highly confused.

You're missing a body tag and then closing tags .. browsers will behave badly ;)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</body>
</html>

Please check like Home.html and other Html page that you are using for href are located at same folder where your main Html page is located.
I have created a sample.html page from above code and replaced Home.html page with my page
it is working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</html>
I have used chrome for it.I have put all the Html page like this webapp/app/view/sample.html and others also are available at view/

<html>
<body>
<a href="mailto:cscreamery#gmail.com"></i>Email us at
cscreamery#gmail.com</a>
or
<a href="tel:(719)-555-0987"></i>call us at
(719)-555-0987</a>
</body>
</html>

How to diplay a div in Speed Mode of UC Mini Browser only?

I am trying to display a div only when user is using uc mini browser in SPEED MODE (the way its done in maxfunzone.com). Below is my markup. Any help on this topic is highly appreciable.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UC Mini</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if (navigator.userAgent.match(/^Mozilla\/5\.0 .+ Gecko\/$/)) {
$(".info-box").show();
}
else {
$(".info-box").hide();
}
});
</script>
<style>
.info-box{display: none}
</style>
</head>
<body>
<div class="info-box">
some text here
</div>
</body>
</html>

I have updated your html, check the following html code snippet. I think it may be helpful to you.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UC Mini</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
/* webpage/global style goes here */
h1{
color:#008000;
}
</style>
</head>
<body>
<noscript>
<!-- Note: Style in 'noscript' tag will not reflect on out side elements when speed mode is off or javascript is turned on.
Switch modes in UC mini browser to check the difference.
-->
<style>
/* noscript specific style goes here. */
.info-box{font-size:12px;color:#FF0000;font-weight:bold;}
h1{
color:#2187E7;
}
</style>
<div class="info-box">Please turn on javascript or turn off speed mode to make site functional.</div>
</noscript>
<h1>HTML5 is Amazing!</h1>
</body>
</html>

Redirect to other html page and scrollTop: to a certain div

It's been already asked, but the two given answers don't work for me.
Redirect to some other page then animate to reach a certain scrollTop
My html is something like:
html1:
<!doctype html>
<html clalang="en">
<head>
</head>
<body>
boxes
</body>
</html>
html2:
<!doctype html>
<html clalang="en">
<head>
</head>
<body>
<div id="goto"></div>
</body>
</html>
So I need when you click on in html1 to go to in html2
Thank you for the help !

That's what a url hash is for:
boxes
Browser will automatically scroll to the matching id

How to make collapsible menus jQuery Mobile

I'm really new at this and I would like to create collapsible menus using jQuery Mobile. I went over to their site and found this resource:
http://demos.jquerymobile.com/1.4.0/collapsible/
So, I made a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div id="div2014" data-role="collapsible">
<h3>2014</h3>
<p>
Q1<br/>
Q2<br/>
Q3<br/>
Q4
</p>
</div>
</body>
</html>
but I can't seem to get it to work. All that gets displayed is this:
Please help! I'm really new at this, so I'm not sure if I'm doing things right :(

You need to include the jquery.mobile CSS file as well.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

make use of jQuery's slideToggle() function on click.
See this pen and click 2014, the menu will be displayed and collapsed on clicking it again

Categories