How to change src of application/pdf using javascript? - javascript

I have an embeded code like this
<embed id="1000" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and i have this code
<a onfocus="OnLink(this)" href="javascript:switch('1000','/new_folder/bye.pdf');" onmousedown="return VerifyHref this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
and I have this function
<script type="text/javascript">
function switch(id,dirToPDF) {
$('1000').attr('data','dirToPDF');
}
</script>
So when I click on the link, it should call switch, and change the pdf thats displayed (which is hi.pdf) to bye.pdf, but it's not working.
Can anyone help me with this?
EDIT:
Ok so I changed it to
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$(id).attr('data', dirToPDF);
}
</script>
<a onfocus="OnLink(this)" href="javascript:switchFunc('pdf_d','/new_folder/bye.pdf');" onmousedown="return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
<embed id="pdf_d" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and it's still not working...

Let me review:
As #user1113426 said, you call a custom-defined 'switch' function to switch attributes-- however, switch is a reserved function, and I don't think you can overwrite it.
As I said (then deleted) and #michaeldcooney said, you need to put a '#' sign before 1000; Turning $('1000') to $('#1000').
As #NickBeranek said, you can't have an id field be completely numeric-- so 1000 won't work anyways. (Try the name of the doc-- NewDocPdf)
Finally, the element attribute you are changing (data) is not the correct element to change. You want to change src, as that is the one that chooses what document is loaded.
Related: You have both an 'onmousedown' event AND an action when the link is clicked. They might cause interference, so it may be easier to do this..
The Doc Window:
<embed id="PDFDisplay" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
Links to Change:
<a class="altDoc" href="javascript:return void;" whichDoc="/new_folder/bye.pdf" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
Next:
<script type="text/javascript">
switchFunc = function (jQueryObject) {
console.log(jQueryObject);
$('#PDFDisplay').attr('src',jQueryObject.attr('whichDoc') );
}
$('.altDoc').hover( function () { OnLink(this); } );
$('.altDoc').click( function (event) {
console.log("this");
switchFunc(this);
return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}');
} );
</script>
Let me know how the above works and I can provide any other alterations.
EDIT:
Looks like I forgot a few )s, ;s, etc. Also, I kept a bad " and forgot an opening parenthesis after VerifyHref.
EDIT THE SECOND:
You ever consider writing a bunch of tags which have 'target="iFrameNameAttribute"' ?
You can have links specifically target an iframe, and you can have the iFrame content set to the embedded PDF. Whenever you click on a link that targets the iFrame, it can change the content.

Please modify your script as follows and pass in the id parameter:
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$('#' + id).attr('data', dirToPDF);
}
</script>
switch is a reserved name in JS. Also, 1000 is not a valid id. ID's cannot start with a number.

Related

Javascript Unhiding Element Onclick

I've been playing around with javascript and I am trying to get the below to work.
<script type="text/javascript">
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display=block;
}
</script>
<a onClick="unhide('id1')"><span> Remove</span>
<span id="id1" hidden="true">Are You sure? | Yes / <a>No</a> </span>
On click, I am trying to make the hidden element get shown. I am unsure why it isn't working, the logic seems right to me.
Cheers
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display="block";
}
block is undefined, "block" isn't
You are using hidden html5 property which has limited browser compatibility as of now. Try to hide it initially by using css property visibilty:hidden which you change via your function's onclick event.
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display=block;
}
<a onClick="unhide('id1')"><span> Remove</span>
<span id="id1" style="visibility:hidden;">Are You sure? | Yes / <a>No</a> </span>
I hope this will help you out
<script type="text/javascript">
function unhide(a) {
document.getElementById(a).style.display = 'block';
}
</script>
Remove
<span id="id1" style="display: none;">Are You sure? | Yes / <a>No</a> </span>
Let me know.
Regards.
Only one point:
In <script> tag, all of words without quote is a reserved word or variable.So your code
document.getElementById(a).style.display=block;
Should be:
document.getElementById(a).style.display='block';
Becase block is a attribute of display, not the others.
You are using the hidden attribute.
So use this code instead:
function unhide(a){
document.getElementById(a).removeAttribute('hidden');
}
Try this:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
$("#id1").hide();
};
$("#unhide").click(function(){
$("#id1").show();
});
</script>
<a id="unhide"><span> Remove</span></a>
<span id="id1">Are You sure? | Yes / <a>No</a> </span>
I hope this help you, please leave a comment if it's worked or not.

onerror event to html tag object

