I am new in jquery I desperately need some help in running this code.I am trying to create a fade in-fade out image banner with 4 images within div tag, with the help of a function fadingbanner() which calls itself recursively and is initiated by a settimeout function.But for some reason its not working.Please help....
<HTML>
<HEAD>
<script type= "text/javascript" src="C:\Documents and Settings\A\Desktop\jquery-1.9.1.js"></script>
<SCRIPT>
<div>
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" id = "i1">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp2.jpg" id = "i2">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp3.jpg" id = "i3">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp4.jpg" id = "i4">
</div>
function fadingbanner()
{
$(document).ready(function(){
$("#i1").fadeOut(2000,function(){
$("#i2").fadeIn(2000,function(){
$("#i2").fadeOut(2000,function(){
$("#i3").fadeIn(2000,function(){
$("#i3").fadeout(2000,function(){
$("#i4").fadeIn(2000,function(){
$("#i4").fadeout(2000,function(){
fadingbanner();
});
});
});
});
});
});
});
}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME = "bannerimage" src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" height = "200" width = "600" onload = "settimeout("fadingbanner()",1000)">
</BODY>
</HTML>
Take out the function and it should work ok. It is only defining a function and never running it. If it did run it, all it would do is schedule the code to run when the document finishes loading.
You also want to hide all but the first picture at the start.
So it should be like:
$(document).ready(function(){
$("#i2, #i3, #i4").hide();
$("#i1").fadeOut(2000,function(){
... all that other stuff
});
});
Here is a fiddle showing it: http://jsfiddle.net/ePBkX/1/
I borrowed the pictures there from the fiddle attached to this, which you might want to read: jQuery fade out then fade in
Related
Hi I have a problem that I can't quite solve. I'm a total noob with HTML/Javascript, so I'm not sure how to proceed. The instructions are in the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q2</title>
<script type="text/javascript" src="342.js"></script>
<script type="text/javascript">
function swap() {
if (Math.random()>.5){
document.getElementById("c").style.display = 'none';
document.getElementById("f").src = "images/f.jpg";
} else {
document.getElementById("d").style.display = 'none';
document.getElementById("f").src = "images/f.jpg";
}
}
</script>
</head>
<body>
<p>Add code so that clicking the button changes either the src "c.jpg" or "d.jpg" to "f.jpg" The choice of which should be replaced
should be determined randomly.</p>
<img src="images/c.jpg" id="c"><br>
<img src="images/d.jpg" id="d">
<br><br>
<button type="button" onclick="swap()">OK</button>
</body>
</html>
The original problem had everything but the scripts. When I try this, I'm able to get the image c or d to disappear, but image f doesn't appear. I don't know how to get the image to show. getELementById won't work because I haven't made an id, but how do I do that without having image f showing? Any help is appreciated.
Seems you're missing html
Try add f html element for work:
<img src="images/f.jpg" id="f">
The p tag in the html is talking about c.jpg, d.jpg and e.jpg.
Its not talking about f.jpg, you may want to check that
with the assumption that it is e.jpg and not "f.jpb". And also assuming that you have e.jpg in your images folder. Below code will work fine (small modification in the script)
function swap() {
if (Math.random()>.5){
// document.getElementById("c").style.display = 'none';
document.getElementById("c").src = "images/e.jpg";
} else {
// document.getElementById("d").style.display = 'none';
document.getElementById("d").src = "images/e.jpg";
}
}
I want to generate a PDF from a hta file (http-equiv="x-ua-compatible" content="ie=11"). Append to child is working like a charme. However it doesn't work with jsPDF... Any help appreciated!
Scripts included:
<script src="polyfill.min.js"></script><!-- https://cdn.jsdelivr.net/npm/promise-polyfill#7/dist/polyfill.min.js -->
<script src="jspdf.js"></script><!-- https://github.com/MrRio/jsPDF/blob/master/src/jspdf.js -->
<script src="html2canvas.js"></script><!-- https://html2canvas.hertzen.com/dist/html2canvas.js -->
DIV to print:
<div class ="print" id="print">
<h3>print!</h3>
<input type="button" id="pdfPrint" value="PDF erstellen" />
</div>
Script Code:
document.getElementById('pdfPrint').addEventListener('click', function() {
html2canvas(document.getElementById("print")).then(function(canvas) {
// document.getElementById("print").appendChild(canvas);
var img = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
pdf.addImage(img,'JPEG',20,20);
pdf.save('Testung.pdf');
}
});
});
I've made a test with your code. And I've found that there will be ReferenceError: 'jsPDF' is undefined in IE11.
The key point is the reference of jsPDF. You should replace your jsPDF script with latest one:https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js
Then the running result is as the capture below:
Can anyone explain why the responsive picture image is still firing using Chrome Canary 42.0.2302.2 after it has been removed (works as expected in IE11 and FF 35.0.1 - in Chrome 40.0.2214.111 m it is broken, but interestingly, it also downloaded both images straight away!).
To test, open the test page with Chrome Dev Tools open on the Network tab. Take note of the image that has been displayed. Tap anywhere on the page to empty the content. Now resize the page and note that the other images are downloaded despite the picture element being removed from the page.
<!DOCTYPE html>
<html>
<head>
<title>Test Picture Element</title>
<meta charset="utf-8">
</head>
<body>
<picture>
<source srcset="http://placehold.it/768/f00/fff" media="(max-width: 768px)">
<source srcset="http://placehold.it/992/0f0/fff" media="(max-width: 992px)">
<img srcset="http://placehold.it/1200/00f/fff">
</picture>
</body>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').on('click', function() {
$('body').empty();
});
});
</script>
</html>
JSFiddle for your convenience: http://jsfiddle.net/5qwLus59/4/
Because Mutations aren't set up correctly in Chrome. It's similar to how people sometimes write their JS code.
For example:
$('.nav').each(function(){
var $nav = $(this);
var sizeNav = function(){
//some code
};
$(window).on('resize', sizeNav);
});
In fact they should do something like this:
$('.nav').each(function(){
var $nav = $(this);
var sizeNav = function(){
//some code
};
$(window).on('resize', sizeNav);
$nav.on('remove', function(){
//destroy code
$(window).off('resize', sizeNav);
});
});
This is a serious issue, please report this!:
https://code.google.com/p/chromium/issues
I am new to coding so I am looking for the simplest way to take and image and show or hide it based either on one button or via radio button controls. Currently the image is on as an but i can use the any recommend method. If at all possible from a different page on my site.
For a button, you could use
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "IMAGE_URL_HERE";
img.height = IMAGE_HEIGHT;
img.width = IMAGE_WIDTH;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Im trying to insert a simple handlebars, like this, but there's so little support and the guide in the official page is so sad that I couldnt accomplish this.
<head>
<!--HANDLEBAR-->
<script type="text/x-handlebars" data-template-name="say-hello">
Hello, <b>{{name}}</b>
</script>
<!--VIEW-->
<script>
var view = Ember.View.create({
templateName: 'say-hello',
name: "Bob",
});
view.appendTo('#templateHere'); //here I try to append the view
</script>
In firebug I get the error: unable to find the template "say-hello"...........but I dont know why doesnt find it
Finally I accomplished, I write the solutions here because I think that ember need more documentation and it's worth because is very interesting (and powerful):
The problem was that I create an object of my view before defining it. The right code is this:
....
<!--HANDLEBAR-->
<script type="text/x-handlebars" data-template-name="say-hello">
Hello, <b>{{name}}</b>
</script>
<!--VIEW-->
<script>
App = Ember.Application.create();
//DEFINE VIEW
App.Myview = Ember.View.extend({
templateName: 'say-hello',
name: "Bob",
});
//CREATE VIEW>
App.myview=App.Myview.create();
console.log(App.myview.get('name'));//only for debug
//APPEND VIEW
$(function() {
App.myview.append('#templateHere');
});
</script>
</head>
<body>
<div id="templateHere"></div>
</body>
</html>