Unable to set <iframe> srcdoc value using jquery - javascript

What I'm trying to do here is dynamically add and display content as HTML inside an iframe by using jquery to set the srcdoc attribute on the click of a button. Nothing happens though when I click on the button:
Strangely enough, when I replace $("#myFrame").srcdoc with document.getElementById("myFrame) the code works as intended. That further baffles me.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Jquery Project - Practice </title>
<script type = "text/javascript" src ="jquery-3.4.1.min.js"> </script>
<link href="jquery-ui/jquery-ui.css" rel ="stylesheet">
<script src = "jquery-ui/jquery-ui.js"> </script>
<style type="text/css">
html, body {
font-family:Helvetica, sans-serif;
margin:0px;
padding:0px;
height:100%;
width:100%;
}
div, textarea {
margin:0px;
padding:0px;
}
* {
margin:0px;
padding:0px;
}
#divOne {
width:100%;
height:100%;
background-color:aliceblue;
}
</style>
</head>
<body>
<div id="divOne">
<iframe id ="myFrame"></iframe>
<button id = "click"> Click Me! </button>
</div>
<script type ="text/javascript">
$(document).ready(function() {
$("#myFrame").css({
"height":"300px",
"width":"300px",
"margin":"200px",
"background-color":"bisque"
});
$("#click").click(function() {
$("#myFrame").srcdoc = "<p>Hello World!</p>" ;
//alert("clicked");
});
});
</script>
</body>
</html>

Set it by using .attr()
$(document).ready(function() {
$("#myFrame").css({
"height": "300px",
"width": "300px",
"margin": "200px",
"background-color": "bisque"
});
$("#click").click(function() {
$("#myFrame").attr("srcdoc", "<p>Hello World!</p>");
});
});
html,
body {
font-family: Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
div,
textarea {
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
#divOne {
width: 100%;
height: 100%;
background-color: aliceblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divOne">
<iframe id="myFrame"></iframe>
<button id="click"> Click Me! </button>
</div>

Related

How to insert content on top of each PDFObject div?

I'm presenting some PDFs in a horizontal design with the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject { border: solid 1px #666; max-width: 40%;}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1" ></div>
<div id="pdf2" ></div>
<div id="pdf3" ></div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script>
PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'});
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'});
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'});
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options);
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options);
</script>
</body>
</html>
I would like to put some text on top of each PDF div, like a brief description about the PDF document. How might I do that?
Snippet
// each pdf must have a heading stored in the array headings
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"]
//get all pdfs container
all_pdf = document.getElementById("scrolly").children;
//loop through and change innerHTML of pdf
for (var x = 0; x < all_pdf.length; ++x) {
all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly {
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject {
border: solid 1px #666;
max-width: 40%;
}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1">PDF details1</div>
<div id="pdf2">PDF details2</div>
<div id="pdf3">PDF details3</div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script

Create a popwindow on click of dropdown(There is no selection in the dropdown)

I need a popwindow on click or onfocus of the dropdown . In the popwindow I should display the checkboxes with multiselect option.I searched for this kind but I couldn't find any references.
Can anyone write code for this using jQuery.
Thank you
Try this code... hope it helps
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pop
{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#container
{
position: relative;
width:500px;
margin:100px auto;
background-color: white;
border-radius: 10px;
padding: 20px;
}
#ddown
{
width:100px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
<title></title>
</head>
<body>
<select id="ddown" >
<option></option>
</select>
<div id="pop" >
<div id="container">
<h1>Some Check box here</h1>
</div>
</div>
</body>
<script type="text/javascript">
$("#ddown").on("click",function(event){
event.preventDefault();
$("#pop").show();
})
$("#pop").click(function(){
$("#pop").hide();
})
</script>
</html>

Why my intel xdk app don't work on android?

I'm learning jQuery and I built my project using xdk, but square is not moving(when button is clicked). I checked it on android 4.4. and nothing(it's working on my pc). Can you help me?
This is my code:
http://jsfiddle.net/T9y7t/
index.html:
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="intelxdk.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id="all">
<input id="up" type="button" value="UP">
<br>
<input id="lewy" type="button" value="LEWO">
<input id="prawy" type="button" value="PRAWO">
<br>
<input id="down" type="button" value="DOWN">
<div id="game">
<div id="cube">
</div>
</div>
</div>
</div>
</body>
style.css:
html, body{
margin:0;
padding:0;
height:100%;
}
body, div, h1, h2, h3, ul, li, span, img, input {
margin:0; padding: 0; border: 0;
}
body{
background-color: black;
}
#container {
}
#all{
font-size: 20px;
color:white;
display: block;
text-align: center;
margin-left:auto;
margin-right: auto;
width: auto;
height: auto;
background-color: :white;
}
input {
height: 100px;
width: 100px;
}
#game{
margin-left: auto;
margin-right: auto;
position: relative;
top:+10px;
display: block;
background-color: yellow;
width: 200px;
height: 200px;
}
#cube{
position: relative;
background-color: black;
width: 10px;
height: 10px;
left:0px;
top:0px;
}
script.js:
$(document).ready(function () {
var left = $("#lewy");
var right = $("#prawy");
var cube = $("#cube");
var up = $("#up");
var down = $("#down");
var krok = "10px";
left.click(function () {
cube.animate({
left: "-=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
right.click(function () {
cube.animate({
left: "+=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
down.click(function () {
cube.animate({
top: "+=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
up.click(function () {
cube.animate({
top: "-=" + krok
}, "fast");
intel.xdk.notification.vibrate();
});
});
Edit: i tried other build options (crosswalk/cordova) but still nothing
yes, It can be happen, some times,because mobile is the different platform and web is different
if your app works in emulator but not in device, then The api is blocked due to Cross domain access, which is the same reason why your code will not work in any browser. But there is a way to make it work in Intel XDK apps, just add after your intelxdk.js script inclusion. It will then work on device.
More info about AJAX and XDK here: http://software.intel.com/en-us/html5/articles/how-to-access-JSON-data-in-HTML5-apps
Try including <script src="xhr.js"></script> after the <script src="indelxdk.js"></script> inclusion.

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.

Can I alert all my elements?

Is it possible to send all the elements in my document to the alert function?
If so, how can I do that?
Here is an example document. I want to print all of the elements.
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>
Sure, you can do it like this:
alert(document.documentElement.outerHTML);

Categories