|
JavaScript - Disable Mousewheel An Embedded Pdf Document
Hi codingforums! glad to meet you.
I am not an expert in javascripting, so forgive me. What i am trying to do is disable embedded pdf documents from being scrolled up and down with the middle mousewheel button on the mouse. Here is the reason why... I am using embedded PDF files as a way to easily display reports through a browser (FireFox). The actual PDF is about 10 pages long, but the HTML page is coded with the embed tag and uses the Open Parameters to display just a few aspects of the PDF, in an easy to read format. The annoying part is that the embedded PDF sections can accidentally be scrolled with the mousewheel, which ruins the look of the report in the browser. Is there a way to disable this? In the example below you can see i tried to disable the mousewheel scroll on the first div. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<META HTTP-EQUIV="REFRESH" CONTENT="2000">
<link rel="stylesheet" type="text/css" href="db.css" />
<script type="text/javascript">
if(document.addEventListener){ /* Chrome, Safari, Firefox */
document.addEventListener('DOMMouseScroll', stopWheel, false);
}
function stopWheel(e){
if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */
}
</script>
</head>
<body id="pdf">
<div id="mid" onMouseOver="stopWheel(e);"><embed src="run_rate_original_test.pdf#page=1&toolbar=0&navpanes=0&scrollbar=0&zoom=100,135,400" width="900" height="325"/></div>
<div id="l1"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,105" width="119" height="83"/></div>
<div id="l2"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,105" width="119" height="83"/></div>
<div id="l3"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,105" width="119" height="83"/></div>
<div id="l4"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,233" width="119" height="83"/></div>
<div id="l5"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,233" width="119" height="83"/></div>
<div id="l6"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,233" width="119" height="83"/></div>
<div id="l7"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,361" width="119" height="83"/></div>
<div id="l8"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,361" width="119" height="83"/></div>
<div id="l9"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,361" width="119" height="83"/></div>
<div id="l10"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,489" width="119" height="83"/></div>
<div id="l11"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,489" width="119" height="83"/></div>
<div id="l12"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,489" width="119" height="83"/></div>
<div id="l13"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,617" width="119" height="83"/></div>
<div id="l14"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,617" width="119" height="83"/></div>
<div id="l15"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,617" width="119" height="83"/></div>
<div id="l16"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,745" width="119" height="83"/></div>
<div id="l17"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,745" width="119" height="83"/></div>
</body>
</html>
As you can see in the first div, i was trying to use javascript to disable the mouse wheel, which did not work. Since each div is a snapshot of the embedded pdf file, is there a javascript that can disable the mousewheel scroll for each section by placing it in the body tag? Thank you anyone who can help! Similar TutorialsI have a website that contains a large div inside a smaller div, only to be scrolled via javascript. The problem is when you mouseover the smaller (container) div and you scroll the mousewheel down, everything scrolls down. I've been searching for a while and haven't got any answers. www.designbyryanboog.com/spa (site only works in IE8, Chrome, Safari, Opera, Firefox<slowly>) Thanks in advance I have just about every thing all set up on my blog now just the way I like it but a few bits of code are not working exactly like I'd want them to. I have a blog: http://thezombiesurvivalist.tumblr.com/ which is using this js: http://static.tumblr.com/ur6r7hb/FoY...ider-jquery.js to allow the mousewheel to scroll the screen right and left rather than up and down. I think the mouse wheel code would all just be in this part: Code: (function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if (this.addEventListener){for(var i=types.length;i;){this.addEventListener(types[--i], handler, false );}}
else {this.onmousewheel = handler;}
},
teardown: function() {
if (this.removeEventListener )
for ( var i=types.length; i; ){{this.removeEventListener(types[--i],handler,false);}}
else{this.onmousewheel = null;}
}
};
$.fn.extend({
mousewheel: function(fn) {return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");},
unmousewheel: function(fn) {return this.unbind("mousewheel", fn);}
});
function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the arguments
args.unshift(event, delta);
return $.event.handle.apply(this, args);
}
})(jQuery);
I would like the js to force vertical scrolling to be default first, then if then is no vertical scrolling or if it runs out then the horizontal scrolling takes over. Currently it seems to occur in reverse order. For example if you go to one of the posts individual pages that are long: http://thezombiesurvivalist.tumblr.c...esh-in-n-y-l-a then it will scroll left and right before scrolling up and down. I'd rather it be the other way around. Is this code able to be changed to accommodate my desires? My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
I found this line in one of the scripts on javascript.kit <code> if(document.layers|| document.getElementById|| document.all) </code> Could someone give me an idea on why this line would be used in a code? Thank you very much Hi, I need to have a forced focus on a password field which is in an embedded JSP (<%@ include file="password.jsp" %>, this password.jsp doesnt has any body or form tag). I am facing some wierd issues in achieving as desired. The below code (in the parent JSP) DOESNT WORKS: window.onload = function() { document.<formname>.<fieldname>.focus() } here <fieldname> is in password.jsp and not the parent jsp when changed as below IT WORKS(obviously with an alert box which i dont want): window.onload = function() { alert("hi") document.<formname>.<fieldname>.focus() } i cannot use <body onLoad> due to third party javascript component constraints Help please... Hi, I was hoping someone might have a solution to randomizing a URL in javascript... in this case for an embedded Simpleviewer link? At the moment the link is http://timperceval.com/guiran/intro1/ but I would like to have the site randomly choose from four URLs. The embedded code is as follows: <!--START SIMPLEVIEWER EMBED.--> <script type="text/javascript" src="http://timperceval.com/guiran/intro1/svcore/js/simpleviewer.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.baseURL = "http://timperceval.com/guiran/intro1/"; simpleviewer.ready(function () { simpleviewer.load("sv-container", "100%", "100%", "000000", true, flashvars); }); </script> <div id="sv-container"></div> <!-- END SIMPLEVIEWER EMBED -- Any ideas would really help! Thanks, Tim basically...i have a popup overlay that keeps gettin covered by the flash videos my friend embeds all over the website this is easily avoided using addParam('wmode', 'transparent','true'); but is there a script that can add that transparent line of code to every flash video soon as the page loads...so i dont gotta one by one every youtube Hey Everyone! I currently using the <object> tag to display a webpage in another webpage... essentially. I read that <iframe> is basically deprecated and <object> should be used to replace it. Thus my code breaks down basically to this: Code: <object data="mywebpage.php"></object> I'm using FF3 and the question I have is how do I print the contents of the object only? Currently, I have to right click the object and under "This Frame" click Print. How can I use a print button to resolve this? Thanks! I wrote this to trigger a video when an image is clicked, but it doesnt work. Any help? Code: <head>
<style>
#movie {}
#img {}
</style>
</head>
<body>
<embed type="application/x-vlc-plugin" name="VLC" rel="nofollow" target="mymovie.webm" id="movie" > </embed>
<img src=myimage.jpg" id="img" />
<script>
var v = document.getElementById("movie");
var i = document.getElementById("img");
i.onclick = function() {
v.play();
};
</script>
</body>
These are two nearly identical test links: http://www.newcityvegas.com/test-js-chrome.html http://www.newcityvegas.com/test-js-chrome.php Both behave the same in Firefox 3.6.9, Opera 10.61, Maxthon 2.5.15, and IE 8.6100. While the PHP version works the same in Chrome 6.0.472, Chrome fails to display the weather image in the HTML version. Code: HTML version: <script type="text/javascript" src="http://pics3.city-data.com/wx/wx-Las-Vegas-Nevada.js"></script> PHP version: <? echo '<script type="text/javascript" src="http://pics3.city-data.com/wx/wx-Las-Vegas-Nevada.js"></script>'; ?> Anyone care to explain why? I hate to add the extra PHP-vs-HTML overhead if not necessary. Here's the simple external JS-to-HTML code: Code: document.write('<a href="http://www.city-data.com/forecast/w-Las-Vegas-Nevada.html"><div class="wxbox"> <img class="wximg" alt="Clear" title="Clear" src="http://pics3.city-data.com/images/wx/1.png" /> <div class="wxtemp" title="Temperatu 79°F (26°C)">79°F</div> <div class="wxvis" title="Visibility: 10 miles">10 miles</div> <div class="wxother" title="Wind: varies at 3 mph, Pressu 1010 hPa (29.82 in Hg), Humidity: 21%">Wind: varies 3 mph<br />Pressu 29.82 in<br />Humidity: 21%</div></div></a>');
I have an embedded font in my CSS however somtimes the texts loads before the font loads (i.e. the text is loaded in a normal font the it changes after). Is there anyway i can say dont load page until the font file is loaded, or maybe dont show the div until the font is loaded?
Dear friends, Industry feedback in 'advertising world' is that I really could do with moving mini flash vids as thumbnail links, not static thumbnails if possible. This is where I am up to for you kind folk to see - http://www.spectral.org.uk/test5/work7.htm The playback of the flash vids (in the big playback area right/mid of screen) from the JPG thumbnail links on the TOP ROW works FINE, but how do I similarly call that 'BIGFLASH' function to display the video right-centre linking from the JW Flash Player vid thumbnail equivalents on rows TWO and THREE? Do Flash vids defo overide all other functionality (and thus the 'linking hand' hovering icon) we could otherwise use to "couch" the object (ie, in this case, the calling of the flash routine) like using javascript OnClick, etc or do we need to try and "con" the FLASHVARS within the flash player using the flashvar "DISPLAYCLICK:" ( http://developer.longtailvideo.com/trac/wiki/FlashVars ) to do something javascripty and invoke the 'BIGFLASH' function? The parameter options seem limited though don't they... as far as I can tell you can't use the DISPLAYCLICK flashvar to call a bespoke JS routine. I wonder if it is possible to put a transparent layer OVER the flash vid in JW Player and use that as the link, or does flash not allow other layers superimposed over it? My hands seem to be bound unless I am not seeing the wood for the trees! I really like the layout as it is and the coding and the fact I'm nearly there so I would hate to have to do something radically different at this stage. Why is such an obvious function so difficult to achieve?! Looking forward to your input as ever guys! Best - Dom I have a javascript sound board that I've made for a Church skit but I'm wanting to be able to smoothly fade out the longer SFX without having to do it manually with the volume slider. The Object: Code: <span id="player_holder"><embed id="player" hidden="true" autostart="true" loop="false" volume="100"/></span> How do I modify the volume value from: Code: document.getElementById('player')
Any ideas? Hi all, I am rather stuck with the following code and am finding it tough to find resources to help me. I am new to DOM functions and any explanation would be much appreciated! Code: var DATE =
{date:
xxx, layers:
{top:
'topLayer'
},
ids: [xxx], go: function() {}
};
I also need to add a function to the variable 'DATE' so that it can register DOM events, then modify 'DATE' so that it adds another name-value pair to layers on page. I have been trying to working this out for 24 hours now and am very confused. Any support would be awesome! Thank you! Firstly let me say, im relatively new to Javascript so im still picking things up.. I have a website that i want to add several mp3's onto. When a user clicks a link i wanted to make javascript change the streaming audio to the one that was selected. My HTML is as follows.. Code: <table style="background-color:Black; color:gold; font-weight:700; font-size:16px">
<tr onClick="Click('http://www.m-hops.co.uk/Music/Motown Flavours.mp3')"><td>
1. Motown Flavours
</td></tr>
<tr onClick="Click('http://www.m-hops.co.uk/Music/All_Around_The_World.mp3')"><td>
2. All Around The World
</td></tr>
<tr><td>
<OBJECT ID="MediaPlayer" WIDTH="290" HEIGHT="50"
CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..."
TYPE="application/x-oleobject">
<PARAM id="TRACK" name="FileName" value="http://www.m-hops.co.uk/Music/Motown Flavours.mp3">
<PARAM name="autostart" value="true">
<PARAM name="ShowControls" value="true">
<param name="ShowStatusBar" value="true">
<EMBED id="sound" TYPE="application/x-mplayer2" src=""
NAME="MediaPlayer" WIDTH="290" HEIGHT="50" ShowControls="1" ShowStatusBar="1" autostart="1">
</EMBED>
</OBJECT>
</td></tr>
</table>
and my Javascript is.. Code: <script language="javascript" type="text/javascript">
function Click(track)
{
document.getElementById('TRACK').value = track;
window.alert(document.getElementById('TRACK').value);
}
</script>
It appears that the right track is being parsed to the javascript but its not changing the audio thats being played. Any ideas?? I have created a webpage using wordpress for a customer, he wants an embedded video to be played every time a visitor comes to the websites. i did it in the beginning with you tube and it was easy but he is hosting his videos in a lame company and no matter what i try, i am not able to make the video play on load, guys can you please help me with this. here is an example of embed code from that website <object id="player" width="550" height="380" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ><param name="movie" value="http://www.videozer.com/embed/RLyPu" ></param><param name="allowFullScreen" value="true" ></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.videozer.com/embed/RLyPu" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="550" height="380"></embed></object> Hi, This is a noob question which I've searched all over for but can't find an answer..........which means it probably isn't possible Can I pass a parameter to a javascript function from embedded javascript? I have a function in a separate .js file which accepts a parameter as follows: function initialize(menu){ alert(menu); } When I use the following javascript embedded in my HTML it doesn't work: <SCRIPT LANGUAGE="javascript"> <!-- window.onload = initialize('testMenu'); // --> </SCRIPT> Am I doing something wrong or is this not possible? Thanks for your help I have been searching for an answer to this pretty much all day... I'm fed up. Can someone help? I want to be able to open wmv videos in an embedded windows movie player using javascript. Something identical to what you will find he http://www.hunlock.com/blogs/Everyth...ding#quickIDX2...go down to the heading :'How to make a video select list'. I am trying to emulate this but for wmv files and windows media player rather than for flsh files. I have tested this on one link and it does not open. i just get a black media screen and nothing. Here's my code: Here's the script within the head tag: Code: <script type="text/javascript">function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string')
{targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false;}</script>
Here`s the link: Code: <a href="#" onclick='return playVideo("selectdemo1","videoPlayback")'>
video 1</a>
and here's the embedding and the play back code (The play back area is within the same page as the link): Code: div id="selectdemo1">
<OBJECT id='mediaPlayer' width="450" height="445"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="false">
<param name='showControls' value="true">
<param name='loop' value="false">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="450" height="445"
src="http://servername/\\\\HOC\\AdminPrivate\\FS08U\\TurgeL\\Documents\\Site Web\\videos\\Add_Documents.wmv&autoplay=1" autostart="false" designtimesp='5311' loop="false">
</EMBED>
</OBJECT>
</div>
</div>
Please help meeeeeeeeeeeeeeeeeeee! Hello everyone, I have tried about 8 different variations of code to try to get this to work properly and cannot accomplish it. Please help if you can figure it out. I have 2 div's that are hidden. each div contains a FLV video, autostart=false. when button 1 is clicked, DIV 1 becomes visible and you may click on video to start playing it. When button 2 is clicked, DIV 1 goes to hidden and DIV 2 becomes visible with video 2. -- Ok so problem is this, the video that was playing in DIV 1 remains playing or at least the audio remains playing. If video 2 is started then you have 1 video source and 2 audio sources playing. I am trying to get the video in DIV 1 or DIV 2 to STOP or PAUSE when the DIV's state becomes hidden. here is the last code I tried below before frustration over come me. any suggestions would be great. Robert Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 13px;
top: 47px;
visibility: hidden;
}
#Layer2 {
position:absolute;
width:600px;
height:645px;
z-index:2;
left: 14px;
top: 47px;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
</head>
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display DIV 1" width="27" height="22" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide')" />
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/spacer.gif" width="60" height="1" />
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display Div 2" width="27" height="22" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show')"/>
<div id="Layer1">VIDEO 1
<object id="player1" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
<div id="Layer2">VIDEO 2
<object id="player2" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
</body>
</html>
|
|||||||