In the below code, all the onerror event are working fine except the one mentioned in the "Object" tag. There is no file with the name "helloworld.swf" but the onerror event is not triggered. Can anyone please explain this.
<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc1();" /><br/>
<input type="text" dir="rtl">
</form>
<object width="400" height="400" data="helloworld.swf" onerror="alert('helloworld.swf not found')"><br/>
</object>
<img src="myimage.gif" onerror="alert('image not found')"/><br/>
</body>
</html>
P.S : Refer to link "http://www.w3schools.com/jsref/event_onerror.asp" which clearly says onerror event is supported by "object" HTML tag.
<object> has a load event but doesn't consistently have an error event. The latter appears to depend on the type of object loaded.
In Chrome the following only fires load, in Edge, IE and FX it fires error:
var logDiv = document.getElementById('log');
function logEvt(e) {
logDiv.appendChild(document.createTextNode("\n\t" + e.type + ": " + JSON.stringify(e)));
}
var obj = document.getElementById('obj');
obj.addEventListener('error', logEvt);
obj.addEventListener('load', logEvt);
#log { border:1px solid black; }
<object id="obj" width="100" height="100" data="not-there" type="image/png">Content shown on error.</object>
<pre id="log">Log:</pre>
That could be a bug in Chrome only.
The documentation you have referenced uses the term object to refer to the instance of the element being subscribed to, not specifically the <object> tag. The examples refer to the <img> tag, which does fire an error event.
Neither MDN nor W3 seem to specify any events for the <object> tag.

Remove an image brought up by on mouseover

The following script opens an image onmouseover, however I can't come up with a way to remove the image onmouseout. I know I am missing something extremely simple but can't seem to find something that works.
<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>
<span onmouseover="show ('myImage')">- <u>LAZARETTE</u></span></b>
<img src="../images/MarkILineDrawingLazarette.jpg" id="myImage" border="0" style="display:none;"
You are very close! Just add the onmouseout event!
HTML
<b>
<span onmouseover="show('myImage',true)" onmouseout="show('myImage',false)">- <u>LAZARETTE</u></span></b>
JAVASCRIPT
function show(Id, show) {
document.getElementById(Id).style.display = show ? "inline" : "None";
}
function hide(Id) {
document.getElementById(Id).style.display="none";
}
then change the opening span tag to:
<span onmouseover="show('myImage')" onmouseout="hide('myImage')" >
Edit:
JSFiddle!

Get image src from a image in a slideshow

I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.
These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the

Showing/Hiding Divs with the same class name - Javascript

I am trying to replicate something similar to what the Google Javascript from the Ground up Accomplishes
http://code.google.com/edu/submissions/html-css-javascript/#javascript
Basically have multiple div classes with the same name and show/hide those based on adding removing classes to the original class name.
Heres my markup
<div class="vidItem" id="vidItem">
<div class="vidTitle">
<h2></h2>
</div>
<div class="vidContain" id="vidContain">
<iframe class="testtt" width="560" height="315" src="-----" frameborder="0" allowfullscreen> </iframe>
</div>
</div>
<div class="vidItem" id="vidItem">
<div class="vidTitle">
<h2></h2>
</div>
<div class="vidContain" id="vidContain">
<iframe width="560" height="315" src="----" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Heres my javascript
var toggleExpando = function() {
var expando = this.parentNode;
if (hasClass(expando, 'hide')) {
removeClass(expando, 'hide');
addClass(expando, 'show');
} else {
removeClass(expando, 'show');
addClass(expando, 'hide');
}
};
var expandos = getElementsByClass('vidContain');
for (var i=0; i < expandos.length; i++) {
addClass(expandos[i], 'hide');
var expandoTitle = document.getElementById('vidItem');
addEventSimple(expandoTitle, 'click', toggleExpando);
}
}
Onload both of the divs seem to set their classes to hide just fine but when I click on the top one everything disappears but when I click on the bottom one nothing happens. I am assuming there is a problem with my for loop and also where it says (expando = this.parentNode). I have no idea where to go from here.
Any help or ideas would be appreciated.
Javascript assumes that there is only one element with specific id (and this is what standard say). So when you say..
var expandoTitle = document.getElementById('vidItem');
here the variable contains only first item with id vidItem and attaches event to that element only.
This can be corrected by using class names instead of id.
jQuery might be a good option for this. ID needs to be unique but classes don't, so you can query for all element with a class name in the same way you would with id's in straight javascript by using jQuery. Not sure on what you want the initial state to be so i'm hiding all on inital load. Something along the lines of below is what i mean. (code is untested. place it in the html head)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.vidItem').addClass('hide');
$('.vidItem').click(function(){
$('.vidItem').addClass('hide');
$(this).removeClass('hide');
$(this).addClass('show');
});
});
</script>
If you want to make it look nice with transition effects you can use some of the build in jQuery ones such as:
$('.vidItem').fadeOut();
$(this).fadeIn();
or
$('.vidItem').slideUp();
$(this).slideDown();

Categories