I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
Related
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
I've just implemented the example from tutorial page and the normal upload works just fine but I also wan't to make use of the camera on mobile devices, so I've added the code from this fineuploader blog post.
Now, if I click the Camera button the file selection dialog appears or the camera app opens, but that's it. I'm only getting this message in my Javascript debug console:
"Uncaught TypeError: Cannot read property '_handleNewFile' of undefined"
Here's my client code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="resources/fine-uploader/fine-uploader.css" rel="stylesheet">
<script src="resources/fine-uploader/fine-uploader.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/template" id="qq-template">
...default-template...
</script>
<script type="text/javascript">
$(document).ready(function(){
var uploader = new qq.FineUploader({
element: document.getElementById("myFineUploader"),
camera: {
ios: true
},
debug: true,
request: {
endpoint: 'upload/receiver/'
}
});
qq(document.getElementById("cameraButton")).attach("change", function() {
uploader.addFiles(this);
});
});
</script>
<title>Fine Uploader default UI</title>
</head>
<body>
<div id="cameraButtonContainer" class="qq-upload-button" style="position: relative; overflow: hidden; direction: ltr;">
<div>Camera</div>
<input id="cameraButton" type="file" name="camera" accept="image/*;capture=camera" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</div>
<div id="myFineUploader"></div>
</body>
</html>
Your help is appreciated!
Just found that the default example button also make use of the camera on mobile devices, so there is no use of the camera button for me.
Edit:
Chrome on IOS 8 won't give the camera option
The Standard browser on Android 4.2.2 opens camera but taken pictures won't be uploaded
Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
I'm trying to fire an event every time a navigation link (a.nav) is clicked. For Safari, it works as expected; however, in every other browser it ONLY fires the first time a link is clicked. For some reason, I'm not getting the desire result, is there anything I'm missing?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PatrickCason.com</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style type="text/css">
#main, #namespace {
padding-right: 115px;
}
#textarea {
padding-right: 115px;
padding-top: 15px;
}
#social {
bottom: 82px;
}
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.history.js" type="text/javascript"></script>
<script src="spritely.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$("#main").show("slide", { direction: "up" }, 1000);
$("#copyright").show("slide", { direction: "down" }, 500);
$("#main").effect("bounce", { times: 1, distance: 5 }, 250);
$('a.nav').live('click', function() {
//For some reason... this only works with the first time I click a nav link... herein lies the problem!
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
});
</script>
</head>
<body>
<div id="floater"></div>
<div id="container">
<div id="main">
<div id="spark"></div>
<div id="namespace"><span style="font-size: 20px;">hi. i am </span><h1 style="display: inline; font-size: 36px;">Patrick Cason</h1><span style="font-size: 20px;">.</span></div>
<div id="nav">
<ul>
<li>Contact Me!</li>
<li>About</li>
<li>Links</li>
<li>Blog</li>
</ul><br>
<p><b>Phone:</b><br><span style="font-size: 24px; font-weight: bold;">615.339.4300</span></p>
<p><b>Email:</b><br>pcason#comcast.net</p>
</div>
<div id="social">
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/feed.png"></li>
</ul>
</div>
<div id="home"><img src="images/home.png"></div>
<div id="textarea">
<div id="content"></div>
</div>
</div>
<div id="shadow"></div>
<script>
$(window).load(function () {
$("#shadow").fadeIn(1250);
});
</script>
<div id="copyright">
Copyright © 2011 Patrick Cason. All rights reserved.
</div>
</div>
</body>
</html>
I hope I'm not being to vague... I'd really appreciate the help.
I don't see the need for using live() in your case. That is for when you have dynamically added html. Or, when you have a decent number of elements that will bind to the same event handler (rather than click() which would bind individual handlers for each link).
$('a').click(function() {
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
I think the problem might be your selector. Try just selecting <a> tags
http://jsfiddle.net/EmvQk/
EDIT:
Edit your code to comment out the sprite() method and add an alert() as indicated in the comments below. I am pretty confident the problem is stemming from the sprite() call and this little test will determine if that is the case.
Your Css needs to follow the set of rules that the library requires in order to function properly. After reviewing the library example and based on your #sprite css rule ... Try making these changes:
#sprite
{
background: transparent url(images/spark.png) 0 0 no-repeat;
position: absolute;
top: 0;
left: 223px;
width: 156px;
height: 567px;
z-index: 2000;
cursor: pointer;
}
It is an issue with Spritely, as of version 0.5 they have a destroy() method, so...
$("#spark").click(function() {
var $spark = $("#spark");
$coil.sprite({
fps: 30,
no_of_frames: 12,
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
obj.spState(1);
killSprite($spark);
}
});
});
function killSprite(yourEl){
yourEl.destroy();
}
I popped the destroy method in a function that is called on the last frame of your animation so hopefully it won't cause any issues
It should be that
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
in and of itself doesn't work multiple times. Have you tried calling that function twice and see what happens.
To test if your click handler is the culprit, add an alert to the click handler and see if the issue is your click handler or the code snipped above.
It seems to me that your problem may be with the spritely plugin for jQuery. I set up a quick test at: http://jsfiddle.net/Htm4y/, that worked for me (in Chrome). In the example, clicking the .nav links fires a jQuery toggle. I would need to see your css to figure out what is supposed to be in that div, but it must be configured correctly in order for spritely to animate it.