I am using blockui for "Wait ... loading" pop up. It is working fine, but has one small issue: the overlay is covering only captured screen, not scroll window. If I scroll right, the width is not fully covered (but height is covered fully).
I have only width has problem.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
jQuery('#myAlert').click(function () {
jQuery.blockUI({ message: '<center> <img src="/_layouts/1033/styles/ajax-loaderbar.gif" alt="Loading.." />
<br /> <font size="2" face="Arial" >
<b> Please wait... </b></font></center><br />
<font size="2" face="Arial" ><b>while we load all your information.</b></font>'});
});
});
</script>
The blocking element should be an immediate child of the BODY tag. It should be nested like this:
<html>
<!-- etc -->
<body>
<div id="domMessage"></div>
...
And not this:
<html>
<!-- etc -->
<body>
<div id="some-other-div">
<div id="domMessage"></div>
</div>
...
Related
I have an .epub file that does not have any effect or animation while user turns between the pages
I use Turn.js library for it be it does not work .I can not open it with eBook readers softwares.
Here is my Epub folder Directory
Before add Turn.js library
After add Turn.js library
And here is my chap_0001.xhtml Html code
<head>
<title>How to Win Every Argument</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
</head>
<body dir="auto">
<h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
<div class="offset">
<div class="flipbook-viewport"><!-- Added-->
<div class="container"><!-- Added-->
<div class="flipbook"><!-- Added-->
<div style="width: 100.0%;">
<img src="images/img_0001.png" alt="Picture #1"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<div style="width: 37.238758708043065%;">
<img src="images/img_0002.png" alt="Picture #2"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
<div style="width: 45.59848005066498%;">
<img src="images/img_0003.png" alt="Picture #3"/>
</div>
<!-- rest of pages -->
</div>
</div>
</div>
</div>
And here is my chap_0001.xhtml Js code
<!-- language: lang-js -->
//Added after using Turn.js library
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width: 922,
// Height
height: 600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['style/basic.css'],
complete: loadApp
});
I only copy library folders and change chap_0001.xhtml file . That's it.
Any help will be appreciated
I am not sure what particular issues you had with your script. One main issue is the extra spans you included in your html:
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
They were considered "pages" and therefor turn.js turned the page to blank span that does not have the same size as other elements.
Anyway, this is a working example with your html: JSFiddle Example
I could not include working code here because turn.js is served over http. I had to copy the entire code and paste into js part which is more than stackoverflow text limit
How can I return back to the base page by clicking on an image?
Picture1 will be displayed after clicking First.
How can I return back to the selection page? (To continue with my selections).
<h3>First</h3>
<h3>Secong</h3>
Instead of linking to the image file, link to a new HTML file, and place the image on that file using an <img> tag. On that same HTML file, you can include a link back to the original page using a <a> tag.
homepage.html
Go to first image.
Go to second image.
first-image.html
Back to Homepage
<img src="picture1.jpg" alt="a photograph of a kitten">
second-image.html
Back to Homepage
<img src="picture2.jpg" alt="a photograph of a puppy">
Here is result oriented approach to your question by zooming image to full page and closes on click. I think this is what you need:
$(document).ready(function(){
$('img[data-enlargable]').addClass('img-enlargable').click(function(){
$("#main").hide();
var src = $(this).attr('src');
$('<div>').css({
background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
backgroundSize: 'contain',
width:'100%', height:'100%',
position:'fixed',
zIndex:'10000',
top:'0', left:'0',
cursor: 'zoom-out'
}).click(function(){
$(this).remove();
$("#main").show();
}).appendTo('body');
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div>
<h1>First Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in" src="https://i.imgur.com/7KpCS0Y.jpg" />
</div>
<div>
<h1>Second Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in" src="https://media.alienwarearena.com/media/1327-l.jpg" />
</div>
</div>
</body>
</html>
<div id="537267839_INSERT_SLOT_ID_HERE"
style="width:768px;height:90px;margin:auto;">
<noscript>
<p align="center">
<iframe id="a1651026db" name="a1651026db" src="//oncampusweb-d.openx.net/w/1.0/afr?auid=537267839&cb=INSERT_RANDOM_NUMBER_HERE"frameborder="0" scrolling="no" width="728" height="90" align="center"display:block;>
</p>
</iframe></noscript>
</div>
<script type="text/javascript">
var OX_ads = OX_ads || [];
OX_ads.push({
slot_id: "537267839_INSERT_SLOT_ID_HERE",
auid: "537267839"
});
</script>
<script type="text/javascript" src="//oncampusweb-d.openx.net/w/1.0/jstag">
</script>
In this code I want to center the ad being placed. I can't figure out how. I tried align="center" in style and margin:auto but it doesnt work.
Try:
margin: 0 auto;
0 for the top/bottom and auto for left/right
Try using a flex box to center align child components both vertically and horizontally.
<div id="537267839_INSERT_SLOT_ID_HERE"
style="width:768px;height:90px;display:flex;justify
content:center;align-items:center;">
Wrap it:
<div style="width:100%; text-align:center">
your code goes here
</div>
I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>
I am working on a site.I need horizontal scrolling on a particular section,for that i am using JinvertScroll jquery.When i run that jquery's example the scrolling is working on entire page.how can i set the scrolling for particular section only??I mean how can i set that particular div that should scroll?Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/example.css" />
</head>
<body>
<section id="scrolll">
<div class="middle scroll" style="border:solid red;backgroun:red">
<img src="images/middle.png" alt="" />
</div>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
var scrolll= document.getElementById('scrolll');
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 600, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
console.log(percent-50);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
}(jQuery));
</script>
</section>
<section>
<div style="border:solid orange;height:1000px"></div>
</section>
</body>
</html>
<div id="scrollDiv" style="overflow:auto;">
// write code here over which scroll will be applied
</div>
The section you want to scroll place it inside a div . Give that div an Id e.g. scrollDiv and Place a style attribute on it as shown in the example above.
You don't need plugin for that. Just use height and overflow-y where you want a scroll
#scrolll{height: 600px;
overflow-y: scroll;}
<section id="scrolll">
<div class="middle scroll" style="border:solid red;backgroun:red">
<img src="images/middle.png" alt="" />
</div>
</section>
<section>
<div style="border:solid orange;height:1000px"></div>
</section>