I am using google docs viewer to display word and PDF files in dialog in my application. But my client need that document should not get download. So want to hide 'Pop-out' option. Please help me for it. Below is my code snippet :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: '',
width: 750,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<iframe id='resViewer' src='https://docs.google.com/viewer?url=my_file.pdf&embedded=true' style='width: 700px; height: 700px;' frameborder='0'></iframe>";
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
Please help me.
If anyone knows any other way to display word and PDF file both give me way or suggest for this.
Thanks.
The following CSS will remove the pop out button.
div[aria-label="Pop-out"] {
display: none;
}
div["aria-label=toolbar"] {
width: 52px;
}
But to get the CSS to apply to the iframe your going to have to do some trickery. See jQuery, select element inside iframe, which is inside an iframe and How to apply CSS to iframe?
Related
I am trying to incorporate the clickable jquery United States map from this site https://newsignature.github.io/us-map/ into a page I'm building in Sharepoint. I'm using a content editor web part, and embedding this code into it, but the map isn't showing up. As you can see from my code below, I have linked the javascript files that were included in the us-map-1.0.1.zip file that I downloaded from the site. I also uploaded the 2 svg maps from that zip package to the folder of the page I'm working on. I'm not sure how I am supposed to connect to those svg files, and how I can get this map to display. Is there anything I should do to modify this code?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script>
<script>
$(document).ready(function() {
$('#map').usmap({
// The click action
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name)
.parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
});
</script>
<style>
$('#map').usmap({
stateStyles: {fill: 'blue'}
});
</style>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
OK, let´s start.
First of all, it seems that your links are outdated or broken.
https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js
is not working.
The files must be reachable.
Next point s that you are using javascript inside of style tags.
That won't work.
After your links are fixed, try it like this:
$(document).ready(function() {
/** FIRST YOU HAVE TO INITIALIZE THE MAP **/
$('#map').usmap({
stateStyles: {fill: 'blue'},
'click': function(event, data) {
$('#clicked-state').text('You clicked:'+data.name );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I'm trying to create a dialog (on click) for feedback. I've tried simple things first.
Here's the fiddle
$("#feed_win").dialog({
autoOpen:false;
});
$("#feedback").click( function() {
$( "#feed_win" ).dialog( "open" );
});
But every time on load the dialog contains are shown before the button click event. Any help will be useful.
So, now i tried this.
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$("#feedback").button().click(function() {
$("#feed_win").dialog("open");
});
$("#feed_win").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 400
});
</script>
</head>
<body>
<button id="feedback">Delete profile</button>
<div id="feed_win">
<h2>This is feedback form</h2>
<p>You can add your feedback here</p>
</div>
</body>
But the dialog div is displayed on page load. why? It should be displayed after clicking button.
You need to include jQuery UI script in the head:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Here is fiddle: DEMO
Everything else you wrote is good, just add that line
I have a web application that uses HTML and Javascript. I want to create a textbox that allows to user to enter in a keyword and submit it. I also want a little calendar icon next to the textbox so the user can click on it to popup a calendar to select a date as the keyword, and then submit that.
I have tried to implement DatePicker but couldn't get it working. It keeps saying that DatePicker is undefined.
HTML
<script type="text/javascript" src="js/mootools-core-1.4.3-full-compat.js"></script>
<script src="Source/Locale.en-US.DatePicker.js" type="text/javascript"></script>
<script src="Source/Picker.js" type="text/javascript"></script>
<script src="Source/Picker.Attach.js" type="text/javascript"></script>
<script src="Source/Picker.Date.js" type="text/javascript"></script>
<link href="Source/datepicker_dashboard/datepicker_dashboard.css" rel="stylesheet">
<input name='date_toggled' type='text' value='' class='date date_toggled' style='display: inline' />
<img src='calendar/images/iconCalendar.gif' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />
Javascript
window.addEvent('load', function() {
new DatePicker('.date_toggled', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true,
toggleElements: '.date_toggler'
});
});
What can i try to get this working?
add an id to your 'date_toggler' image
<img src='calendar/images/iconCalendar.gif' id='my_date_picker' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />
then script..
window.addEvent('load', function() {
new DatePicker('my_date_picker', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true,
toggleElements: '.date_toggler',
onSelect: function(date){
document.id('date_toggled').set('value', date.format('%s');
}
}
}
check the options and methods in the docs at https://github.com/arian/mootools-datepicker/blob/master/README.md
For doing this in JS have a look at http://www.javascriptkit.com/script/script2/timestamp.shtml
For doing it in JQuery have a look at http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html
First make sure all the javascripts are loaded correcly and that the paths are correct. (Use firebug or similar to see if they have loaded all the javascripts).
Then if all seems to load correctly you can use debug and breakpoints at the "new DatePicker.." row and use immediate window or such to see if date picker exists.
I'm trying to slide background on hover.
I used the code below in HTML webpage once and it worked correctly.
But when I tried to use it in my ASPX page, first it gave this error:
"Microsoft JScript RunTime Error: '$' is undeclared"
So I deleted the 1st $ before function(). But I couldn't make it work still.
Any ideas why it does not work?
Code is:
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
$("#vertical div a").hover(function () {
$("img", this).stop().animate({ top: "-173px" }, { queue: false, duration: 400 });
}, function () {
$("img", this).stop().animate({ top: "0px" }, { queue: false, duration: 400 });
});
});
</script>
<style type="text/css">
.altikisilik
{
display: block;
background: url('Images/Default/Brazil_bg.png') top;
}
#vertical div
{
position: relative;
overflow: hidden;
}
#vertical img
{
position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="vertical" class="clear" runat="server">
<div>
<a class="altikisilik" href="Default.aspx">
<img src="Images/Default/Brazil.png" border="0" alt="Brazil" />
</a>
</div>
</div>
</form>
</body>
I can't see the jQuery script include anywhere in your code. I think that would be the issue
You must include jquery library above the rest of your javascript.
<script src="http://code.jquery.com/jquery-1.6.2.min.js" />
you should download the jquery.js from the site:www.jquery.com .Or use the google api support .In fact you should import the jquery file. choose one of the below:
this method you should put the jquery-1.6.2.min.js download from the site www.jquery.com to the folder where you put your sites,
or simply use the google support :